시작하기: React 앱 최적화

React 사이트를 최대한 빠르고 액세스 가능하게 만들고 싶으신가요? 이제 잘 오셨습니다.

Houssein Djirdeh

React는 UI를 빌드할 수 있는 오픈소스 라이브러리입니다. 더 쉽게 만들 수 있습니다 이 학습 과정에서는 고려해 볼 만한 핵심 생태계와 유용한 기술입니다

이 가이드에서는 React 애플리케이션을 시작하고 실행하는 방법을 보여줍니다. 이 섹션의 다른 모든 가이드에서는 속도 최적화와 접근성을 개선하는 방법을 살펴봤습니다

이것이 왜 유용할까요?

Android에서 빠르고 안정적으로 구축하는 방법을 설명하는 콘텐츠가 빠르고 안정적인 React 애플리케이션을 실행할 수 있습니다 이 가이드에서는 React의 관점에서 이 모든 것을 다룹니다. API, API 및 특정 기능에만 React 생태계가 언급됩니다

학습 내용

이 학습 과정의 가이드에서는 다음 내용에 중점을 두지 않습니다.

  • React 사용 방법
  • React의 내부 작동 방식

이 두 개념은 필요할 때 모두 다루겠지만, 모든 가이드가 대신 이 섹션의 Codelab에서는 API를 빠르게 빌드하고 액세스할 수 있습니다. 따라서 React에 관한 기본 지식은 필요합니다.

React 앱 만들기

Create React App (CRA)은 React 애플리케이션 빌드를 시작하는 가장 쉬운 방법입니다. 이는 포드의 여기에는 빌드 시스템 등 여러 핵심 기능이 내장되어 있습니다. 모듈 번들러 (webpack)와 트랜스파일러 (Babel)를 포함합니다.

명령줄 셸에서는 다음 명령어를 실행하기만 하면 새 포드를 만들 수 있습니다. 애플리케이션:

npx create-react-app app-name
드림

명령어 실행이 완료되면 애플리케이션으로 이동하여 실행할 수 있습니다. 사용하여 다음 명령어를 실행합니다.

cd new-app
npm start

다음 삽입은 새로운 CRA 애플리케이션을 부트스트랩했습니다.

CRA가 설정에 사용하는 여러 구성 파일과 빌드 스크립트가 있음 Babel 빌드 프로세스를 테스트를 위한 Jest 설정 보다 간편하게 이러한 파일은 숨겨지고 CRA에서 퇴치할 때까지 액세스할 수 없습니다. 그것은 가능한 한 제거하지 않는 것이 가장 좋습니다. 왜냐하면 이 경우 모든 포트가 이러한 구성 파일을 소스 코드로 사용하기가 어려울 수 있으므로 관리할 수 있습니다

새 CRA 애플리케이션의 디렉토리 구조에는 애플리케이션에서 작업하려면 실제로 수정해야 합니다. 이 CRA 문서 에서 자세히 설명합니다.

다음 단계

이제 Create React App을 빌드하는 방법을 알았으니 자세한 내용은 다음의 모든 가이드를 참고하여 앱의 성능과 접근성을 이 학습 과정: