분류 Reactjs

Create React App 시작하기 (2)

컨텐츠 정보

  • 조회 276 (작성일 )

본문

제목 및 메타 태그 


<meta> 태그는 HTML 문서에 대한 메타 데이터를 제공합니다. 그들은 페이지의 내용을 설명합니다. <meta> 태그는 일반적으로 웹 페이지에 표시되지 않지만 기계 구문 분석이 가능합니다. 번들로 제공되는 스크립트는 이 HTML 파일의 <body> 태그에 배치됩니다.


"번들 된 스크립트"란 무엇입니까?


이것을 이해하기 위해, 우리는 웹팩인 툴체인 세계에서 하나 이상의 개념에 대해 배워야 합니다. webpack은 모든 소스 파일 (.js, .css 등)을 묶고 a <script> tag 안의 index.html from 파일에서 제공 할 수 있는 단일 bundle.js 파일을 만드는 도구로 생각하십시오.


이렇게 하면 앱 내에서 HTML 요청 수가 크게 줄어들어 네트워크에서 앱의 성능이 직접 향상됩니다. 또한 웹팩은 추가 구성 옵션을 제공 할 때 코드를 모듈화하고 유연하게 만드는 데 도움이 됩니다.


0*YQNHUnNn6IjgSwbP 


출처 :“Learning React : React 및 Redux를 사용한 기능성 웹 개발” 


위 그림은 React를 사용하여 제작하고 webpack을 사용하여 번들로 만든 레시피 앱의 예를 보여줍니다.


webpack에는 구성 설정을 지정하는 데 사용되는 webpack.config.js 파일이 있습니다. 일반적으로 다음과 같습니다.


const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

"엔트리"키는 웹팩의 "엔트리 포인트"를 지정하고 "출력"은 빌드 프로세스 후 "bundle.js"파일이 저장 될 위치를 지정합니다.


index.html로 돌아와서 Create React App은 번들링을 위해 html-webpack-plugin을 사용합니다. 여기서 webpack.config.js를 보면 엔트리 키는 webpack의 시작점을 지정하는 ssrc / index.js를 가리 킵니다.


웹팩은 자산을 컴파일 할 때 단일 번들 (또는 코드 분할을 사용하는 경우 여러 번들)을 생성합니다. 모든 플러그인이 최종 경로를 사용할 수 있도록 합니다. 이러한 플러그인 중 하나는 스크립트를 HTML에 삽입하는 것입니다. 


html-webpack-plugin도 HTML 파일을 생성 할 수 있습니다. React 앱 만들기의 webpack.config.js에서 템플릿으로 public/index.html을 읽도록 지정되어 있습니다. 주입 옵션도 true로 설정됩니다. 이 옵션을 사용하면 html-webpack-plugin은 webpack에서 제공 한 경로와 함께 <script>를 최종 HTML 페이지에 추가합니다.


이 마지막 페이지는 npm run 빌드를 실행 한 후 build/index.html이며, npm start를 실행할 때 제공되는 페이지입니다.


index.html을 이해 했으므로 manifest.json으로 넘어가겠습니다.


manifest.json 


애플리케이션을 설명하는 '웹 앱 매니페스트'이며 바로 가기가 홈 화면에 추가 된 경우 휴대 전화에서 사용됩니다. 내용을 살펴보고 더 자세히 이해하겠습니다.


{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

이 파일의 내용은 설명이 필요 없습니다. 그러나 이 값들은 어디에 사용됩니까?


사용자가 Android에서 Chrome 또는 Firefox를 사용하여 홈 화면에 웹 앱을 추가하면 manimani.json의 메타 데이터가 웹 앱이 표시 될 때 사용할 아이콘, 이름 및 브랜딩 색상을 결정합니다. 웹 앱 매니페스트 가이드는 각 필드의 의미와 사용자 정의가 사용자 경험에 어떤 영향을 미치는지에 대한 더 많은 컨텍스트를 제공합니다.


기본적으로 이 파일에서 읽은 정보는 웹 앱의 아이콘, 색상, 이름 등을 채우는 데 사용됩니다.


favicon.ico 


응용 프로그램에 사용되는 아이콘 이미지 파일입니다. index.html 및 manifest.json에 링크되어 있습니다.


src/ 디렉토리로 이동하기 전에 루트에 있는 다른 파일 몇 개를 살펴 보겠습니다.


package.json 


이 파일은 프로젝트가 의존하는 패키지와 프로젝트에서 사용할 수 있는 패키지 버전을 나열합니다. 또한 빌드를 재현 할 수 있으므로 다른 개발자와 쉽게 공유 할 수 있습니다.


여기서 스크립트가 특히 중요합니다. start, build, test 및 eject 명령이 반응 스크립트의 start, build, test 및, eject 버전을 가리키는 것을 알 수 있습니다. 이것은 npm start와 같은 npm 명령을 실행할 때 실제로는 반응 스크립트 시작을 실행하도록 지정합니다.


react-scripts는 create-react-app 스타터 팩의 스크립트 세트입니다. react-scripts는 개발 환경을 설정하고 서버를 시작하고 핫 모듈 재로드를 시작합니다. 당신은 여기를 읽고 당신을 위해 모든 것을 볼 수 있습니다.


yarn.lock 


Yarn.lock의 목적을 배우기 전에 먼저 Yarn이 무엇인지 이해합시다. Yarn을 사용하면 전 세계의 다른 개발자와 코드를 사용하고 공유 할 수 있습니다. Yarn은이 작업을 빠르고 안전하고 안정적으로 수행하므로 걱정할 필요가 없습니다.


다른 문제에 대해 다른 개발자의 솔루션을 사용하여 자신의 소프트웨어를 보다 쉽게 ​​개발할 수 있습니다. 코드는 패키지 (모듈이라고도 함)라는 것을 통해 공유됩니다. 패키지는 패키지를 설명하는 apackage.json 파일 뿐만 아니라 공유되는 모든 코드를 포함합니다.


여러 시스템에 일관된 설치를 하려면 Yarn은 package.json에서 구성한 종속성보다 더 많은 정보가 필요합니다. Yarn은 설치된 각 종속성 버전을 정확하게 저장해야 합니다. 이를 위해 Yarn은 프로젝트 루트에 ayarn.lock 파일을 사용합니다.


앱 실행 


이제 응용 프로그램을 시작하겠습니다. 앱을 실행하려면 npm start 또는 run start를 실행할 수 있습니다. 명령을 실행하면 http://localhost:3000을 열어 응용 프로그램을 봅니다.


npm run build 또는 yarn build는 프로덕션 용 앱을 빌드하고 이를 빌드 / 폴더 안에 저장하여 프로덕션에 배포 할 수 있습니다. 이 튜토리얼을 위해 프로덕션 용으로 빌드 하는 대신 "npm start"를 사용하겠습니다.


0*OLRAEFzqpMveM2cY 

앱의 홈 화면. 


앱을 실행하면 위 그림과 같은 모양이 됩니다. 이 앱의 진입 점이 무엇인지 이해하고 시도해 봅시다. 웹팩을 살펴볼 때 webpack의 항목은 React 애플리케이션의 시작점인 index.js라고 언급했습니다.


index.js 파일에는 다음과 같은 줄이 있습니다.


ReactDOM.render(<App/>, document.getElementById('root')); 


이 줄은 ReactDOM의 render () 메소드를 호출합니다.이 메소드는 React 요소를 제공된 컨테이너의 DOM으로 렌더링하고 컴포넌트에 대한 참조를 반환합니다. 여기서 React 요소는 <App> 구성 요소이며 제공된 컨테이너는 DOM 요소 root (index.html에서 참조)입니다.