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