본문 바로가기
IT_Developers/ReactJS

React.js - 기본 생성된 "package.json" 파일 살펴보기

by 고코더 2021. 1. 16.

"


리액트 패키지 환경설정 파일 


 

안녕하세요.

고코더 입니다.

 

 

 1. 이전 시간에 리액트 기본 프로젝트를 생성했습니다. 그리고 폴더의 구조도 알아보았습니다. 하지만 가장 중요한 파일이 있습니다. 바로 패키지 매니저(Package manager)를 통해 설치된 모듈과 스크립트 명령어를 담은 json 파일입니다. 이 파일 하나로  npm 패키지들을 관리할 수 있습니다. 따로 node-modules 파일들을 공유할 필요 없이 package.json만 있으면 필요한 작업환경을 구축할 수 있습니다.

 

 2. package.json 파일은 프로텍트 폴더 루트(/)에 위치해 있습니다. 해당 파일을 메모장이나 에디터로 열어보겠습니다

 

 

 3. 파일의 내용은 이렇습니다. 파일명처럼 json 형태로 되어 있습니다. 해당 프로젝트의 이름부터 버전 등 다양한 정보들이 담겨 있습니다. 지난 시간 함께 만들었다면 이름은 hello가 됩니다. 다양한 설정들이 있는데 주목해야 할 부분을 짚고 넘어가겠습니다.

 

{

  "name": "hello",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "@testing-library/jest-dom": "^5.11.9",

    "@testing-library/react": "^11.2.3",

    "@testing-library/user-event": "^12.6.0",

    "react": "^17.0.1",

    "react-dom": "^17.0.1",

    "react-scripts": "4.0.1",

    "web-vitals": "^0.2.4"

  },

  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  },

  "eslintConfig": {

    "extends": [

      "react-app",

      "react-app/jest"

    ]

  },

  "browserslist": {

    "production": [

      ">0.2%",

      "not dead",

      "not op_mini all"

    ],

    "development": [

      "last 1 chrome version",

      "last 1 firefox version",

      "last 1 safari version"

    ]

  }

}

 

 4. 각 구성의 내용들

 

"name" - 프로젝트 이름을 말합니다. 우리가 이전 시간에 정한 명입니다.

"version" - 현재 프로젝트의 버전을 말합니다. 이제 막 시작했기에 0.1.0 버전입니다. 

"dependencies" - 설치된 의존 모듈을 나타납니다. 리액트 프로젝트 이기에 관련 모듈들이 많이 설치되어 있습니다. 

"script" - 실행 가능한 script 명령들을 포함하고 있습니다. 실행될 수 있는 커맨드들을 말합니다. 많이 사용할 커맨드는 start와 build입니다.

 

 


마무리


 

해당 프로젝트의 설정을 한눈에 확인할 수 있는 환경 파일

 

 

댓글0