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

개발자 경험을 중요시하는 트렌드에 따라서 최근에 나오는 자바스크립트 프레임워크는 대부분 프로젝트를 편리하게 구성할 수 있도록 명령줄 도구(CLI)를 제공하고 있습니다.

그런데 각 프레임워크의 문서를 확인해보면 프로젝트를 생성하는 방법이 조금씩 다르다는 것을 알 수 있는데요.

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

```sh

$ npx create-react-app my-app

```

```sh

$ npm init react-app my-app

```

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

```sh

$ npx create-next-app@latest

```

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

```sh

$ npm create svelte@latest myapp

```

```sh

$ npm create vue@latest

```

하나의 명령어로 통일하면 좋을텐데 왜 이렇게 헛갈리게 다른 명령어를 사용해서 프로젝트를 생성하라고 하는지 궁금하지 않으세요?

이번 포스팅에서는 자바스크립트 프로젝트 생성할 때 자주 보게되는 `npm init`, `npm create`, `npx`, 이 세 가지 명령어에 대해 샅샅이 파헤쳐 보겠습니다!

📝 포스팅: https://www.daleseo.com/js-npm-init/

자바스크립트를 공부하고 계시다면 아래 게시물도 함께 읽어보시기를 추천드립니다.

📕 자바스크립트 개발자를 위한 package.json 파일 정리: https://careerly.co.kr/comments/90359

📗 패키지 잠금 파일 (package-lock.json, yarn.lock): https://careerly.co.kr/comments/93535

📘 자바스크립트 개발자를 위한 필수 npm 커맨드 정리 (+npx): https://careerly.co.kr/comments/93003

📙 Bun: 귀엽지만 강력한 새로운 자바스크립트 런타임: https://careerly.co.kr/comments/92202

📓 자바스크립트 패키지 매니저: npm vs. Yarn: https://careerly.co.kr/comments/94203