npm 명령어를 실행하면 어떤 일이 일어날까요?

npm 명령어를 입력하고 엔터를 누릅니다. 프로젝트가 빌드됩니다. 마치 마법처럼 느껴집니다.

마법이 아닙니다. 일련의 네트워크 요청, 코드 파싱, 그리고 파일 최적화 과정입니다.

명령어를 맹목적으로 실행하는 것을 멈추세요. 대신 그 엔진을 이해해야 합니다.

매일 사용하는 6가지 핵심 명령어 뒤에서 어떤 일이 일어나는지 알아보겠습니다.

  1. npm install

이 명령어는 package.json 파일을 읽습니다. 클라우드 레지스트리에 접속하여 도구의 적절한 버전을 찾습니다.

  • 레지스트리에서 패키지를 다운로드합니다.
  • node_modules 폴더를 생성합니다.
  • 의존성 트리(dependency tree)를 구축합니다.
  • 정확한 버전을 기록하기 위해 package-lock.json을 업데이트합니다.
  1. npm run format:check

이는 검증 단계입니다. 코드를 변경하지 않고 스타일 규칙을 따르는지 확인합니다.

  • 파일의 가상 레이아웃을 구축합니다.
  • Prettier와 같은 규칙에 따라 파일을 비교합니다.
  • 공백이나 구문이 틀리면 오류를 표시합니다.

이 오류를 수정하려면 npm run format을 실행하세요. 이 명령어는 Prettier를 사용하여 파일을 올바른 스타일로 다시 작성합니다.

  1. npm run lint

코드의 맞춤법 검사기라고 생각하세요. ESLint는 로직을 깨뜨리는 오류를 찾습니다.

  • 구문 오류를 찾습니다.
  • 사용하지 않는 변수를 식별합니다.
  • 누락된 import를 감지합니다.
  • 잘못된 React Hook 사용을 표시합니다.
  1. npm run build

이 명령어는 앱을 실제 환경에 맞게 준비합니다. dist 폴더를 생성합니다.

  • 번들러를 사용하여 트리 쉐이킹(tree shaking)을 수행합니다. 이는 가져왔지만 사용하지 않은 코드를 삭제합니다.
  • 미니피케이션(minification)을 수행합니다. 이는 바이트 수를 줄이기 위해 공백을 제거하고 변수 이름을 변경합니다.
  • CSS와 에셋을 처리합니다.
  • 서버에 바로 사용할 수 있도록 최적화된 정적 파일을 출력합니다.
  1. npm run dev

로컬 개발 서버를 시작합니다. Vite를 사용하는 경우 Native ES Modules를 사용합니다.

  • 브라우저가 요청할 때만 파일을 컴파일합니다.
  • Hot Module Replacement(HMR)를 위해 WebSockets를 사용합니다.
  • 전체 페이지 새로고침 없이 브라우저에서 수정된 코드를 즉시 교체합니다.
  1. npm run preview

배포하기 전에 작업 내용을 재확인하는 데 사용하세요. 이 명령어는 소스 코드를 무시하고 dist 폴더만 확인합니다.

  • Vercel이나 AWS에서 앱이 어떻게 동작하는지 시뮬레이션합니다.
  • 프로덕션 빌드 결과물을 로컬 서버에서 실행합니다.

터미널은 블랙박스가 아닙니다. 도구를 이해하면 디버깅 속도가 빨라집니다.

작동 원리를 알고 나서 워크플로우를 바꿔놓은 명령어는 무엇인가요? 아래에 알려주세요.

터미널 아래의 마법: npm 명령어를 실행할 때 실제로 일어나는 일

npm install을 입력하고 엔터를 누르는 순간, 여러분의 컴퓨터 내부에서는 수많은 일이 순식간에 일어납니다. 단순해 보이는 이 작업 뒤에는 운영체제, 셸, Node.js 런타임, 그리고 복잡한 의존성 해결 알고리즘이 얽혀 있는 정교한 프로세스가 숨어 있습니다.

이 글에서는 npm 명령어가 실행될 때 터미널 아래에서 실제로 어떤 일이 벌어지는지 단계별로 살펴보겠습니다.

1. 셸(The Shell): 명령의 시작점

모든 것은 여러분이 명령어를 입력하는 셸에서 시작됩니다. 셸(bash, zsh, PowerShell 등)은 사용자와 운영체제 사이의 인터페이스 역할을 합니다.

여러분이 npm install을 입력하면, 셸은 먼저 이 명령어가 무엇인지 해석합니다. 셸은 시스템의 PATH 환경 변수를 탐색하여 npm이라는 실행 파일이 어디에 있는지 찾습니다. npm은 사실 Node.js로 작성된 JavaScript 프로그램이며, 시스템은 해당 경로에 있는 npm 실행 파일을 찾아 실행합니다.

2. npm CLI의 실행

npm 실행 파일이 호출되면, Node.js 런타임이 시작됩니다. 이제 npm CLI(Command Line Interface)가 제어권을 갖게 됩니다.

npm은 입력된 인자(arguments)를 분석합니다. install이라는 명령어가 들어왔으므로, npm은 설치 프로세스를 시작할 준비를 합니다. 이때 npm은 현재 작업 디렉토리에서 package.json 파일을 찾습니다.

3. 의존성 해결 (Dependency Resolution)

이 단계가 npm의 가장 핵심적인 부분입니다. npm은 프로젝트가 작동하는 데 필요한 패키지들의 목록을 파악해야 합니다.

package.json 읽기

npm은 package.json 파일을 읽어 dependencies와 devDependencies 목록을 확인합니다. 각 패키지에는 버전 범위(예: ^1.2.3)가 지정되어 있습니다.

의존성 트리 구축

단순히 나열된 패키지만 설치하는 것이 아닙니다. 각 패키지는 또 다른 패키지들을 필요로 합니다(이것을 '의존성'이라고 합니다). npm은 이 모든 관계를 파악하여 거대한 **의존성 트리(Dependency Tree)**를 구성합니다.

package-lock.json의 역할

만약 package-lock.json 파일이 존재한다면, npm은 이 파일을 우선적으로 참조합니다. package-lock.json은 이전에 성공적으로 설치되었던 패키지들의 정확한 버전과 구조를 기록하고 있습니다. 이를 통해 팀원 모두가 동일한 환경을 가질 수 있도록 보장합니다(결정론적 설치).

4. 레지스트리와의 통신 (The Registry)

의존성 트리가 완성되면, npm은 필요한 패키지들을 어디서 가져올지 결정해야 합니다. npm은 기본적으로 npm registry(https://www.npmjs.com/)와 통신합니다.

npm은 HTTP 요청을 통해 레지스트리에 패키지 메타데이터를 요청합니다. 레지스트리는 해당 패키지의 최신 버전, 의존성 정보, 그리고 실제 패키지 파일을 다운로드할 수 있는 URL을 응답합니다.

5. 다운로드 및 추출 (Fetching and Extracting)

이제 실제 파일이 움직일 차례입니다.

  1. 다운로드: npm은 레지스트리로부터 패키지 압축 파일(tarball)을 다운로드합니다.
  2. 캐싱: 다운로드된 파일은 로컬 머신의 npm 캐시 디렉토리에 저장됩니다. 이는 나중에 동일한 패키지를 다시 설치할 때 속도를 높여줍니다.
  3. 추출: 압축 파일의 내용이 프로젝트의 node_modules 폴더에 압축 해제됩니다.

이 과정에서 의존성 트리에 따라 폴더 구조가 생성됩니다.

6. 완료 및 바이너리 링크

모든 패키지가 node_modules에 배치되면, npm은 설치 과정을 마무리합니다.

만약 설치된 패키지 중에 실행 가능한 바이너리(예: jest, eslint 등)가 포함되어 있다면, npm은 이들을 node_modules/.bin 디렉토리에 심볼릭 링크(symbolic link)로 생성합니다. 덕분에 우리는 npx를 사용하거나 npm scripts를 통해 이 도구들을 직접 실행할 수 있습니다.

요약

npm install 한 줄은 다음과 같은 복잡한 여정을 거칩니다:

  1. 셸이 명령어를 해석하고 npm을 실행합니다.
  2. Node.js가 npm CLI를 구동합니다.
  3. npm이 package.json과 package-lock.json을 분석하여 의존성 트리를 만듭니다.
  4. npm 레지스트리에서 필요한 패키지 정보를 가져옵니다.
  5. 패키지를 다운로드하고 캐시에 저장한 뒤, node_modules에 추출합니다.
  6. 실행 가능한 도구들을 위해 바이너리 링크를 생성합니다.

다음번에 터미널에서 npm 명령어를 실행할 때, 여러분의 컴퓨터가 얼마나 열심히 일하고 있는지 기억해 보세요!