React 사이트를 최대한 빠르고 접근하기 쉽게 만들고 싶으신가요? 여기에서 알아볼 수 있습니다.
React는 UI를 더 쉽게 빌드할 수 있는 오픈소스 라이브러리입니다. 이 학습 과정에서는 애플리케이션의 성능과 사용성을 개선하기 위해 사용해야 하는 생태계 내의 다양한 API와 도구를 다룹니다.
이 가이드에서는 React 애플리케이션을 설정하고 실행하는 방법을 보여줍니다. 이 섹션의 다른 모든 가이드에서는 React 앱의 속도 또는 접근성을 최적화하는 주제를 다룹니다.
이것이 왜 유용할까요?
빠르고 안정적인 애플리케이션을 빌드하는 방법을 설명하는 콘텐츠는 많지만 빠르고 안정적인 React 애플리케이션을 빌드하는 방법을 보여주는 콘텐츠는 많지 않습니다. 이 가이드에서는 React 생태계에만 해당하는 라이브러리, API, 기능만 언급되는 React 앱의 관점에서 이 모든 것을 다룹니다.
학습 내용
이 학습 과정의 튜토리얼에서는 다음 사항에 중점을 두지 않습니다.
- React 사용 방법
- React의 내부 작동 방식
이 두 가지 개념은 필요에 따라 모두 다루어지지만 이 섹션의 모든 가이드와 Codelab에서는 빠르고 액세스 가능한 React 사이트를 빌드하는 방법에 중점을 둡니다. 따라서 React에 대한 기본 지식이 필요합니다.
Create React App
Create React App (CRA)은 React 애플리케이션 빌드를 시작하는 가장 쉬운 방법입니다. 모듈 번들러 (webpack)와 트랜스파일러 (Babel)가 포함된 빌드 시스템을 비롯하여 여러 핵심 기능이 내장된 기본 설정을 제공합니다.
명령줄 셸에서 새 애플리케이션을 만들려면 다음을 실행하기만 하면 됩니다.
npx create-react-app app-name
명령어 실행이 완료되면 다음 명령어를 사용하여 애플리케이션으로 이동하여 실행할 수 있습니다.
cd new-app
npm start
다음 삽입은 새로 부트스트랩된 CRA 애플리케이션의 디렉터리 구조와 실제 웹페이지를 보여줍니다.
CRA는 테스트를 위한 기본 Jest 설정이 포함된 webpack 및 Babel 빌드 프로세스를 설정하는 데 사용하는 여러 구성 파일과 빌드 스크립트가 있습니다. 사용자의 편의를 위해 이러한 파일은 숨겨져 있으며 CRA에서 제거할 때까지 액세스할 수 없습니다. 가능하면 항상 꺼내는 것을 피하는 것이 좋습니다. 이렇게 하면 이러한 모든 구성 파일을 자체 소스 코드로 가져와 관리하기 어려워질 수 있기 때문입니다.
새 CRA 애플리케이션의 디렉터리 구조에는 애플리케이션을 작업하기 위해 실제로 수정해야 하는 파일만 포함됩니다. CRA 문서에서 자세히 설명합니다.
다음 단계
이제 Create React App 빌드를 시작하는 방법을 알게 되었습니다. 이 학습 과정에서 제공되는 모든 가이드를 통해 앱의 성능과 접근성을 개선하는 방법을 알아보세요.