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 문서에 이 내용이 자세히 설명되어 있습니다.
다음 단계
이제 Create React 앱 빌드를 시작하는 방법을 알았으니 이 학습 과정의 모든 가이드를 통해 앱의 성능과 접근성을 개선하는 방법을 알아보세요.