지금까지 현대의 우리 사회는 코드 한 줄에서 부터 변화해왔습니다. 바로 프로그래밍의 힘이죠. 그렇다면 이런 거대한 변화를 가져온 프로그래밍의 시작은 어디서 부터일까요? 바로 프로젝트 생성에서부터 시작됩니다. 너무 거창한가요? 그래도 프로그래밍에 있어서 프로젝트 생성은 그만큼 중요한 단계임에는 틀림없습니다.
오늘은 여러분의 개발 여정을 한결 수월하게 만들어 줄 ‘자바스크립트 프로젝트 생성 방법’에 대해 알아보려고 하는데요, 최근의 개발자 경험을 강조하는 트렌드에 발맞추어, 다양한 자바스크립트 프레임워크들이 명령줄 도구를 통해 우리가 사용할 수 있는 편리한 프로젝트 생성 명령어들을 제공하고 있습니다. 그런데 혹시 눈치채셨나요? 각각의 문서를 살펴보면, 프로젝트 생성 방법이 각양각색입니다.
React에서는 npx와 npm init을 사용하고, Next.js에서는 npx, Svelte와 Vue.js에서는 npm create를 사용합니다. 왜 이렇게 다양한 명령어를 사용하는 것일까요? 다소 혼란스러울 수 있는 이 다양한 명령어들에 대해 한번은 집고 넘어가야 할 필요가 있을 것 같습니다. 그래서 이 글에서는 npm init, npm create, npx 이 세 가지 명령어에 대해 조금 자세히 알아보도록 하겠습니다.
자바스크립트의 세 가지 명령어
개발의 세계에 발을 들이는 순간, 우리는 다양한 프로젝트 생성 명령어와 마주하게 됩니다. npm init, npm create, npx. 이 세 가지 명령어는 자바스크립트 프레임워크에서 주로 사용하는 명령어들입니다. 각각의 명령어는 언뜻 비슷해 보이지만, 사실은 각기 다른 역할을 가지고 있습니다. 그렇다면 이 명령어들은 어떻게 다르고, 언제 어떻게 사용해야 할까요?
npx와 npm init
우선 npx부터 살펴볼까요? npx는 Node.js 8.2.0 버전부터 도입된 실행 도구로, Node 패키지를 실행하는 데 사용됩니다. 이것을 사용하면, 패키지를 전역에 설치하지 않고도, 원하는 패키지를 쉽고 빠르게 실행할 수 있습니다. 특히 ‘Create React App’이나 ‘Create Next App’ 같은 CLI 도구를 사용할 때 매우 편리하게 사용할 수 있습니다.
반면, npm init은 좀 더 개발자 친화적인 방법이라고 할 수 있습니다. 이 명령어는 새로운 Node.js 프로젝트를 시작할 때 사용되며, package.json 파일을 생성하여 프로젝트에 필요한 메타데이터를 관리할 수 있습니다. 만약 npm init 뒤에 다른 생성 도구를 붙여서 사용하면, 해당 도구를 사용해 프로젝트를 생성하라는 의미가 됩니다.
참고로, React 기반 SPA을 생성할 때 많이 사용되는 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
npm create
npm create는 npm 6.1 버전부터 사용 가능해진 명령어로, 특정한 패키지 생성기를 호출하여 프로젝트를 시작하는 데 사용됩니다. 이것은 npx와 유사하지만, 패키지 생성기에 특화되어 있다는 점이 조금 다릅니다. Svelte나 Vue.js 같은 프레임워크에서 이 명령어를 통해 간편하게 새 프로젝트를 시작할 수 있습니다.
npm create svelte@latest myapp
npm create vue@latest
npm init의 별칭 npm create
이제 npm init과 npm create, 그리고 npx의 차이점을 알게 되셨을 텐데요, 아직 이 명령어들을 통해 실제로 프로젝트를 어떻게 생성하는지에 대해서는 조금 헷갈릴 수도 있을 것 같습니다. 프로젝트 생성의 핵심은 바로 initializer인데, 이 initializer가 바로 프로젝트 생성의 핵심이라고 할 수 있습니다.
npm init이나 npm create 같은 명령어를 사용할 때, 우리는 내부적으로 ‘react-app‘이나 ‘
예를 들어, ‘
npm create vite@latest Project name: › vite-project
npm init vite@latest Project name: › vite-project
우리가 터미널에서 ‘npm init {package-name}‘이라고 실행하면 npm은 패키지 저장소에서 create-{package-name}이라는 패키지를 내려받아 실행해줍니다. 그리고 이때 npm 저장소로 부터 패키지를 내려받아서 설치해주는 명령어가 바로 npx 입니다. 그러므로, ‘npm init {package-name}‘ 또는 ‘npm create {package-name}‘을 실행하는 것은 ‘npx create-{package-name}‘을 실행하는 것과 동일하며, 이러한 프로세스를 통해 npm은 프로젝트 생성을 위한 명령어를 간소화하고, 개발자들에게 일관된 경험을 제공할 수 있게 됩니다.
정리하면, ‘npm init gatsby‘나 ‘npm create vue‘ 같은 명령어는 결국 ‘npx create-gatsby‘나 ‘npx create-vue‘와 같은 작업을 수행합니다. 이 원리만 이해하고 있어도 프레임워크 별로 프로젝트 생성하기 위한 커맨드를 굳이 외울 필요가 없겠죠?
@latest
여러분이 새로운 프로젝트를 생성할 때, 종종 문서에서 ‘@latest‘를 명령어 뒤에 붙이라는 안내를 보셨을 겁니다. ‘
npm create vite@latest Project name: › my-vite-project
만약 ‘@latest‘를 붙이지 않으면 어떨까요? 이 경우 npm은 해당 컴퓨터에 캐시된 버전을 사용합니다. 하지만 이는 때때로 오래된 버전일 수 있기 때문에, 새로운 기능이나 개선사항을 놓칠 위험이 있죠.
새로운 프로젝트를 만들 때는 최신 기술을 활용하는 것이 좋습니다. 왜냐하면, 구 버전의 오류 기능이나 보안 문제가 해결된 최신 버전을 사용하는 것이 여러분의 프로젝트를 더욱 견고하게 만들어주기 때문입니다. 또, 오래된 기존 프로젝트의 패키지를 업데이트할 때도 주의가 필요합니다. 새 버전이 기존의 기능에 영향을 주지 않는지, 호환성이 있는지 확인하는 과정이 중요합니다.
그래서 많은 프레임워크 문서에서는 새 프로젝트 생성 시 ‘@latest‘를 붙이도록 권장하고 있습니다. 이를 통해 항상 최신 상태를 유지할 수 있고, 따라서 여러분의 프로젝트가 언제나 최신의 강력한 기능을 갖출 수 있음을 의미합니다.
프로젝트 생성의 기본: npm init
여러분이 자바스크립트 프로젝트를 생성할 때, 항상 복잡한 initializer나 최신 트렌드를 따를 필요는 없습니다. 때로는 단순함이 최고의 미덕이죠. ‘npm init‘ 명령어의 가장 기본적인 사용법을 통해, 가장 원초적인 프로젝트 구조를 만들어 볼 수 있습니다.
터미널을 열고 ‘npm init‘을 입력하면, npm은 여러분에게 프로젝트의 기본 정보를 묻습니다. 이 질문들에 답변하면서 여러분만의 package.json 파일을 만들 수 있습니다.
npm init This utility will walk you through creating a package.json file. ... package name: (my-simple-project)
하지만, 만약 여러분이 빠르게 기본 설정으로 프로젝트를 시작하고 싶다면, ‘-y‘ 옵션을 사용할 수도 있습니다. 이 옵션은 모든 질문을 생략하고 기본값을 사용하여 즉시 package.json 파일을 생성합니다.
npm init -y
Wrote to /path/to/your-project/package.json:
{
"name": "your-project",
"version": "1.0.0",
...
}
이 방법은 특히 빠르게 프로토타입을 만들거나, 작은 스크립트를 위한 간단한 프로젝트를 구성할 때 유용합니다. 복잡한 설정이나 추가적인 도구 없이, 단 몇 초 만에 새로운 자바스크립트 프로젝트를 시작할 수 있기 때문이죠.
마치며
자바스크립트 프로젝트를 시작하는 데 있어 npm init, npm create 그리고 npx 명령어의 미묘한 차이점을 이해하셧나요? 우리는 이 세 가지 도구가 실제로는 매우 유사한 기능을 수행하며, 개발자의 편의에 따라 상호 교체 가능함을 알아보았습니다.
‘npm init‘으로 빠르게 기본적인 프로젝트를 시작할 수도 있고, ‘npm create‘ 또는 ‘npx‘를 사용하여 보다 특화된 프레임워크와 라이브러리를 즉시 사용할 수 있는 환경을 만들 수도 있습니다. ‘@latest‘ 태그를 이용하면 최신 버전을 활용하는 것은 물론, ‘-y‘ 옵션으로 빠른 설정을 완료할 수도 있죠.
이것들은 모두 자바스크립트 프로젝트를 쉽고 빠르게 생성할 수 있는 명령어들입니다. 하지만 비슷한 기능을 하는 다양한 명령어들이 있더라도 그 원리만 알고 있다면 공식 문서를 일일이 찾아볼 필요 없이, 여러분의 필요와 상황에 맞추어 가장 적합한 명령어를 선택하여 사용함으로써 시간과 노력을 절약할 수 있습니다. 더 이상 명령어를 하나하나 외우며 당황할 필요가 없는 것이죠. 감사합니다!