package.json

 

# React 프로젝트의 package.json 파일

: React 개발 환경을 설정하고 실행하는 데 필요한 파일

 

[ 역할 ]

📌 React 프로젝트에서 필요한 패키지 목록을 관리
📌 NPM 또는 Yarn을 통해 패키지를 쉽게 추가/삭제 가능
📌 프로젝트 실행 및 빌드 명령어를 관리 (scripts)

 

package.json 예제 )

{
  "name": "my-react-app",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.0"
  },
  "devDependencies": {
    "eslint": "^8.50.0",
    "webpack": "^5.89.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test"
  }
}

 

[ package.json 항목 ] 

# private

: 프로젝트가 퍼블릭 레지스트리에 배포되지 않도록 방지하는 역할

- private: true로 설정하면, 해당 패키지는 npm 레지스트리에 퍼블릭으로 배포되지 않도록 합니다.

- 이 속성은 npm을 사용할 때만 동작하며, 다른 패키지 관리자에서는 다르게 동작할 수 있다.

 

# dependencies

✔️ 프로덕션(운영) 환경에서 필요한 패키지
✔️ 실제 코드 실행에 직접 사용되는 패키지
✔️ npm install 또는 yarn install 하면 자동으로 설치됨

 설치 명령어 : % npm install 패키지명

 

[ 사용 예시 ]

• react → UI 라이브러리 (운영 환경에서 필요)
• react-dom → React 앱을 브라우저에 마운트
• axios → API 요청을 위한 HTTP 클라이언트 (운영 환경에서 필요)

 

# devDependencies

✔️ 개발 중(로컬 환경)에만 필요한 패키지 (운영 환경에서는 필요 없음)
✔️ 빌드, 테스트, 코드 품질 검사 등의 도구
✔️ 배포 시 포함되지 않음 (프로덕션 코드 실행과 무관)

 설치 명령어 : % npm install 패키지명 --save-dev

 

[ 사용 예시 ]

• eslint → 코드 스타일 검사 (개발 중 필요)
• webpack → 빌드 도구 (운영 환경에서는 빌드된 결과만 필요)
• jest → 테스트 라이브러리 (테스트 실행 시 필요)

 

# scripts

: 프로젝트 실행 명령어 (npm start, npm build 등)