react chat
1.0.0
이 프로젝트는 Create React App으로 부트스트랩되었습니다.
아래에서는 일반적인 작업을 수행하는 방법에 대한 몇 가지 정보를 확인할 수 있습니다.
여기에서 이 가이드의 최신 버전을 찾을 수 있습니다.
<title> 변경public 폴더 사용public 폴더를 사용하는 경우.env 에 개발 환경 변수 추가<meta> 태그 생성npm start 변경 사항을 감지하지 못합니다npm test 중단됨npm run build 가 너무 일찍 종료됩니다.npm run build 실패합니다.npm run build 축소되지 않습니다.Create React App은 두 가지 패키지로 나뉩니다.
create-react-app 새 프로젝트를 생성하는 데 사용하는 전역 명령줄 유틸리티입니다.react-scripts 생성된 프로젝트(이 프로젝트 포함)의 개발 종속성입니다. create-react-app 자체를 업데이트할 필요는 거의 없습니다. 모든 설정을 react-scripts 에 위임합니다.
create-react-app 실행하면 항상 최신 버전의 react-scripts 로 프로젝트가 생성되므로 새로 생성된 앱의 모든 새로운 기능과 개선 사항을 자동으로 얻을 수 있습니다.
기존 프로젝트를 새로운 버전의 react-scripts 로 업데이트하려면 변경 로그를 열고 현재 사용 중인 버전을 찾은 다음(확실하지 않은 경우 이 폴더에서 package.json 확인하세요) 최신 버전에 대한 마이그레이션 지침을 적용하세요. 버전.
대부분의 경우 package.json 에서 react-scripts 버전을 실행하고 이 폴더에서 npm install 실행하는 것으로 충분하지만 잠재적인 주요 변경 사항에 대해서는 변경 로그를 참조하는 것이 좋습니다.
우리는 여러분이 어려움 없이 react-scripts 업그레이드할 수 있도록 주요 변경 사항을 최소화하기 위해 최선을 다하고 있습니다.
우리는 항상 귀하의 의견에 열려 있습니다.
생성 후 프로젝트는 다음과 같아야 합니다.
my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
프로젝트를 빌드하려면 다음 파일이 정확한 파일 이름으로 존재해야 합니다 .
public/index.html 페이지 템플릿입니다.src/index.js 는 JavaScript 진입점입니다.다른 파일을 삭제하거나 이름을 바꿀 수 있습니다.
src 안에 하위 디렉터리를 만들 수 있습니다. 더 빠른 재구축을 위해 Webpack은 src 내부의 파일만 처리합니다.
JS 및 CSS 파일을 src 안에 넣어야 합니다. 그렇지 않으면 Webpack에서 해당 파일을 볼 수 없습니다.
public/index.html 에서는 public 내의 파일만 사용할 수 있습니다.
JavaScript 및 HTML의 자산을 사용하려면 아래 지침을 읽어보세요.
그러나 더 많은 최상위 디렉터리를 만들 수 있습니다.
프로덕션 빌드에는 포함되지 않으므로 문서화와 같은 용도로 사용할 수 있습니다.
프로젝트 디렉터리에서 다음을 실행할 수 있습니다.
npm start 개발 모드에서 앱을 실행합니다.
http://localhost:3000을 열어 브라우저에서 확인하세요.
수정하면 페이지가 다시 로드됩니다.
콘솔에도 린트 오류가 표시됩니다.
npm test 대화형 감시 모드에서 테스트 실행기를 시작합니다.
자세한 내용은 테스트 실행 섹션을 참조하세요.
npm run build build 폴더에 프로덕션용 앱을 빌드합니다.
프로덕션 모드에서 React를 올바르게 번들링하고 최상의 성능을 위해 빌드를 최적화합니다.
빌드가 축소되고 파일 이름에 해시가 포함됩니다.
앱을 배포할 준비가 되었습니다!
자세한 내용은 배포에 대한 섹션을 참조하세요.
npm run eject 참고: 이는 단방향 작업입니다. 한번 eject 되돌릴 수 없습니다!
빌드 도구 및 구성 선택 사항이 만족스럽지 않으면 언제든지 eject 수 있습니다. 이 명령은 프로젝트에서 단일 빌드 종속성을 제거합니다.
대신, 모든 구성 파일과 전이적 종속성(Webpack, Babel, ESLint 등)을 프로젝트에 바로 복사하므로 이를 완전히 제어할 수 있습니다. eject 제외한 모든 명령은 계속 작동하지만 복사된 스크립트를 가리키므로 조정할 수 있습니다. 이 시점에서 당신은 스스로입니다.
eject 사용할 필요는 없습니다. 엄선된 기능 세트는 소규모 및 중간 배포에 적합하므로 이 기능을 사용해야 한다는 의무감을 느껴서는 안 됩니다. 그러나 우리는 이 도구를 사용할 준비가 되었을 때 사용자 정의할 수 없다면 유용하지 않다는 것을 알고 있습니다.
기본적으로 생성된 프로젝트는 최신 버전의 React를 사용합니다.
지원되는 브라우저에 대한 자세한 내용은 React 설명서를 참조하세요.
이 프로젝트는 최신 JavaScript 표준의 상위 집합을 지원합니다.
ES6 구문 기능 외에도 다음도 지원합니다.
다양한 제안 단계에 대해 자세히 알아보세요.
약간의 주의를 기울여 실험적인 제안을 사용하는 것이 좋지만 Facebook은 제품 코드에서 이러한 기능을 많이 사용하므로 향후 이러한 제안이 변경될 경우 codemod를 제공할 계획입니다.
프로젝트에는 몇 가지 ES6 폴리필만 포함되어 있습니다 .
object-assign 통한 Object.assign() .promise 통한 Promise .whatwg-fetch 통해 fetch() 수행합니다. 런타임 지원이 필요한 다른 ES6+ 기능(예: Array.from() 또는 Symbol )을 사용하는 경우 적절한 폴리필을 수동으로 포함하고 있는지 또는 대상 브라우저가 이미 이를 지원하는지 확인하세요.
또한 for...of 또는 [...nonArrayValue] 와 같은 일부 최신 구문 기능을 사용하면 Babel이 ES6 런타임 기능에 의존하는 코드를 생성하고 폴리필 없이는 작동하지 않을 수 있습니다. 확실하지 않은 경우 Babel REPL을 사용하여 특정 구문이 어떻게 컴파일되는지 확인하세요.
즐겨 사용하는 텍스트 편집기에서 구문 강조를 구성하려면 관련 Babel 문서 페이지로 이동하여 지침을 따르세요. 가장 인기 있는 편집자 중 일부가 포함되어 있습니다.
참고: 이 기능은
[email protected]이상에서 사용할 수 있습니다.
또한 npm 3 이상에서만 작동합니다.
Sublime Text, Atom 및 Visual Studio Code를 포함한 일부 편집기는 ESLint용 플러그인을 제공합니다.
린팅에는 필요하지 않습니다. 터미널과 브라우저 콘솔에서 바로 linter 출력을 볼 수 있습니다. 그러나 린트 결과를 편집기에 바로 표시하려면 몇 가지 추가 단계를 수행할 수 있습니다.
먼저 편집기용 ESLint 플러그인을 설치해야 합니다. 그런 다음 .eslintrc 라는 파일을 프로젝트 루트에 추가합니다.
{
"extends" : "react-app"
}이제 편집자는 Linting 경고를 보고해야 합니다.
.eslintrc 파일을 추가로 편집하더라도 이러한 변경 사항은 편집기 통합에만 영향을 미칩니다 . 터미널 및 브라우저 내 Lint 출력에는 영향을 미치지 않습니다. Create React App은 의도적으로 일반적인 실수를 찾아내는 최소한의 규칙 세트를 제공하기 때문입니다.
프로젝트에 코딩 스타일을 적용하려면 ESLint 스타일 규칙 대신 Prettier를 사용하는 것이 좋습니다.
이 기능은 현재 Visual Studio Code 및 WebStorm에서만 지원됩니다.
Visual Studio Code 및 WebStorm은 Create React App을 통해 즉시 디버깅을 지원합니다. 이를 통해 개발자는 편집기를 떠나지 않고도 React 코드를 작성하고 디버그할 수 있으며, 가장 중요한 것은 도구 간에 전환할 필요가 없으므로 컨텍스트 전환이 최소화되는 지속적인 개발 워크플로를 가질 수 있다는 것입니다.
최신 버전의 VS Code 및 VS Code Chrome 디버거 확장 프로그램이 설치되어 있어야 합니다.
그런 다음 아래 블록을 launch.json 파일에 추가하고 앱 루트 디렉터리의 .vscode 폴더에 넣습니다.
{
"version" : " 0.2.0 " ,
"configurations" : [{
"name" : " Chrome " ,
"type" : " chrome " ,
"request" : " launch " ,
"url" : " http://localhost:3000 " ,
"webRoot" : " ${workspaceRoot}/src " ,
"sourceMapPathOverrides" : {
"webpack:///src/*" : " ${webRoot}/* "
}
}]
}참고: HOST 또는 PORT 환경 변수를 통해 조정한 경우 URL이 다를 수 있습니다.
npm start 실행하여 앱을 시작하고, F5 누르거나 녹색 디버그 아이콘을 클릭하여 VS Code에서 디버깅을 시작합니다. 이제 편집기에서 코드 작성, 중단점 설정, 코드 변경, 새로 수정된 코드 디버깅 등의 작업을 모두 수행할 수 있습니다.
VS 코드 디버깅에 문제가 있나요? 문제 해결 가이드를 참조하세요.
WebStorm 및 JetBrains IDE 지원 Chrome 확장 프로그램이 설치되어 있어야 합니다.
WebStorm 메뉴 Run 에서 Edit Configurations... 선택합니다. 그런 다음 + 클릭하고 JavaScript Debug 선택합니다. http://localhost:3000 URL 필드에 붙여넣고 구성을 저장합니다.
참고: HOST 또는 PORT 환경 변수를 통해 조정한 경우 URL이 다를 수 있습니다.
npm start 실행하여 앱을 시작한 다음 macOS에서는 ^D 누르고 Windows 및 Linux에서는 F9 누르거나 녹색 디버그 아이콘을 클릭하여 WebStorm에서 디버깅을 시작합니다.
동일한 방법으로 IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro 및 RubyMine에서 애플리케이션을 디버그할 수 있습니다.
Prettier는 JavaScript, CSS 및 JSON을 지원하는 독창적인 코드 포맷터입니다. Prettier를 사용하면 자동으로 작성하는 코드의 형식을 지정하여 프로젝트 내에서 코드 스타일을 보장할 수 있습니다. 자세한 내용은 Prettier의 GitHub 페이지를 참조하고 이 페이지에서 실제로 작동하는 모습을 확인하세요.
Git에서 커밋을 할 때마다 코드 형식을 지정하려면 다음 종속성을 설치해야 합니다.
npm install --save husky lint-staged prettier 또는 yarn 사용할 수도 있습니다.
yarn add husky lint-staged prettierhusky 사용하면 마치 npm 스크립트인 것처럼 githook을 쉽게 사용할 수 있습니다.lint-staged 사용하면 git의 staged 파일에서 스크립트를 실행할 수 있습니다. 자세한 내용은 lint-staged에 대한 이 블로그 게시물을 참조하세요.prettier 는 커밋 전에 실행할 JavaScript 포맷터입니다. 이제 프로젝트 루트의 package.json 에 몇 줄을 추가하여 모든 파일의 형식이 올바른지 확인할 수 있습니다.
scripts 섹션에 다음 줄을 추가합니다.
"scripts": {
+ "precommit": "lint-staged",
"start": "react-scripts start",
"build": "react-scripts build", 다음으로 package.json 에 'lint-staged' 필드를 추가합니다. 예를 들면 다음과 같습니다.
"dependencies": {
// ...
},
+ "lint-staged": {
+ "src/**/*.{js,jsx,json,css}": [
+ "prettier --single-quote --write",
+ "git add"
+ ]
+ },
"scripts": { 이제 커밋을 할 때마다 Prettier가 변경된 파일의 형식을 자동으로 지정합니다. ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}" 실행하여 처음으로 전체 프로젝트의 형식을 지정할 수도 있습니다.
다음으로 선호하는 편집기에 Prettier를 통합할 수 있습니다. Prettier GitHub 페이지에서 편집기 통합 섹션을 읽어보세요.
<title> 변경 생성된 프로젝트의 public 폴더에서 소스 HTML 파일을 찾을 수 있습니다. 제목을 "React App"에서 다른 제목으로 변경하려면 <title> 태그를 편집하세요.
일반적으로 public 폴더의 파일은 자주 편집하지 않습니다. 예를 들어 스타일시트 추가는 HTML을 건드리지 않고 수행됩니다.
콘텐츠에 따라 페이지 제목을 동적으로 업데이트해야 하는 경우 브라우저 document.title API를 사용할 수 있습니다. React 구성 요소에서 제목을 변경하려는 보다 복잡한 시나리오의 경우 타사 라이브러리인 React 헬멧을 사용할 수 있습니다.
프로덕션에서 앱에 대한 사용자 정의 서버를 사용하고 제목이 브라우저로 전송되기 전에 제목을 수정하려는 경우 이 섹션의 조언을 따를 수 있습니다. 또는 여기에서 다루는 JavaScript 번들을 로드하는 정적 HTML 파일로 각 페이지를 미리 빌드할 수 있습니다.
생성된 프로젝트에는 React 및 ReactDOM이 종속성으로 포함됩니다. 또한 Create React App에서 개발 종속성으로 사용하는 스크립트 세트도 포함되어 있습니다. npm 사용하여 다른 종속성(예: React Router)을 설치할 수 있습니다.
npm install --save react-router 또는 yarn 사용할 수도 있습니다.
yarn add react-router 이는 react-router 뿐만 아니라 모든 라이브러리에서 작동합니다.
이 프로젝트 설정은 Babel 덕분에 ES6 모듈을 지원합니다.
require() 및 module.exports 계속 사용할 수 있지만 대신 import 및 export 사용하는 것이 좋습니다.
예를 들어:
Button.js import React , { Component } from 'react' ;
class Button extends Component {
render ( ) {
// ...
}
}
export default Button ; // Don’t forget to use export default!DangerButton.js import React , { Component } from 'react' ;
import Button from './Button' ; // Import a component from another file
class DangerButton extends Component {
render ( ) {
return < Button color = "red" /> ;
}
}
export default DangerButton ;기본 내보내기와 명명된 내보내기의 차이점에 유의하세요. 이는 실수의 일반적인 원인입니다.
모듈이 단일 항목(예: 구성 요소)만 내보낼 때 기본 가져오기 및 내보내기를 계속 사용하는 것이 좋습니다. 이것이 export default Button 사용하고 import Button from './Button' 사용하면 얻을 수 있는 것입니다.
명명된 내보내기는 여러 기능을 내보내는 유틸리티 모듈에 유용합니다. 모듈에는 최대 하나의 기본 내보내기와 원하는 만큼 명명된 내보내기가 있을 수 있습니다.
ES6 모듈에 대해 자세히 알아보세요:
사용자가 사용하기 전에 전체 앱을 다운로드하는 대신, 코드 분할을 사용하면 코드를 작은 덩어리로 분할한 다음 요청 시 로드할 수 있습니다.
이 프로젝트 설정은 동적 import() 통한 코드 분할을 지원합니다. 제안은 3단계에 있습니다 import() 함수와 유사한 형식은 모듈 이름을 인수로 사용하고 항상 모듈의 네임스페이스 객체로 확인되는 Promise 를 반환합니다.
예는 다음과 같습니다.
moduleA.js const moduleA = 'Hello' ;
export { moduleA } ;App.js import React , { Component } from 'react' ;
class App extends Component {
handleClick = ( ) => {
import ( './moduleA' )
. then ( ( { moduleA } ) => {
// Use moduleA
} )
. catch ( err => {
// Handle failure
} ) ;
} ;
render ( ) {
return (
< div >
< button onClick = { this . handleClick } > Load </ button >
</ div >
) ;
}
}
export default App ; 이렇게 하면 moduleA.js 와 모든 고유 종속성이 사용자가 '로드' 버튼을 클릭한 후에만 로드되는 별도의 청크로 만들어집니다.
원하는 경우 async / await 구문과 함께 사용할 수도 있습니다.
React Router를 사용하는 경우 코드 분할을 사용하는 방법에 대한 이 튜토리얼을 확인하세요. 여기에서 동반 GitHub 저장소를 찾을 수 있습니다.
또한 React 문서의 코드 분할 섹션을 확인하세요.
이 프로젝트 설정에서는 모든 자산을 처리하기 위해 Webpack을 사용합니다. Webpack은 JavaScript를 넘어 import 개념을 "확장"하는 사용자 정의 방법을 제공합니다. JavaScript 파일이 CSS 파일에 종속된다는 것을 표현하려면 JavaScript 파일에서 CSS를 가져와야 합니다.
Button.css. Button {
padding : 20 px ;
}Button.js import React , { Component } from 'react' ;
import './Button.css' ; // Tell Webpack that Button.js uses these styles
class Button extends Component {
render ( ) {
// You can use them as regular CSS styles
return < div className = "Button" /> ;
}
}React에서는 이것이 필수는 아니지만 많은 사람들이 이 기능을 편리하다고 생각합니다. 여기에서 이 접근 방식의 이점을 읽을 수 있습니다. 그러나 이로 인해 코드가 Webpack보다 다른 빌드 도구 및 환경으로 이식성이 떨어집니다.
개발 중에 이러한 방식으로 종속성을 표현하면 스타일을 편집할 때 스타일을 즉시 다시 로드할 수 있습니다. 프로덕션에서는 모든 CSS 파일이 빌드 출력에서 하나의 축소된 .css 파일로 연결됩니다.
Webpack 관련 의미론을 사용하는 것이 걱정된다면 모든 CSS를 src/index.css 에 넣을 수 있습니다. 여전히 src/index.js 에서 가져오지만 나중에 다른 빌드 도구로 마이그레이션하는 경우 언제든지 해당 가져오기를 제거할 수 있습니다.
이 프로젝트 설정은 CSS를 축소하고 Autoprefixer를 통해 공급업체 접두사를 자동으로 추가하므로 걱정할 필요가 없습니다.
예를 들면 다음과 같습니다.
. App {
display : flex;
flex-direction : row;
align-items : center;
}다음과 같이 됩니다:
. App {
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-webkit-box-orient : horizontal;
-webkit-box-direction : normal;
-ms-flex-direction : row;
flex-direction : row;
-webkit-box-align : center;
-ms-flex-align : center;
align-items : center;
}어떤 이유로 자동 접두사를 비활성화해야 하는 경우 이 섹션을 따르세요.
일반적으로 여러 구성 요소에서 동일한 CSS 클래스를 재사용하지 않는 것이 좋습니다. 예를 들어 <AcceptButton> 및 <RejectButton> 구성 요소에서 .Button CSS 클래스를 사용하는 대신 <AcceptButton> 및 <RejectButton> 모두 렌더링할 수 있는 자체 .Button 스타일을 사용하여 <Button> 구성 요소를 생성하는 것이 좋습니다. 상속).
이 규칙을 따르면 믹스인 및 중첩과 같은 기능이 구성 요소 구성으로 대체되므로 CSS 전처리기의 유용성이 떨어지는 경우가 많습니다. 그러나 유용하다고 판단되면 CSS 전처리기를 통합할 수 있습니다. 이 연습에서는 Sass를 사용하지만 Less 또는 다른 대안을 사용할 수도 있습니다.
먼저 Sass용 명령줄 인터페이스를 설치해 보겠습니다.
npm install --save node-sass-chokidar 또는 yarn 사용할 수도 있습니다.
yarn add node-sass-chokidar 그런 다음 package.json 에서 scripts 에 다음 줄을 추가합니다.
"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",참고: 다른 전처리기를 사용하려면 전처리기 설명서에 따라
build-css및watch-css명령을 바꾸십시오.
이제 src/App.css 이름을 src/App.scss 로 바꾸고 npm run watch-css 실행할 수 있습니다. 감시자는 src 하위 디렉터리에서 모든 Sass 파일을 찾아 그 옆에 해당 CSS 파일을 만듭니다. 이 경우에는 src/App.css 덮어씁니다. src/App.js 여전히 src/App.css 가져오기 때문에 스타일은 애플리케이션의 일부가 됩니다. 이제 src/App.scss 편집할 수 있으며 src/App.css 다시 생성됩니다.
Sass 파일 간에 변수를 공유하려면 Sass 가져오기를 사용할 수 있습니다. 예를 들어 src/App.scss 및 기타 구성 요소 스타일 파일에는 @import "./shared.scss"; 변수 정의가 있습니다.
상대 경로를 사용하지 않고 파일 가져오기를 활성화하려면 package.json 의 명령에 --include-path 옵션을 추가하면 됩니다.
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
이렇게 하면 다음과 같은 가져오기를 수행할 수 있습니다.
@import ' styles/_colors.scss ' ; // assuming a styles directory under src/
@import ' nprogress/nprogress ' ; // importing a css file from the nprogress node module 이 시점에서 소스 제어에서 모든 CSS 파일을 제거하고 src/**/*.css .gitignore 파일에 추가할 수 있습니다. 일반적으로 빌드 제품을 소스 제어 외부에 유지하는 것이 좋습니다.
마지막 단계로 npm start 사용하여 watch-css 자동으로 실행하고 npm run build 의 일부로 build-css 실행하는 것이 편리할 수 있습니다. && 연산자를 사용하여 두 개의 스크립트를 순차적으로 실행할 수 있습니다. 그러나 두 스크립트를 병렬로 실행하는 크로스 플랫폼 방법은 없으므로 이를 위한 패키지를 설치하겠습니다.
npm install --save npm-run-all 또는 yarn 사용할 수도 있습니다.
yarn add npm-run-all 그런 다음 CSS 전처리기 명령을 포함하도록 start 및 build 스크립트를 변경할 수 있습니다.
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start-js": "react-scripts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build-js": "react-scripts build",
+ "build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
} 이제 npm start 및 npm run build 실행하면 Sass 파일도 빌드됩니다.
왜 node-sass-chokidar ?
node-sass 에 다음과 같은 문제가 있는 것으로 보고되었습니다.
node-sass --watch 가상 머신에서 또는 docker와 함께 사용될 때 특정 조건에서 성능 문제가 있는 것으로 보고되었습니다.
무한 스타일 컴파일 #1939
node-sass #1891 디렉토리에서 새 파일을 감지하는 데 문제가 있는 것으로 보고되었습니다.
node-sass-chokidar 이러한 문제를 해결하기 위해 여기에서 사용됩니다.
Webpack을 사용하면 이미지 및 글꼴과 같은 정적 자산을 사용하는 것이 CSS와 유사하게 작동합니다.
JavaScript 모듈에서 바로 파일을 import 수 있습니다. 이는 Webpack이 해당 파일을 번들에 포함하도록 지시합니다. CSS 가져오기와 달리 파일을 가져오면 문자열 값이 제공됩니다. 이 값은 코드에서 참조할 수 있는 최종 경로입니다(예: 이미지의 src 속성 또는 PDF 링크의 href .
서버에 대한 요청 수를 줄이기 위해 10,000바이트 미만의 이미지를 가져오면 경로 대신 데이터 URI가 반환됩니다. 이는 bmp, gif, jpg, jpeg 및 png 파일 확장자에 적용됩니다. #1153으로 인해 SVG 파일이 제외됩니다.
예는 다음과 같습니다.
import React from 'react' ;
import logo from './logo.png' ; // Tell Webpack this JS file uses this image
console . log ( logo ) ; // /logo.84287d09.png
function Header ( ) {
// Import result is the URL of your image
return < img src = { logo } alt = "Logo" /> ;
}
export default Header ;이렇게 하면 프로젝트가 빌드될 때 Webpack이 이미지를 빌드 폴더로 올바르게 이동하고 올바른 경로를 제공합니다.
이것은 CSS에서도 작동합니다.
. Logo {
background-image : url (. / logo.png);
} Webpack은 CSS에서 모든 상대 모듈 참조( ./ 로 시작)를 찾아 이를 컴파일된 번들의 최종 경로로 바꿉니다. 오타가 있거나 중요한 파일을 실수로 삭제한 경우 존재하지 않는 JavaScript 모듈을 가져올 때와 마찬가지로 컴파일 오류가 표시됩니다. 컴파일된 번들의 최종 파일 이름은 콘텐츠 해시에서 Webpack에 의해 생성됩니다. 나중에 파일 내용이 변경되면 Webpack은 프로덕션에서 다른 이름을 지정하므로 자산의 장기 캐싱에 대해 걱정할 필요가 없습니다.
이는 Webpack의 사용자 정의 기능이기도 합니다.
React에는 필수는 아니지만 많은 사람들이 이를 좋아합니다(그리고 React Native는 이미지에 유사한 메커니즘을 사용합니다).
정적 자산을 처리하는 다른 방법은 다음 섹션에 설명되어 있습니다.
public 폴더 사용참고: 이 기능은
[email protected]이상에서 사용할 수 있습니다.
public 폴더에는 HTML 파일이 포함되어 있어 페이지 제목 설정 등을 위해 조정할 수 있습니다. 컴파일된 코드가 포함된 <script> 태그는 빌드 프로세스 중에 자동으로 추가됩니다.
public 폴더에 다른 자산을 추가할 수도 있습니다.
일반적으로 대신 JavaScript 파일로 자산을 import 것이 좋습니다. 예를 들어 스타일시트 추가, 이미지 및 글꼴 추가에 대한 섹션을 참조하세요. 이 메커니즘은 다음과 같은 여러 가지 이점을 제공합니다.
그러나 모듈 시스템 외부에 자산을 추가하는 데 사용할 수 있는 탈출구가 있습니다.
public 폴더에 파일을 넣으면 Webpack에서 처리되지 않습니다 . 대신 그대로 빌드 폴더에 복사됩니다. public 폴더의 자산을 참조하려면 PUBLIC_URL 이라는 특수 변수를 사용해야 합니다.
index.html 내에서 다음과 같이 사용할 수 있습니다.
< link rel =" shortcut icon " href =" %PUBLIC_URL%/favicon.ico " > public 폴더 내의 파일만 %PUBLIC_URL% 접두어로 액세스할 수 있습니다. src 또는 node_modules 의 파일을 사용해야 하는 경우 해당 파일을 거기에 복사하여 이 파일을 빌드의 일부로 만들려는 의도를 명시적으로 지정해야 합니다.
npm run build 실행하면 Create React App은 %PUBLIC_URL% 올바른 절대 경로로 대체하므로 클라이언트 측 라우팅을 사용하거나 루트가 아닌 URL에서 호스팅하더라도 프로젝트가 작동합니다.
JavaScript 코드에서는 유사한 목적으로 process.env.PUBLIC_URL 사용할 수 있습니다.
render ( ) {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using `import` for getting asset URLs
// as described in “Adding Images and Fonts” above this section.
return < img src = { process . env . PUBLIC_URL + '/img/logo.png' } /> ;
}이 접근 방식의 단점을 염두에 두십시오.
public 폴더의 파일은 사후 처리되거나 축소되지 않습니다.public 폴더를 사용하는 경우 일반적으로 JavaScript에서 스타일시트, 이미지 및 글꼴을 가져오는 것이 좋습니다. public 폴더는 다음과 같이 덜 일반적인 경우에 대한 해결 방법으로 유용합니다.
manifest.webmanifest 와 같은 특정 이름의 파일이 필요합니다.pace.js 와 같은 작은 스크립트를 포함하려고 합니다.<script> 태그로 포함하는 것 외에는 다른 옵션이 없습니다. 전역 변수를 선언하는 <script> 를 추가하는 경우 해당 변수 사용에 대한 다음 섹션도 읽어야 합니다.
전역 변수를 정의하는 스크립트를 HTML 파일에 포함하고 코드에서 이러한 변수 중 하나를 사용하려고 하면 변수 정의를 볼 수 없기 때문에 linter가 오류를 표시합니다.
window 개체에서 전역 변수를 명시적으로 읽어 이를 방지할 수 있습니다. 예를 들면 다음과 같습니다.
const $ = window . $ ;이는 오타 때문이 아니라 의도적으로 전역 변수를 사용하고 있음을 분명하게 보여줍니다.
또는 // eslint-disable-line 뒤에 추가하여 linter가 모든 줄을 무시하도록 강제할 수 있습니다.
React Bootstrap을 React와 함께 사용할 필요는 없지만 Bootstrap을 React 앱과 통합하는 데 널리 사용되는 라이브러리입니다. 필요한 경우 다음 단계에 따라 Create React App과 통합할 수 있습니다.
npm에서 React Bootstrap 및 Bootstrap을 설치합니다. React Bootstrap에는 Bootstrap CSS가 포함되어 있지 않으므로 이것도 설치해야 합니다.
npm install --save react-bootstrap bootstrap@3 또는 yarn 사용할 수도 있습니다.
yarn add react-bootstrap bootstrap@3 src/index.js 파일 시작 부분에 부트스트랩 CSS를 가져오고 선택적으로 부트스트랩 테마 CSS를 가져옵니다.
import 'bootstrap/dist/css/bootstrap.css' ;
import 'bootstrap/dist/css/bootstrap-theme.css' ;
// Put any other imports below so that CSS from your
// components takes precedence over default styles. src/App.js 파일 또는 사용자 정의 구성 요소 파일 내에서 필수 React Bootstrap 구성 요소를 가져옵니다.
import { Navbar , Jumbotron , Button } from 'react-bootstrap' ; 이제 렌더링 메서드에 정의된 구성 요소 계층 내에서 가져온 React Bootstrap 구성 요소를 사용할 준비가 되었습니다. 다음은 React Bootstrap을 사용하여 App.js 다시 실행한 예입니다.
때로는 Bootstrap(또는 동등한 패키지)의 시각적 스타일을 조정해야 할 수도 있습니다.
우리는 다음과 같은 접근법을 제안합니다:
다음은 이러한 단계를 따르는 사용자 정의 부트스트랩을 추가하는 예입니다.
Flow는 버그가 적은 코드를 작성하는 데 도움이 되는 정적 유형 검사기입니다. 이 개념이 처음이라면 JavaScript에서 정적 유형을 사용하는 방법에 대한 소개를 확인하세요.
최신 버전의 Flow는 즉시 Create React App 프로젝트와 함께 작동합니다.
Create React App 프로젝트에 Flow를 추가하려면 다음 단계를 따르세요.
npm install --save flow-bin (또는 yarn add flow-bin )을 실행하세요.package.json 의 scripts 섹션에 "flow": "flow" 추가하세요.npm run flow init (또는 yarn flow init )을 실행하여 루트 디렉터리에 .flowconfig 파일을 만듭니다.// @flow 추가합니다(예: src/App.js ). 이제 npm run flow (또는 yarn flow )를 실행하여 파일에 유형 오류가 있는지 확인할 수 있습니다. 더 나은 통합 경험을 위해 선택적으로 Nuclide와 같은 IDE를 사용할 수 있습니다. 앞으로 우리는 이를 Create React App에 더욱 긴밀하게 통합할 계획입니다.
Flow에 대해 자세히 알아보려면 해당 설명서를 확인하세요.
Create React App은 특정 라우팅 솔루션을 규정하지 않지만 React Router가 가장 널리 사용되는 솔루션입니다.
추가하려면 다음을 실행하세요.
npm install --save react-router-dom 또는 yarn 사용할 수도 있습니다.
yarn add react-router-dom 사용해 보려면 src/App.js 의 모든 코드를 삭제하고 해당 웹 사이트의 예제로 바꾸세요. 기본 예제는 시작하기에 좋은 곳입니다.
앱을 배포하기 전에 클라이언트 측 라우팅을 지원하도록 프로덕션 서버를 구성해야 할 수도 있습니다.
참고: 이 기능은
[email protected]이상에서 사용할 수 있습니다.
프로젝트는 JS 파일에서 로컬로 선언된 것처럼 환경에서 선언된 변수를 사용할 수 있습니다. 기본적으로 NODE_ENV 정의되어 있고 REACT_APP_ 로 시작하는 다른 환경 변수가 있습니다.
환경 변수는 빌드 시간 동안 포함됩니다 . Create React App은 정적 HTML/CSS/JS 번들을 생성하므로 런타임에 이를 읽을 수 없습니다. 런타임에 이를 읽으려면 여기에 설명된 것처럼 HTML을 서버의 메모리에 로드하고 런타임에 자리 표시자를 바꿔야 합니다. 또는 앱을 변경할 때마다 서버에서 앱을 다시 빌드할 수 있습니다.
참고:
REACT_APP_으로 시작하는 사용자 정의 환경 변수를 생성해야 합니다. 동일한 이름을 가질 수 있는 머신에서 개인 키가 실수로 노출되는 것을 방지하기 위해NODE_ENV제외한 다른 모든 변수는 무시됩니다. 환경 변수를 변경하려면 개발 서버가 실행 중인 경우 다시 시작해야 합니다.
이러한 환경 변수는 process.env 에 정의됩니다. 예를 들어, REACT_APP_SECRET_CODE 라는 환경 변수가 있으면 JS에서 process.env.REACT_APP_SECRET_CODE 로 노출됩니다.
NODE_ENV 라는 특별한 내장 환경 변수도 있습니다. process.env.NODE_ENV 에서 읽을 수 있습니다. npm start 실행하면 항상 'development' 와 같고, npm test 실행하면 항상 'test' 와 같고, npm run build 실행하여 프로덕션 번들을 만들면 항상 'production' 과 같습니다. . NODE_ENV 수동으로 재정의할 수 없습니다. 이를 통해 개발자가 실수로 느린 개발 빌드를 프로덕션에 배포하는 것을 방지할 수 있습니다.
이러한 환경 변수는 프로젝트가 배포된 위치에 따라 조건부로 정보를 표시하거나 버전 제어 외부에 있는 민감한 데이터를 사용하는 데 유용할 수 있습니다.
먼저 환경 변수를 정의해야 합니다. 예를 들어 <form> 내부 환경에 정의된 비밀을 사용하고 싶다고 가정해 보겠습니다.
render ( ) {
return (
< div >
< small > You are running this application in < b > { process . env . NODE_ENV } </ b > mode. </ small >
< form >
< input type = "hidden" defaultValue = { process . env . REACT_APP_SECRET_CODE } />
</ form >
</ div >
) ;
} 빌드 중에 process.env.REACT_APP_SECRET_CODE REACT_APP_SECRET_CODE 환경 변수의 현재 값으로 대체됩니다. NODE_ENV 변수가 자동으로 설정된다는 점을 기억하세요.
브라우저에 앱을 로드하고 <input> 을 검사하면 해당 값이 abcdef 로 설정된 것을 볼 수 있으며 굵은 텍스트는 npm start 사용 시 제공되는 환경을 표시합니다.
< div >
< small > You are running this application in < b > development </ b > mode. </ small >
< form >
< input type =" hidden " value =" abcdef " />
</ form >
</ div > 위의 양식은 환경에서 REACT_APP_SECRET_CODE 라는 변수를 찾고 있습니다. 이 값을 사용하려면 환경에서 정의해야 합니다. 이는 셸에서 또는 .env 파일에서 두 가지 방법을 사용하여 수행할 수 있습니다. 이 두 가지 방법 모두 다음 몇 섹션에서 설명됩니다.
NODE_ENV 에 대한 액세스 권한은 조건부로 작업을 수행하는 데에도 유용합니다.
if ( process . env . NODE_ENV !== 'production' ) {
analytics . disable ( ) ;
} npm run build 사용하여 앱을 컴파일하면 축소 단계에서 이 조건이 제거되고 결과 번들은 더 작아집니다.
참고: 이 기능은
[email protected]이상에서 사용할 수 있습니다.
public/index.html 에서 REACT_APP_ 으로 시작하는 환경 변수에 액세스할 수도 있습니다. 예를 들어:
< title > %REACT_APP_WEBSITE_NAME% </ title >위 섹션의 주의 사항이 적용됩니다.
NODE_ENV 및 PUBLIC_URL ) 외에도 변수 이름이 작동하려면 REACT_APP_ 로 시작해야 합니다.환경 변수 정의는 OS마다 다를 수 있습니다. 이 방식은 셸 세션이 지속되는 동안 일시적이라는 점을 아는 것도 중요합니다.
set " REACT_APP_SECRET_CODE = abcdef " && npm start(참고: 후행 공백을 방지하려면 변수 할당을 따옴표로 묶어야 합니다.)
( $ env: REACT_APP_SECRET_CODE = " abcdef " ) -and (npm start)REACT_APP_SECRET_CODE=abcdef npm start.env 에 개발 환경 변수 추가참고: 이 기능은
[email protected]이상에서 사용할 수 있습니다.
영구 환경 변수를 정의하려면 프로젝트 루트에 .env 라는 파일을 만듭니다.
REACT_APP_SECRET_CODE=abcdef
참고:
REACT_APP_으로 시작하는 사용자 정의 환경 변수를 생성해야 합니다. 동일한 이름을 가질 수 있는 머신에서 개인 키가 실수로 노출되는 것을 방지하기 위해NODE_ENV제외한 다른 모든 변수는 무시됩니다. 환경 변수를 변경하려면 개발 서버가 실행 중인 경우 다시 시작해야 합니다.
.env 파일은 소스 제어에 체크인 해야 합니다 ( .env*.local 제외).
.env 파일을 사용할 수 있나요?참고: 이 기능은
[email protected]이상에서 사용할 수 있습니다 .
.env : 기본값..env.local : 로컬 재정의. 이 파일은 테스트를 제외한 모든 환경에 로드됩니다..env.development , .env.test , .env.production : 환경별 설정입니다..env.development.local , .env.test.local , .env.production.local : 환경별 설정을 로컬로 재정의합니다.왼쪽 파일이 오른쪽 파일보다 우선순위가 높습니다.
npm start : .env.development.local , .env.development , .env.local , .envnpm run build : .env.production.local , .env.production , .env.local , .envnpm test : .env.test.local , .env.test , .env (참고: .env.local 누락됨) 이러한 변수는 시스템이 명시적으로 설정하지 않은 경우 기본값으로 작동합니다.
자세한 내용은 dotenv 문서를 참고하세요.
참고: 개발을 위해 환경 변수를 정의하는 경우 CI 및/또는 호스팅 플랫폼에서도 이러한 변수를 정의해야 할 가능성이 높습니다. 이를 수행하는 방법은 해당 문서를 참조하십시오. 예를 들어 Travis CI 또는 Heroku에 대한 설명서를 참조하세요.
.env 에서 환경 변수 확장참고: 이 기능은
[email protected]이상에서 사용할 수 있습니다.
.env 파일에서 사용할 수 있도록 컴퓨터에 이미 있는 변수를 확장합니다(dotenv-expand 사용).
예를 들어 환경 변수 npm_package_version 을 가져오려면 다음을 수행합니다.
REACT_APP_VERSION=$npm_package_version
# also works:
# REACT_APP_VERSION=${npm_package_version}
또는 현재 .env 파일에 로컬 변수를 확장합니다.
DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar
많은 인기있는 라이브러리가 문서에 데코레이터를 사용합니다.
React App 만들기는 현재 Decorator Syntax를 지원하지 않습니다.
그러나 많은 경우 데코레이터없이 장식 자 기반 코드를 다시 작성할 수 있습니다.
참조는이 두 스레드를 참조하십시오.
React App 만들기는 사양이 안정적인 단계로 발전 할 때 데코레이터 지원을 추가합니다.
React는 데이터 페치에 대한 특정 접근 방식을 규정하지 않지만 사람들은 일반적으로 Axios 또는 브라우저에서 제공하는 fetch() API와 같은 라이브러리를 사용합니다. 편리하게, React App 만들기는 fetch() 용 폴리 필드가 포함되어 있으므로 브라우저 지원에 대해 걱정하지 않고 사용할 수 있습니다.
글로벌 fetch 기능을 사용하면 AJAX 요청을 쉽게 만들 수 있습니다. URL을 입력으로 사용하고 Response 객체로 해결하는 Promise 반환합니다. fetch 에 대한 자세한 내용은 여기를 참조하십시오.
이 프로젝트에는 또한 약속/A+의 완전한 구현을 제공하는 Promise Polyfill도 포함되어 있습니다. 약속은 비동기 작업의 최종 결과를 나타내며 여기 및 여기에서 약속에 대한 자세한 정보를 찾을 수 있습니다. Axios와 fetch() 는 후드 아래 약속을 사용합니다. async / await 구문을 사용하여 콜백 중첩을 줄일 수도 있습니다.
React 웹 사이트의 FAQ 항목에서 React 구성 요소에서 AJAX 요청을 작성하는 것에 대해 자세히 알아볼 수 있습니다.
이 튜토리얼을 사용하면 다른 포트에서 API 백엔드와 앱을 통합하여 fetch() 사용하여 액세스 할 수 있습니다.
이 튜토리얼을 확인하십시오. 동반자 Github 저장소를 여기에서 찾을 수 있습니다.
이 튜토리얼을 확인하십시오. 동반자 Github 저장소를 여기에서 찾을 수 있습니다.
참고 :이 기능은
[email protected]이상으로 제공됩니다.
사람들은 종종 백엔드 구현과 동일한 호스트 및 포트의 프론트 엔드 리셉션 앱을 제공합니다.
예를 들어, 앱이 배포 된 후에는 프로덕션 설정이 다음과 같이 보일 수 있습니다.
/ - static server returns index.html with React app
/todos - static server returns index.html with React app
/api/todos - server handles any /api/* requests using the backend implementation
이러한 설정은 필요하지 않습니다 . 그러나 이와 같은 설정이 있는 경우 개발 중에 다른 호스트 또는 포트로 리디렉션하는 것에 대해 걱정하지 않고 fetch('/api/todos') 와 같은 요청을 작성하는 것이 편리합니다.
개발 서버에 개발중인 API 서버에 알 수없는 요청을 프록시하도록 지시하려면 package.json 에 proxy 필드를 추가하십시오.
"proxy" : "http://localhost:4000" , 이런 식으로, 개발 중 fetch('/api/todos') 오면 개발 서버는 그것이 정적 자산이 아니라는 것을 인식하고 http://localhost:4000/api/todos 에 요청을 폴백으로 프록시합니다. 개발 서버는 Accept 헤더에서 프록시에 text/html 없이 요청을 보내려고 시도합니다.
편리하게, 이것은 개발 중에 이와 같은 CORS 문제와 오류 메시지를 피합니다.
Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
proxy 는 ( npm start 과 함께) 개발에만 영향을 미치며, /api/todos 와 같은 URL이 생산에서 올바른 것을 가리 키도록하는 것은 귀하에게 달려 있습니다. /api 접두사를 사용할 필요가 없습니다. text/html 수락 헤더가없는 인식되지 않은 요청은 지정된 proxy 로 리디렉션됩니다.
proxy 옵션은 HTTP, HTTPS 및 WebSocket 연결을 지원합니다.
proxy 옵션이 충분히 유연 하지 않으면 대신 할 수 있습니다.
proxy 옵션을 활성화하면 더 엄격한 호스트 점검 세트를 선택합니다. 원격 호스트에 백엔드를 열어두면 컴퓨터가 DNS 리딩 공격에 취약 해지므로 필요합니다. 이 문제는이 기사 와이 문제에 대해 설명합니다.
이것은 localhost 에서 개발할 때 영향을 미치지 않아야하지만 여기에 설명 된 것처럼 원격으로 개발하면 proxy 옵션을 활성화 한 후 브라우저 에서이 오류가 표시됩니다.
잘못된 호스트 헤더
이를 해결하려면 프로젝트의 루트에있는 .env.development 라는 파일에 대중 개발 호스트를 지정할 수 있습니다.
HOST=mypublicdevhost.com
지금 개발 서버를 다시 시작하고 지정된 호스트에서 앱을로드하면 작동해야합니다.
여전히 문제가 있거나 클라우드 편집기와 같은 이국적인 환경을 사용하는 경우 .env.development.local 에 줄을 추가하여 호스트 점검을 완전히 우회 할 수 있습니다. 이것은 위험하고 악의적 인 웹 사이트에서 기계를 원격 코드 실행에 노출시킵니다.
# NOTE: THIS IS DANGEROUS!
# It exposes your machine to attacks from the websites you visit.
DANGEROUSLY_DISABLE_HOST_CHECK=true
우리는이 접근법을 권장하지 않습니다.
참고 :이 기능은
[email protected]이상으로 제공됩니다.
proxy 옵션이 충분히 유연 하지 않은 경우 다음 양식 ( package.json )의 개체를 지정할 수 있습니다.
구성 값 http-proxy-middleware 또는 http-proxy 지원을 지정할 수도 있습니다.
{
// ...
"proxy" : {
"/api" : {
"target" : "<url>" ,
"ws" : true
// ...
}
}
// ...
} 이 경로와 일치하는 모든 요청은 예외가 아닙니다. 여기에는 표준 proxy 옵션이 프록시가 아닌 text/html 에 대한 요청이 포함됩니다.
여러 프록시를 지정 해야하는 경우 추가 항목을 지정하여 그렇게 할 수 있습니다. 일치는 정규 표현식이므로 Regexp를 사용하여 여러 경로와 일치 할 수 있습니다.
{
// ...
"proxy" : {
// Matches any request starting with /api
"/api" : {
"target" : "<url_1>" ,
"ws" : true
// ...
} ,
// Matches any request starting with /foo
"/foo" : {
"target" : "<url_2>" ,
"ssl" : true ,
"pathRewrite" : {
"^/foo" : "/foo/beta"
}
// ...
} ,
// Matches /bar/abc.html but not /bar/sub/def.html
"/bar/[^/]*[.]html" : {
"target" : "<url_3>" ,
// ...
} ,
// Matches /baz/abc.html and /baz/sub/def.html
"/baz/.*/.*[.]html" : {
"target" : "<url_4>"
// ...
}
}
// ...
}WebSocket 프록시를 설정할 때 알아야 할 추가 고려 사항이 있습니다.
Socket.io와 같은 WebSocket 엔진을 사용하는 경우 프록시 대상으로 사용할 수있는 Socket.io 서버를 실행해야합니다. Socket.io는 표준 WebSocket 서버에서 작동하지 않습니다. 구체적으로, socket.io가 webSocket.org echo 테스트와 함께 작동 할 것으로 기대하지 마십시오.
socket.io 서버를 설정하는 데 사용할 수있는 좋은 설명서가 있습니다.
표준 WebSockets는 표준 WebSocket 서버 및 WebSocket.org Echo 테스트에서 작동 합니다 . 브라우저에 기본 웹 소켓이있는 서버 용 WS와 같은 라이브러리를 사용할 수 있습니다.
어느 쪽이든, package.json 에서 WebSocket 요청을 수동으로 프록시 할 수 있습니다.
{
// ...
"proxy" : {
"/socket" : {
// Your compatible WebSocket server
"target" : "ws://<socket_url>" ,
// Tell http-proxy-middleware that this is a WebSocket proxy.
// Also allows you to proxy WebSocket requests without an additional HTTP request
// https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
"ws" : true
// ...
}
}
// ...
} 참고 :이 기능은
[email protected]이상으로 제공됩니다.
DEV 서버가 HTTPS를 통해 페이지를 제공해야 할 수도 있습니다. 이것이 유용 할 수있는 특정 사례 중 하나는 API 서버 자체가 HTTPS를 제공 할 때 "프록시"기능을 API 서버에 대한 프록시 요청에 사용하는 경우입니다.
이렇게하려면 HTTPS 환경 변수를 true 로 설정 한 다음 npm start 에서 평소와 같이 DEV 서버를 시작하십시오.
set HTTPS = true && npm start ( $ env: HTTPS = $true ) -and (npm start)(참고 : 공백의 부족은 의도적입니다.)
HTTPS=true npm start서버는 자체 서명 된 인증서를 사용하므로 웹 브라우저에는 페이지에 액세스 할 때 경고가 거의 표시됩니다.
<meta> 태그 생성 Create React App은 서버 렌더링을 지원하지 않으므로 <meta> 태그를 동적으로 만드는 방법과 현재 URL을 반영하는 방법이 궁금 할 수 있습니다. 이를 해결하려면 다음과 같이 자리 소유자를 HTML에 추가하는 것이 좋습니다.
<!doctype html >
< html lang =" en " >
< head >
< meta property =" og:title " content =" __OG_TITLE__ " >
< meta property =" og:description " content =" __OG_DESCRIPTION__ " > 그런 다음 서버에서 사용하는 백엔드에 관계없이 index.html 메모리로 읽고 __OG_TITLE__ , __OG_DESCRIPTION__ 및 현재 URL에 따라 값으로 바꿀 수 있습니다. HTML에 안전하게 보관할 수 있도록 보간 된 값을 소독하고 탈출하십시오!
노드 서버를 사용하는 경우 클라이언트와 서버 간의 경로 일치 로직을 공유 할 수도 있습니다. 그러나 복제는 간단한 경우에도 잘 작동합니다.
정적 호스팅 제공 업체로 build 호스팅하는 경우 응용 프로그램에서 각 경로에 대한 HTML 페이지 또는 상대 링크에 대한 HTML 페이지를 생성하여 REACT-SNAPSHOT 또는 React-SNAP를 사용하여 호출 할 수 있습니다. 이 페이지는 JavaScript 번들이로드되었을 때 매끄럽게 활성화되거나 "수화"됩니다.
정적 호스팅 외부 에서이 사용을 사용하여 경로를 생성하고 캐싱 할 때 서버에서 압력을 가할 수있는 기회도 있습니다.
사전 렌더링의 주요 장점은 JavaScript 번들이 성공적으로 다운로드되는지 여부에 관계없이 HTML 페이로드 로 각 페이지의 핵심 컨텐츠를 얻는 것입니다. 또한 응용 프로그램의 각 경로가 검색 엔진에 의해 픽업 될 가능성이 높아집니다.
여기에서 제로 구성 프리 렌더링 (스냅 샷이라고도 함)에 대한 자세한 내용을 읽을 수 있습니다.
이전 섹션과 마찬가지로 전역 변수를 주입하는 HTML의 일부 자리 표시자를 남겨 둘 수 있습니다.
< ! doctype html >
< html lang = "en" >
< head >
< script >
window.SERVER_DATA = __SERVER_DATA__;
</ script > 그런 다음 서버에서 응답을 보내기 전에 __SERVER_DATA__ 실제 데이터의 JSON으로 바꿀 수 있습니다. 그런 다음 클라이언트 코드는 window.SERVER_DATA 읽고 사용하여 사용할 수 있습니다. 앱을 XSS 공격에 취약하게 만들기 때문에 JSON을 클라이언트에게 보내기 전에 JSON을 소독하십시오.
참고 :이 기능은
[email protected]이상으로 제공됩니다.
이전 프로젝트에서 활성화하는 방법을 배우려면 마이그레이션 가이드를 읽으십시오!
React 앱 생성 Jest를 테스트 러너로 사용합니다. 이 통합을 준비하기 위해, 우리는 농담을 크게 개조 했으므로 몇 년 전에 나쁜 소식을 들었다면 다시 시도하십시오.
Jest는 노드 기반 러너입니다. 이는 테스트가 항상 실제 브라우저가 아닌 노드 환경에서 실행됨을 의미합니다. 이를 통해 빠른 반복 속도를 활성화하고 플라크 니스를 방지 할 수 있습니다.
Jest는 JSDOM 덕분에 window 와 같은 브라우저 글로벌을 제공하지만 실제 브라우저 동작의 근사치 일뿐입니다. Jest는 Dom Quirks가 아닌 논리 및 구성 요소의 단위 테스트에 사용됩니다.
필요한 경우 브라우저 엔드 투 엔드 테스트에 별도의 도구를 사용하는 것이 좋습니다. 그것들은 React App 만들기의 범위를 벗어납니다.
Jest는 다음과 같은 인기있는 이름 지정 규칙이있는 테스트 파일을 찾을 것입니다.
__tests__ 폴더에 .js 접미사가있는 파일..test.js 접미사가있는 파일..spec.js 접미사가있는 파일. .test.js / .spec.js 파일 (또는 __tests__ 폴더)은 src 상단 레벨 폴더 아래의 모든 깊이에 위치 할 수 있습니다.
테스트 파일 (또는 __tests__ 폴더)을 테스트중인 코드 옆에 넣어 상대 가져 오기가 더 짧게 나타나는 것이 좋습니다. 예를 들어, App.test.js 및 App.js 동일한 폴더에 있으면 테스트는 긴 상대 경로 대신 import App from './App' 합니다. Coleocation은 또한 대규모 프로젝트에서 더 빠르게 테스트를 찾는 데 도움이됩니다.
npm test 실행하면 Jest가 시계 모드에서 시작됩니다. 파일을 저장할 때마다 npm start 코드를 다시 컴파일하는 것처럼 테스트가 다시 실행됩니다.
감시자는 모든 테스트를 실행하거나 검색 패턴에 초점을 맞출 수있는 대화식 명령 줄 인터페이스가 포함되어 있습니다. 이 방식으로 설계되어 열린 상태로 유지하고 빠른 재창조를 즐길 수 있습니다. “시계 사용법”에서 명령을 배울 수 있습니다.마다 감시자는 매번 실행 한 후 인쇄합니다.
기본적으로 npm test 실행할 때 Jest는 마지막 커밋 이후 변경된 파일과 관련된 테스트 만 실행합니다. 테스트 수에 관계없이 테스트를 빠르게 실행하도록 설계된 최적화입니다. 그러나 테스트를 통과하지 않는 코드를 자주 커밋하지 않는다고 가정합니다.
Jest는 항상 마지막 커밋 이후 변경된 파일과 관련된 테스트 만 실행했다고 명시 적으로 언급합니다. 시계 모드에서 a 눌러 Jest가 모든 테스트를 실행하도록 강요 할 수도 있습니다.
JEST는 항상 지속적인 통합 서버에서 모든 테스트를 실행하거나 프로젝트가 GIT 또는 Mercurial Repository 내부에 있지 않은 경우 항상 실행됩니다.
테스트를 만들려면 테스트 이름과 코드가있는 it() (또는 test() ) 블록을 추가하십시오. 논리 그룹화를 위해 describe() 블록에 선택적으로 래핑 할 수 있지만 필요하지도 권장되지 않습니다.
Jest는 주장을하기위한 내장 expect() 글로벌 기능을 제공합니다. 기본 테스트는 다음과 같습니다.
import sum from './sum' ;
it ( 'sums numbers' , ( ) => {
expect ( sum ( 1 , 2 ) ) . toEqual ( 3 ) ;
expect ( sum ( 2 , 2 ) ) . toEqual ( 4 ) ;
} ) ; JEST가 지원하는 모든 expect() 매칭자는 여기에 광범위하게 문서화되어 있습니다.
jest.fn() 및 expect(fn).toBeCalled() 사용하여 "스파이"또는 모의 함수를 만듭니다.
광범위한 구성 요소 테스트 기술이 있습니다. 이들은 "연기 테스트"에서 구성 요소가 던지지 않고 렌더링하고 얕은 렌더링 및 테스트, 구성 요소 수명주기 및 상태 변경에 이르기까지 다양합니다.
다른 프로젝트는 구성 요소가 얼마나 자주 변경되는지, 그리고 얼마나 많은 논리를 포함하는지에 따라 다른 테스트 트레이드 오프를 선택합니다. 아직 테스트 전략을 결정하지 않은 경우 구성 요소에 대한 간단한 연기 테스트를 시작하는 것이 좋습니다.
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
const div = document . createElement ( 'div' ) ;
ReactDOM . render ( < App /> , div ) ;
} ) ; 이 테스트는 구성 요소를 사용하고 렌더링 중에 던지지 않았는지 확인합니다. 이와 같은 테스트는 아주 적은 노력으로 많은 가치를 제공하므로 시작점으로 훌륭합니다. 이것은 src/App.test.js 에서 찾을 수있는 테스트입니다.
구성 요소가 변경되어 버그가 발생하면 애플리케이션에서 테스트 할 가치가있는 부분에 대한 더 깊은 통찰력을 얻게됩니다. 특정 예상 출력 또는 동작을 주장하는 더 많은 특정 테스트를 도입하기에 좋은시기 일 수 있습니다.
그들이 렌더링하는 아동 구성 요소와 분리하여 구성 요소를 테스트하려면 효소에서 shallow() 렌더링 API를 사용하는 것이 좋습니다. 설치하려면 실행 :
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer 또는 yarn 사용할 수 있습니다.
yarn add enzyme enzyme-adapter-react-16 react-test-renderer효소 3에서 사용중인 React 버전에 해당하는 어댑터와 함께 효소를 설치해야합니다. (위의 예는 RECT 16의 어댑터를 사용합니다.)
어댑터는 또한 글로벌 설정 파일에서 구성해야합니다.
src/setupTests.js import { configure } from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
configure ( { adapter : new Adapter ( ) } ) ;참고 :
src/setupTests.js작성하기 전에 "꺼내기"로 결정한 경우 rendingpackage.json파일에는 참조가 포함되지 않습니다. 배출 후 이것을 추가하는 방법을 배우려면 여기를 읽으십시오.
이제 연기 테스트를 작성할 수 있습니다.
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
shallow ( < App /> ) ;
} ) ; ReactDOM.render() 사용한 이전 연기 테스트와 달리이 테스트는 <App> 만 렌더링하고 더 깊어지지 않습니다. 예를 들어, <App> 자체가 던지는 <Button> 을 렌더링 하더라도이 테스트는 통과합니다. 얕은 렌더링은 고립 된 단위 테스트에 적합하지만 구성 요소가 올바르게 통합되도록 전체 렌더링 테스트를 만들고 싶을 수도 있습니다. 효소는 mount() 로 전체 렌더링을 지원하며 상태 변경 및 구성 요소 수명주기를 테스트하는 데 사용할 수도 있습니다.
더 많은 테스트 기술을 위해 효소 문서를 읽을 수 있습니다. 효소 문서화는 어설 션을 위해 Chai와 Sinon을 사용하지만 Jest는 스파이에 내장 된 expect() 및 jest.fn() 제공하기 때문에 사용할 필요는 없습니다.
다음은 JEST 매칭을 사용하도록 다시 작성한 특정 출력을 주장하는 효소 문서의 예입니다.
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders welcome message' , ( ) => {
const wrapper = shallow ( < App /> ) ;
const welcome = < h2 > Welcome to React </ h2 > ;
// expect(wrapper.contains(welcome)).to.equal(true);
expect ( wrapper . contains ( welcome ) ) . toEqual ( true ) ;
} ) ; 모든 농담 경기자는 여기에 광범위하게 문서화되어 있습니다.
그럼에도 불구하고 아래에 설명 된대로 원하는 경우 chai와 같은 타사 어설 션 라이브러리를 사용할 수 있습니다.
또한 Jest-Enzyme이 읽을 수있는 매칭을 사용하여 테스트를 단순화하는 데 도움이 될 수 있습니다. 위에는 코드가 contains .
expect ( wrapper ) . toContainReact ( welcome ) 이를 가능하게하려면 jest-enzyme 설치하십시오.
npm install --save jest-enzyme 또는 yarn 사용할 수 있습니다.
yarn add jest-enzyme src/setupTests.js 에서 가져 오려면 모든 테스트에서 매치자를 사용할 수 있도록합니다.
import 'jest-enzyme' ; expect() 및 jest.fn() 스파이에 사용하는 것이 좋습니다. 당신이 그들과 관련된 문제가 있다면, 농담에 대해 제출하십시오. 우리는 예를 들어 JSX와 같은 반응 요소를 예를 들어 RECT에 더 나은 반응을 유지하기 위해 계속 만들려고합니다.
그러나 Chai 및 Sinon과 같은 다른 라이브러리에 익숙하거나 포트 오버를 사용하는 기존 코드가있는 경우 일반적으로 다음과 같이 가져올 수 있습니다.
import sinon from 'sinon' ;
import { expect } from 'chai' ;그런 다음 평소처럼 테스트에서 사용하십시오.
참고 :이 기능은
[email protected]이상으로 제공됩니다.
앱에서 테스트에서 조롱 해야하는 브라우저 API를 사용하거나 테스트를 실행하기 전에 전역 설정이 필요한 경우 src/setupTests.js 프로젝트에 추가하십시오. 테스트를 실행하기 전에 자동으로 실행됩니다.
예를 들어:
src/setupTests.js const localStorageMock = {
getItem : jest . fn ( ) ,
setItem : jest . fn ( ) ,
clear : jest . fn ( )
} ;
global . localStorage = localStorageMock참고 :
src/setupTests.js작성하기 전에 "꺼내기"로 결정한 경우 rendingpackage.json파일에는 참조가 포함되지 않으므로 Jest 구성에서 속성setupTestFrameworkScriptFile수동으로 작성해야합니다. 다음과 같은 것 :
"jest" : { // ... "setupTestFrameworkScriptFile" : "<rootDir>/src/setupTests.js" }
it() xit() 로 바꾸어 테스트를 실행하는 것에서 일시적으로 제외 할 수 있습니다.
마찬가지로 fit() 하면 다른 테스트를 실행하지 않고 특정 테스트에 집중할 수 있습니다.
Jest에는 ES6과 잘 어울리고 구성이 필요하지 않은 통합 커버리지 리포터가 있습니다.
npm test -- --coverage (중간에 참고 -- 중간)을 실행하여 다음과 같은 적용 범위 보고서를 포함하십시오.
테스트는 적용 범위에 따라 훨씬 느리게 실행되므로 일반 워크 플로와 별도로 실행하는 것이 좋습니다.
Package.json의 농담 구성에 다음 지원 키 중 하나를 추가하여 기본 농담 커버리지 구성을 재정의 할 수 있습니다.
지원되는 재정의 :
collectCoverageFromcoverageReporterscoverageThresholdsnapshotSerializerspackage.json 예제 :
{
"name" : " your-package " ,
"jest" : {
"collectCoverageFrom" : [
" src/**/*.{js,jsx} " ,
" !<rootDir>/node_modules/ " ,
" !<rootDir>/path/to/dir/ "
],
"coverageThreshold" : {
"global" : {
"branches" : 90 ,
"functions" : 90 ,
"lines" : 90 ,
"statements" : 90
}
},
"coverageReporters" : [ " text " ],
"snapshotSerializers" : [ " my-serializer-module " ]
}
} 기본적으로 npm test 대화식 CLI로 감시자를 실행합니다. 그러나 CI 라는 환경 변수를 설정하여 테스트를 한 번 실행하고 프로세스를 완료하도록 강요 할 수 있습니다.
npm run build 사용하여 응용 프로그램 빌드를 작성할 때 빌드 라이터 경고는 기본적으로 확인되지 않습니다. npm test 와 마찬가지로, 환경 변수 CI 설정하여 빌드를 강제로 라이터 경고 점검을 수행 할 수 있습니다. 경고가 발생하면 빌드가 실패합니다.
인기있는 CI 서버는 이미 기본적으로 환경 변수 CI 설정했지만 직접 수행 할 수 있습니다.
.travis.yml 파일을 추가하십시오. language: node_js
node_js:
- 6
cache:
directories:
- node_modules
script:
- npm run build
- npm test
이 기사를 따라 React App 프로젝트를 만들어 CircleCi를 설정하십시오.
set CI = true && npm test set CI = true && npm run build(참고 : 공백의 부족은 의도적입니다.)
( $ env: CI = $true ) -and (npm test)( $ env: CI = $true ) -and (npm run build)CI=true npm test CI=true npm run build테스트 명령은 Jest가 감시자를 시작하는 대신 한 번 테스트를 한 번 실행하도록 강요합니다.
개발 중에 자주이 작업을 수행하고 있다면, 감시자를 최고의 경험으로 만들고 싶고 더 많은 워크 플로를 수용하기 위해 작동 방식을 바꾸는 데 개방적이기 때문에 사용 사례에 대해 알려주는 문제를 제기하십시오.
빌드 명령은 Linter 경고를 확인하고 발견 된 경우 실패합니다.
기본적으로 생성 된 프로젝트의 package.json 은 다음과 같습니다.
"scripts" : {
"start" : "react-scripts start" ,
"build" : "react-scripts build" ,
"test" : "react-scripts test --env=jsdom" JSDOM에 의존하는 테스트 중 어느 것도 없다는 것을 알고 있다면 --env=jsdom 안전하게 제거 할 수 있으며 테스트가 더 빨리 실행됩니다.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
- "test": "react-scripts test --env=jsdom"
+ "test": "react-scripts test"마음을 구성하는 데 도움이 되려면 다음은 JSDOM이 필요한 API 목록입니다.
window 및 document 와 같은 모든 브라우저 글로벌ReactDOM.render()TestUtils.renderIntoDocument() (위의 바로 가기)mount()대조적으로, 다음 API에는 JSDOM이 필요하지 않습니다 .
TestUtils.createRenderer() (얕은 렌더링)shallow()마지막으로 스냅 샷 테스트에는 JSDOM도 필요하지 않습니다.
스냅 샷 테스트는 부품의 텍스트 스냅 샷을 자동으로 생성하고 디스크에 저장하는 농담의 기능으로 UI 출력이 변경되면 구성 요소 출력에 대한 어설 션을 수동으로 작성하지 않고 알림을받습니다. 스냅 샷 테스트에 대해 자세히 알아보십시오.
Visual Studio Code를 사용하는 경우 Box에서 React App Create와 함께 작동하는 Jest 확장 기능이 있습니다. 이는 텍스트 편집기를 사용하는 동안 많은 IDE와 같은 기능을 제공합니다. 잠재적 실패 메시지가 인라인으로 테스트 실행 상태를 표시하고, 감시자를 자동으로 시작하고 중지하고, 1 클릭 스냅 샷 업데이트를 제공합니다.
농담 테스트를 위해 디버거를 설정하는 다양한 방법이 있습니다. Chrome 및 Visual Studio Code의 디버깅을 다룹니다.
참고 : 디버깅 테스트에는 노드 8 이상이 필요합니다.
프로젝트의 package.json 의 scripts 섹션에 다음을 추가하십시오.
"scripts" : {
"test:debug" : " react-scripts --inspect-brk test --runInBand --env=jsdom "
} debugger; 모든 테스트 및 실행의 진술 :
$ npm run test:debug이렇게하면 JEST 테스트를 실행하기 시작하지만 디버거가 프로세스에 첨부되도록 실행하기 전에 잠시 멈 춥니 다.
크롬에서 다음을 열십시오
about:inspect
해당 링크를 열면 크롬 개발자 도구가 표시됩니다. 프로세스에서 inspect 선택하면 React 스크립트의 첫 번째 줄에서 중단 점이 설정됩니다 (이것은 단순히 개발자 도구를 열고 시간이 있기 전에 농담을 실행하는 것을 방지하기 위해 수행됩니다). 화면의 오른쪽 상단에있는 "재생"버튼처럼 보이는 버튼을 클릭하여 계속 실행하십시오. Jest가 디버거 명령문이 포함 된 테스트를 실행하면 실행이 일시 중지되고 현재 범위를 검사하고 통화 스택을 검사 할 수 있습니다.
참고 : -runinband CLI 옵션은 JEST가 개별 테스트의 산란 프로세스가 아닌 동일한 프로세스에서 테스트를 실행하도록합니다. 일반적으로 Jest는 프로세스에서 테스트 실행을 병렬화하지만 많은 프로세스를 동시에 디버깅하기는 어렵습니다.
디버깅 농지 테스트는 Visual Studio Code의 상자에서 지원됩니다.
다음 launch.json 구성 파일 :
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
"args": [
"test",
"--runInBand",
"--no-cache",
"--env=jsdom"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
일반적으로 앱에는 많은 UI 구성 요소가 있으며 각 구성 요소가 많이 있습니다. 예를 들어, 간단한 버튼 구성 요소는 다음 상태를 가질 수 있습니다.
일반적으로 샘플 앱이나 몇 가지 예제를 실행하지 않고도 이러한 상태를보기가 어렵습니다.
React App 만들기에는 기본적으로이를위한 도구가 포함되어 있지 않지만 React (Source) 또는 React Styleguidist (소스)에 대한 스토리 북을 프로젝트에 쉽게 추가 할 수 있습니다. 이들은 구성 요소를 개발하고 모든 주를 앱과 분리하여 볼 수있는 타사 도구입니다 .
스토리 북 또는 스타일 가이드를 정적 앱으로 배포 할 수도 있습니다. 이런 식으로 팀의 모든 사람은 백엔드 서버를 시작하거나 앱에서 계정을 만들지 않고 다른 UI 구성 요소의 다른 상태를보고 검토 할 수 있습니다.
Storybook은 React UI 구성 요소를위한 개발 환경입니다. 이를 통해 구성 요소 라이브러리를 탐색하고 각 구성 요소의 다른 상태를보고 대화식으로 개발 및 테스트 할 수 있습니다.
먼저 다음 NPM 패키지를 전 세계적으로 설치하십시오.
npm install -g @storybook/cli그런 다음 앱 디렉토리에서 다음 명령을 실행하십시오.
getstorybook그런 다음 화면의 지침을 따르십시오.
React Storybook에 대해 자세히 알아보십시오.
Styleguidist는 모든 구성 요소가 단일 페이지에 소품 문서 및 사용법 예제를 제공하는 스타일 가이드를 결합하여 스토리 북과 유사하게 구성 요소를 분리하기위한 환경과 함께 제공됩니다. Styleguidist에서는 각 코드 스 니펫이 라이브 편집 가능한 놀이터로 렌더링되는 Markdown에 예제를 작성합니다.
먼저 StyleGuidist 설치 :
npm install --save react-styleguidist 또는 yarn 사용할 수 있습니다.
yarn add react-styleguidist 그런 다음이 스크립트를 package.json 에 추가하십시오.
"scripts": {
+ "styleguide": "styleguidist server",
+ "styleguide:build": "styleguidist build",
"start": "react-scripts start",그런 다음 앱 디렉토리에서 다음 명령을 실행하십시오.
npm run styleguide그런 다음 화면의 지침을 따르십시오.
React Styleguidist에 대해 자세히 알아보십시오.
Create React App은 구성 요소를 NPM에 게시 할 내장 기능을 제공하지 않습니다. 프로젝트에서 구성 요소를 추출하여 다른 사람들이 사용할 수 있도록 구성 요소를 사용할 준비가되면 프로젝트 외부의 별도 디렉토리로 이동 한 다음 NWB와 같은 도구를 사용하여 게시 준비를 준비하는 것이 좋습니다.
기본적으로 프로덕션 빌드는 완벽하게 작동하는 오프라인 우선 점진적 웹 앱입니다.
프로그레시브 웹 앱은 기존 웹 페이지보다 빠르고 안정적이며 매력적인 모바일 경험을 제공합니다.
sw-precache-webpack-plugin 프로덕션 구성에 통합되어 있으며 모든 로컬 자산을 자동으로 미리 사전에 자동으로 전달하고 업데이트를 배포 할 때 최신 상태로 유지하는 서비스 작업자 파일을 생성해야합니다. 서비스 작업자는 초기 HTML을 포함한 로컬 자산에 대한 모든 요청을 처리하기 위해 캐시 우선 전략을 사용하여 느리거나 신뢰할 수없는 네트워크에서도 웹 앱이 안정적으로 빠르도록합니다.
초기 생산 배포 전에 서비스 작업자를 활성화하지 않으려면 src/index.js 에서 registerServiceWorker() 에 대한 통화를 제거하십시오.
이전에 생산 배포에서 서비스 작업자를 활성화 한 상태에서 기존 모든 사용자에 대해이를 비활성화하기로 결정한 경우 Service Worker Import를 수정하여 src/index.js 의 registerServiceWorker() 로 호출을 교체 할 수 있습니다. :
import { unregister } from './registerServiceWorker' ; 그런 다음 대신 unregister() 호출하십시오. 사용자가 unregister() 가있는 페이지를 방문하면 서비스 작업자가 제거됩니다. /service-worker.js 가 제공되는 방식에 따라 캐시가 무효화되는 데 최대 24 시간이 걸릴 수 있습니다.
서비스 근로자는 HTTP가 필요하지만 지역 테스트를 용이하게하기 위해서는 해당 정책이 localhost 에 적용되지 않습니다. 프로덕션 웹 서버가 HTTPS를 지원하지 않으면 서비스 작업자 등록이 실패하지만 나머지 웹 앱은 기능을 유지합니다.
서비스 작업자는 현재 모든 웹 브라우저에서 지원되지 않습니다. 지원이 부족한 브라우저에서는 서비스 작업자 등록을 시도하지 않습니다.
서비스 작업자는 생산 환경에서만 활성화됩니다 (예 : npm run build 의 출력). 이전에 캐시 된 자산이 사용될 때 좌절을 초래할 수 있으며 로컬에서 최신 변경 사항을 포함하지 않기 때문에 개발 환경에서 오프라인 우선 서비스 작업자를 사용할 수 없습니다.
오프라인 우선 서비스 작업자를 로컬에서 테스트 해야하는 경우 응용 프로그램 ( npm run build 사용)을 구축하고 빌드 디렉토리에서 간단한 HTTP 서버를 실행하십시오. 빌드 스크립트를 실행 한 후 create-react-app 로컬에서 생산 빌드를 테스트하는 한 가지 방법에 대한 지침을 제공하며 배포 지침에는 다른 방법을 사용하는 지침이 있습니다. 브라우저 캐시의 합병증을 피하려면 항상 시크릿 창을 사용하십시오.
가능하면 생성 된 service-worker.js 에 HTTP 캐싱 비활성화를 위해 생산 환경을 구성하십시오. 예를 들어 Github 페이지는 기본 10 분 HTTP 캐시 수명을 변경할 수 없습니다. 그런 다음 생산 사이트를 방문한 다음 service-worker.js 만료되기 전에 다시 다시 방문하는 경우에주의하십시오. HTTP 캐시, 서비스 작업자로부터 이전에 캐시 된 자산을 계속 얻을 수 있습니다. 업데이트 된 생산 배포를 즉시 볼 필요가있는 경우 Shift-Refresh를 수행하면 서비스 작업자를 일시적으로 비활성화하고 네트워크에서 모든 자산을 검색합니다.
사용자는 항상 오프라인 우선 웹 앱에 익숙하지 않습니다. 서비스 작업자가 캐시를 채우는 것을 완료했을 때 ( "이 웹 앱이 오프라인으로 작동합니다!"메시지를 표시하고 서비스 작업자가 사용할 수있는 최신 업데이트를 가져 왔을 때를 알려주는 것이 유용 할 수 있습니다. 다음에 페이지를로드 할 때 ( "새 컨텐츠를 표시 할 수 있습니다; 새로 고침하십시오."메시지). 이 메시지는 현재 개발자에게 연습으로 남겨져 있지만 시작점으로 src/registerServiceWorker.js 에 포함 된 논리를 사용할 수 있습니다. 이는 각 시나리오를 감지하고, 각 시나리오를 감지하고, 및 각 시나리오를 감지하고, 어떤 서비스 작업자 수명주기 이벤트를 보여줍니다. 기본적으로 적절한 메시지를 JavaScript 콘솔에 로그인합니다.
기본적으로 생성 된 서비스 작업자 파일은 HTTP API 요청, 이미지 또는 다른 도메인에서로드 된 등장과 같은 크로스 오리핀 트래픽을 가로 채거나 캐시하지 않습니다. 해당 요청에 런타임 캐싱 전략을 사용하려면 webpack.config.prod.js 의 SWPrecacheWebpackPlugin 섹션에서 runtimeCaching 옵션을 eject 구성 할 수 있습니다.
기본 구성에는 public/manifest.json 에 위치한 웹 앱 매니페스트가 포함되어 있으므로 웹 응용 프로그램과 관련된 세부 정보로 사용자 정의 할 수 있습니다.
사용자가 Android의 Chrome 또는 Firefox를 사용하여 홈 화면에 웹 앱을 추가하면 manifest.json 은 웹 앱이 표시 될 때 사용할 아이콘, 이름 및 브랜딩 색상을 결정합니다. Web App Manifest Guide는 각 필드의 의미와 사용자 정의가 사용자의 경험에 어떤 영향을 미치는지에 대한 더 많은 컨텍스트를 제공합니다.
소스 맵 탐색기는 소스 맵을 사용하여 JavaScript 번들을 분석합니다. 이것은 코드 Bloat의 출처를 이해하는 데 도움이됩니다.
React App 프로젝트 생성 프로젝트에 소스 맵 탐색기를 추가하려면 다음을 수행하십시오.
npm install --save source-map-explorer 또는 yarn 사용할 수 있습니다.
yarn add source-map-explorer 그런 다음 package.json 에서 다음 줄을 scripts 에 추가하십시오.
"scripts": {
+ "analyze": "source-map-explorer build/static/js/main.*",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",그런 다음 번들을 분석하려면 생산 빌드를 실행 한 다음 분석 스크립트를 실행하십시오.
npm run build
npm run analyze
npm run build 앱의 제작 빌드를 갖춘 build 디렉토리를 만듭니다. 귀하의 사이트 방문자가 index.html 로 제공되도록 좋아하는 HTTP 서버를 설정하고 /static/js/main. /static/js/main.<hash>.js 와 같은 정적 경로에 대한 요청은 /static/js/main.<hash>.js 의 내용과 함께 제공됩니다. /static/js/main.<hash>.js 파일.
노드를 사용하는 환경의 경우,이를 처리하는 가장 쉬운 방법은 서빙을 설치하고 나머지를 처리하는 것입니다.
npm install -g serve
serve -s build 위에 표시된 마지막 명령은 포트 5000 의 정적 사이트를 제공합니다. 많은 Serv의 내부 설정과 마찬가지로 포트는 -p 또는 --port 플래그를 사용하여 조정할 수 있습니다.
사용 가능한 옵션의 전체 목록을 얻으려면이 명령을 실행하십시오.
serve -h프로덕션에서 React App 프로젝트를 만들기 위해 정적 서버가 반드시 필요하지는 않습니다. 그것은 기존의 동적 인 것과 마찬가지로 잘 작동합니다.
다음은 노드와 Express를 사용하는 프로그래밍 방식 예입니다.
const express = require ( 'express' ) ;
const path = require ( 'path' ) ;
const app = express ( ) ;
app . use ( express . static ( path . join ( __dirname , 'build' ) ) ) ;
app . get ( '/' , function ( req , res ) {
res . sendFile ( path . join ( __dirname , 'build' , 'index.html' ) ) ;
} ) ;
app . listen ( 9000 ) ;서버 소프트웨어의 선택도 중요하지 않습니다. Create React App은 완전히 플랫폼에 대한 정보이므로 노드를 명시 적으로 사용할 필요가 없습니다.
정적 자산이있는 build 폴더는 Create React App에서 생성 된 유일한 출력입니다.
그러나 클라이언트 측 라우팅을 사용하는 경우에는 충분하지 않습니다. 단일 페이지 앱에서 /todos/42 와 같은 URL을 지원하려면 다음 섹션을 읽으십시오.
후드 아래에서 HTML5 pushState History API를 사용하는 라우터를 사용하는 경우 (예 : browserHistory 로 라우터를 반응) 많은 정적 파일 서버가 실패합니다. 예를 들어, /todos/42 의 경로와 함께 React 라우터를 사용한 경우 개발 서버가 localhost:3000/todos/42 에 올바르게 응답하지만 위와 같이 생산 빌드를 제공하는 Express는 그렇지 않습니다.
A /todos/42 에 대한 새로운 페이지로드가있을 때 서버는 파일 build/todos/42 를 찾아 찾을 수 없기 때문입니다. index.html 제공하여 /todos/42 에 대한 요청에 응답하도록 서버를 구성해야합니다. 예를 들어, 알려지지 않은 경로에 대해 index.html 제공하기 위해 위의 명시적인 예제를 수정할 수 있습니다.
app.use(express.static(path.join(__dirname, 'build')));
- app.get('/', function (req, res) {
+ app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
}); Apache HTTP 서버를 사용하는 경우 public 폴더에서 .htaccess 파일을 작성해야합니다.
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
It will get copied to the build folder when you run npm run build .
If you're using Apache Tomcat, you need to follow this Stack Overflow answer.
Now requests to /todos/42 will be handled correctly both in development and in production.
On a production build, and in a browser that supports service workers, the service worker will automatically handle all navigation requests, like for /todos/42 , by serving the cached copy of your index.html . This service worker navigation routing can be configured or disabled by eject ing and then modifying the navigateFallback and navigateFallbackWhitelist options of the SWPreachePlugin configuration.
When users install your app to the homescreen of their device the default configuration will make a shortcut to /index.html . This may not work for client-side routers which expect the app to be served from / . Edit the web app manifest at public/manifest.json and change start_url to match the required URL scheme, for example:
"start_url" : "." , By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json , for example:
"homepage" : "http://mywebsite.com/relativepath" ,This will let Create React App correctly infer the root path to use in the generated HTML file.
Note : If you are using react-router@^4 , you can root <Link> s using the basename prop on any <Router> .
자세한 내용은 여기를 참조하세요.
예를 들어:
< BrowserRouter basename = "/calendar" />
< Link to = "/today" / > // renders <a href="/calendar/today"> Note: this feature is available with
[email protected]and higher.
If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json :
"homepage" : "." , This will make sure that all the asset paths are relative to index.html . You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.
See this blog post on how to deploy your React app to Microsoft Azure.
See this blog post or this repo for a way to use automatic deployment to Azure App Service.
Install the Firebase CLI if you haven't already by running npm install -g firebase-tools . Sign up for a Firebase account and create a new project. Run firebase login and login with your previous created Firebase account.
Then run the firebase init command from your project's root. You need to choose the Hosting: Configure and deploy Firebase Hosting sites and choose the Firebase project you created in the previous step. You will need to agree with database.rules.json being created, choose build as the public directory, and also agree to Configure as a single-page app by replying with y .
=== Project Setup
First, let ' s associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we ' ll just set up a default project.
? What Firebase project do you want to associate as default ? Example app (example-app-fd690)
=== Database Setup
Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.
? What file should be used for Database Rules ? database.rules.json
✔ Database Rules for example-app-fd690 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process for your assets, use your build ' s output directory.
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔ Wrote build/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete! IMPORTANT: you need to set proper HTTP caching headers for service-worker.js file in firebase.json file or you will not be able to see changes after first deployment (issue #2440). It should be added inside "hosting" key like next:
{
"hosting": {
...
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
...
Now, after you create a production build with npm run build , you can deploy it by running firebase deploy .
=== Deploying to ' example-app-fd690 ' ...
i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing build directory for upload...
Uploading: [ ============================== ] 75%✔ hosting: build folder uploaded successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...
✔ Deploy complete !
Project Console: https://console.firebase.google.com/project/example-app-fd690/overview
Hosting URL: https://example-app-fd690.firebaseapp.comFor more information see Add Firebase to your JavaScript Project.
Note: this feature is available with
[email protected]and higher.
homepage to package.json The step below is important!
If you skip it, your app will not deploy correctly.
Open your package.json and add a homepage field for your project:
"homepage" : " https://myusername.github.io/my-app " ,or for a GitHub user page:
"homepage" : " https://myusername.github.io " , Create React App uses the homepage field to determine the root URL in the built HTML file.
gh-pages and add deploy to scripts in package.json Now, whenever you run npm run build , you will see a cheat sheet with instructions on how to deploy to GitHub Pages.
To publish it at https://myusername.github.io/my-app, run:
npm install --save gh-pages Alternatively you may use yarn :
yarn add gh-pages Add the following scripts in your package.json :
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build", The predeploy script will run automatically before deploy is run.
If you are deploying to a GitHub user page instead of a project page you'll need to make two additional modifications:
package.json scripts to push deployments to master : "scripts": {
"predeploy": "npm run build",
- "deploy": "gh-pages -d build",
+ "deploy": "gh-pages -b master -d build", npm run deploy그런 다음 다음을 실행하십시오.
npm run deploygh-pages Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:
You can configure a custom domain with GitHub Pages by adding a CNAME file to the public/ folder.
GitHub Pages doesn't support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory ). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42 , where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42 . If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj ) . Read more about different history implementations in React Router.index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you'll need to add code handling the redirect parameter to index.html . You can find a detailed explanation of this technique in this guide. Use the Heroku Buildpack for Create React App.
You can find instructions in Deploying React with Zero Configuration.
Sometimes npm run build works locally but fails during deploy via Heroku. Following are the most common cases.
If you get something like this:
remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
MyDirectory in /tmp/build_1234/src
It means you need to ensure that the lettercase of the file or directory you import matches the one you see on your filesystem or on GitHub.
This is important because Linux (the operating system used by Heroku) is case sensitive. So MyDirectory and mydirectory are two distinct directories and thus, even though the project builds locally, the difference in case breaks the import statements on Heroku remotes.
If you exclude or ignore necessary files from the package you will see a error similar this one:
remote: Could not find a required file.
remote: Name: `index.html`
remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
remote:
remote: npm ERR! Linux 3.13.0-105-generic
remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"
In this case, ensure that the file is there with the proper lettercase and that's not ignored on your local .gitignore or ~/.gitignore_global .
To do a manual deploy to Netlify's CDN:
npm install netlify-cli -g
netlify deploy Choose build as the path to deploy.
To setup continuous delivery:
With this setup Netlify will build and deploy when you push to git or open a pull request:
yarn build as the build command and build as the publish directoryDeploy siteSupport for client-side routing:
To support pushState , make sure to create a public/_redirects file with the following rewrite rules:
/* /index.html 200
When you build the project, Create React App will place the public folder contents into the build output.
Now offers a zero-configuration single-command deployment. You can use now to deploy your app for free.
Install the now command-line tool either via the recommended desktop tool or via node with npm install -g now .
Build your app by running npm run build .
Move into the build directory by running cd build .
Run now --name your-project-name from within the build directory. You will see a now.sh URL in your output like this:
> Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard)
Paste that URL into your browser when the build is complete, and you will see your deployed app.
Details are available in this article.
See this blog post on how to deploy your React app to Amazon Web Services S3 and CloudFront.
Install the Surge CLI if you haven't already by running npm install -g surge . Run the surge command and log in you or create a new account.
When asked about the project path, make sure to specify the build folder, for example:
project path: /path/to/project/build Note that in order to support routers that use HTML5 pushState API, you may want to rename the index.html in your build folder to 200.html before deploying to Surge. This ensures that every URL falls back to that file.
You can adjust various development and production settings by setting environment variables in your shell or with .env.
| 변하기 쉬운 | 개발 | 생산 | 용법 |
|---|---|---|---|
| 브라우저 | ✅ | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a browser to override this behavior, or set it to none to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to npm start will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the .js extension. | |
| 주인 | ✅ | By default, the development web server binds to localhost . You may use this variable to specify a different host. | |
| 포트 | ✅ | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | |
| HTTPS | ✅ | When set to true , Create React App will run the development server in https mode. | |
| PUBLIC_URL | ✅ | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json ( homepage ). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. | |
| CI | ? | ✅ | When set to true , Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. |
| REACT_EDITOR | ✅ | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can send a pull request to detect your editor of choice. Setting this environment variable overrides the automatic detection. If you do it, make sure your systems PATH environment variable points to your editor's bin folder. You can also set it to none to disable it completely. | |
| CHOKIDAR_USEPOLLING | ✅ | When set to true , the watcher runs in polling mode, as necessary inside a VM. Use this option if npm start isn't detecting changes. | |
| GENERATE_SOURCEMAP | ✅ | When set to false , source maps are not generated for a production build. This solves OOM issues on some smaller machines. | |
| NODE_PATH | ✅ | ✅ | Same as NODE_PATH in Node.js, but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting NODE_PATH=src . |
npm start doesn't detect changes When you save a file while npm start is running, the browser should refresh with the updated code.
If this doesn't happen, try one of the following workarounds:
index.js and you're referencing it by the folder name, you need to restart the watcher due to a Webpack bug..env file in your project directory if it doesn't exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start , the watcher uses the polling mode, as necessary inside a VM.If none of these solutions help please leave a comment in this thread.
npm test hangs on macOS Sierra If you run npm test and the console gets stuck after printing react-scripts test --env=jsdom to the console there might be a problem with your Watchman installation as described in facebookincubator/create-react-app#713.
We recommend deleting node_modules in your project and running npm install (or yarn if you use it) first. If it doesn't help, you can try one of the numerous workarounds mentioned in these issues:
It is reported that installing Watchman 4.7.0 or newer fixes the issue. If you use Homebrew, you can run these commands to update it:
watchman shutdown-server
brew update
brew reinstall watchman
You can find other installation methods on the Watchman documentation page.
If this still doesn't help, try running launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist .
There are also reports that uninstalling Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
npm run build exits too early It is reported that npm run build can fail on machines with limited memory and no swap space, which is common in cloud environments. Even with small projects this command can increase RAM usage in your system by hundreds of megabytes, so if you have less than 1 GB of available memory your build is likely to fail with the following message:
The build failed because the process exited too early. This probably means the system ran out of memory or someone called
kill -9on the process.
If you are completely sure that you didn't terminate the process, consider adding some swap space to the machine you're building on, or build the project locally.
npm run build fails on HerokuThis may be a problem with case sensitive filenames. Please refer to this section.
If you use a Moment.js, you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of all the locales provided by Moment.js.
To add a specific Moment.js locale to your bundle, you need to import it explicitly.
예를 들어:
import moment from 'moment' ;
import 'moment/locale/fr' ; If import multiple locales this way, you can later switch between them by calling moment.locale() with the locale name:
import moment from 'moment' ;
import 'moment/locale/fr' ;
import 'moment/locale/es' ;
// ...
moment . locale ( 'fr' ) ;This will only work for locales that have been explicitly imported before.
npm run build fails to minifySome third-party packages don't compile their code to ES5 before publishing to npm. This often causes problems in the ecosystem because neither browsers (except for most modern versions) nor some tools currently support all ES6 features. We recommend to publish code on npm as ES5 at least for a few more years.
module field in package.json . Note that even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers .Fork the package and publish a corrected version yourself.
If the dependency is small enough, copy it to your src/ folder and treat it as application code.
In the future, we might start automatically compiling incompatible third-party modules, but it is not currently supported. This approach would also slow down the production builds.
Ejecting lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to fork react-scripts and any other packages you need. This article dives into how to do it in depth. You can find more discussion in this issue.
If you have ideas for more “How To” recipes that should be on this page, let us know or contribute some!
