소개
React는 프론트 엔드 애플리케이션을 작성하기 위해 널리 사용되는 JavaScript 프레임 워크입니다. 원래 Facebook에서 만든이 개발자는 JavaScript를 JSX라고 하는 HTML과 유사한 구문과 JavaScript를 연결하는 직관적 인 프로그래밍 패러다임을 사용하여 빠른 응용 프로그램을 만들 수 있게 함으로써 인기를 얻었습니다.
https://dev.to/digitalocean/how-to-set-up-a-react-project-with-create-react-app-4b2g
새로운 React 프로젝트 시작은 빌드 시스템 설정, 현대 구문을 모든 브라우저에서 읽을 수 있는 코드로 변환하는 코드 변환기 및 기본 디렉토리 구조를 포함하는 복잡한 다단계 프로세스였습니다.
그러나 이제 React 앱 작성에는 코드 변환, 기본 linting, 테스트 및 빌드 시스템을 포함하여 React 프로젝트를 실행하는 데 필요한 모든 JavaScript 패키지가 포함됩니다.
또한 코드를 변경할 때 페이지를 새로 고치는 핫 리로딩 서버가 포함되어 있습니다. 마지막으로 디렉토리와 구성 요소에 대한 구조를 만들어 몇 분 안에 코드를 작성하고 시작할 수 있습니다.
즉, Webpack과 같은 빌드 시스템 구성에 대해 걱정할 필요가 없습니다. 크로스 브라우저를 사용할 수 있도록 코드를 변환하기 위해 Babel을 설정할 필요가 없습니다. 현대적인 프론트 엔드 개발의 복잡한 시스템에 대해 걱정할 필요가 없습니다. 최소한의 준비로 React 코드 작성을 시작할 수 있습니다.
이 튜토리얼을 마치면 향후 응용 프로그램의 기초로 사용할 수 있는 React 응용 프로그램이 실행됩니다. 먼저 React 코드를 변경하고 스타일을 업데이트하며 빌드를 실행하여 완전히 축소 된 버전의 응용 프로그램을 만듭니다.
또한 핫 리로드 기능이 있는 서버를 사용하여 즉각적인 피드백을 제공하고 React 프로젝트의 일부를 자세히 살펴볼 것입니다. 마지막으로, 사용자 컴포넌트를 작성하고 프로젝트에 따라 성장하고 적응할 수 있는 구조를 작성합니다.
전제 조건
이 튜토리얼을 수행하려면 다음이 필요합니다.
1 단계-React 앱 만들기로 새 프로젝트 만들기
이 단계에서는 npm 패키지 관리자를 사용하여 원격 스크립트를 실행하여 새 응용 프로그램을 만듭니다. 스크립트는 필요한 파일을 새 디렉토리에 복사하고 모든 종속성을 설치합니다.
Node를 설치할 때 npm이라는 패키지 관리 응용 프로그램도 설치했습니다. npm은 프로젝트에 JavaScript 패키지를 설치하고 프로젝트에 대한 세부 정보도 추적합니다. npm에 대한 자세한 내용은 npm 및 package.json 자습서와 함께 Node.js 모듈을 사용하는 방법 자습서를 참조하십시오.
npm에는 npx라는 도구도 포함되어 있으며 실행 가능 패키지를 실행합니다. 의미하는 것은 먼저 프로젝트를 다운로드하지 않고 Create React App 코드를 실행한다는 것입니다.
실행 파일 패키지는 지정한 디렉토리에 create-react-app 설치를 실행합니다. 이 튜토리얼에서는 디렉토리에서 새로운 프로젝트를 만드는 것으로 시작합니다.이 튜토리얼에서는 디지털-해양 학습이라고 합니다. 다시 이 디렉토리는 미리 존재할 필요는 없습니다. 실행 패키지가 이를 생성합니다. 이 스크립트는 프로젝트 디렉토리 내에서 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과 같습니다. 우분투 서버에 있다면 / home / your_username과 같은 메시지가 표시됩니다.
또한 응용 프로그램을 실행, 빌드, 시작 및 테스트 할 수 있는 npm 명령 목록이 표시됩니다. 다음 섹션에서 더 자세히 살펴볼 것입니다.
참고 : yarn이라는 JavaScript 용 패키지 관리자가 있습니다. Facebook에서 지원하며 npm과 동일한 기능을 수행합니다. 원래, yarn은 잠금 파일과 같은 새로운 기능을 제공했지만 이제는 npm에서도 구현됩니다. 원 사는 또한 오프라인 캐싱과 같은 몇 가지 다른 기능을 포함합니다. 원사 문서에서 더 많은 차이점을 찾을 수 있습니다.
이전에 시스템에 원사를 설치 한 경우 npm 명령과 동일하게 작동하는 원사 시작과 같은 원사 명령 목록이 표시됩니다. yarn이 설치되어 있어도 npm 명령을 실행할 수 있습니다. 원사를 선호하는 경우 향후 명령에서 npm을 원사로 바꾸십시오. 결과는 같습니다.
이제 프로젝트가 새 디렉토리에 설정되었습니다. 새 디렉토리로 변경하십시오.
cd digital-ocean-tutorial이제 프로젝트의 루트 안에 있습니다. 이제 새 프로젝트를 만들고 모든 종속성을 추가했습니다. 그러나 프로젝트를 실행하기 위한 조치를 취하지 않았습니다. 다음 섹션에서는 사용자 지정 스크립트를 실행하여 프로젝트를 빌드하고 테스트합니다.
2 단계 — React 스크립트 사용
이 단계에서는 저장소와 함께 설치된 다양한 반응 스크립트에 대해 배웁니다. 먼저 테스트 스크립트를 실행하여 테스트 코드를 실행합니다. 그런 다음 빌드 스크립트를 실행하여 축소 버전을 만듭니다. 마지막으로, eject 스크립트가 어떻게 커스터마이제이션을 완전히 제어 할 수 있는지 살펴 보겠습니다.
이제 프로젝트 디렉토리 안에 있으므로 살펴보십시오. 텍스트 편집기에서 전체 디렉토리를 열거나 터미널에 있는 경우 다음 명령을 사용하여 파일을 나열 할 수 있습니다.
ls -a-a 플래그는 출력에 숨겨진 파일도 포함되도록 합니다.
어느 쪽이든, 당신은 다음과 같은 구조를 보게 될 것입니다 :
Output
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json이 내용들을 하나씩 설명해 봅시다 :
마지막 두 파일은 패키지 관리자가 사용합니다. 초기 npx 명령을 실행할 때 기본 프로젝트를 작성했지만 추가 종속성도 설치했습니다. 종속성을 설치하면 package-lock.json 파일이 작성되었습니다. 이 파일은 npm에서 패키지가 정확한 버전과 일치하는지 확인하는 데 사용됩니다. 이 방법으로 다른 사람이 프로젝트를 설치하면 동일한 종속성을 가질 수 있습니다. 이 파일은 자동으로 생성되므로 이 파일을 직접 편집하는 경우는 거의 없습니다.
마지막 파일은 package.json입니다. 여기에는 제목, 버전 번호 및 종속성과 같은 프로젝트에 대한 메타 데이터가 포함됩니다. 프로젝트를 실행하는 데 사용할 수 있는 스크립트도 포함되어 있습니다.
자주 사용하는 텍스트 편집기에서 package.json 파일을 여십시오.
nano package.json파일을 열면 모든 메타 데이터가 포함 된 JSON 객체가 표시됩니다. scripts 객체를 보면 시작, 빌드, 테스트 및 꺼내기의 네 가지 스크립트가 있습니다.
이 스크립트는 중요 순서대로 나열됩니다. 첫 번째 스크립트는 로컬 개발 환경을 시작합니다. 다음 단계로 넘어갑니다. 두 번째 스크립트는 프로젝트를 빌드합니다. 4 단계에서 자세히 살펴볼 것이지만 지금 실행하면 어떤 일이 일어나는지 살펴볼 가치가 있습니다.
빌드 스크립트
npm 스크립트를 실행하려면 터미널에 npm run script_name을 입력하면 됩니다. 명령의 실행 부분을 생략 할 수 있는 몇 가지 특수 스크립트가 있지만 항상 전체 명령을 실행하는 것이 좋습니다. 빌드 스크립트를 실행하려면 터미널에 다음을 입력하십시오.
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
Output
build/
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json이제 빌드 디렉토리가 있습니다. .gitignore 파일을 연 경우 빌드 디렉토리가 git에 의해 무시되는 것을 알 수 있습니다. 빌드 디렉토리는 다른 파일의 축소되고 최적화 된 버전이기 때문입니다. 항상 빌드 명령을 실행할 수 있으므로 버전 관리를 사용할 필요가 없습니다. 나중에 결과를 더 자세히 살펴볼 것입니다. 이제 테스트 스크립트로 넘어갈 차례입니다.
테스트 스크립트
테스트 스크립트는 run 키워드가 필요하지 않지만 포함하더라도 작동하는 특수 스크립트 중 하나입니다. 이 스크립트는 Jest라는 테스트 러너를 시작합니다. 테스트 러너는 프로젝트에서 .spec.js 또는 .test.js 확장자를 가진 파일을 찾은 다음 해당 파일을 실행합니다.
테스트 스크립트를 실행하려면 다음 명령을 입력하십시오.
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를 입력하여 테스트 러너를 종료 할 수 있습니다. 명령 프롬프트를 다시 얻으려면 지금이 작업을 수행하십시오.
eject 스크립트
마지막 스크립트는 npm eject입니다. 이 스크립트는 종속성 및 구성 파일을 프로젝트에 복사하여 코드를 완전히 제어 할 수는 있지만 Create React App 통합 툴체인에서 프로젝트를 추출합니다. 이 스크립트를 실행 한 후에는 이 작업을 실행 취소 할 수 없으며 향후 React 앱 만들기 업데이트가 손실되므로 지금 실행하지 마십시오.
React 앱 만들기의 가치는 많은 양의 구성에 대해 걱정할 필요가 없다는 것입니다. 최신 JavaScript 응용 프로그램을 구축하려면 Webpack과 같은 빌드 시스템에서 Babel과 같은 컴파일 도구에 이르기까지 많은 도구가 필요합니다. React 앱 생성은 모든 구성을 처리하므로 추출은 이러한 복잡성을 직접 처리하는 것을 의미합니다.
React 앱 생성의 단점은 프로젝트를 완전히 사용자 정의 할 수 없다는 것입니다. 문제가 되지는 않지만 대부분의 프로젝트에서 빌드 프로세스의 모든 측면을 제어하려면 코드를 추출해야 합니다. 그러나 앞에서 언급했듯이 코드를 추출하면 Create React App의 새 버전으로 업데이트 할 수 없으므로 직접 개선 사항을 수동으로 추가해야 합니다.
이제 코드를 빌드하고 테스트하기 위한 스크립트를 실행했습니다. 다음 단계에서는 라이브 서버에서 프로젝트를 시작합니다.
3 단계 — 서버 시작
이 단계에서는 로컬 서버를 초기화하고 브라우저에서 프로젝트를 실행합니다.
다른 npm 스크립트로 프로젝트를 시작합니다. npm test와 마찬가지로 이 스크립트에는 run 명령이 필요하지 않습니다. 스크립트를 실행할 때 로컬 서버를 시작하고 프로젝트 코드를 실행하고 코드 변경 사항을 수신하는 감시자를 시작한 다음 웹 브라우저에서 프로젝트를 엽니다.
프로젝트의 루트에 다음 명령을 입력하여 프로젝트를 시작하십시오. 이 학습서에서 프로젝트의 루트는 digital-ocean-tutorial 디렉토리입니다. 이 스크립트는 허용되는 한 계속 실행되므로 별도의 터미널이나 탭에서 이 파일을 열어야 합니다.
npm start서버가 시작되기 전에 잠시 동안 자리 표시 자 텍스트가 표시되어 다음과 같은 결과가 나타납니다.
Output
Compiled 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에서 실행되고 있다면 문제가 없습니다. React 앱 생성은 사용 가능한 다음 포트를 감지하고 해당 포트로 서버를 실행합니다. 다시 말해, 포트 3000에서 이미 하나의 프로젝트를 실행 중인 경우 이 새 프로젝트는 포트 3001에서 시작됩니다.
원격 서버에서 이를 실행 중인 경우 추가 구성 없이도 사이트를 계속 볼 수 있습니다. 주소는 http://your_server_ip:3000입니다. 방화벽이 구성되어 있으면 원격 서버에서 포트를 열어야 합니다.
브라우저에 다음과 같은 React 템플릿 프로젝트가 표시됩니다.
스크립트가 실행되는 한 활성 로컬 서버가 있습니다. 스크립트를 중지하려면 터미널 창이나 탭을 닫거나 스크립트를 실행 중인 터미널 창이나 탭에 CTRL + C 또는 ⌘- + c를 입력하십시오.
이제 서버를 시작했으며 첫 번째 React 코드를 실행 중입니다. 그러나 React JavaScript 코드를 변경하기 전에 먼저 React가 페이지에 어떻게 렌더링 되는지 확인할 수 있습니다.
4 단계 — 홈페이지 수정
이 단계에서는 public / 디렉토리의 코드를 수정합니다. 공용 디렉토리에는 기본 HTML 페이지가 있습니다. 프로젝트의 루트 역할을 하는 페이지입니다. 나중에 이 디렉토리를 편집하는 경우는 거의 없지만 프로젝트가 시작되는 기반이자 React 프로젝트의 중요한 부분입니다.
서버를 취소 한 경우 npm start를 사용하여 서버를 다시 시작한 다음 새 터미널 창에서 자주 사용하는 텍스트 편집기에서 public/을 여십시오.
nano public/또는 ls 명령으로 파일을 나열 할 수 있습니다.
ls public/다음과 같은 파일 목록이 표시됩니다.
Output
favicon.ico
logo192.png
manifest.json
index.html
logo512.png
robots.txtfavicon.ico, logo192.png 및 logo512.png는 사용자가 브라우저 탭이나 휴대 전화에서 볼 수 있는 아이콘입니다. 브라우저가 적절한 크기의 아이콘을 선택합니다. 결국이 아이콘들을 프로젝트에 더 적합한 아이콘으로 바꾸고 싶을 것입니다. 지금은 그대로 둘 수 있습니다.
manifest.json은 프로젝트를 설명하는 구조화 된 메타 데이터 세트입니다. 무엇보다도 다양한 크기 옵션에 사용될 아이콘을 나열합니다.
robots.txt 파일은 웹 크롤러를 위한 정보입니다. 크롤러에게 색인을 생성 할 수 있거나 허용하지 않는 페이지를 알려줍니다. 강력한 이유가 없으면 파일을 변경할 필요가 없습니다. 예를 들어, 일부 사용자에게 쉽게 액세스하고 싶지 않은 특수 컨텐츠에 대한 URL을 제공하려는 경우 robots.txt에 URL을 추가하면 공개적으로 사용 가능하지만 검색 엔진에 의해 색인이 생성되지는 않습니다.
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 코드를 넣을 위치를 아는 방법입니다. <div id = "root"> 요소를 찾으십시오. 이것은 React가 향후 모든 업데이트에 사용할 div입니다. ID를 루트에서 기본으로 변경하십시오.
<!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>변경 사항을 저장하십시오.
브라우저에 오류가 나타납니다.
React는 id가 root 인 요소를 찾고 있었습니다. 이제 사라 졌으므로 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을 저장하고 종료하십시오.
이제 서버를 시작하고 루트 HTML 페이지를 약간 변경했습니다. 아직 JavaScript 코드를 변경하지 않았습니다. 다음 섹션에서는 React JavaScript 코드를 업데이트합니다.
5 단계 — 제목 태그 및 스타일링 수정
이 단계에서는 src / 디렉토리의 React 컴포넌트를 처음 변경합니다. 내장 핫 리로드를 사용하여 브라우저에서 자동으로 업데이트 되는 CSS 및 JavaScript 코드를 약간 변경합니다.
서버를 중지 한 경우 npm start로 서버를 다시 시작하십시오. 이제 src / 디렉토리의 일부를 볼 시간이 좀 걸립니다. 자주 사용하는 텍스트 편집기에서 전체 디렉토리를 열거나 다음 명령을 사용하여 터미널에 프로젝트를 나열 할 수 있습니다.
ls src/터미널 또는 텍스트 편집기에 다음 파일이 표시됩니다.
Output
App.css
App.js
App.test.js
index.css
index.js
logo.svg
serviceWorker.js
setupTests.js이 파일들을 한 번에 하나씩 살펴 보겠습니다.
serviceWorker.js 파일은 처음에는 많은 시간을 소비하지 않지만 진보적인 웹 응용 프로그램을 만들기 시작할 때 중요 할 수 있습니다. 서비스 담당자는 푸시 알림 및 오프라인 캐싱을 포함하여 많은 작업을 수행 할 수 있지만 지금은 그대로 두는 것이 가장 좋습니다.
다음으로 볼 파일은 setupTests.js 및 App.test.js입니다. 테스트 파일에 사용됩니다. 실제로 2 단계에서 npm test를 실행하면 스크립트가 이러한 파일을 실행했습니다. setupTests.js 파일이 짧습니다. 여기에 포함되는 것은 몇 가지 사용자 지정 예상 방법입니다. 이 시리즈의 향후 자습서에서 이에 대해 자세히 알아볼 것입니다.
App.test.js를 엽니다.
nano src/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();
});시험은 문서에 학습 반응이라는 문구를 찾고 있습니다. 프로젝트를 실행하는 브라우저로 돌아 가면 페이지에 문구가 표시됩니다. 반응 테스트는 대부분의 단위 테스트와 다릅니다. 컴포넌트에는 데이터 조작을 위한 로직과 함께 마크업과 같은 시각적 정보가 포함될 수 있으므로 기존 단위 테스트는 쉽게 작동하지 않습니다. React 테스트는 기능 또는 통합 테스트 형태에 더 가깝습니다.
다음으로 일부 스타일링 파일 인 App.css, index.css 및 logo.svg가 표시됩니다. React에는 여러 가지 스타일링 작업 방법이 있지만 가장 쉬운 방법은 추가 구성이 필요하지 않기 때문에 일반 CSS를 작성하는 것입니다.
다른 JavaScript 파일과 마찬가지로 스타일을 구성 요소로 가져올 수 있으므로 여러 CSS 파일이 있습니다. CSS를 구성 요소로 직접 가져올 수 있으므로 CSS를 분할하여 개별 구성 요소에만 적용 할 수도 있습니다. 당신이 하고 있는 일은 우려를 분리하는 것입니다. 모든 CSS를 JavaScript와 별도로 유지하지는 않습니다. 대신 모든 관련 CSS, JavaScript, 마크 업 및 이미지를 함께 그룹화 합니다.
텍스트 편집기에서 App.css를 엽니다. 명령 행에서 작업 중인 경우 다음 명령으로 명령 행을 열 수 있습니다.
nano src/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);
}
}이 파일은 특별한 CSS 프리 프로세서가 없는 표준 CSS 파일입니다. 원하는 경우 나중에 추가 할 수 있지만 처음에는 일반 CSS 만 있습니다. 즉시 사용 가능한 환경을 제공하면서 Create React App의 의견이 맞지 않습니다.
App.css로 돌아 가면 Create React App을 사용하면 얻을 수 있는 이점 중 하나가 모든 파일을 감시하므로 변경하면 브라우저에서 다시 로드하지 않고 볼 수 있다는 것입니다.
이것을 실제로 보려면 App.css에서 배경색을 약간 변경하십시오. # 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);
}
}브라우저를 확인하십시오. 이전 모습은 다음과 같습니다.
변경 사항을 확인하는 방법은 다음과 같습니다.
계속해서 배경색을 # 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);
}
}파일을 저장하고 종료하십시오.
CSS를 약간 변경했습니다. 이제 React JavaScript 코드를 변경할 차례입니다. index.js를 열어 시작하십시오.
nano src/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과 같은 요소입니다. 예를 들어 앱을 사용할 때 HTML 요소 <App />처럼 취급하는 방법에 주목하십시오. 이 시리즈의 향후 자습서에서 더 자세히 살펴볼 것입니다.
ReactDOM은 React 코드를 public /에서 본 index.html 페이지와 같은 기본 요소에 연결하는 코드입니다. 다음 강조 표시된 줄을 보십시오.
...
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
...
serviceWorker.unregister();이 코드는 React에게 id가 root 인 요소를 찾고 React 코드를 삽입하도록 지시합니다. <App />는 루트 요소이며 모든 것이 거기에서 분기 됩니다. 이것이 미래의 모든 React 코드의 시작점입니다.
파일 상단에 몇 가지 가져 오기가 표시됩니다. index.css를 가져 오지만 실제로는 아무 것도 하지 않습니다. 가져 오면 React 스크립트를 통해 Webpack에 CSS 코드를 최종 컴파일 된 번들에 포함 시키라고 지시합니다. 가져 오지 않으면 표시되지 않습니다.
src/index.js에서 종료하십시오.
현재 브라우저에서보고있는 내용이 없습니다. 이것을 보려면 App.js를 여십시오.
nano src/App.js이 파일의 코드는 일련의 일반 HTML 요소처럼 보입니다. 다음과 같은 내용이 표시됩니다.
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;<code>src/App.js</code> 편집에서 <p> 태그의 내용을 변경하고 다시 로드하여 저장하십시오. 세상에, 변경 사항을 저장하십시오.
...
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>
);
}
...브라우저로 이동하면 변경 사항이 표시됩니다.
이제 React 컴포넌트를 처음 업데이트했습니다.
가기 전에 몇 가지 더 유의하십시오. 이 구성 요소에서 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이 프로젝트를 빌드 하면 이미지를 처리하고 소스를 적절한 위치로 설정합니다.
텍스트 편집기를 종료하십시오.
브라우저에서 DOM 요소를 보면 경로가 추가 된 것을 볼 수 있습니다. Chrome을 사용하는 경우 요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택하여 요소를 검사 할 수 있습니다.
브라우저에서 표시되는 방법은 다음과 같습니다.
DOM에는 다음 줄이 있습니다.
<img src="/static/media/logo.5d5d9eef.svg" class="App-logo" alt="logo">로고 이름이 다르므로 코드가 약간 다릅니다. Webpack은 이미지 경로가 고유한지 확인하려고 합니다. 따라서 동일한 이름의 이미지를 가져와도 다른 경로로 저장됩니다.
이제 React JavaScript 코드를 약간 변경했습니다. 다음 단계에서는 build 명령을 사용하여 서버에 배포 할 수 있는 작은 파일로 코드를 축소합니다.
6 단계 — 프로젝트 구축
이 단계에서는 외부 서버에 배포 할 수 있는 코드를 번들로 빌드합니다.
터미널로 돌아가 프로젝트를 빌드하십시오. 이전에 이 명령을 실행했지만,이 명령은 빌드 스크립트를 실행합니다. 결합되고 축소 된 파일로 새 디렉토리를 작성합니다. 빌드를 실행하려면 프로젝트 루트에서 다음 명령을 실행하십시오.
npm run build코드가 컴파일 될 때 지연이 발생하고 완료되면 build /라는 새 디렉토리가 생깁니다.
텍스트 편집기에서 build / index.html을 여십시오.
nano 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>빌드 디렉토리는 모든 코드를 가져 와서 사용 가능한 가장 작은 상태로 컴파일하고 최소화합니다. 사람이 읽을 수 있는지 여부는 중요하지 않습니다. 공개 코드가 아니기 때문입니다. 이와 같이 축소하면 코드가 더 적은 공간을 차지하면서도 작동하게 됩니다. 파이썬과 같은 일부 언어와 달리 공백은 컴퓨터가 코드를 해석하는 방식을 변경하지 않습니다.
결론
이 학습서에서는 기술 세부 사항으로 이동하지 않고도 JavaScript 빌드 도구를 사용하여 프로젝트를 구성하여 첫 번째 React 애플리케이션을 작성했습니다. 이것이 React 앱 만들기의 가치입니다. 시작하기 위해 모든 것을 알 필요는 없습니다. 복잡한 빌드 단계를 무시할 수 있으므로 React 코드에만 집중할 수 있습니다.
프로젝트를 시작, 테스트 및 빌드 하는 명령을 배웠습니다. 이 명령을 정기적으로 사용하므로 향후 자습서에 유의하십시오. 가장 중요한 것은 첫 React 컴포넌트를 업데이트 한 것입니다.
React가 실제로 작동하려면 React 자습서를 통해 DigitalOcean API에서 데이터를 표시하는 방법 튜토리얼을 참조하십시오.
등록된 댓글이 없습니다.
