npx 명령 시 의존성 트리가 변하는 이유

npm을 사용하는 도중 npx라는 흥미로운 명령이 있어서 한번 살펴봤다.

npm(node package manager)

node.js 를 통한 프로젝트를 진행할 때 모든 패키지를 관리하기 위해 사용한다.

npm 에서 특정 라이브러리, 모듈을 사용하고 싶다면 이를 설치 후 실행하는 방식으로 진행이 된다.

 

하지만 계속해서 쓰는 것이 아니라 실험적으로 써보거나

이후에 사용하지 않거나 하는 패키지가 존재할 수도 있다.

그리고 이를 반복적으로 하려면 package.json과 package-lock.json이 

수많은 패키지로 인해 비대해지고 프로젝트의 사이즈도 커질 것이다.

따라서 한 번만 쓰고 말 패키지에 대해서

해당하는 패키지를 설치하지 않고 실행만 하는 명령. 이것이 npx이다.

 

npx(node package execute)

• 기본적으로 package.json이나 package-lock.json에 영향을 주지는 않음.
  • dependency, devDependency 에 영향을 주지 않는다. 
  • 일회성으로 설치하고 사용하고 싶을 때 사용
• 다만 사용하고자 하는 패키지에 대한 의존적인 패키지가 존재한다면, 
  (npx로 임시 패키지를 사용하기 위해 미리 설치되어야 하는 패키지가 존재한다면)
  
  • 이 추가 패키지를 설치하고, 이에 대한 의존성 트리의 변경은 불가피하다.
• 예를 들어 설명하자면
  • module 1을 npx를 통해 사용하고 싶은데, module 1이 module 2,3,4에 의존적
  • 그런데 현재 module 2,3만 설치되어 있고 module 4의 설치가 필요
  • 그렇다면 module 4를 설치하게 되어서 전체 프로젝트의 의존성트리에 변경이 있다.
    • ✅ package.json, package-lock.json의 변경으로 프로젝트 전체 패키지 업데이트 필요.

 

shadcn UI에서 npx를 통한 ui 컴포넌트 설치의 방식

사실 이 글을 쓰게 된 이유이기도 한데, npx에 대해서 흥미를 느낀 부분은

shadcn이 해당 npx의 과정을 약간 응용해 필요한 것만을 설치해준 방식 때문이다.

shadcn 에서 button 컴포넌트를 사용하고 싶다고 가정하자. 

https://ui.shadcn.com/docs/components/button

Button

Installation에서 Manual에 나온 결과물을 CLI의 npx명령어 한 줄로 처리하고 있다.

 

CLI의 방식, npx shadcn@latest add button 명령어를 통해 다음의 과정이 실행된다.

 

1. npx를 통한 임시 실행

• 명령어 npx shadcn@latest add button은 shadcn 패키지의 최신 버전을 로컬 환경에 다운로드하여 실행
• 이때, shadcn@latest는 shadcn 패키지의 최신 버전을 임시로 설치하여,
  프로젝트에서 사용하고자 하는 button 컴포넌트를 추가하는 역할

2. shadcn 패키지 실행 및 설정

• npx로 shadcn을 실행하면, shadcn 스크립트가 실행, 프로젝트에 Button 컴포넌트를 설치하는 과정을 진행
• 이 과정에서 shadcn은 컴포넌트 템플릿 파일을 프로젝트에 복사하거나 추가하고,
  해당 컴포넌트와 관련된 의존성을 자동으로 설치

3. 컴포넌트 파일 생성:

• shadcn 스크립트는 Button 컴포넌트 파일을 생성하거나 프로젝트 디렉토리 내 특정 경로에 복사.
  Button 컴포넌트를 쉽게 사용할 수 있도록 프로젝트에 추가

4. 필요한 의존성 설치:

• shadcn은 기본적으로 Radix UI 컴포넌트를 기반으로 동작하기 때문에,
  Button 컴포넌트에 필요한 의존성 패키지@radix-ui/react-button가 필요하다.
• shadcn 스크립트는 해당 의존성들을 자동으로 설치한다.
  이 과정에서 package.json에 의존성이 추가되며, npm 명령어를 통해 의존성 패키지를 설치
• Button 컴포넌트와 관련된 의존성은 자동으로 node_modules에 설치되고,
  해당 패키지의 버전 정보는 package-lock.json 파일에 기록된다.

5. npx의 임시 설치 및 종료:

• npx는 일회성 실행 도구이기 때문에, shadcn이 프로젝트에 필요한 컴포넌트 파일을 생성하고 의존성을 설치한 후, shadcn 패키지는 삭제되거나 캐시로 유지된다.
• 즉, shadcn은 영구적으로 설치되지 않고, 해당 스크립트가 실행된 후 자동으로 종료된다. 
  하지만 프로젝트에는 필요한 컴포넌트와 의존성이 남아 있게 됩니다.

 

즉, shadcn은 npx라는 명령을 통해 자신을 설치하지 않고 radix-ui/component 라는 모듈을 추가 후 설치하고,

개발자가 사용할 Button.jsx라는 파일을 ui디렉토리에 생성해준다.

굳이 shadcn이라는 package를 의존성에 추가하지 않고 사용자 입장에서 필요한 모듈과 파일만을 설치해주는 것이 된다.