Create React 애플리케이션이란 무엇입니까?섹션 2(package.json, 자술, 노드 모듈)

이 시리즈에서는 Create React App을 사용하여 React를 설치하는 방법을 배웠습니다.
섹션 2에서는 다음 파일과 폴더를 분해합니다.

What is a package.json file?

What is a package-lock.json file?

What is a README.md file?

What are node_modules?

소포라니요?json 파일?

프로젝트에 대한 주요 정보를 포함하는 JSON(JavaScript 객체 표현) 파일입니다.React 프로젝트를 실행하는 데 필요한 파일입니다.
이 파일에는 name, author, version 등 메타데이터와 프로젝트에 사용된 시작 스크립트와 의존 항목이 포함되어 있다.
이 파일을 삭제하지 마십시오.
가장 좋아하는 코드 편집기에서 항목을 열면 루트 디렉터리에서 package.json 파일을 볼 수 있습니다."루트 또는 루트 폴더는 파일 시스템의 최상위 디렉토리입니다."-자료 출처: Tech Terms

이 파일을 클릭하면 안에 있는 데이터를 볼 수 있습니다.

{
  "name": "example-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "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"
    ]
  }
}

이 모든 것이 무엇을 의미하는지 분석해 봅시다.

이름, 버전 및 전용 필드는 무엇입니까?

프로젝트 이름에는 name 필드가 사용됩니다.

"name": "example-project",

항목의 이름을 변경해야 하는 경우 이 필드에서 업데이트할 수 있습니다.또한 package-lock.json 파일에서 업데이트해야 합니다.
프로젝트 폴더의 명령줄에서 npm install을 실행하면 package-lock.json 파일의 프로젝트 이름을 업데이트합니다.version 필드는 소프트웨어 프로젝트의 현재 버전 번호입니다.

"version": "0.1.0",

이 패키지를 npm 등록표에 발표하려면 이 필드가 중요합니다.만약 소프트웨어 패키지에 중대한 변경이 있었다면, 다른 개발자들이 새로운 업데이트가 무엇인지 이해할 수 있도록 새로운 버전을 발표하는 것을 권장합니다.
출판에 대한 더 많은 정보를 알고 싶으면 documentation을 읽으세요.private 필드의 부울 값(true 또는 false)이 자동으로 true로 설정됩니다.이것은 npm에서 프로젝트를 발표하지 않을 것을 의미합니다.

"private": true,

npm 등록표에 항목을 발표하려면 이 필드를false로 변경해야 합니다.

무엇이 의존 관계입니까?

프로젝트에서 현재 사용 중인 모든 패키지가 채워진 객체입니다.

"dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },

React 프로젝트이기 때문에 애플리케이션을 실행하려면 react과 react-dom이 필요합니다.react-scripts에서는 로컬 서버에서 프로젝트를 실행하고 파일을 변경할 때마다 자동으로 서버를 재부팅할 수 있습니다.web-vitals은 사이트 사용자 체험에 대한 지표를 제공했다.Create React App은 내장 코드를 사용하여 사이트의 지표를 추적하고 사용자 성능 분석을 볼 수 있습니다.
Create React 애플리케이션에는 jest과 react-testing-library이 함께 제공됩니다.프로그램이 안정적으로 실행될 수 있도록 테스트를 작성할 수 있습니다.

대본이 뭐예요?

package.json 파일에는 4개의 다른 스크립트가 포함된 객체가 포함되어 있습니다.

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

start 스크립트를 사용하면 로컬 서버(http://localhost:3000/)에서 애플리케이션을 실행할 수 있습니다.프로젝트 폴더의 명령줄에서 명령 npm start을 사용할 수 있습니다.
또는, 만약 실을 사용하여React를 설치한다면, 당신은 yarn start을 사용할 것입니다.build 스크립트는 프로젝트를 생산 환경에 배치할 준비를 할 때 최적화된 생성 폴더를 만드는 데 사용됩니다.npm build 또는 yarn build을 실행하여 구축 폴더를 만들 수 있습니다.test 스크립트는 명령줄에서 테스트 실행 프로그램을 시작하고 프로젝트를 위한 테스트를 실행할 수 있도록 합니다.
테스트 실행 프로그램을 시작하려면 npm test 또는 yarn test을 실행할 수 있습니다.eject 스크립트는 구축과 의존 항목 설정을 더욱 사용자 정의하고자 하는 개발자에게 적용된다.이것은 단일 구축 의존 항목을 삭제하고, 사용자의 취향에 따라 React 항목을 자유롭게 설정할 수 있습니다.
만약 네가 막 시작했다면, 이 옵션을 사용할 이유가 없다.
React의 기본 읽어보기 파일에도 이 경고가 표시됩니다.
주의: 이것은 단방향 조작입니다.일단 네가 eject이 되면, 너는 돌아갈 수 없다!
경험이 풍부한 개발자가 이 옵션에 만족한다면 npm eject 또는 yarn eject을 실행할 수 있습니다.

eslintConfig이란?

ESLint는 코드에서 구문 오류를 찾아 수정하고 ECMAScript/JavaScript 표준을 준수하는 데 도움을 주는 linter입니다.react-app과 jest으로 확장된 구성 대상입니다.

 "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

탐색자는 무엇입니까?

이 섹션에서는 React 애플리케이션에서 지원하는 브라우저를 지정할 수 있습니다.

 "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

개발 중에는 최신 버전의 유행 브라우저를 사용해야 합니다.또한 ES6 기능을 코드에서 사용할 수 있으며 지원됩니다.
프로덕션에서 다음을 지정할 수 있습니다.

>0.2%- 최소 0.2%의 시장 점유율을 지원하는 브라우저

not dead-는 지난 2년 동안 공식적으로 지원된 브라우저를 지원했습니다.

nop mini all - opera mini

지원 안 함browserslist에 대한 자세한 내용은 GitHub repository을 참조하십시오.
starter package.json 파일의 모든 현재 데이터에 대한 간략한 설명입니다.package.json 파일에 대한 자세한 내용은 documentation을 참조하십시오.

소포 자물쇠라니요?json 파일?

이것은 package.json 파일 또는 node_modules 폴더를 변경할 때 자동으로 생성되는 파일입니다.
사선으로 React를 설치하면 이 파일의 이름은 yarn.lock이다.
이 파일은 프로젝트의 루트 디렉터리에 있습니다.


이 파일은 수천 줄의 코드를 포함하고 프로젝트에 필요한 모든 의존 항목의 정확한 버전을 보여 줍니다.
NPM (노드 패키지 관리자) 이 파일을 처리하고 있기 때문에 이 파일을 직접 변경할 수 없습니다.

자술이라니요?md 파일?

README.md 파일도 프로젝트의 루트 디렉터리에 있습니다.

이것은 다른 개발자에게 당신의 프로젝트를 설명하도록 하는 곳입니다.Create React Apps에는 README.md 파일의 기본 템플릿이 포함되어 있습니다.
이 정보는 React starter 스크립트 및 React 응용 프로그램을 만드는 데 유용한 기타 정보를 탐색합니다.
사람들이 당신의 프로젝트를 이해할 수 있도록 README.md 파일을 사용자 정의하는 것을 강력히 권장합니다.
다음과 같은 정보를 포함할 수 있습니다.

프로젝트 설명

기능 목록

에 사용된 기술 목록

에서 사용하는 테스트 유형

프로젝트 비디오 또는 캡처

배포된 사이트에 대한 링크

프로젝트를 로컬에서 실행하는 방법에 대한 정보

만약에 귀하의 프로젝트가 open source 프로젝트라면 이 정보는 귀하의 프로젝트에 기여할 다른 개발자에게 매우 유용합니다.
잠재적인 고용주에게 당신의 프로젝트를 이해하는 것도 도움이 된다.
양호한 자술 파일을 만드는 방법에 대한 더 많은 정보를 얻으려면 이 article을 읽어 주십시오..md은 컴퓨터에 이것이 가격 인하 문서라고 알려주었다.Markdown은 문서를 포맷할 수 있는 언어이다.
다음은 cheat sheet입니다. 가격 인하 문법을 사용하는 데 도움을 줄 수 있습니다.

무엇이 노드 단원입니까?

이 폴더는 항목의 루트 디렉토리에 있습니다.

프로젝트를 실행하는 데 필요한 모듈을 나타내는 수백 개의 폴더와 파일을 포함합니다.
node_modules 폴더를 GitHub에 제출하지 않는 것이 중요합니다.만약 이 폴더가 생산에 포함된다면 사이트의 운행 속도를 떨어뜨릴 것이다.
나는 내가 첫 번째 사이트를 만들 때 이 실수를 범한 것을 기억한다.다행히도 트위터에 좋은 개발자가 있는데, 그가 나에게 그것을 삭제하는 방법을 알려 달라고 연락했다.
Create React 애플리케이션에서 문제를 해결했기 때문에 node_modules 폴더를 GitHub에 제출할 염려가 없습니다.이 시리즈의 세 번째 부분에서 원인에 대한 더 많은 정보를 얻을 것입니다.
React 애플리케이션 시리즈를 만드는 두 번째 섹션입니다.
3부에서 윌은 .gitignore 파일과 public 폴더를 이해할 것이다.