npm install…? npx install…?

이전에 node.js를 통해 프로젝트를 생성하는 경우에는, 언제나 npm init을 시원하게 터미널에 쳤었더랬지.

하지만, 리액트로 프로젝트를 진행하고, next로 프로젝트를 진행하니 이제는 npm이 아니라 npx를 사용하는것이 아니겠나.

처음에는 오타인줄 알았지만, 터미널이 잘 인식하고 프로젝트를 생성해주었는데, 둘이 무슨 차이인가 싶어서 알아보았다.

npm과 npx의 차이는 뭔가 어떤 프로그램을 내 컴퓨터에 실행 프로그램을 통해 설치하여 사용하거나, 또는 그냥 웹-어플리케이션을 통해 설치하지 않고 웹 상에서 접근하여 사용하는 것의 차이라고 생각한다.

피그마(Figma)가 좋은 비유가 될 것 같다.

피그마는 현재 앱 스토어에서 다운로드 받아서 사용할 수 있는 방식과 웹 사이트에서 접속하여 사용할 수 있는 방식으로 나눠져있다.

이때, 앱 스토어에서 피그마 앱을 다운로드 받으면, 이는 나의 컴퓨터 로컬 드라이브에 저장되어 특정한 버전의 피그마를 사용할 수 있다. 이는 NPM 방식이라고 볼 수 있다. NPM 방식은 특정한 버전의 패키지를 내 컴퓨터 로컬에 다운로드 받고 저장하여 사용하는 방식이다.

이에 반해, 피그마를 웹 사이트로 접속하여 사용하면, 내 컴퓨터에 저장을 해두고 사용하지 않고 필요할 때마다 페이지에 접근하여 사용할 수 있다. 이는 NPX와 유사하다. NPX는 패키지의 최신 버전을 임시로 불러와 상주시켜서 사용하는 방식이다.

NPM 명령어를 통해 패키지를 설치하면, 특정한 버전을 아예 컴퓨터로 다운로드 받아서 사용하게 된다. 즉, 이를 통해 다운로드 받은 패키지는 업데이트를 해주지 않는 이상 처음 다운로드 받은 버전으로 계속 남아있다는 말이다.

이에 비해, NPX 명령어를 통해서 설치한 패키지는, 언제나 해당 패키지의 가장 최신 버전을 불러와서 임시로 사용하게 된다. 즉, 패키지의 업데이트 관리를 해 줄 필요가 없다는 뜻이다.

그렇다면, 다시 처음으로 돌아가서, create-react-app과 같은 보일러 플레이트의 방식은, 패키지의 업데이트에 꽤나 민감하게 반응하기 때문에… 를 다시 보자. 보일러 플레이트는 무엇이길래 업데이트에 민감하게 반응하는 걸까?

보일러 플레이트

보일러 플레이트란 무엇인가?

이는 우리가 어떤 프로젝트를 시작할 때, 반복적으로 재사용되는 코드나 프로젝트 구조를 뜻한다.

리액트를 활용하여 프로젝트를 생성하는 경우, 우리는 보통 create-react-app이라는 명령어를 터미널에 입력하여 초기의 프로젝트 구조를 설정한다. 이렇듯, 보일러 플레이트는 마치 붕어빵 기계틀처럼 전체적 틀을 만들어준다. 반죽안에 어떤 걸로 채워넣을지는 그때그때마다 다르겠지만.

앞서 이야기한 create-react-app과 같은 보일러 플레이트 명령어는, 기능상의 업데이트가 잦기 때문에, 버전 관리에 민감하다. 업데이트가 잦은 경우에, 만약 특정 버전을 NPM을 통해 다운로드 받아서 사용한다면, 최신 업데이트의 내용을 따라가지 못하고 놓치는 경우가 발생할 가능성이 높아진다.

따라서, 이러한 경우에는 NPM이 아닌 NPX를 통해 언제나 최신 버전의 라이브러리 (프레임워크)를 불러와서 상주시켜 사용해주는 것이 더 바람직하다고 볼 수 있다.

NPM이랑 NPX는 뭔 차이가 있는거지?라는 궁금증에서 시작하여 보일러 플레이트까지 뻗어나갔다.

간단하게 정리해보자면, 업데이트의 민감도에 따라 두가지 명령어를 구분하여 사용하면 될 것 같다.