내가 레퍼런스가 되자 내가 레퍼런스가 되자

TypeScript를 사용하면서 상수를 지정할 때 enum과 as const의 방식이 있습니다. 팀 단위로 개발을 진행하면서 상수 지정에 대한 컨벤션은 따로 없었고 팀원들의 스타일에 따라 각각 사용 중이었습니다. 상수 지정 방식을 통일하고 해당 내용을 정리할 겸 enum과 as const의 차이를 알아보겠습니다. Enums enum 예시로 enum을 사용하여 상수를 지정합니다. // 숫자 열거형 enum Direction { // 따로 할당된 값이 없을 경우 0부터 차례로 할당 됨. Up, Down, Left, Right, } // 문자열 열거형 enum DirectionString { Up = 'UP', Down = 'DOWN', Left = 'LEFT', Right = 'RIGHT', } 숫자 열거형..

우연히 회사 동료분들과 이야기하면서 event capturing 이슈를 듣게 되었는데 순간 capturing이 위에서 아래로 전달인가? 방향이 헷갈려 제대로 다시 봐야겠다 싶어 정리하게 되었습니다. 이번 기회에 이벤트를 어떻게 전달하고 이러한 전달을 막기 위해 어떻게 처리하는지 알아보겠습니다. Event Bubbling vs Capturing Event Capturing은 특정 element에서 event 발생 시 하위 element로 이벤트가 전달됩니다. | | ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 \ / | | | ------------------------- | | E..

기존 프로젝트에서 eslint-plugin-prettier를 사용하여 eslint 설정에서 prettier 설정을 같이 하여 code formatting을 하고 있었습니다. 여러 레퍼런스와 prettier 공식 문서에서도 해당 라이브러리를 사용하여 lint에 묶어서 처리하는 것을 추천하지 않습니다. 그래서 eslint-plugin-prettier를 제거하고 eslint 설정과 prettier 설정을 분리하는 과정을 포스팅하게 되었습니다. eslint-plugin-prettier? or eslint-config-prettier? eslint 설정과 prettier 설정을 분리하기 전에 제거할 eslint-plugin-prettier와 추가할 eslint-config-prettier 두 개의 라이브러리에 대..

최근 팀 내에서 Tailwind CSS Class를 사용할 때 좀 더 효율성 있게 작성하는 방식에 대해 논의하게 되었습니다. 기존 작업 중인 프로젝트에서는 Styled Component와 Tailwind CSS를 같이 쓰는 방식을 채택하여 사용 중인데 새롭게 들어가는 프로젝트에선 clsx, class-variance-authority, tailwind-merge를 조합하여 사용하는 방식을 사용해 보려고 합니다. 필요 라이브러리 ※ React에서 Tailwind CSS 설정이 되어 있는 환경을 가정합니다. clsx는 조건부 className 처리를 위해 사용되며 라이브러리 크기가 매우 작은 장점을 가지고 있습니다. import { clsx } from 'clsx'; clsx('w-full', true &&..

Webpack을 사용할 때 이전에 미리 Webpack과 함께 Babel, 각종 loader들을 설정하여 만들어둔 package를 가져와 사용하고 현재는 Vite를 사용하다 보니 Webpack을 직접 다룬지 오래되어 리프레시 겸 다시 찾아보게 되었습니다. 지난번 Babel 포스팅처럼 간단히 정리하려고 합니다. Webpack? Webpack은 여러 개의 JavaScript module을 하나(또는 여러개)의 파일로 만드는 bundler입니다. 클라이언트 개발에서 module의 개념이 등장한 이후 bundler의 존재도 뗄 수가 없으며 이제는 필수가 되었습니다. 그중 Webpack은 많은 개발자로부터 선택받은 bundler입니다. Webpack Config Webpack의 config 설정을 위해 루트 디렉토..

height가 전체를 차지하는 화면을 개발할 때 100vh를 사용합니다. 하지만 모바일에서 해당 화면을 보면 주소창 때문에 잘려 보여 곤란한 상황이 생깁니다. vh 단위는 주소창이 없는 화면을 기준으로 설정되어 있어 이와 같은 이슈가 발생하게 됩니다. 스크립트로 해결할 수도 있지만 css 단위로 깔끔하게 처리하는 방법을 알아보겠습니다. vh? css 단위 중 vh는 viewport height로 스크린의 가시 height를 백분율로 나타냅니다. 현재 스크린의 height가 800px일 경우 1vh는 8px이 되며 10vh는 80px이 됩니다. 이처럼 vh는 백분율로 나타내어 사용합니다. 또한 vh 단위는 width에서도 사용이 가능합니다. 그러면 100%와 100vh의 차이가 무엇인지 궁금증을 가질 수 ..

팀 단위로 개발 시 팀원들과 코드 컨벤션을 맞추거나 코드의 문법적 오류를 막기 위해 Eslint, Prettier를 사용하고 있습니다. TypeScript 환경의 초기 프로젝트 구축 시 또는 프로젝트 도중에 ESlint, Prettier가 필요하다면 어떻게 설정할지 알아보겠습니다. ESlint 설정하기 ESlint? ESlint는 ECMAScript Lint로 ECMAScript/자바스크립트 환경에서 문법적 오류와 안티 패턴을 에러로 잡아주는 Linter입니다. 그뿐만 아니라 Tab, 줄바꿈 처리 등의 코드 스타일도 지정할 수 있습니다. ESlint 설치 및 설정 ESlint를 설치 후 ESlint config 파일을 생성합니다. # ESLint는 전역 설치를 권장하지 않음 npm install esli..

개인 노트북에서 급하게 업무를 보게 되었는데 작업을 해야 할 프로젝트 환경은 Node 16버전에 맞춰져 있었고 개인 환경은 현재 Node LTS 버전인 20버전을 사용하다 보니 packge dependency 설치에 오류가 발생했습니다. 그래서 NVM에 대해 찾아보고 설치하여 맞는 Node 버전으로 스위칭하여 업무를 할 수 있었습니다. 이번 기회에 간단하게 NVM에 대해 알아보겠습니다. NVM? NVM은 Node Version Manager로 command line을 통해 원하는 Node 버전으로 설치할 수 있습니다. 또한 설치된 Node 버전에 따라 npm 버전도 따라서 설치됩니다. NVM 설치 및 적용 Window에서 설치 방법 해당 nvm-widows github에서 nvm-setup.exe을 다운..