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