패키지 매니저
npm(node package manage)
자바스크립트를 위한 패키지 매니저이며 자바스크립트 런타임 환경인Node.js의 기본 패키지 매니저이다.
JAVA에는 MAVEN이나 GRADLE이 있고 Python에는 Pypi가 존재한다.
nodeJs를 설치하면 npm은 기본적으로 같이 설치된다.
Yarn
npm의 속도가 느려서 페이스북에서 자체적으로 만든 npm의 대안이다. 페이스북, Exponent, 구글, Tilde의 협업으로 대형 코드의 일관성, 보안, 성능 문제를 해결하고자 개발되었다.
npm install yarn위의 코드로 yarn을 설치할 수 있다.
패키지 매니저를 사용해 라이브러리를 설치하게 되면 package.json, package-lock.json과 yarn.lock 파일이 업데이트 되는 것을 알 수 있는데, package.json 파일에는 해당 프로젝트가 의존하고 있는 패키지가 기재된다.
"@apollo/client": "^3.7.17",package.json 파일에는 위와 같이 ^ 표시로 해당 버전보다 업데이트 된 버전이 있다면 새로 모듈을 설치할 때 상위 버전을 다운로드 받게끔 기록된다.
반면에, 패키지 잠금 파일인 yarn.lock과 package-lock.json 파일에는 패키지가 최초로 프로젝트에 설치될 때의 버전이 기록된다. 그래서 추후에 모듈을 새로 설치하거나, 동료 개발자가 동일한 개발환경을 구축하는데 도움이 된다. yarn에서 먼저 패키지 잠금을 지원했고, 후에 npm에서도 패키지 잠금을 지원하기 시작했다.
yarn.lock에는 해당 라이브러리를 만들 때 사용된 다른 라이브러리의 기록까지 상세히 작성된다.
CSS-IN-JS 라이브러리
CSS-IN-JS 라이브러리는 현재 emotion과 styled-components가 가장 유명하다.
npm trends 사이트에서 확인했을 때 둘 중에서는 styled-components가 확연히 다운로드 수가 높은 것을 알 수 있었다.
두 라이브러리에 유의미한 차이는 없다. 둘 다 sass 문법을 사용하고 패키지의 크기도 비슷하다. 다만 ssr에서 emotion이 좀 더 유용한 것 같다고 설명을 들었다. 인프런에서 공부하며 진행한 프로젝트에서는 emotion을 사용했는데 현재 트렌드에서는 styled-components가 훨씬 앞서는 중이고 패키지 업데이트도 emotion은 3년 전이 마지막인 것에 반해 styled-components는 약 한 달 전이 마지막 업데이트이다.
도구 선택시 고려사항
'얼마나 많은 사람들이 사용하는가'가 정말 중요하다.
사용자가 많으면 ① 배울 자료가 많고, ② 질문과 검색이 쉽고, ③ 취업과 이직이 쉽다.
