프론트엔드 개발자가 자주 마주하게 될 npm pakages
front-end에서 쓰이는 대표적인 npm packages
(1) 코드가 잘 작동하는지를 검사하는 테스트 작업(testing)
(2) 자바스크립트 코드가 가독성 좋은 포맷으로 잘 작성되었는지를 검사하고 수정하는 작업(code formatting)
(3) 작성한 자바스크립트 코드가 자바스크립트 최신 표준을 지원하지 않는, 오래된 브라우저(특히, 인터넷 익스플로러 등)에서도 문제없이 동작할 수 있도록 변환하거나 자바스크립트의 단점을 보완한 언어(Typescript 등)로 작성한 코드를 다시 자바스크립트로 변환하는 트랜스파일 작업(transpiling)
(4) 여러 자바스크립트 파일들과 CSS 파일 등을 하나의 파일로 묶는 번들링 작업(bundling),
(5) 번들링된 결과를 더 작은 용량으로 압축해주는 작업(minifying),
(6) 이런 작업들을 한 번에 자동으로 실행할 수 있도록 설정하는 작업(Task Runner)
이때 각각의 작업을 수행할 수 있는 대표적인 도구들의 이름은 다음과 같습니다.
(1) testing 작업 - Mocha
(2) code formatting 작업 - ESLint
(3) transpiling 작업 - Babel
(4) bundling 작업 - Webpack
(5) minifying 작업 - Uglify-JS
(6) Task Runner - Gulp
npm과 yarn 차이?
- 설치 방법의 차이
npm은 Node.js를 설치할 때 함께 설치되지만, Yarn은 별도로 설치해줘야 하는 패키지입니다. 따라서 아래와 같이 Yarn을 npm에서 설치해줘야 합니다.
npm install -g yarn전역 설치 방식으로 설치해주면 됩니다.
권한이 필요할 때는 맨 앞에 sudo 붙여주기
- 명령어의 차이
npm와 Yarn은 사용하는 명령어에도 차이가 있습니다. npm의 각 명령어별로, 같은 기능을 하는 Yarn의 명령어들을 옆에 나열해보면 아래와 같습니다.
패키지 생성 : npm init - yarn init
패키지 업로드 : npm publish - yarn publish
패키지 설치 : npm install [패키지명] - yarn add [패키지명]
패키지 삭제 : npm uninstall [패키지명] - yarn remove [패키지명]
패키지 업그레이드 : npm update [패키지명] -yarn upgrade [패키지명]
패키지 정보 조회 : npm info [패키지명] - yarn info [패키지명]
현재 패키지의 dependencies 조회 : npm list - yarn list
왼쪽의 명령어들은 이때까지 우리가 배운 명령어들이죠? Yarn의 경우에는 같은 단어를 쓰는 경우도 있고 다른 단어를 쓰는 경우도 있네요.
-
package-lock.json vs. yarn.lock
이전에 우리는 현재 작업 디렉토리(패키지), 그러니까 내 패키지에 설치된 패키지들의 정확한 버전 정보가 package-lock.json 파일에 있다고 배웠습니다. Yarn을 사용하는 경우에도 이것과 같은 역할을 하는 파일이 있습니다. 바로 yarn.lock 파일입니다. 둘다 뒤에 lock이라는 단어가 붙어있다는 공통점이 있습니다. -
명령어 실행 시 출력 내용의 차이
Yarn으로 패키지 관련 작업을 하면 npm 때와 조금은 다른 형식으로 터미널에서 그 결과들이 출력됩니다. Yarn은 npm에 비해 조금은 더 정돈된 디자인과, 귀여운 이모티콘을 출력한다는 것이 특징입니다.
