CRA
create-react-app은 react의 보일러 플레이트이다. 보일러 플레이트란 특정 개발작업을 하기 위해 미리 준비된 환경 및 도구 세팅을 의미한다. 이전의 html 내부에서의 수동 설치 이외에도 추가적으로 해줘야하는 작업이 있다. 바로 NodeJS와 Webpack 설치이다.
NodeJS는 js의 기능을 확장시킨 js 런타임 언어이고, Webpack은 웹 애플리케이션의 소스 코드 및 리소스를 번들링하고 관리하기 위한 모듈 번들러이다. CRA는 Webpack 설치 및 구현을 자동으로 해주는 편리한 기능이다. 때문에 CRA로 react project를 작성하는 것이 가장 많이 사용되는 방법이다.
설치
1. Node.js와 npm 설치
react 개발을 시작하기 위해 Node.js를 설치해야 한다. Node.js는 js 실행 환경을 제공하며, npm을 함께 자동으로 설치해준다. npm(Node Package Manager)은 프로젝트에 필요한 외부 도구들의 설치를 도와준다. Node.js 공식 웹사이트에서 다운로드하고 설치를 진행하며, LTS 버전을 권장한다.
LTS 버전은 LTS(Long Term Support)이라는 뜻으로, 말 그대로 장기 지원되는 버전을 의미한다. 일반 버전과 달리 안정성에 중점을 둔 버전으로, 보안과 버그 방면에서 최신 버전보다 안정적인 버전이다. 또한 Node.js의 설치 확인은 다음과 같이 진행한다.
$ node --version
2. 폴더 제작 및 명령어 작성
react project가 위치할 폴더를 만들고, VS Code로 폴더를 오픈한 뒤, 터미널로 다음과 같은 명령어를 수행한다. npx는 npm 모듈을 설치하고 진행까지 바로 시켜주는 기능이다.
npx create-react-app {프로젝트 이름}
// 프로젝트 이름은 소문자로만 작성되어야한다. my-react-site 처럼 슬래시로 작성하는 케밥 케이스가 관례이다.
또한 CRA는 ts와 함께 하는 작업을 지원해준다. react를 ts와 함께 사용하고 싶으면 다음과 같이 터미널에 입력한다.
npx create-react-app {프로젝트 이름} --template typescript
필자의 react 프로젝트는 ts와 함께 사용한다. 본격적으로 ts react 제작에 들어가기 전, ts의 기초 문법에 대해 숙지하는 것을 권장한다. ts의 자세한 기능과 내용은 본 블로그의 ts 시리즈에 작성되어있다. ts의 역할과 효과를 요약하면 다음과 같다.
- 타입 안정성과 에러 방지
- 함수, 변수 등의 자동완성 지원
- 가독성 향상
CRA로 react가 생성되었으면 다음과 같이 프로젝트가 만들어진다.
각각의 중요한 폴더와 파일들을 간략하게 설명하자면,
-
node-modules 폴더
node js와 관련된 패키지 및 파일들이 구성되어있는 폴더이다. 개발자들은 이 폴더를 수동으로 작업할 일이 거의 없다. -
public 폴더
rendering이 진행되는 단 하나의 html 파일과, 이미지 파일이 저장되는 폴더이다. -
src 폴더
react와 관련된 컴포넌트와 컴포넌트 모여 하나의 트리로 합쳐지는 root file, 추가 라이브러리 기능들이 위치하는 폴더이다. 개발자들은 대부분 이 폴더내에서 작업을 진행한다. -
src/App.tsx
project에서 만들어진 react 컴포넌트들이 총합되어 모이는 root 컴포넌트이다. 이곳에서 각 페이지 경로마다 렌더링될 react router를 지정하기도 한다. -
src/index.tsx
App.tsx에서 합쳐진 컴포넌트들을 ReactDOM을 통해 브라우저에 렌더링하는 역할을 한다. -
package.json
react의 버전, 추가적으로 설치한 기타 라이브러리들의 버전, npm 명령어들을 관리하는 파일이다.
3. 시작
이렇게 만들어진 react 프로젝트를 웹에 직접적으로 아래의 명령어로 실행함으로써 디버깅을 바로바로 할 수 있다.
$ npm start
CRA로 만들어진 react 프로젝트는 필수가 아닌, 사용하지 않아도 되는 파일과 기능들이 있다. 아래의 목록들은 삭제해도 괜찮은 파일들이다.
- src/App.css 및 src/App.test.tsx : CRA에서 생성되는 기본 스타일 파일과 테스트 파일이다.
- public/logo.svg 및 public/favicon.ico : 프로젝트 아이콘 및 로고 파일이다.
- src/logo.svg : 로고 파일이다.
- src/setupTests.ts : Jest 테스트 설정 파일이다. 테스트를 사용하지 않을 경우 삭제 가능하다.
- src/reportWebVitals.ts : 웹사이트의 성능 측정을 위한 파일이다. 사용하지 않을 경우 삭제 가능하다.
- src/react-app-env.d.ts : 프로젝트의 환경 변수 및 타입 정의 파일이다.
- public/manifest.json : 웹앱 매니페스트 파일로, PWA 관련 설정을 포함한다.
- public/robots.txt : 크롤러에게 웹사이트의 접근 권한을 제어하는 로봇 텍스트 파일이다.
