Component

준비과정

$ npm init react-app app-name
$ cd app-name
$ npm start

app-name은 본인이 원하는 프로젝트 이름으로 설정하면 된다. 아래의 명령어를 써도 무방하다. 개인적으로는 아래 것이 더 익숙하다.

$ npx create-react-app app-name

블로그들을 돌아다니다 보니, 첫 번째 명령어는 react를 설치하고 두 번째 명령어는 설치 없이 react를 깔게 되므로 최신 버전을 그때그때 유지하기에도 좋아 아래의 것을 사용하기를 권장한다는 글이 많이 보였다. 하지만 여기선 npm init을 쓰는 걸? 과연 그 말들이 맞는 것일까? 사람들이 npm과 npx에 대한 이야기를 혼용해서 쓴 것은 아닐까? 실제로 어떤 영어 커뮤니티 글에서는 npm init는 결국 npx로 변환되어 동일하게 사용되므로 크게 신경쓰지 말 것을 권했다. 이럴 때는 역시 공식 documentation이 최고다.

npm version 6.14.17부터 추가된 npm-init을 살펴보면 npm init react-app app-name은 아래의 코드와 동일하다.

$ npm exec create-react-app app-name

이렇게 놓고 보니 두 코드의 차이는 앞쪽, 즉 npx와 npm exec 밖에 없는 것을 알 수 있다.

$ npm exec foo@latest bar --package=@npmcli/foo

npm init react-app app-name이 변환된 코드

$ npx foo@latest bar --package=@npmcli/foo

npx create-react-app app-name이 변환된 코드

우선 --package=@npmcli/foo부터 설명하자. npmcli는 organization을, foo는 package 이름을 말한다. npm exec의 경우 --를 만나면 parsing을 중지한다. -- 뒤의 package 옵션을 확인한 후에 아래의 코드를 실행한다.

$ foo@latest bar

npx를 살펴보면, 여기는 우선 foo package name과 version을 확인한 후에 아래의 코드를 실행한다

$ foo bar --package=@npmcli/foo

npm exec이 --를 만나면 parsing을 중지하는 것을 활용해 npm init으로 npx와 동일하게 작동하는 코드는 아래와 같이 작성할 수 있다.

$ npm exec -- foo@latest bar --package=@npmcli/foo

어쨌든, 원래 이야기로 돌아오자면, npm init react-app app-name과 npx react-app app-name에는 --를 통해 옵션들을 전달하지도 않았고, @를 통해 버전을 전달하지도 않았기에, 동일하게 작동할 것이라고 예상할 수 있다. 개인적으로 npm이나 bash 명령어들에 좀 더 친숙했다면 더 깊게 파봤을 것 같은데, 아직은 레벨이 높지 않아 차후에 기회가 되면 업데이트 하도록 하자.

참고 사이트 :
NPM
npm Docs: npm-init
npm Docs: npm-exec