Create React App으로 React 프로젝트를 설정하는 방법
작성자는 DOnations 프로그램에 쓰기를 선택했습니다.
소개
JSX.
새로운 React 프로젝트를 시작하는 것은 빌드 시스템 설정, 최신 구문을 모든 브라우저에서 읽을 수 있는 코드로 변환하는 코드 변환기 및 기본 디렉토리 구조를 포함하는 복잡한 다단계 프로세스였습니다. 그러나 이제 Create React App에는 코드 변환, 기본 린팅, 테스트 및 빌드 시스템을 포함하여 React 프로젝트를 실행하는 데 필요한 모든 JavaScript 패키지가 포함되어 있습니다. 또한 코드를 변경할 때 페이지를 새로고침하는 핫 리로딩 기능이 있는 서버도 포함되어 있습니다. 마지막으로 디렉토리 및 구성 요소에 대한 구조를 생성하므로 단 몇 분 만에 바로 코딩을 시작할 수 있습니다.
즉, Babel과 같은 빌드 시스템을 구성하여 브라우저 간 사용이 가능하도록 코드를 변환하는 것에 대해 걱정할 필요가 없습니다. 최신 프런트 엔드 개발의 복잡한 시스템 대부분에 대해 걱정할 필요가 없습니다. 최소한의 준비로 React 코드 작성을 시작할 수 있습니다.
이 튜토리얼을 마치면 향후 애플리케이션의 기반으로 사용할 수 있는 실행 중인 React 애플리케이션을 갖게 됩니다. React 코드를 처음으로 변경하고, 스타일을 업데이트하고, 빌드를 실행하여 애플리케이션의 완전히 축소된 버전을 생성합니다. 또한 핫 리로딩이 있는 서버를 사용하여 즉각적인 피드백을 제공하고 React 프로젝트의 일부를 심층적으로 탐색합니다. 마지막으로 사용자 지정 구성 요소 작성을 시작하고 프로젝트와 함께 성장하고 적응할 수 있는 구조를 만듭니다.
전제 조건
이 튜토리얼을 따르려면 다음이 필요합니다.
- Ubuntu 18.04에 Node.js를 설치하는 방법.\n
- 또한 HTML 및 CSS에 대한 기본 지식과 함께 JavaScript로 코딩하는 방법 시리즈에서 찾을 수 있는 JavaScript에 대한 기본 이해를 갖는 데 도움이 됩니다.\n
1단계 — Create React App으로 새 프로젝트 만들기
이 단계에서는 npm 패키지 관리자를 사용하여 원격 스크립트를 실행하는 새 애플리케이션을 만듭니다. 스크립트는 필요한 파일을 새 디렉토리에 복사하고 모든 종속성을 설치합니다.
Node를 설치할 때 npm 및 package.json 튜토리얼과 함께 Node.js 모듈을 사용하는 방법이라는 패키지 관리 애플리케이션도 설치했습니다.
npm에는 실행 가능한 패키지를 실행하는 npx라는 도구도 포함되어 있습니다. 이것이 의미하는 바는 먼저 프로젝트를 다운로드하지 않고 Create React App 코드를 실행한다는 것입니다.
실행 가능한 패키지는 지정한 디렉토리에 create-react-app 설치를 실행합니다. 디렉터리에 새 프로젝트를 만드는 것으로 시작합니다. 이 자습서에서는 digital-ocean-tutorial라고 합니다. 다시 말하지만 이 디렉토리는 사전에 존재할 필요가 없습니다. 실행 가능한 패키지가 자동으로 생성합니다. 또한 스크립트는 프로젝트 디렉토리 내에서 npm install을 실행하여 추가 종속성을 다운로드합니다.
기본 프로젝트를 설치하려면 다음 명령을 실행합니다.
- npx create-react-app digital-ocean-tutorial
이 명령은 여러 종속성과 함께 기본 코드를 다운로드하는 빌드 프로세스를 시작합니다.
스크립트가 완료되면 다음과 같은 성공 메시지가 표시됩니다.
Output...
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd digital-ocean-tutorial
npm start
Happy hacking!
your_file_path는 현재 경로입니다. macOS 사용자인 경우 /Users/your_username과 같은 형식입니다. Ubuntu 서버에 있는 경우 /home/your_username과 같이 표시됩니다.
또한 애플리케이션을 실행, 빌드, 시작 및 테스트할 수 있는 npm 명령 목록도 표시됩니다. 다음 섹션에서 이에 대해 자세히 살펴보겠습니다.
참고: yarn 문서라는 JavaScript용 패키지 관리자가 또 있습니다.
이전에 시스템에 yarn을 설치한 경우 yarn 시작과 같은 yarn 명령 목록이 표시되며 와 동일하게 작동합니다. >npm 명령어. yarn이 설치되어 있어도 npm 명령을 실행할 수 있습니다. yarn을 선호하는 경우 향후 명령에서 npm을 yarn으로 바꾸십시오. 결과는 동일합니다.
이제 프로젝트가 새 디렉터리에 설정되었습니다. 새 디렉터리로 변경합니다.
- cd digital-ocean-tutorial
이제 프로젝트의 루트 안에 있습니다. 이 시점에서 새 프로젝트를 만들고 모든 종속성을 추가했습니다. 하지만 프로젝트를 실행하기 위한 조치를 취하지 않았습니다. 다음 섹션에서는 사용자 지정 스크립트를 실행하여 프로젝트를 빌드하고 테스트합니다.
2단계 — 반응 스크립트 사용
이 단계에서는 리포지토리와 함께 설치되는 다양한 react-scripts에 대해 알아봅니다. 먼저 test 스크립트를 실행하여 테스트 코드를 실행합니다. 그런 다음 build 스크립트를 실행하여 축소된 버전을 만듭니다. 마지막으로 eject 스크립트를 사용하여 사용자 지정을 완벽하게 제어할 수 있는 방법을 살펴보겠습니다.
이제 프로젝트 디렉토리 내부에 있으므로 둘러보십시오. 텍스트 편집기에서 전체 디렉토리를 열거나 터미널에 있는 경우 다음 명령을 사용하여 파일을 나열할 수 있습니다.
- ls -a
-a 플래그는 출력에 숨겨진 파일도 포함되도록 합니다.
어느 쪽이든 다음과 같은 구조를 볼 수 있습니다.
Outputnode_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json
하나씩 설명하자면 다음과 같습니다.
-
node_modules/에는 애플리케이션에서 사용하는 모든 외부 JavaScript 라이브러리가 포함되어 있습니다. 열 필요가 거의 없습니다.\n -
public/디렉토리에는 일부 기본 HTML이 포함되어 있습니다(4단계).\n -
src/디렉토리에는 프로젝트에 대한 React JavaScript 코드가 포함되어 있습니다. 수행하는 대부분의 작업은 해당 디렉토리에 있습니다. 5단계에서 이 디렉터리를 자세히 탐색합니다.\n -
.gitignore파일에는node_modules디렉토리와 같이 git(소스 컨트롤)이 무시할 일부 기본 디렉토리 및 파일이 포함되어 있습니다. 무시되는 항목은 소스 제어에 필요하지 않은 더 큰 디렉토리 또는 로그 파일인 경향이 있습니다. 또한 일부 React 스크립트로 생성할 일부 디렉토리도 포함됩니다.\n -
README.md는 명령 요약 및 고급 구성에 대한 링크와 같이 Create React App에 대한 많은 유용한 정보가 포함된 마크다운 파일입니다. 지금은README.md파일을 보이는 그대로 두는 것이 가장 좋습니다. 프로젝트가 진행됨에 따라 기본 정보를 프로젝트에 대한 자세한 정보로 바꾸게 됩니다.\n
마지막 두 파일은 패키지 관리자가 사용합니다. 초기 npx 명령을 실행할 때 기본 프로젝트를 만들었지만 추가 종속성도 설치했습니다. 종속성을 설치할 때 package-lock.json 파일을 생성했습니다. 이 파일은 npm에서 패키지가 정확한 버전과 일치하는지 확인하는 데 사용됩니다. 이렇게 하면 다른 사람이 프로젝트를 설치하는 경우 동일한 종속성이 있는지 확인할 수 있습니다. 이 파일은 자동으로 생성되기 때문에 이 파일을 직접 편집하는 경우는 거의 없습니다.
마지막 파일은 package.json입니다. 여기에는 제목, 버전 번호 및 종속성과 같은 프로젝트에 대한 메타데이터가 포함됩니다. 또한 프로젝트를 실행하는 데 사용할 수 있는 스크립트도 포함되어 있습니다.
원하는 텍스트 편집기에서 package.json 파일을 엽니다.
- nano package.json
파일을 열면 모든 메타데이터가 포함된 JSON 개체가 표시됩니다. scripts 개체를 보면 start, build, test, 및 꺼내기.
이러한 스크립트는 중요도 순으로 나열됩니다. 첫 번째 스크립트는 로컬 개발 환경을 시작합니다. 다음 단계에서 이에 대해 알게 될 것입니다. 두 번째 스크립트는 프로젝트를 빌드합니다. 4단계에서 이에 대해 자세히 살펴보겠지만 지금 실행하여 어떤 일이 발생하는지 확인하는 것이 좋습니다.
빌드 스크립트
npm 스크립트를 실행하려면 터미널에 npm run script_name을 입력하기만 하면 됩니다. 명령의 run 부분을 생략할 수 있는 몇 가지 특수 스크립트가 있지만 항상 전체 명령을 실행하는 것이 좋습니다. 빌드 스크립트를 실행하려면 터미널에 다음을 입력하십시오.
- npm run build
다음 메시지가 즉시 표시됩니다.
Output> digital-ocean-tutorial@0.1.0 build your_file_path/digital-ocean-tutorial
> react-scripts build
Creating an optimized production build...
...
이는 Create React App이 코드를 사용 가능한 번들로 컴파일하고 있음을 알려줍니다.
완료되면 다음 출력이 표시됩니다.
Output...
Compiled successfully.
File sizes after gzip:
39.85 KB build/static/js/9999.chunk.js
780 B build/static/js/runtime-main.99999.js
616 B build/static/js/main.9999.chunk.js
556 B build/static/css/main.9999.chunk.css
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
serve -s build
Find out more about deployment here:
bit.ly/CRA-deploy
프로젝트 내용을 나열하면 몇 가지 새로운 디렉터리가 표시됩니다.
- ls -a
Outputbuild/
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json
이제 build 디렉토리가 생겼습니다. .gitignore 파일을 열면 git이 build 디렉토리를 무시한다는 것을 알 수 있습니다. build 디렉토리는 다른 파일을 축소하고 최적화한 버전이기 때문입니다. build 명령을 항상 실행할 수 있으므로 버전 제어를 사용할 필요가 없습니다. 나중에 출력에 대해 자세히 알아볼 것입니다. 지금은 test 스크립트로 넘어갈 시간입니다.
테스트 스크립트
test 스크립트는 run 키워드가 필요하지 않지만 포함하더라도 작동하는 특수 스크립트 중 하나입니다. 이 스크립트는 Jest라는 테스트 러너를 시작합니다. 테스트 러너는 프로젝트에서 .spec.js 또는 .test.js 확장자를 가진 파일을 찾은 다음 해당 파일을 실행합니다.
test 스크립트를 실행하려면 다음 명령을 입력하십시오.
- npm test
이 스크립트를 실행하면 터미널에 테스트 스위트의 출력이 표시되고 터미널 프롬프트가 사라집니다. 다음과 같이 표시됩니다.
Output PASS src/App.test.js
✓ renders learn react link (67ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.204s
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.
여기서 주목해야 할 몇 가지 사항이 있습니다. 첫째, 앞서 언급한 바와 같이 .test.js 및 .spec.js를 포함한 테스트 확장자가 있는 모든 파일을 자동으로 감지합니다. 이 경우에는 테스트 도구 모음이 하나만 있습니다. 즉, .test.js 확장자를 가진 파일이 하나만 있고 해당 테스트 도구 모음에는 테스트가 하나만 포함되어 있습니다. Jest는 코드 계층 구조에서 테스트를 감지할 수 있으므로 디렉토리에 테스트를 중첩하면 Jest가 이를 찾습니다.
둘째, Jest는 테스트 스위트를 한 번 실행한 다음 종료하지 않습니다. 오히려 터미널에서 계속 실행됩니다. 소스 코드를 변경하면 테스트가 다시 실행됩니다.
키보드 옵션 중 하나를 사용하여 실행하는 테스트를 제한할 수도 있습니다. 예를 들어 o를 입력하면 변경된 파일에 대해서만 테스트를 실행합니다. 이렇게 하면 테스트 스위트가 커짐에 따라 많은 시간을 절약할 수 있습니다.
마지막으로 q를 입력하여 테스트 실행기를 종료할 수 있습니다. 명령 프롬프트를 다시 얻으려면 지금 이 작업을 수행하십시오.
꺼내기 스크립트
마지막 스크립트는 npm eject입니다. 이 스크립트는 종속성 및 구성 파일을 프로젝트에 복사하여 코드를 완전히 제어할 수 있지만 Create React App 통합 도구 체인에서 프로젝트를 제거합니다. 이 스크립트를 실행하면 이 작업을 취소할 수 없고 향후 Create React App 업데이트를 잃게 되므로 지금 실행하지 않습니다.
Create React App의 가치는 상당한 양의 구성에 대해 걱정할 필요가 없다는 것입니다. 최신 JavaScript 애플리케이션을 빌드하려면 Babel과 같은 빌드 시스템의 많은 도구가 필요합니다. Create React App은 모든 구성을 처리하므로 제거는 이러한 복잡성을 직접 처리하는 것을 의미합니다.
Create React App의 단점은 프로젝트를 완전히 사용자 정의할 수 없다는 것입니다. 대부분의 프로젝트에서는 문제가 되지 않지만 빌드 프로세스의 모든 측면을 제어하려면 코드를 꺼내야 합니다. 그러나 앞서 언급했듯이 코드를 제거하면 새로운 버전의 Create React App으로 업데이트할 수 없으며 직접 개선 사항을 수동으로 추가해야 합니다.
이 시점에서 스크립트를 실행하여 코드를 빌드하고 테스트했습니다. 다음 단계에서는 라이브 서버에서 프로젝트를 시작합니다.
3단계 - 서버 시작
이 단계에서는 로컬 서버를 초기화하고 브라우저에서 프로젝트를 실행합니다.
다른 npm 스크립트로 프로젝트를 시작합니다. npm test와 마찬가지로 이 스크립트에는 run 명령이 필요하지 않습니다. 스크립트를 실행하면 로컬 서버를 시작하고, 프로젝트 코드를 실행하고, 코드 변경 사항을 수신 대기하는 감시자를 시작하고, 웹 브라우저에서 프로젝트를 엽니다.
프로젝트의 루트에 다음 명령을 입력하여 프로젝트를 시작합니다. 이 튜토리얼에서 프로젝트의 루트는 digital-ocean-tutorial 디렉토리입니다. 이 스크립트는 허용하는 한 계속 실행되므로 별도의 터미널이나 탭에서 열어야 합니다.
- npm start
서버가 시작되기 전에 잠시 동안 다음과 같은 출력을 제공하는 자리 표시자 텍스트가 표시됩니다.
OutputCompiled successfully!
You can now view digital-ocean-tutorial in the browser.
http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
스크립트를 로컬에서 실행하는 경우 브라우저 창에서 프로젝트가 열리고 포커스가 터미널에서 브라우저로 이동합니다.
그렇지 않은 경우 http://localhost:3000/을 방문하여 사이트가 실제로 작동하는지 확인할 수 있습니다. 포트 3000에서 이미 다른 서버를 실행하고 있다면 괜찮습니다. Create React App은 사용 가능한 다음 포트를 감지하고 이를 사용하여 서버를 실행합니다. 즉, 포트 3000에서 실행 중인 프로젝트가 이미 있는 경우 이 새 프로젝트는 포트 3001에서 시작됩니다.
원격 서버에서 이것을 실행하는 경우 추가 구성 없이도 사이트를 계속 볼 수 있습니다. 주소는 http://your_server_ip:3000입니다. 방화벽이 구성되어 있으면 원격 서버에서 포트를 열어야 합니다.
브라우저에 다음 React 템플릿 프로젝트가 표시됩니다.
스크립트가 실행되는 동안에는 활성 로컬 서버가 있습니다. 스크립트를 중지하려면 터미널 창이나 탭을 닫거나 스크립트를 실행 중인 터미널 창이나 탭에 CTRL+C 또는 ⌘-+c를 입력합니다.
이 시점에서 서버를 시작했고 첫 번째 React 코드를 실행하고 있습니다. 그러나 React JavaScript 코드를 변경하기 전에 먼저 React가 페이지에 어떻게 렌더링되는지 확인할 수 있습니다.
4단계 - 홈페이지 수정
이 단계에서는 public/ 디렉토리의 코드를 수정합니다. public 디렉토리에는 기본 HTML 페이지가 포함되어 있습니다. 프로젝트의 루트 역할을 할 페이지입니다. 앞으로는 이 디렉토리를 거의 편집하지 않겠지만 프로젝트가 시작되는 기반이자 React 프로젝트의 중요한 부분입니다.
서버를 취소한 경우 npm start로 서버를 다시 시작한 다음 새 터미널 창에서 원하는 텍스트 편집기로 public/을 엽니다.
- nano public/
또는 ls 명령을 사용하여 파일을 나열할 수 있습니다.
- ls public/
다음과 같은 파일 목록이 표시됩니다.
Outputfavicon.ico
logo192.png
manifest.json
index.html
logo512.png
robots.txt
favicon.ico, logo192.png 및 logo512.png는 사용자가 브라우저의 탭이나 웹 페이지에서 볼 수 있는 아이콘입니다. 핸드폰. 브라우저는 적절한 크기의 아이콘을 선택합니다. 결국, 프로젝트에 더 적합한 아이콘으로 대체하고 싶을 것입니다. 지금은 그대로 둘 수 있습니다.
manifest.json은 프로젝트를 설명하는 구조화된 메타데이터 세트입니다. 무엇보다도 다양한 크기 옵션에 사용할 아이콘을 나열합니다.
robots.txt 파일은 웹 크롤러를 위한 정보입니다. 크롤러에게 색인 생성이 허용되거나 허용되지 않는 페이지를 알려줍니다. 특별한 이유가 없는 한 파일을 변경할 필요가 없습니다. 예를 들어 일부 사용자에게 쉽게 액세스하고 싶지 않은 특수 콘텐츠에 대한 URL을 제공하려는 경우 robots.txt에 추가할 수 있으며 여전히 공개적으로 사용할 수 있지만 다음에 의해 색인화되지는 않습니다. 검색 엔진.
index.html 파일은 애플리케이션의 루트입니다. 이것은 서버가 읽는 파일이며 브라우저에 표시되는 파일입니다. 텍스트 편집기에서 열어 살펴보십시오.
명령줄에서 작업하는 경우 다음 명령을 사용하여 열 수 있습니다.
- nano public/index.html
다음과 같이 표시됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
파일이 꽤 짧습니다. <body>에 이미지나 단어가 없습니다. 이는 React가 자체적으로 전체 HTML 구조를 빌드하고 여기에 JavaScript를 주입하기 때문입니다. 그러나 React는 코드를 삽입할 위치를 알아야 하며 이것이 index.html의 역할입니다.
텍스트 편집기에서 <title> 태그를 React App에서 Sandbox로 변경합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
...
<title>Sandbox</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
텍스트 편집기를 저장하고 종료합니다. 브라우저를 확인하십시오. 제목은 브라우저 탭에 있는 이름입니다. 자동으로 업데이트됩니다. 그렇지 않은 경우 페이지를 새로 고치고 변경 사항을 확인하십시오.
이제 텍스트 편집기로 돌아갑니다. 모든 React 프로젝트는 루트 요소에서 시작됩니다. 한 페이지에 여러 개의 루트 요소가 있을 수 있지만 적어도 하나는 있어야 합니다. 이것이 React가 생성된 HTML 코드를 넣을 위치를 아는 방법입니다. 변경 사항을 저장합니다. 브라우저에 오류가 표시됩니다. React는 이름을 다시 이 시점에서 서버를 시작하고 루트 HTML 페이지를 약간 변경했습니다. 아직 JavaScript 코드를 변경하지 않았습니다. 다음 섹션에서는 React JavaScript 코드를 업데이트합니다. 이 단계에서는 서버를 중지한 경우 터미널 또는 텍스트 편집기에 다음 파일이 표시됩니다. 이 파일들을 한 번에 하나씩 살펴보겠습니다. 처음에는 다음으로 살펴볼 파일은 열면 기본 테스트가 표시됩니다. 테스트는 문서에 있을 다음으로 다른 JavaScript 파일과 마찬가지로 스타일을 구성 요소로 가져올 수 있기 때문에 여러 CSS 파일이 있습니다. CSS를 구성 요소로 직접 가져올 수 있으므로 CSS를 분할하여 개별 구성 요소에만 적용할 수도 있습니다. 당신이 하고 있는 일은 관심사를 분리하는 것입니다. 모든 CSS를 JavaScript와 별도로 유지하지 않습니다. 대신 모든 관련 CSS, JavaScript, 마크업 및 이미지를 함께 그룹화합니다. 텍스트 편집기에서 표시되는 코드는 다음과 같습니다. 이것은 특별한 CSS 프리프로세서가 없는 표준 CSS 파일입니다. 원하는 경우 나중에 추가할 수 있지만 처음에는 일반 CSS만 있습니다. Create React App은 독창적인 환경을 제공하면서도 독선적이지 않습니다. 이를 실제로 보려면 브라우저를 확인하십시오. 이전 모습은 다음과 같습니다. 변경 후 모습은 다음과 같습니다. 계속해서 파일을 저장하고 종료합니다. CSS를 약간 변경했습니다. 이제 React JavaScript 코드를 변경할 차례입니다. 표시되는 내용은 다음과 같습니다. 상단에는 이 코드는 파일 상단에 몇 가지 가져오기가 표시됩니다. 이 시점에서 브라우저에서 보고 있는 내용이 아직 표시되지 않았습니다. 이를 보려면 이 파일의 코드는 일련의 일반 HTML 요소처럼 보입니다. 표시되는 내용은 다음과 같습니다. 브라우저로 이동하면 변경 사항이 표시됩니다. 이제 React 구성 요소에 대한 첫 번째 업데이트를 만들었습니다. 가기 전에 몇 가지 사항을 더 알아두세요. 이 구성 요소에서 여기에 몇 가지 일이 있습니다. 중괄호 안에 텍스트 편집기를 종료합니다. 브라우저에서 DOM 요소를 보면 경로가 추가된 것을 볼 수 있습니다. Chrome을 사용하는 경우 요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택하여 요소를 검사할 수 있습니다. 브라우저에서는 다음과 같이 표시됩니다. DOM에는 다음 줄이 있습니다. 로고의 이름이 다르기 때문에 코드가 약간 다릅니다. Webpack은 이미지 경로가 고유한지 확인하려고 합니다. 따라서 동일한 이름의 이미지를 가져오더라도 다른 경로로 저장됩니다. 이 시점에서 React JavaScript 코드를 약간 변경했습니다. 다음 단계에서는 이 단계에서는 코드를 외부 서버에 배포할 수 있는 번들로 빌드합니다. 터미널로 돌아가서 프로젝트를 빌드합니다. 이전에 이 명령을 실행했지만 참고로 이 명령은 코드가 컴파일되는 동안 지연이 발생하고 완료되면 텍스트 편집기에서 다음과 같은 내용이 표시됩니다. 빌드 디렉토리는 모든 코드를 가져와 컴파일하고 사용 가능한 가장 작은 상태로 축소합니다. 공개 코드가 아니기 때문에 사람이 읽을 수 있는지 여부는 중요하지 않습니다. 이렇게 축소하면 코드가 여전히 작동하면서 공간을 적게 차지합니다. Python과 같은 일부 언어와 달리 공백은 컴퓨터가 코드를 해석하는 방식을 변경하지 않습니다. 이 자습서에서는 기술 세부 정보로 이동할 필요 없이 JavaScript 빌드 도구를 사용하여 프로젝트를 구성하는 첫 번째 React 애플리케이션을 만들었습니다. 이것이 Create React App의 가치입니다. 시작하기 위해 모든 것을 알 필요는 없습니다. 복잡한 빌드 단계를 무시할 수 있으므로 React 코드에만 집중할 수 있습니다. 프로젝트를 시작, 테스트 및 빌드하는 명령을 배웠습니다. 이러한 명령을 정기적으로 사용하게 되므로 향후 자습서를 참고하십시오. 가장 중요한 것은 첫 번째 React 구성 요소를 업데이트했다는 것입니다. React가 실제로 작동하는 것을 보고 싶다면 React 튜토리얼을 사용하여 DigitalOcean API에서 데이터를 표시하는 방법을 시도하십시오.div입니다. id를 root에서 base로 변경합니다.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
...
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="base"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
root의 id가 있는 요소를 찾고 있었습니다. 이제 사라졌으므로 React는 프로젝트를 시작할 수 없습니다.base에서 root로 변경합니다.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
...
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
index.html을 저장하고 종료합니다.5단계 - 제목 태그 및 스타일 수정
src/ 디렉토리에서 React 구성 요소를 처음으로 변경합니다. 내장된 핫 리로딩을 사용하여 브라우저에서 자동으로 업데이트되는 CSS 및 JavaScript 코드를 약간 변경합니다.npm start로 다시 시작해야 합니다. 이제 시간을 내어 src/ 디렉토리의 일부를 살펴보십시오. 즐겨 사용하는 텍스트 편집기에서 전체 디렉토리를 열거나 다음 명령을 사용하여 터미널에서 프로젝트를 나열할 수 있습니다.serviceWorker.js 파일에 많은 시간을 할애하지 않겠지만 프로그레시브 웹 애플리케이션을 만들기 시작하면 중요할 수 있습니다. 서비스 작업자는 푸시 알림 및 오프라인 캐싱을 포함하여 많은 작업을 수행할 수 있지만 지금은 그대로 두는 것이 가장 좋습니다.setupTests.js 및 App.test.js입니다. 이들은 테스트 파일에 사용됩니다. 실제로 2단계에서 npm test를 실행했을 때 스크립트가 이러한 파일을 실행했습니다. setupTests.js 파일은 짧습니다. 여기에 포함된 것은 몇 가지 사용자 지정 expect 메서드뿐입니다. 이 시리즈의 향후 자습서에서 이에 대해 자세히 알아볼 것입니다.App.test.js를 엽니다.import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
learn react 문구를 찾고 있습니다. 프로젝트를 실행하는 브라우저로 돌아가면 페이지에 문구가 표시됩니다. React 테스트는 대부분의 통합 테스트와 다릅니다.App.css, index.css 및 logo.svg와 같은 일부 스타일 파일이 표시됩니다. React에서 스타일 지정 작업을 수행하는 방법은 여러 가지가 있지만 가장 쉬운 방법은 추가 구성이 필요하지 않은 일반 CSS를 작성하는 것입니다.App.css를 엽니다. 명령줄에서 작업하는 경우 다음 명령을 사용하여 열 수 있습니다..App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
App.css로 돌아가서 Create React App을 사용하는 이점 중 하나는 모든 파일을 감시한다는 것입니다. 따라서 변경하면 다시 로드하지 않고도 브라우저에서 볼 수 있습니다.App.css의 background-color를 약간 변경하십시오. #282c34에서 파란색으로 변경한 다음 파일을 저장합니다. 최종 스타일은 다음과 같습니다..App {
text-align: center;
}
...
.App-header {
background-color: blue
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
...
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
background-color를 다시 #282c34로 변경합니다..App {
text-align: center;
...
.App-header {
background-color: #282c34
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
...
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
index.js를 열어서 시작하세요.import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
React, ReactDOM, index.css, App 및 serviceWorker를 가져오고 있습니다. . React를 가져오면 실제로 JSX를 JavaScript로 변환하는 코드를 가져옵니다. JSX는 HTML과 유사한 요소입니다. 예를 들어, App을 사용할 때 HTML 요소 ReactDOM은 React 코드를 public/에서 본 index.html 페이지와 같은 기본 요소에 연결하는 코드입니다. 강조 표시된 다음 줄을 살펴보십시오....
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
...
serviceWorker.unregister();
root의 id가 있는 요소를 찾아 React 코드를 삽입하도록 React에 지시합니다. index.css를 가져오지만 실제로는 아무것도 하지 않습니다. 이를 가져오면 최종 컴파일된 번들에 해당 CSS 코드를 포함하도록 React 스크립트를 통해 Webpack에 지시하는 것입니다. 가져오지 않으면 표시되지 않습니다.src/index.js에서 종료합니다.App.js를 엽니다.import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
<p> 태그의 내용을 Edit 에서 src/App.js에서 저장하여 다시 로드합니다.Hello, world 로 변경합니다. 변경 사항을 저장합니다....
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Hello, world
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
...
logo.svg 파일을 가져와 변수에 할당합니다. 그런 다음 <img> 요소에서 해당 코드를 src로 추가합니다.img 요소를 살펴보십시오....
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Hello, world
</p>
...
로고를 전달하는 방법에 주목하십시오. 문자열이나 숫자가 아닌 속성을 전달할 때마다 중괄호를 사용해야 합니다. React는 이를 문자열이 아닌 JavaScript로 처리합니다. 이 경우 실제로 이미지를 가져오는 것이 아닙니다. 대신 이미지를 참조하고 있습니다. Webpack이 프로젝트를 빌드할 때 이미지를 처리하고 소스를 적절한 위치로 설정합니다.
<img src="/static/media/logo.5d5d9eef.svg" class="App-logo" alt="logo">
build 명령을 사용하여 코드를 서버에 배포할 수 있는 작은 파일로 축소합니다.6단계 - 프로젝트 구축
build 스크립트를 실행합니다. 결합되고 축소된 파일로 새 디렉토리를 생성합니다. 빌드를 실행하려면 프로젝트의 루트에서 다음 명령을 실행하십시오.build/라는 새 디렉토리가 생성됩니다.build/index.html을 엽니다.<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><link href="/static/css/main.d1b05096.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,p=r[0],l=r[1],c=r[2],i=0,s=[];i<p.length;i++)a=p[i],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,p=1;p<t.length;p++){var l=t[p];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/";var p=this["webpackJsonpdo-create-react-app"]=this["webpackJsonpdo-create-react-app"]||[],l=p.push.bind(p);p.push=r,p=p.slice();for(var c=0;c<p.length;c++)r(p[c]);var f=l;t()}([])</script><script src="/static/js/2.c0be6967.chunk.js"></script><script src="/static/js/main.bac2dbd2.chunk.js"></script></body></html>
결론