Post

REACT) npm에 대해 알아보자

Posted Updated
Preview Image
By parksohyunnn 9 min read

리액트와 npm: 정의와 사용법

리액트(React)는 컴포넌트 기반의 JavaScript 라이브러리로, 사용자 인터페이스를 구축하는 데 널리 사용됩니다. 리액트 프로젝트를 효과적으로 관리하고 다양한 패키지를 설치하기 위해 npm(Node Package Manager)이 자주 사용됩니다. 이 글에서는 npm의 정의와 기능, 기본 사용법, 그리고 리액트 프로젝트에서 npm을 사용하는 방법에 대해 자세히 설명합니다.

npm이란 무엇인가?

npm은 Node.js의 기본 패키지 관리자입니다. 패키지(package)는 코드, 라이브러리, 도구 등을 포함하는 단위로, npm은 이러한 패키지를 쉽게 설치하고 관리할 수 있게 해줍니다. npm은 두 가지 주요 구성 요소로 이루어져 있습니다:

  1. npm 레지스트리: 전 세계 개발자들이 공유하는 방대한 패키지 저장소입니다.
  2. npm CLI(Command Line Interface): npm 패키지를 설치, 업데이트, 삭제하는 명령어 도구입니다.

npm은 Node.js를 설치할 때 자동으로 함께 설치됩니다. Node.js는 서버 측 개발을 위한 JavaScript 런타임 환경이지만, 프론트엔드 개발에서도 npm을 활용할 수 있습니다.

npm의 기본 사용법

1. npm 설치

npm을 사용하려면 먼저 Node.js를 설치해야 합니다. Node.js는 공식 웹사이트에서 다운로드할 수 있습니다. Node.js 설치가 완료되면, npm도 함께 설치됩니다.

2. npm 초기화

새로운 프로젝트를 시작할 때 package.json 파일을 생성해야 합니다. 이 파일은 프로젝트의 메타데이터를 포함하며, 프로젝트에서 사용하는 패키지들을 관리합니다.

1

npm init

이 명령어를 실행하면 여러 가지 질문에 답해야 하며, 모든 질문에 답하면 package.json 파일이 생성됩니다. 질문을 건너뛰고 기본값으로 초기화하려면 -y 플래그를 사용할 수 있습니다.

1

npm init -y

3. 패키지 설치

npm을 사용하면 필요한 패키지를 쉽게 설치할 수 있습니다. 예를 들어, 리액트를 설치하려면 다음 명령어를 실행합니다:

1

npm install react react-dom

이 명령어는 react와 react-dom 패키지를 설치하고, package.json 파일의 dependencies 섹션에 해당 패키지를 추가합니다.

4. 패키지 업데이트

설치된 패키지를 최신 버전으로 업데이트하려면 npm update 명령어를 사용합니다.

1

npm update

특정 패키지를 업데이트하려면 패키지 이름을 지정합니다.

1

npm update react

5. 패키지 삭제

더 이상 필요하지 않은 패키지를 삭제하려면 npm uninstall 명령어를 사용합니다.

1

npm uninstall react

이 명령어는 react 패키지를 삭제하고, package.json 파일에서 해당 패키지를 제거합니다.

리액트 프로젝트에서 npm 사용하기

1. 리액트 프로젝트 생성

리액트 프로젝트를 생성할 때는 create-react-app 도구를 사용하는 것이 가장 일반적입니다. 이 도구는 리액트 프로젝트의 초기 설정을 자동으로 처리해줍니다. create-react-app을 사용하려면 전역으로 설치해야 합니다.

1

npm install -g create-react-app

그런 다음, 새로운 리액트 프로젝트를 생성합니다.

1
2
3

create-react-app my-app
cd my-app
npm start

이 명령어는 my-app이라는 이름의 새로운 리액트 프로젝트를 생성하고, 개발 서버를 시작합니다.

2. 추가 패키지 설치

리액트 프로젝트에서 추가 기능을 구현하기 위해 다양한 패키지를 설치할 수 있습니다. 예를 들어, React Router를 설치하여 라우팅 기능을 추가할 수 있습니다.

1

npm install react-router-dom

설치된 패키지는 node_modules 디렉토리에 저장되며, package.json 파일에 기록됩니다.

3. 스크립트 사용

리액트 프로젝트에서는 package.json 파일의 scripts 섹션을 사용하여 여러 가지 스크립트를 정의할 수 있습니다. 예를 들어, 기본적으로 다음과 같은 스크립트가 포함됩니다:

1
2
3
4
5
6
7
8

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}
  • npm start: 개발 서버를 시작합니다.
  • npm run build: 프로덕션 빌드를 생성합니다.
  • npm test: 테스트를 실행합니다.
  • npm run eject: 프로젝트 설정을 커스터마이징할 수 있게 해줍니다.

4. 패키지 버전 관리

npm은 설치된 패키지의 버전을 관리합니다. package.json 파일의 dependencies 섹션에 기록된 버전을 통해 패키지의 특정 버전을 설치할 수 있습니다. 버전 번호는 주로 다음과 같은 형식을 따릅니다:

  • ^1.2.3: 주 버전(major version)이 동일한 모든 마이너(minor) 및 패치(patch) 버전.
  • ~1.2.3: 주 버전과 마이너 버전이 동일한 모든 패치 버전.
  • 1.2.3: 정확히 해당 버전.

5. 개발 의존성 설치

개발 환경에서만 필요한 패키지는 –save-dev 플래그를 사용하여 설치할 수 있습니다. 이러한 패키지는 devDependencies 섹션에 기록됩니다.

1

npm install eslint --save-dev

결론

npm은 리액트 프로젝트를 포함한 다양한 JavaScript 프로젝트에서 필수적인 도구입니다. 패키지 설치, 업데이트, 삭제와 같은 기본 기능을 제공하여 프로젝트 관리를 용이하게 합니다. 특히 리액트 프로젝트에서는 create-react-app을 사용하여 빠르게 초기 설정을 하고, 필요한 패키지를 설치하여 기능을 확장할 수 있습니다. npm을 효과적으로 사용하면 프로젝트의 유지보수성과 개발 생산성을 크게 향상시킬 수 있습니다.

리액트와 npm의 조합을 통해 효율적이고 강력한 웹 애플리케이션을 개발해보세요. 다양한 패키지를 활용하여 프로젝트를 확장하고, npm의 강력한 기능을 최대한 활용하는 것이 중요합니다.

REACT
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github