Create React App

https://create-react-app.dev/docs/getting-started/

Getting Started | Create React App

 

React 개발을 할 때, 바벨(Babel)이나 웹팩(Webpack) 같은 도구를 사용하고, 배포 시 필요한 설정을 일일이 설치하는 것은 매우 복잡하고 시간이 많이 소요되는 작업입니다. 이를 간편하게 해결하기 위해, React 개발에 필요한 공통적인 도구와 설정을 한 번에 설정해주는 도구가 Create React App입니다.

 

설치 방법은 다음과 같습니다.

• npx를 사용하여 설치:

npx create-react-app my-app

• npm을 사용하여 설치

npm init react-app my-app

• yarn을 사용하여 설치

yarn create react-app my-app

• Typescript 같이 설치

yarn create react-app my-app --template typescript

타입스크립트를 적용할 거라면, React 앱 설치 시 처음부터 함께 다운로드하는 것이 좋습니다.

이후에 타입스크립트를 추가로 설정하는 과정에서 발생할 수 있는 호환성 문제나 불필요한 설정 작업을 피할 수 있기 때문입니다.

 

저는 yarn을 이용하여 프로젝트를 설치할 것입니다.

 

프로젝트 생성이 성공적으로 완료되면, 다음과 같은 명령어들을 사용할 수 있습니다:

• yarn start: 개발 서버를 시작하여 애플리케이션을 로컬에서 실행합니다.
• yarn build: 애플리케이션을 배포할 수 있는 최적화된 상태로 빌드합니다.
• yarn test: 테스트 러너를 실행하여 테스트를 수행합니다.
• yarn eject: 프로젝트의 설정 파일들을 추출하여 직접 수정할 수 있도록 합니다. 이 작업은 되돌릴 수 없기 때문에, 정말 필요한 경우에만 사용해야 합니다.

성공적으로 프로젝트 생성 시

 

yarn start 시 나오는 페이지

 

프로젝트 구조

 

public 폴더에는 정적인 리소스들이 포함됩니다. 예를 들어, index.html 파일과 애플리케이션에 필요한 이미지 파일들이 이곳에 위치합니다. index.html은 React 애플리케이션에서 유일하게 존재하는 HTML 파일로, 이 파일에는 head 섹션에 관련된 정보와 root 요소가 포함되어 있습니다. SEO와 관련된 내용을 수정하지 않는 한, 이 파일을 수정할 일은 거의 없습니다.

 

또한, public 폴더에는 PWA(Progressive Web App)를 위한 리소스들도 포함됩니다. 예를 들어, manifest.json 파일과 앱 아이콘 이미지가 여기 위치하며, robots.txt 파일은 웹 애플리케이션을 배포할 때 크롤링하는 로봇들에게 사이트에 대한 정보를 제공하는 역할을 합니다. 요약하면, public 폴더는 정적인 리소스들을 담아두는 곳입니다.

 

src 폴더는 동적으로 생성되거나 작성되는 코드들이 포함됩니다. React 컴포넌트, 상태 관리, 라우팅 등의 모든 코드들은 src 폴더 내에서 작성됩니다. 주요 파일로는 App.js와 index.js가 있으며, 이들은 애플리케이션의 핵심 구조를 정의합니다.

 

package.json 파일은 프로젝트의 정보를 담고 있습니다. 프로젝트 이름, 버전, 스크립트 명령어, 외부 라이브러리의 디펜던시 등이 포함되어 있으며, Create React App을 사용하면 기본적으로 사용할 수 있는 명령어들도 이곳에 정의됩니다.