NPM이란 무엇인가요?

💡 NPM이란 무엇인가요?

NPM은 Node Package Manager의 약자로, 자바스크립트 개발에서 필요한 도구와 라이브러리를 설치하고 관리하는 도구입니다.

쉽게 말해, "코드가 더 편하게 작동하도록 도와주는 앱 스토어 같은 것"입니다.

🌟 NPM이 왜 필요한가요?

만약 우리가 개발을 하면서 매번 모든 기능을 처음부터 끝까지 직접 코딩한다면 너무 시간이 오래 걸립니다.

그래서 이미 다른 개발자들이 만들어 놓은 코드를 다운로드해서 사용하는데, 이때 NPM이 그 코드를 편리하게 관리해 줍니다.

📂 NPM의 구성 요소 (쉽게 이해하기)

구성 요소 설명

패키지	패키지는 특정 기능을 미리 만들어 둔 자바스크립트 코드라고 생각하면 됩니다. 예를 들어, React는 웹사이트 화면을 만들 때 사용하는 도구이고, Lodash는 복잡한 데이터 작업을 쉽게 해주는 도구입니다. 쉽게 말해, 필요한 기능이 들어있는 상자라고 보면 됩니다!
package.json	프로젝트의 설명서 같은 파일입니다. 어떤 도구(패키지)를 사용하는지, 버전은 무엇인지 등을 기록합니다.
CLI (명령어 도구)	명령어를 입력해 NPM을 사용합니다. 예를 들어, "React 설치해줘" 같은 요청을 명령어로 전달합니다.
Registry (저장소)	NPM 패키지가 모여 있는 중앙 창고입니다. npmjs.com에서 전 세계 개발자들이 올린 도구를 찾아 다운로드할 수 있습니다.
node_modules	설치된 패키지가 저장되는 폴더입니다. 예를 들어, "React 설치" 명령을 실행하면 React 패키지가 여기에 저장됩니다.

📦 NPM은 어떻게 작동하나요?

패키지를 설치하면:
- 명령어로 "React 같은 도구를 내 프로젝트에 추가해줘"라고 요청합니다.
- NPM은 중앙 창고(Registry)에서 해당 도구를 다운로드해 프로젝트에 추가합니다.
설치된 도구 관리:
- package.json 파일에 설치된 도구와 버전을 자동으로 기록합니다.
- 다른 사람이 내 프로젝트를 사용해도 똑같은 도구 환경에서 작업할 수 있게 만듭니다.
스크립트 실행:
- npm run start 같은 명령어로 개발을 편리하게 실행합니다. (예: 프로젝트 시작, 코드 빌드)

📄 package.json 쉽게 이해하기

package.json은 "내 프로젝트의 설명서"입니다.

어떤 도구(패키지)를 사용하는지, 필요한 명령어가 무엇인지 기록되어 있습니다.

예시 파일:

{
  "name": "my-first-app", // 프로젝트 이름
  "version": "1.0.0",     // 프로젝트 버전
  "scripts": {            // 자주 사용하는 명령어 모음
    "start": "node app.js",
    "build": "webpack --mode production"
  },
  "dependencies": {       // 필요한 도구(패키지) 목록
    "react": "^18.2.0"
  },
  "devDependencies": {    // 개발할 때만 필요한 도구 목록
    "webpack": "^5.0.0"
  }
}

scripts:
- 프로젝트를 실행하거나 빌드할 때 사용하는 명령어를 정의합니다.
- 예: npm run start → app.js 실행
dependencies:
- 실제 서비스에 필요한 도구들입니다.
- 예: React는 사용자가 화면을 보는데 필요한 도구입니다.
devDependencies:
- 개발할 때만 필요한 도구들입니다.
- 예: Webpack은 코드를 압축하거나 변환하는 개발용 도구입니다.

⚙️ NPM 주요 명령어

명령어 기능

npm init	프로젝트 시작을 위해 package.json 생성
npm install react	React 패키지 설치
npm install -g <패키지>	전역(Global) 설치 (컴퓨터 전체에서 사용할 도구를 설치)
npm uninstall react	React 패키지 삭제
npm update	설치된 패키지를 최신 버전으로 업데이트
npm run start	package.json에 정의된 스크립트 실행 (예: 프로젝트 시작)
npm cache clean --force	NPM 캐시 데이터 삭제 (문제가 생길 때 사용)

📦 React 프로젝트 설정 예시

1. 폴더 만들기

프로젝트를 시작할 폴더를 생성하고 해당 폴더로 이동합니다:

mkdir my-react-app && cd my-react-app

2. 프로젝트 초기화

package.json 파일을 자동 생성합니다:

npm init -y

y의 역할:

y 옵션은 질문들을 모두 기본 값(default)으로 설정하고 바로 package.json 파일을 생성합니다.
시간을 절약하며, 빠르게 프로젝트 초기화를 할 수 있습니다.

3. React 설치

React와 ReactDOM(React와 함께 필요한 도구)을 설치합니다:

npm install react react-dom

여기서 잠깐!!

ReactDOM이란?

ReactDOM은 React로 만든 화면(UI)을 브라우저에 보여주는 역할을 하는 도구입니다.

React는 "어떤 화면을 만들지" 정의하는 역할을 합니다.

하지만 정의된 화면을 실제로 웹 브라우저에 표시하려면 ReactDOM이 필요합니다!

예시로 이해하기

HTML 파일에 이런 부분이 있다고 가정해봅시다:

<div id="root"></div>

React에서는 화면을 이렇게 만들었다고 가정할게요:

function App() {
    return <h1>Hello, React!</h1>;
}

여기까지는 화면이 만들어졌지만, 아직 브라우저에 표시되지 않았습니다.

ReactDOM의 역할

이제 ReactDOM이 등장해서, 화면을 브라우저에 표시합니다:

import ReactDOM from "react-dom";

ReactDOM.render(<App />, document.getElementById("root"));

결과적으로 HTML 파일의 <div id="root"></div> 부분에 "Hello, React!"가 표시됩니다.

한 줄로 정리하자면

ReactDOM은 React 컴포넌트가 브라우저에서 실제로 보이도록 도와주는 다리(Bridge)입니다!

4. 스크립트 실행

프로젝트를 실행하거나 테스트합니다:

npm run start

💡 NPM의 장점

시간 절약:
이미 만들어진 도구(패키지)를 가져와 사용할 수 있어, 모든 기능을 직접 코딩할 필요가 없습니다.
효율적인 협업:
package.json과 package-lock.json을 통해 팀원 모두가 동일한 환경에서 작업할 수 있습니다.
광범위한 생태계:
200만 개 이상의 패키지가 NPM 저장소에 등록되어 있어, 필요한 모든 기능을 쉽게 찾을 수 있습니다.

NPM vs Yarn 비교

특징 NPM Yarn

속도	최신 버전에서 개선됨	더 빠른 캐시 시스템을 활용
명령어	npm install 사용	yarn add 사용
설치 속도	병렬 처리 제한적	기본적으로 병렬 설치 지원
파일 잠금	package-lock.json 사용	yarn.lock 사용

* yarn에 대해서는 다음 포스팅에서 다루도록 하겠습니다.

✨ 요약: NPM은 이렇게 사용하세요!

개발 시작하기:
- npm init으로 프로젝트 초기화
- npm install로 필요한 도구 설치
작업 자동화:
- npm run <스크립트>로 명령어 실행
협업:
- package.json으로 모든 팀원이 동일한 개발 환경 유지

NPM은 초보자부터 전문가까지 모두가 사용하는 개발 도우미입니다.

NPM을 잘 활용하면 개발 속도를 높이고, 반복 작업을 줄일 수 있습니다.

이렇게 오늘 NPM에 대해 알아봤습니다. 틀린 점이나 궁금한 부분이 있다면 댓글로 알려주세요!

함께 공부하며 성장해 나가요 😊✨

simple_dev_null

NPM이란 무엇인가요?