React 사이트를 최대한 빠르고 액세스 가능하게 만들고 싶으신가요? 여기에서 알아볼 수 있습니다.
React는 UI를 더 쉽게 빌드할 수 있는 오픈소스 라이브러리입니다. 이 학습 과정에서는 애플리케이션의 성능과 사용성을 개선하기 위해 사용해야 하는 생태계 내의 다양한 API와 도구를 다룹니다.
이 가이드에서는 React 애플리케이션을 설정하고 실행하는 방법을 보여줍니다. 이 섹션의 다른 모든 가이드에서는 React 앱의 속도 또는 접근성을 최적화하는 주제를 다룹니다.
이것이 왜 유용할까요?
빠르고 안정적인 애플리케이션을 빌드하는 방법을 설명하는 콘텐츠는 많지만 빠르고 안정적인 React 애플리케이션을 빌드하는 방법을 보여주는 콘텐츠는 많지 않습니다. 이 가이드에서는 React 생태계와 관련된 라이브러리, API, 기능만 언급된 React 앱의 관점에서 이러한 모든 내용을 다룹니다.
학습 내용
이 학습 과정의 튜토리얼에서는 다음 사항에 중점을 두지 않습니다.
- React 사용 방법
- React의 내부 작동 방식
이 두 가지 개념은 필요에 따라 모두 다루어지지만 이 섹션의 모든 가이드와 Codelab에서는 빠르고 액세스 가능한 React 사이트를 빌드하는 방법에 중점을 둡니다. 따라서 React에 대한 기본 지식이 필요합니다.
Create React App
React 앱 만들기 (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 앱 빌드를 시작하는 방법을 알았으니 이 학습 과정의 모든 가이드를 통해 앱의 성능과 접근성을 개선하는 방법을 알아보세요.