React: 시작하기(2)

React에서는 npm과 npx라는 명령어를 볼 수 있는데 각각 무엇을 뜻하는지에 대해 알아보겠습니다. 

또한, 배포방법에 대해서 설명하겠습니다.

 

React 개발 환경 구축을 원하신다면 아래 게시글을 확인해 보시길 바랍니다.

https://datas2.tistory.com/59

React: 시작하기

 

[1] npm vs npx

 

두 용어는 리액트에서 많이 쓰이는 명령어로 간단한 차이를 안다면 좀 더 수월하게 개발할 수 있을 것입니다.

 

npm과 npx는 모두 Node.js와 관련된 도구이며, 주로 JavaScript 패키지 관리와 실행을 위해 사용됩니다.

그러나 둘은 목적과 동작 방식에서 차이가 있습니다.

 

 

npm (Node Package Manager):

npm은 Node.js 패키지 관리자로, 프로젝트에서 필요한 라이브러리와 모듈을 설치하고 관리하는 데 사용됩니다.
npm install <package-name>과 같은 명령어를 사용하여 패키지를 설치할 수 있습니다.
프로젝트의 package.json 파일에 의존성(dependencies)을 정의하고, npm install 명령을 사용하여 해당 의존성을 설치할 수 있습니다.
프로젝트 외부에서도 사용 가능한 글로벌 패키지 설치도 지원합니다.

 

npx:

npx는 npm 패키지를 실행하기 위한 도구로, 주로 커맨드 라인에서 일회성으로 패키지를 실행할 때 사용됩니다.
npx를 사용하면 로컬에 설치하지 않아도 패키지를 실행할 수 있습니다.
프로젝트 외부에서 글로벌로 설치하지 않고도 패키지를 실행할 수 있으며, 필요한 패키지를 원하는 버전으로 지정하여 실행할 수도 있습니다.

 

 

 

 

간단히 말하자면

npm은 Node.js의 기본 패키지 관리자(ex. 앱 스토어)이고 npx는 npm과 비슷하지만 임시적으로 설치하고 프로그램이 알아서 삭제하기 때문에 사용할 때마다 설치를 해야 합니다.

 

 

 

 

[2] 빌드 방법

 

이전 게시글에서는 local에서 실행하는 방법에 대해 간단히 다루었습니다.

 

빌드를 위해서는 실행할 때 사용했던 npm run start 대신 npm run build를 사용하면 build라는 디렉터리가 생성되는 것을 확인할 수 있습니다. 

위 명령을 실행하면 build 디렉터리가 생성되며, 이 디렉터리에는 최적화된 HTML, CSS 및 JavaScript 파일이 포함됩니다.

 

 

배포 과정에서는 서버가 필요한데 이후 개발을 마친 후 서버 배포에 대해서도 게시글로 다루도록 하겠습니다.