[I Learned...] 1 - yarn, chakra-ui 등

husky

typicode/husky

• npm 모듈로서, git hooks 공유를 위해 사용함. (참고: https://library.gabia.com/contents/8492/)
  • git hooks란, git 관련 이벤트가 발생했을 때 특정 스크립트를 실행할 수 있도록 하는 기능이라고 함.
  • git hooks는 .git 디렉토리에 저장되는데, 얘는 버전 관리 대상이 아니어서 repo에 올라가지 않아 공유가 안된다고 함. 그래서 공유를 위해 별도의 방법을 사용하는데 husky가 그런 방법 중 하나라고 함.
• husky의 기능
  • commit 메시지 린트 기능
  • 코드 린트 기능
  • 테스트 실행

 

yarn

2 - Installation

• 프로젝트의 dependencies를 관리하는 자바스크립트 패키지 매니저라고 함. (참고: https://engineering.fb.com/2016/10/11/web/yarn-a-new-package-manager-for-javascript/)
  • 자바스크립트를 사용하는 개발자들은 수천, 수만 조각의 코드를 공유하기 때문에, 기본 컴포넌트부터 라이브러리, 프레임워크까지 매번 다시 만들어야 하는 수고로움을 덜 수 있음. 그런데 이때 각 코드들은 다른 코드들에 의존을 하고 있을 수가 있는데, 이러한 의존성들을 관리하는 것이 바로 패키지 매니저라고 함.
• 가장 유명한 패키지 매니저는 npm이고, yarn은 페이스북에서 npm 대신 사용하기 위해 만든 것이라고 함. 페이스북에 따르면 yarn은 npm보다 더 빠르게 패키지들을 설치할 수 있다고 함.
• yarn 설치하는 방법

npm install -g yarn

 

lint-staged

• git에 staged된 파일만 린트되도록 하는 도구. 즉, commit될 예정인 코드들에 대해서만 린트를 할 수 있어 빠르고 편리하면서도 프로젝트 코드들의 일관성을 유지할 수 있다고 함~
• 참고: https://www.huskyhoochu.com/how-to-use-lint-staged/

lint-staged로 eslint 세상 편하게 자동화하기

 

chakra-ui

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a

• 디자인 라이브러리
• document에 따로 안내되어있지 않더라도, 웬만한 컴포넌트들은 다양한 props로 스타일 속성을 커스터마이징할 수 있음.
  • 디자인 라이브러리를 완전 처음 써봐서... 처음에 이 부분을 모르고 document에서 각 component들의 이용 방법에 나와있는 props들만 사용할 수 있는 줄 알고 한 두세시간 삽질 좀 했던 것 같네요... ㅋㅋ (주륵) 그 뒤로는 라이브러리를 쓸 때 알아서 눈치껏 잘 활용하려고 합니다..

 

React Query

• 서버 상태(server state) 관리 라이브러리로, redux나 mobx와 같은 상태 관리 라이브러리와 달리 서버 상태를 별도의 장소(파일)에 저장할 필요가 없음.
• 참고: https://ahnanne.tistory.com/19

React Query