이 글을 쓰게 된 이유 : 리액트를 설치하면서 npm, npx, yarn 이런 용어들을 보게 되었고, 대충 그냥 쓰면 되겠지 했다. 하지만 역시 알고 가야 뭘 어떻게 설치하고, 또 어떻게 나중에 디렉토리를 관리하면 되는지 알게 되었다.
- NPM : node package manager
- NPX: node package execute
- yarn: yet another resource negotiator
: 용어를 보면 말그대로 패키지를 관리하는 매니저다.
그렇다면 또 의문점이 생긴다.
패키지는 그럼 뭘까..?
패키지를 이해하려면 일단 모듈을 알아야한다.
-
모듈
: 함수들이 뭉쳐져서 하나의 파일안에 이루어진 것을 '모듈'이라고 한다. -
패키지
: 여러개의 모듈을 그룹화화면 '패키지'가 된다. 그리고 패키지는 종종 라이브러리라고 불린다고 한다.
여러 함수들이 모여져 파일을 이룬 것을 모듈이라고 하고, 모듈들을 포함한 디렉토리를 패키지라고 생각하면 된다. 패키지는 프로젝트를 개발할때 복잡한 부분을 좀 더 빠르고 쉽게 구현할 수 있도록 도와준다(라이브러리의 역할 맞지?)
자, 이제 패키지에 대해서도 이해했으니 패키지 매니저에 대해서 알아보자. 말 그대로 매니저이니까 이러한 패키지의 설치, 삭제, 버전관리, 종속성 관리 등을 도와준다.
JavaScript에서는 주로 npm, npx, yarn 이라는 매니저들을 사용한다.
그렇다면 npm, npx, yarn에 대해 구체저으로 알아보자.
NPM(node package manager)
: npm은 JavaScript의 대표적인 패키지 매니저이다.
패키지 매니저가 나오기 전까지 개발자가 직접 해당 패키지의 파일을 찾아서 다운로드 받아 프로젝트에 설치하고 관리 해야 했지만 프로젝트의 크기가 커질수록 이것을 하기는 어려워졌다. 하지만 요런 패키지 매니저가 생기면서 패키지의 설치, 삭제, 업데이트들을 쉽게 할 수 있도록 도와주고 관리해주면서 편리하게 사용할 수 있게 되었다.
그 중, npm은 패키지를 데이터베이스인 npm registry라고 부르는 장소에 등록시켜놓고 설치시에 이 npm registry로부터 파일을 받아오는 특징을 가지고 있다.
그래서 npm을 통해서 패키지를 설치할때, 한가지 옵션을 주게 되면 매 프로젝트마다 설치해 줄 필요가 없고, registry라는 글로벌한 공간에 설치해 프로젝트마다 같이 공유해서 사용할 수 있다는 얘기다.(-g 옵션을 붙여주면 됨)
npm install -g 패키지이름
하지만 이건 좋은 방법은 아니다. 여러번 설치 할 필요도 없고 한 번만 설치하면 되는데 왜 안좋을까 생각할 수 있다. 그 이유는 아래와 같다.
-
모듈이 업데이트 되었는지 확인이 불가능하다
: 모든 프로젝트마다 모듈을 재설치하는 것이 아니라 한번 설치한 모듈을 그대로 사용하기 때문에 작업하는 사람이 글로벌 모듈을 최선버전으로 계속 재설치하지 않으면 확인이 불가능하다. -
업데이트를 하면 다른 프로젝트에도 영향이 끼친다.
: 프로젝트별로 다른 버전의 모듈을 사용할 경우 충돌해서 문제가 발생한다. -
create-react-app 다시 말해 리액트에는 좋지 않다.
리액트 프로젝트 생성도구인 create-react-app같은 패키지의 경우, 변경사항이 잦다. 그렇기 때문에 매 설치 전마다 npm으로 재설치하지 않는 경우에는 이전 버전을 사용할 가능성이 꽤 높다. 매업데이트마다 새로운 기능과 다양한 버그들이 고쳐지기때문에 이런 create-react-app같은 도구는 항상 최신 버전을 유지해주는 것이 좋은데 매번 설치하는 것이 아주 귀찮기 때문에 npx를 사용한다.
NPX(Node Package eXecute)
: npx는 npm의 5.2버전부터 자동으로 포함되어 설치되는 npm의 일부분이다. 패키지를 디렉토리에 설치하지 않고 실행하는 목적을 가질때 사용한다. npm을 이용하면 install명령어와 run 명령어를 실행하는 과정들을 거쳐야 하는데 이것은 아주 번거롭고 또 진행중인 디렉토리 내에서 진행한다면 종속성이 변경되어서 테스트 후에 패키지를 삭제해줘야 한다. 그러면 불필요한 메모리를 쓰고 또 시간이 소요되기 때문에 이를 보완하고자 npx를 사용한다.
사용방법은
npx packagename
리액트를 설치할 때, 해당 디렉토리로 가서
npx create-react-app .
요렇게 사용했다.
명령어를 입력하면 먼저 local 또는 global에서 해당 패키지가 설치되어있는지 확인하고 있으면 바로 해당 패키지를 실행한다. 하지만 설치 되어 있지 않으면 npm cache영역에 임시로 패키지를 설치하여 실행할 수 있도록 도와준다. npm의 cache디렉토리는
npm config get cache
명령어를 통해 찾을 수 있다.
YARN (yet another resource negotiator)
: yarn은 npm과 같은 패키지 매니저로서 npm를 통해 설치할 수 있다.
npm install -g yarn
과거의 npm은 보안, 안정성, 속도 등의 여러 부분에 단점이 있었다고 한다. 그래서 이것을 보완하기 위해 페이스북과 구글, Exponent, Tilde 개발자들이 이 아이를 개발했다고 한다. npm은 여러 패키지를 설치할 때 순차적으로 설치하지만 yarn은 병렬적으로 설치하기 때문에 속도에서 차이가 있다.(캐시 되어있거나 재설치의 경우 2배이상 yarn이 빠르다고 한다)
그리고 안정성 측면에서 yarn은 우리가 사용하는 패키지의 하위패키지 간 종속성 문제로 충돌이 일어날 수 있는 내부 하위 패키지들의 정확한 버전명을 명시해준다. 과거 npm은 이런 lock파일이 없어 패키지 간 종속성 문제로 종종 충돌이 일어났다고 한다. 하지만 지금 npm은 여러 업데이트들을 거쳐 현재는 yarn과 기능적으로 큰 차이가 없도록 발전했다.
결론
: 글서 create-react-app 같은 패키지를 설치할때는 npx를 통해 매번 최신 버전만 가져와서 설치해주는 것이 좋다. 그렇다면 지금 어떤 버전을 사용하고 뭐가 업데이트 되었으며 버그들을 신경 쓸 필요가 없기 때문이다.
출처
https://velog.io/@sisofiy626/JavaScript-npm-vs-npx-vs-yarn
https://ljh86029926.gitbook.io/coding-apple-react/undefined/npm-npx
