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

"

---

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

---

 

안녕하세요.

고코더 입니다.

 

 

● 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입니다.

 

 

---

마무리

---

 

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