React 3. 리액트 프로젝트 만들기 - npm / npx 프로그램

이번에는 React 프로젝트를 만드는 과정에서 필요한 개념들을 알아보도록 하겠다.
예전부터 나는 이 부분에 대한 지식이 부족했기 때문에 한 번 자세히 알아보려고 한다.
 

1. npm / npx 프로그램 알아보기

 
npx, npm 프로그램 : Node.js 환경에서 패키지 관리를 위해서 사용하는 도구이다.
 

npm (Node Package Manager)

npm은 Node.js의 패키지 관리자이다.
이를 통하여 개발자는 다양한 오픈 소스 라이브러리를 설치하고 관리할 수 있다.
npm은 패키지를 로컬 프로젝트나 전역으로 설치할 수 있다.

예시)
1. 로컬 설치 : 특정 프로젝트에만 패키지를 설치한다.
npm install lodash
=> 이 명령어는 lodash 패키지를 현재 디렉토리에 있는 node_modules 폴더에 설치한다.

2. 전역 설치 : 시스템 전체에서 사용할 수 있도록 패키지를 설치한다.
npm install -g typescript
=> 이 명령어는 typescript 패키지를 시스템 전역에 설치하여 어디서든 사용할 수 있게 한다.


npx (Node Package Execute)

npx는 npm 5.2.0 버전 이후에 포함된 도구로, 패키지를 설치하지 않고도 실행할 수 있게 한다.
이를 통해 특정 명령어를 한 번만 실행하고 싶을 때 유용하다.
또한, 최신 버전의 패키지를 즉시 실행할 수 있다.

예시)
1. 패키지 실행 : 패캐지를 설치하지 않고 실행한다.
npx create-react-app my-app
이 명령어는 create-react-app 패키지를 설치하지 않고도 실행하여 새로운 React 프로젝트를 생성한다.

2. 특정 버전 실행 : 특정 버전의 패키지를 실행한다.
npx create-react-app@latest my-app
이 명령어는 create-react-app 패키지의 최신 버전을 실행하여 새로운 React 프로젝트를 생성한다.

 
이 둘의 주요 차이점은,

	npm	npx
설치 방식	패키지를 설치하여 사용	패키지를 설치하지 않고 실행할 수 있다.
전역 설치 필요 없음	x	o

 
이 둘의 리액트 프로젝트 생성 방법을 비교해보겠다.
 

npm	npx
npm install -g create-react-app create-react-app my-app => 먼저 create-react-app을 전역으로 설치한 다음, => 새로운 리액트 프로젝트를 생성한다.	npx create-react-app my-app => create-react-app을 전역으로 설치하지 않고, => 최신 버전을 즉시 실행하여 새로운 리액트 프로젝트를 생성.

 
여기서 npm의 단점과 이 단점을 npx가 어떻게 보완하는지 알아보도록 하겠다.
 

npm의 단점 :

 
1. 전역 설치의 번거로움 :
- 특정 도구나 CLI(Command Line Interface)를 사용하려면 패키지를 전역으로 설치해야 한다.
- 예를 들어, create-react-app을 사용하려면
먼저 npm install -g create-react-app 명령어를 통해 전역 설치를 해야 한다.
- 전역 설치는 시스템 전체에 영향을 미치며, 여러 프로젝트에서 동일한 도구를 사용하려면 관리가 복잡해질 수 있다.
 
2. 버전 관리의 어려움 :
- 전역으로 설치된 패키지는 수동으로 업데이트해야 한다.
- 특정 프로젝트에서 특정 버전의 도구를 사용해야 할 때, 전역 설치된 도구의 버전을 변경하는 것이 번거로울 수 있다.
- 전역 설치된 패키지의 버전이 여러 프로젝트에서 다를 경우, 버전 충돌 문제가 발생할 수 있다.
 
3. 디스크 공간 낭비 :
- 전역 설치된 패키지는 불필요하게 디스크 공간을 차지할 수 있다.
- 여러 프로젝트에서 동일한 패키지를 전역으로 설치하면 중복 설치로 인해 공간 낭비가 발생할 수 있다.
 
 

npm의 단점을 보완하는 npx의 장점 :

 
1. 전역 설치 필요 없음 :
- npx를 사용하려면 패키지를 전역으로 설치하지 않고도 실행할 수 있다.
- 예를 들어, npx create-react-app my-app 명령어를 사용하면
create-react-app을 전역으로 설치하지 않고도 프로젝트를 생성할 수 있다.
-  이는 시스템의 전역 패키지 관리 부담을 줄여준다.
 
2. 최신 버전의 패키지 실행 :
- 항상 최신 버전의 패키지를 실행할 수 있도록 도와준다.
- npx create-react-app my-app 명령어는 최신 버전의 create-react-app을 다운로드하여 실행한다.
- 이는 최신 기능과 버그 수정이 포함된 최신 패키지를 사용할 수 있게 해준다.
 
3. 특정 버전 실행 가능 :
- 특정 버전의 패키지를 실행할 수 있다.
- 예를 들어, npx create-react-app@4.0.3 my-app 명령어를 사용하면

create-react-app의 4.0.3 버전을 실행할 수 있다.
- 이는 프로젝트별로 필요한 특정 버전의 도구를 쉽게 사용할 수 있게 해준다.
 
4. 디스크 공간 절약 :
- 패키지를 일시적으로 다운로드하여 실행하므로,

패키지를 전역으로 설치할 필요가 없어 디스크 공간을 절약할 수 있다.
- 이는 특히 많은 도구를 사용하는 개발 환경에서 유용하다.
 

이러한 이유로 요즘은 npm을 npx로 대체한다.