자바스크립트 프로젝트 생성법 정리 (npm init, npm create, npx)

개발자 경험을 중요시하는 트렌드에 따라서 최근에 나오는 자바스크립트 프레임워크는 대부분 프로젝트를 편리하게 구성할 수 있도록 명령줄 도구(CLI)를 제공하고 있습니다. 그런데 각 프레임워크의 문서를 확인해보면 프로젝트를 생성하는 방법이 조금씩 다르다는 것을 알 수 있는데요.

예를 들어, React 기반 SPA(Single Page Application)을 생성할 때 많이 사용되는 Create React App의 문서를 보면, npx 명령어나 npm init 명령어를 사용하고 있습니다.

$ npx create-react-app my-app

$ npm init react-app my-app

다른 예로, React의 대표적인 메타 프레임워크인 Next.js 문서를 보면 npx 명령어를 사용하고 있습니다.

$ npx create-next-app@latest

Svelte나 Vue.js 쪽은 어떨까요? Svelte 문서와 Vue.js 문서를 보면 npm create 명령어를 사용하고 있습니다.

$ npm create svelte@latest myapp

$ npm create vue@latest

하나의 명령어로 통일하면 좋을텐데 왜 이렇게 헛갈리게 다른 명령어를 사용해서 프로젝트를 생성하라고 하는지 궁금하지 않으세요? 이번 포스팅에서는 자바스크립트 프로젝트 생성할 때 자주 보게되는 npm init, npm create, npx, 이 세 가지 명령어에 대해 샅샅이 파헤쳐 보겠습니다!

npm create는 npm init의 별칭

먼저, npm 공식 문서에서 npm init 명령어에 대한 자세한 성명을 확인할 수 있는데요. 문서 페이지의 제일 위 부분에서 npm create 명령어는 npm init 명령어의 별칭(alias)이라는 것을 알 수 있습니다. 다시 말해서, npm init를 쓰든 npm create를 쓰든 상관이 없으며 결국 둘 다 같은 작업을 수행합니다.

예를 들어, 차세대 번들러(bundler)로 각광받고 있는 Vite를 기반으로 프로젝트를 생성해보면요. 공식 문서를 따라서 npm create를 사용하든, npm init 사용하든 동일하게 프로젝트 이름을 입력하라는 첫 질문을 볼 수 있습니다.

$ npm create vite@latest
? Project name: › vite-project

$ npm init vite@latest
? Project name: › vite-project

npm init ??? npx create-???를 실행

npm init 명령어나 npm create 명령어어 바로 뒤에 나오는 react-app이나 svelte@latest와 같은 부분을 소위 initializer(“초기자”라고 번역해야 할까요?)라고 하는데요. 쉽게 말해서 해당 프레임워크를 기반으로 프로젝트를 쉽게 구성할 수 있도록 도와주는 CLI, 즉 명령줄 도구입니다. 보통 사용자로 부터 템플릿(template)이나 갖가지 옵션을 입력받아서 이를 토대로 별다른 추가 설정없이 바로 개발을 시작할 수 있는 프로젝트를 하나 뚝딱 만들어주죠.

그러면 이러한 initializer는 어디서부터 오는 걸까요? 당연히 npm 패키지 저장소겠죠?

npm 저장소 사이트에 들어가서 한번 create-로 검색을 해보시면 수많은 패키지들이 결과로 나올텐데요. 얘네들이 바로 initializer입니다. 즉, initializer는 npm 저장소에 올릴 때 패키지 이름을 create-로 시작하도록 약속되어 있습니다.

예를 들어, Gatsby의 initializer는 npm 저장소에 create-gatsby라는 이름으로 등록되어 있고, Vue.js의 initializer는 npm 저장소에 create-vue라는 이름으로 등록되어 있습니다.

우리가 터미널에서 npm init ???라고 실행하면 npm은 패키지 저장소에서 create-???라는 패키지를 내려받아 실행해줍니다. 그리고 바로 npm 저장소로 부터 패키지를 내려받아서 설치해주는 명령어가 npx 입니다. 그러므로, npm init ??? 또는 npm create ???를 실행하는 것은 npx create-???를 실행하는 것과 동일합니다.

예를 들어서, npm init gatsby를 실행하는 것은 npx create-gatsby를 실행하는 것과 마찬가지이고, npm create vue를 실행하는 것은 npx create-vue를 실행하는 것과 마찬가지입니다.

자, 이제 왜 이렇게 프레임워크 별로 다양한 명령어로 프로젝트를 생성하라고 하고 있는지 아시겠죠? npx init ???, npm create ???, npx create-??? 모두 동일한 결과를 만들어 냅니다. 이 원리를 이해하고 있으면 프레임워크 별로 프로젝트 생성하기 위한 커맨드를 굳이 외울 필요가 없겠죠?

@latest는 꼭 붙여야할까?

Vite나 Svelte, Astro와 같은 프레임워크의 문서를 보면 프로젝트를 생성하는 명령어 맨 뒤에 @latest를 붙이고 있는데요. 매번 이렇게 패키지 이름 뒤에 @latest를 꼭 붙어야할까요?

여기서 @latest는 명령어를 실행하는 시점에 npm 저장소에 올라와 있는 해당 패키지의 최신 버전을 가리킵니다. 즉, 동일하게 npm init ???@latest를 실행하더라도, 어제랑 오늘, 내일 설치되는 버전이 다를 수 있는 것이지요. 반면에 @latest를 뒤에 붙이지 않으면, 해당 컴퓨터에서 캐시(cache)되어 있던 initializer가 사용될 가능성이 생깁니다.

기존 프로젝트의 패키지를 최신 버전으로 업데이트할 때는 기존에 작동하던 기능이 여전히 잘 작동하는지 확인이 필요한데요. 하지만 새로운 프로젝트를 만들 때는 굳이 구 버전의 initializer를 사용해야 할 경우는 그리 많지 않겠죠? 이 것이 바로 많은 프레임워크 문서에서 패키지 이름 뒤에 @latest를 붙이도록 권장하고 있는 이유입니다.

단순 프로젝트 생성

참고로 자바스크립트 프로젝트를 생성하실 때, 꼭 initializer를 사용해야하는 것은 아니에요. npm init 명령어에 initializer를 명시하지 않으면 package.json 파일로만 이루어진 완전 기본 자바스크립트 프로젝트를 생성할 수 있습니다.

예를 들어서, 터미널에서 npm init만 입력하고 실행하시면 생성할 프로젝트 대한 정보를 물어보고요. 이 질문의 답변에 따라서 package.json 파일을 생성해줍니다.

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (temp)

-y 옵션을 사용하면 이러한 티키타카(?)를 생략하고 기본 값으로 package.json 파일을 신속하게 생성할 수 있습니다.

$ npm init -y
Wrote to /Users/daleseo/Temp/our-project/package.json:

{
  "name": "our-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

마치면서

지금까지 자바스크립트 프로젝트를 사용할 때 자주 볼 수 있는 3가지 명령어인 npm init, npm create, npx에 대해 살펴보았습니다. 알고 보니 이 3개의 명령어가 밀접하게 연관되어 있으며 서로 대체해서 사용할 수 있다는 것을 깨달으셨을 거에요. 이제 번거롭지 않게 프로젝트를 생성하실 때마다 공식 문서를 보실 필요가 없으시겠죠? 😉