분류 Reactjs

React 앱 만들기 : React 프로젝트를 빠르게 준비하세요

컨텐츠 정보

  • 조회 319 (작성일 )

본문

새로운 React 프로젝트를 시작하는 것은 그렇게 간단하지 않습니다. 

코드에 직접 들어가서 애플리케이션에 생명을 불어 넣는 대신 로컬 개발 환경, 단위 테스트 및 프로덕션 빌드를 설정하기 위해 올바른 빌드 도구를 구성하는 데 시간을 소비해야 합니다. 다행히도 Create React App의 형태로 도움을 받을 수 있습니다.


Create-React-App은 새로운 React 프로젝트를 생성하고 개발을 위해 미리 구성된 웹팩 빌드를 사용할 수 있는 Facebook의 명령 줄 도구입니다. 프로젝트에서 복잡한 빌드 파이프 라인을 유지할 필요가 없어 애플리케이션 자체에 집중할 수 있는 React 에코 시스템의 필수적인 부분이 된 지 오래되었습니다.


Create React App은 어떻게 작동합니까? 


Create React App은 npm 또는 Yarn을 사용하여 실행할 수 있는 독립형 도구입니다.


몇 가지 명령만으로 npm을 사용하여 새 프로젝트를 생성하고 실행할 수 있습니다.


npx create-react-app new-app
cd new-app
npm start

Yarn을 선호한다면 다음과 같이 할 수 있습니다.


yarn create react-app new-app
cd new app
yarn start

Create React App은 다음 프로젝트 구조를 설정합니다.


new-app
├── .gitignore
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock

또한 모든 구성 및 빌드 스크립트를 포함하는 react-scripts 패키지를 프로젝트에 추가합니다. 즉, 프로젝트는 create-react-app 자체가 아니라 react-scripts에 의존합니다. 설치가 완료되면 개발 서버를 시작하고 프로젝트 작업을 시작할 수 있습니다.


기본 기능 


로컬 개발 서버 


가장 먼저 필요한 것은 로컬 개발 환경입니다. npm start를 실행하면 무언가를 변경하면 애플리케이션을 자동으로 다시 로드 하는 감시자가 있는 웹팩 개발 서버가 시작됩니다. v4부터 Create React App은 Hot Module Replacement의 대안으로 React의 빠른 새로 고침을 지원합니다. 이전 버전과 마찬가지로 코드베이스를 변경 한 후 애플리케이션의 일부를 빠르게 새로 고칠 수 있지만 몇 가지 새로운 기능도 있습니다. Fast Reload는 응용 프로그램의 수정 된 부분 만 다시 로드하고 기능 구성 요소 및 후크의 상태를 유지하며 구문 오류를 수정 한 후 응용 프로그램을 자동으로 다시 로드 합니다.


서버를 실행하기 전에 HTTPS 변수를 true로 설정하여 HTTPS를 통해 애플리케이션을 제공 할 수도 있습니다.


응용 프로그램은 많은 기능이 내장되어 생성됩니다.


ES6 및 ES7 


이 애플리케이션은 ES6 및 ES7 기능 세트를 지원하기 위해 자체 Babel 사전 설정인 babel-preset-react-app과 함께 제공됩니다. 지원되는 기능 중 일부는 다음과 같습니다.

  • Async/await
  • Object Rest / Spread 속성
  • 동적 import ()
  • 클래스 필드 및 정적 속성

Create React App은 런타임 기능에 대한 폴리 필을 제공하지 않으므로 이러한 기능이 필요한 경우 직접 포함해야 합니다.


자산 가져 오기 


애플리케이션에서 사용되는 파일을 번들링 할 수 있도록 JavaScript 모듈에서 CSS 파일, 이미지 또는 글꼴을 가져올 수 있습니다. 애플리케이션이 빌드되면 Create React App이이 파일을 빌드 폴더에 복사합니다. 다음은 이미지 가져 오기의 예입니다.


import image from './image.png';

console.log(image); // image will contain the public URL of the image

CSS에서도 이 기능을 사용할 수 있습니다.


.image {
  background-image: url(./image.png);
}

스타일링 


이전 섹션에서 언급했듯이 Create React App을 사용하면 필요한 CSS 파일을 가져 와서 스타일을 추가 할 수 있습니다. 애플리케이션을 빌드 할 때 모든 CSS 파일이 단일 번들로 연결되고 빌드 폴더에 추가됩니다.


Create React App은 CSS 모듈도 지원합니다. 규칙에 따라 * .module.css로 명명 된 파일은 CSS 모듈로 처리됩니다. 이 기술을 사용하면 Create React App이 결과 CSS 파일에 고유 한 클래스 선택기를 생성하므로 CSS 선택기의 충돌을 피할 수 있습니다.


또는 CSS 전처리기를 사용하려는 경우 Sass .scss 파일을 가져올 수 있습니다. 그러나 node-sass 패키지를 별도로 설치해야 합니다.


또한 Create React App은 @ import-normalize를 추가하여 CSS 재설정을 추가하는 방법을 제공합니다. CSS 파일의 모든 위치. 스타일은 또한 사후 처리를 거치며 이를 최소화하고 Autoprefixer를 사용하여 공급 업체 접두사를 추가하며 모든 속성, 사용자 지정 속성 및 미디어 쿼리 범위와 같은 지원되지 않는 기능을 폴리 필합니다.


단위 테스트 실행 


npm 테스트를 실행하면 Jest를 사용하여 테스트를 실행하고 무언가를 변경할 때마다 감시자를 시작하여 다시 실행합니다.


PASS  src/App.test.js
  ✓ renders learn react link (19 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.995 s
Ran all test suites.

Watch Usage
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.
 › Press q to quit watch mode.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press Enter to trigger a test run.

Jest는 Facebook에서 Mocha 또는 Karma의 대안으로 개발 한 테스트 러너입니다. 실제 브라우저 대신 Node 환경에서 테스트를 실행하지만 jsdom을 사용하여 브라우저 별 전역을 제공합니다.


Jest는 또한 버전 제어 시스템과 통합되며 기본적으로 마지막 커밋 이후 변경된 파일에 대해서만 테스트를 실행합니다. 이에 대한 자세한 내용은“Jest를 사용하여 React 컴포넌트를 테스트하는 방법”을 참조하십시오.


ESLint 


개발 중에 코드는 개발 중에 오류를 발견하는 데 도움이 되는 정적 코드 분석기 인 ESLint를 통해 실행됩니다.


프로덕션 번들 생성 


마침내 배포 할 것이 있으면 npm run build를 사용하여 프로덕션 번들을 만들 수 있습니다. 이렇게 하면 환경에 배포 할 준비가 된 최적화 된 애플리케이션 빌드가 생성됩니다. 생성 된 아티팩트는 빌드 폴더에 배치됩니다.


build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── static
    ├── css
    │   ├── main.ab7136cd.chunk.css
    │   └── main.ab7136cd.chunk.css.map
    ├── js
    │   ├── 2.8daf1b57.chunk.js
    │   ├── 2.8daf1b57.chunk.js.LICENSE.txt
    │   ├── 2.8daf1b57.chunk.js.map
    │   ├── 3.d75458f9.chunk.js
    │   ├── 3.d75458f9.chunk.js.map
    │   ├── main.1239da4e.chunk.js
    │   ├── main.1239da4e.chunk.js.map
    │   ├── runtime-main.fb72bfda.js
    │   └── runtime-main.fb72bfda.js.map
    └── media
        └── logo.103b5fa1.svg

Deployment 


Create React App 애플리케이션의 빌드는 정적 파일로만 구성되므로 원격 환경에 배포 할 수 있는 다양한 방법이 있습니다. Node.js 환경에서 실행중인 경우 Node.js 서버를 사용하거나 NGINX와 같은 다른 웹 서버를 사용하여 애플리케이션을 제공 할 수 있습니다.


공식 문서의 배포 섹션에서는 애플리케이션을 Azure, AWS, Heroku, Netlify 및 기타 인기 있는 호스팅 환경에 배포하는 방법에 대한 개요를 제공합니다.


개발 특징 


환경 변수 


Node 환경 변수를 사용하여 빌드시 코드에 값을 삽입 할 수 있습니다. Create React App은 REACT_APP_로 시작하는 모든 환경 변수를 자동으로 찾아 글로벌 process.env에서 사용할 수 있도록 합니다. 편의를 위해 이러한 변수는 .env 파일에 있을 수 있습니다.


REACT_APP_BACKEND=http://my-api.com
REACT_APP_BACKEND_USER=root

그런 다음 코드에서 참조 할 수 있습니다.


fetch({process.env.REACT_APP_SECRET_CODE}/endpoint)

백엔드로 프록 싱 


애플리케이션이 원격 백엔드에서 작동하는 경우 CORS를 우회하기 위해 로컬 개발 중에 요청을 프록시 할 수 있어야 합니다. package.json 파일에 프록시 필드를 추가하여 설정할 수 있습니다.


"proxy": "http://localhost:4000",

이렇게 하면 서버는 정적 파일을 가리 키지 않는 모든 요청을 지정된 주소로 전달합니다.


코드 분할 


Create React App은 dynamic import () 지시문을 사용하여 코드 분할을 지원합니다. 모듈에서 내 보낸 값을 반환하는 대신 이러한 값으로 확인되는 Promise를 반환합니다. 결과적으로 이 방법으로 가져온 모듈은 최종 번들에 포함되지 않고 별도의 파일로 빌드 됩니다. 이를 통해 최종 번들의 크기를 줄이고 필요에 따라 콘텐츠를 로드 할 수 있습니다.


TypeScript 지원 


TypeScript를 활성화하여 새 프로젝트를 생성 할 때 정적 유형 분석의 이점을 얻을 수 있습니다. 이는 프로젝트를 생성하기 위해 기본이 아닌 다른 템플릿을 사용하여 수행 할 수 있습니다.


npx create-react-app my-app --template typescript

문서에 설명 된대로 기존 프로젝트에 TypeScript 지원을 추가 할 수도 있습니다.


프로그레시브 웹 앱 


마찬가지로 점진적 웹 앱 지원을 추가 할 수 있습니다. src / service-worker.js 파일을 추가하여 서비스 워커를 사용할 수 있습니다. v4부터는 Workbox 라이브러리를 사용하여 애플리케이션에 삽입됩니다.


새 프로젝트에서 서비스 워커를 사용하려면 커스텀 템플릿에서 생성해야 합니다.


npx create-react-app my-app --template cra-template-pwa

# or with TypeScript support
npx create-react-app my-app --template cra-template-pwa-typescript

웹 바이탈 


Create React App을 사용하면 애플리케이션의 성능과 응답 성을 측정 할 수 있습니다. 이는 web vitals에서 정의하고 web-vitals 라이브러리를 사용하여 측정 한 측정 항목을 추적하여 수행됩니다. 메트릭에는 로드 성능, 첫 번째 입력 지연 및 응답을 위한 누적 레이아웃 이동을 측정하는 가장 큰 콘텐츠가 포함 된 페인트가 포함됩니다.


Create React App은 사용 가능한 모든 메트릭을 추적하는 편리한 기능을 제공합니다.


// index.js

reportWebVitals(console.log);

옵트 아웃 


제공된 기능이 더 이상 프로젝트에 충분하지 않다고 생각되면 npm run eject를 실행하여 언제든지 react-scripts 사용을 거부 할 수 있습니다. 그러면 웹팩 구성을 복사하고 react-scripts의 스크립트를 프로젝트에 빌드하고 종속성을 제거합니다. 그 후에 구성을 자유롭게 수정할 수 있습니다.


대안으로, 반응 스크립트를 포크하고 필요한 기능으로 브랜치를 유지할 수도 있습니다. 유지 관리 할 프로젝트가 많은 경우 더 쉬울 수 있습니다.


결론적으로 


새로운 React 프로젝트를 시작하려는 경우 더 이상 보지 마십시오. Create React App을 사용하면 다른 웹팩 구성을 작성하는 대신 애플리케이션 작업을 빠르게 시작할 수 있습니다. 또한 단일 명령 (npm install react-scripts @ latest)으로 빌드 도구를 쉽게 업데이트 할 수 있습니다. 이는 일반적으로 어렵고 시간이 많이 걸리는 작업입니다.


Create React App은 React 생태계의 필수적인 부분이 되었습니다. 빠른 프로토 타입을 만드는 데 사용하든 다음 주요 프로젝트를 스캐 폴드 하는 데 사용하든 개발 시간을 많이 절약 할 수 있습니다.