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

기존 프로젝트에서 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 두 개의 라이브러리에 대..

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

팀 단위로 개발 시 팀원들과 코드 컨벤션을 맞추거나 코드의 문법적 오류를 막기 위해 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을 다운..

최근에 나온 build tool을 사용하면 Babel을 설정할 필요가 없고 필요한 옵션이 있을 경우에만 따로 명시하면 되다 보니 Babel을 직접 만지는 일이 거의 없어졌습니다. 리프레시 겸 Babel과 Webpack을 직접 설정해 보며 Babel에 관한 내용을 정리하려고 합니다. Babel? Babel은 ECMAScript 2015+(ES6+)의 문법을 웹 브라우저가 처리할 수 있는 이전 버전으로 변환하는 JavaScript 트랜스컴파일러(Transcompiler)입니다. Babel은 Babel 만으로 동작하는 것이 아니라 Babel의 plugin이 동작하여 트랜스컴파일이 되는 것입니다. Babel을 통해 JavaScript 최신 문법과 기능을 사용할 수 있습니다. Presets & Plugins Ba..

작업 중인 프로젝트에서 새롭게 디자인 시스템을 도입하여 공통 컴포넌트를 작업하게 되었습니다. 디자인팀과의 협업과 개발팀 내부에서 공통 컴포넌트 작업 내용 공유를 위해 Storybook의 도입을 고려하게 되었습니다. 이전 회사에서 Storybook을 사용하며 공통 컴포넌트 개발 내역과 지속적으로 수정되는 사안들을 체크하기에 좋은 경험을 가지고 있었기 때문입니다. 그래서 이번 기회에 간단하게 Storybook에 대해 정리하고자 합니다. Storybook? Storybook은 UI 컴포넌트 개발을 돕는 도구로 Story라는 단위로 UI 컴포넌트의 상태를 렌더링 합니다. 각 UI 컴포넌트를 스토리 단위로 구성하여 구축한다면 컴포넌트 개발 시 확인을 위해 따로 코드를 작성할 필요가 없고 컴포넌트의 상태에 따른 U..

프로젝트를 진행 중에 특정 커스텀 훅에서 제대로 동작하지 못하는 버그로 인해 해당 이슈가 QA로 들어와 고치면서 단위 테스트에 대한 필요성을 많이 느끼게 되었습니다. 기존에 공용으로 사용 중인 account 모듈에 관해서만 Jest를 이용한 단위 테스트가 적용되어 있어서 현재 진행 중인 프로젝트가 Vite로 구성된 점을 토대로 Vitest를 한번 사용해보았고 간단히 구성을 소개할까 합니다. Vitest? Vitest는 Vite에서 사용되는 테스팅 프레임워크입니다. Jest에서 제공하는 API를 대체할 수 있도록 Vitest에서 호환 가능한 API를 제공하며 단위 테스트 설정에 필요한 mocking, snapshots, coverage의 기능도 포함되어 있습니다. Vitest는 다른 테스팅 프레임워크보다 ..

Lerna의 Gibhub 이슈에 따르면 더 이상 유지보수가 안될 것으로 판단이 되어 팀 내에서 Monorepo 구축을 위해 다른 라이브러리를 도입하기로 결정했습니다. 현재 운영 중인 application들에 공유하여 사용되는 모듈이 많이 있어 Lerna로 Monorepo가 구축된 상황이었는데 Lerna의 해당 이슈를 통해 Nx를 도입하기로 결정되었습니다. Migration 22년 5월부터는 Lerna가 Nx의 개발사인 Nrwl에서 관리를 하다 보니 Nx의 공식문서에서 Lerna에서 Nx로 통합하는 부분에 대한 설명이 잘되어있습니다. Lerna와 Nx를 같이 쓸 수도 있지만 Lerna를 걷어내고 Nx를 사용하기로 결정했습니다. 기존에 yarn workspaces가 적용된 package라서 lerna.jso..