분류 전체보기

[Vite] Webpack 대체 가능할까? Vite + React 설정하기

vite는 사전 번들링은 esbuild, 번들링 시에는 rollup을 기반으로 속도 개선과 module, ssr 지원 등 모던한 개발 구성을 갖출 수 있는 빌드 도구입니다. 차세대 프런트엔드 개발 툴이라고 소개하는 vite로 React 환경을 구성해 보고 장단점과 개인 의견까지 덧붙여 보겠습니다. 개요 구성 및 주의점 장단점 결론 1. 구성 및 주의점 react, scss, webpack, babel, typescript로 구성되어 있던 것을 vite로 재구성하였습니다. 1) index.html은 기본적으로 프로젝트의 root 경로에 있어야 합니다. root 경로가 아닌 다른 곳에 위치하고 싶다면 root 옵션에 해당 경로를 추가해 주어야 합니다. // vue.config.js export default..

[Typescript Challenges] Pick, Readonly, Tuple to Object

Typescript Challenges에 있는 타입스크립트 문제를 easy 단계부터 풀어 보려고 합니다. easy에서는 3문제씩 풀이와 함께 업로드합니다. Pick https://github.com/type-challenges/type-challenges/blob/master/questions/4-easy-pick/README.md 문제: Pick와 같은 결과가 나오도록 타입스크립트로 구현하기 1) K가 우선 interface의 key 값을 기반으로 하는 타입이어야 한다. 따라서 keyof를 활용해 두 번째 제네릭 값을 구성한다. K extends keyof T 2) keyof 결과(=K)가 union이기 때문에 K 중 하나를 key 값으로 두고, value는 해당 key 값에 대한 value가 되게 하..

[Javascript][LeetCode] Replace Elements with Greatest Element on Right Side

문제 Replace Elements with Greatest Element on Right Side(요소를 오른쪽에서 가장 큰 요소로 바꾸기 문제 설명 반복문을 돌면서 차례대로 그 값 이후부터의 배열 값들로 최대값을 구해 배열을 다시 구성하는 문제입니다. 마지막에는 -1을 추가하여 개수가 같도록 만들면 끝입니다. 아래와 같이 치환되는 부분을 제외한 나머지 오른쪽을 가지고 최대값을 만듭니다. 배열에서 shift를 사용하면 0번 값이 삭제됩니다. 여기서 spread operator를 이용해 max 값을 구해 줍니다. 이 때 주의할 것은 shift를 사용했기 때문에 arr의 길이가 계속 변하게 되어 바로 사용하게 되면 result 배열의 개수가 모자라거나 -Infinity값이 섞일 수 있습니다. 반복문을 다 ..

프론트엔드 개발자 2021년 회고

작년 10월을 지나면서 프론트엔드 개발자로 만 1년이 넘어 2년차가 되었습니다. 프론트 개발자로의 회고와 2022년의 목표도 새롭게 작성해 보겠습니다. 지난 회고글은 여기에서 보실 수 있습니다. 1. 2021년 목표 달성 상태 달성 성공 DND 프로젝트 무사히 마치기: https://egg-programmer.tistory.com/295 회사에서 기여도 높이기: 하고 싶은 프로젝트로 진행 중 취미생활 범위 늘리기: 활동적인 것으로 늘리려고 시도했으니 반쯤 성공! 저축 목표 달성하기: 연말에 아슬아슬했지만 지원금으로 방어 성공 달성 실패 블로그 글 12개 쓰기: 올해 쓴 글 총 9개(ㅠㅠ) 책 52권 읽기: 24권 읽음(읽다 만 것까지 합해도 38권..) 운동하기: 8월 이후로 다시 원래대로 돌아옴 명상과..

[함수형 자바스크립트] Symbol, Iterator, Generator

자바스크립트에서 함수형 프로그래밍(FP)을 하기 위한 기본 개념인 Symbol, Iterator, Generator에 대해 간단히 알아보도록 하겠습니다. Symbol() Symbol() 함수로부터 반환되는 모든 심볼 값은 고유합니다. 따라서 어떠한 객체의 키가 될 수 있습니다. Array, Map, Set 을 생성하면 고유한 Symbol.iterator 을 가지고 있게 됩니다. 일반 객체({}, object)는 Symbol.iterator를 가지고 있지 않기 때문에 iterable하지 않은 값입니다. Symbol.iterator를 통해 값을 하나씩 실행할 수 있게 됩니다. Iterator, Iterable 아래와 같이 Iterator를 만들게 되면 next() 메소드를 통해 value, done값을 가진..

[회고] 조금 늦은 2021년 상반기 회고 - 독서

상반기 회고를 7월부터 쓰려고 생각했지만 키워드만 적어두고 쓰지 못했었습니다. 상반기 주요 키워드는 [독서, 공부, 운동]인데 가볍게 쓰기 위해 키워드 별로 나눠서 적어 보려고 합니다. 1편은 독서에 관한 내용입니다. 목표 연초에 세웠던 독서 목표는 52권(매주 1권)이었습니다. 이 목표를 세울 시점에 책 읽는 것에 대해 흥미를 느끼고 있어 기준이 높아졌던 것 같은데요. 현재까지 결과와 진행 상황을 밑에서 더 보겠습니다. 1월~8월 책을 읽고 나면 책 이름과 읽은 날짜 등을 포함하여 노션에 기록했습니다. 수치로 나타내기엔 적지만 재미삼아 해 보았습니다. 총 14권 완독 자기계발서 비중이 가장 큼 프로그래밍 책은 읽고 있는 책은 많은데 다 읽은 책은 1권밖에 안 되네요 ㅠㅠ 코어 자바스크립트 책은 당시 한..