[원티드 프리온보딩] TIL - (7)

5월 9일

🔗[Recoil] Recoil의 개념 - (1)

전역 상태 관리 라이브러리인 Recoil에 대해서 공부하였다. 확실히 Redux나 MobX에 비하면 문법이나 구조도 단순하고 사용하는 방법도 쉬운 것 같다. 물론 아직 Atom까지 밖에 이해하지 못했고 Selector에 대해서도 이해해야 하며 다른 심화적인 내용에 대해서도 이해해야겠지만 다루다 보면 금방 이해가 될 것 같다.

유용한 ESLint, Prettier, Stylelint Config & Plugin

1. 🔗eslint-config-airbnb

   Airbnb의 스타일 가이드에 따른 .eslintrc를 제공하는 패키지이다. 이를 사용하기 위해선 eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, 그리고 eslint-plugin-jsx-a11y를 필요로 하기 때문에 반드시 함께 설치해줘야 한다. 또한 Hooks에 대한 규칙을 적용하려면 .eslintrc 파일을 수정해야 한다.

   npm info "eslint-config-airbnb@latest" peerDependencies
   

   이것을 입력하면 설치해야 하는 패키지들의 목록을 확인할 수 있다.

   npx install-peerdeps --dev eslint-config-airbnb
   

   npm 버전이 5 이상이라면 이것을 입력하여 필요한 패키지를 한번에 설치할 수 있다.

   설치가 완료되었다면 .eslintrc 파일에 "extends": ["airbnb", "airbnb/hooks"]를 추가해주면 된다.

2. 🔗eslint-config-prettier

   Prettier가 포맷을 할 때 ESLint와 충돌이 발생할 수 있는 규칙들을 비활성화 해주는 패키지이다.

   npm install --save-dev eslint-config-prettier
   

   이것을 입력하여 설치할 수 있다.

   {
     "extends": ["some-other-config-you-use", "prettier"]
   }
   

   .eslintrc. 파일에서 "extends"의 맨 마지막 부분에 "prettier"를 추가해주면 된다.

3. 🔗stylelint-config-standard-scss

   Stylelint에 기본적인 SCSS용 config를 적용하기 위한 패키지이다.

   npm install --save-dev stylelint-config-standard-scss
   

   를 입력해 설치하고,

   "extends": ["stylelint-config-standard-scss"]
   

   .stylelint.json 파일에 추가해준다.

4. 🔗stylelint-config-recess-order

   Stylelint가 Recess와 Bootstrap이 사용하는 CSS 속성 정렬 순서에 맞춰 자동으로 파일을 포맷해주는 패키지이다.

   npm install --save-dev stylelint-config-recess-order
   

   를 입력해 설치하고,

   "extends": ["stylelint-config-recess-order"]
   

   .stylelint.json 파일에 추가해준다.

5. 🔗stylelint-config-prettier-scss

   Prettier가 SCSS 파일을 포맷을 할 때 Stylelint와 충돌이 발생할 수 있는 규칙들을 비활성화 해주는 패키지이다.

   npm install --save-dev stylelint-config-prettier-scss
   

   를 입력해 설치하고,

   "extends": ["some-other-config-you-use", "stylelint-config-prettier-scss"]
   

   .stylelint.json 파일의 "extends" 맨 마지막에 추가해준다.

이 외에 eslint-plugin-prettier, stylelint-prettier, prettier-eslint, prettier-stylelint 등 사용법을 명확히 알고 필요한 경우에만 사용하기를 권장하는 패키지들은 꼭 사용법부터 익혀야 한다.