CRA란?
CRA(Create React App)→ 리액트 프로젝트를 시작할 때 필요한 개발환경을 세팅해주는 도구.
리액트를 이용해 웹 애플리케이션을 개발하기 위해서 필요한 도구들을 모아놓은 툴체인
툴체인 → 여러가지 도구(Tool) 등을 연결해둔것.
리액트는 UI를 구축하기 위한 자바스크립트 라이브러리이기 때문에, UI외의 많은 기능들을 위해 다른 패키지가 필요하다.
필요한 패키지를 다운받아 호환성을 맞추고, 환경설정하는것은 꽤나 번거롭고 힘들기 때문에 툴체인을 이용해서 환경구축을 한다.
- CRA, Next.js, GatsBy 등이 있다.
- CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있게 해준다. 리액트를 처음 접하거나 SPA(Single Page Application) 환경을 구축할 떈 CRA를 통해 리액트를 시작하도록 공식문서에서도 추천하고 있다.
SPA
SPA(Single Page Application)
→ 하나의 index.html이 존재하고, 웹 브라우저에 보여지는 파일.
page === HTML. 즉, HTML이 한개라는 뜻이다.
여러 HTML을 이동하면서 화면을 변경하는 것이 아닌 하나의 HTML 안에서 자바스크립트를 이용해 모든 처리를 하는 것.
CRA를 통한 프로젝트 구축
-
터미널에서 프로젝트를 시작하고자 하는 폴더에 진입.
cd [프로젝트를 구축하고자 하는 폴더]
-
프로젝트 설치
npx create-react-app [프로젝트명]
npx → npm에서 제공하는 명령어로 해당 패키지를 실행하겠다는 의미.
npx를 사용하면 내 pc에 CRA를 다운로드 받지 않고 바로 실행하여 사용할 수 있다.
-
프로젝트 폴더 진입
cd [프로젝트명]
-
로컬 서버 확인
npm start
서버 종료 = ctrl + c
CRA 초기 폴더 및 파일 구성
CRA를 통해 프로젝트를 설치하면 데모를 위한 기본 파일이 존재한다.
public 폴더의 index.html, src 폴더의 index.js, package.json을 제외한 파일은 데모를 위한 파일이므로 삭제가 가능하며 이외의 폴더 및 파일은 프로젝트의 기획에 맞게 새롭게 구성할 수 있다.
node_modules
→ npm으로 설치한 패키지들이 실제로 저장되는 폴더.
CRA가 개발환경에 필요한 패키지들을 설치해주었기 때문에 여러 파일들이 존재하는 것을 확인할 수 있다.
추가로 패키지를 설치할 때 실제 코드는 node_modules 폴더 하위에 생성된다.
.gitignore
→ git으로 관리하지 않을 파일, 폴더들을 기입하는 파일.
node_modules는 gitignore에 등록해 git으로 관리하지 않는다(용량문제)
버전관리 시스템인 git에서 사용하는 파일로 이 파일안에 기록된 파일이나 폴더는 git으로 관리되지 않는다. .gitignore 파일에 추가된 폴더와 파일은 git으로 추적하지 않는다.
용량, 보안 등의 문제로 github에 올리지 않아야 하는 파일들을 추가할 수 있다.
💡 주의 할 점
CRA를 이용해 프로젝트 환경을 구성하면 기본적으로 git init 과정을 실행해주기 때문에 CRA를 이용할 땐 명시적으로 git init 등의 명령을 실행할 필요가 없다.
package.json
→ CRA 기본 패키지 외에 추가로 설치된 라이브러리나 패키지의 종류, 버전 등의 정보가 기록되는 파일(우리가 CRA로 만드는 프로젝트도 하나의 패키지라고 볼 수 있다)
프로젝트의 정보가 기입된 파일.
-
Dependencies
→ 설치한 패키지들의 정보기 기입되어 있다.
내 패키지가 의존하고 있는 다른 패키지들의 정보가 들어있다.
npm을 통해 설치된 모든 패키지 리스트와 버전 확인이 가능하고, 관련 패키지의 실제 코드는 node_modules 폴더에 존재한다.
터미널에서 npm install 명령어를 실행하면 depencies 항목에 기입된 패키지들을 모두 설치해준다.
public/index.html
→ 웹 브라우저에 보여지는 파일.
리액트에선 index.html 파일을 직접 수정하지 않고 index.js 파일을 통해 index.html 파일의 id가 root인 div 내부에 코드를 추가하여 화면에 그려지게 된다.
src/index.js
→ 리액트의 시작(Entry Point)이 되는 파일.
react 컴포넌트와 html 페이지를 연결하는 중간다리 역할.
- src폴더 = 개발에 사용되는 소스 파일을 모아두는 폴더.
- index.js파일에서 import 할 수 있는 값은 App.js에서 export한 값만 가져올 수 있다.
- Import할때 from 뒤에 상대경로가 아니고 바로 폴더 이름을 적는 것은 node_modules 디렉토리안에서 import 하겠다는 의미이다.
import React from “react”→ node_modules에 있는 react 패키지에서 import 하겠다는 의미.Import ReactDOM from “react-dom/client”→ node_modules에 있는 react DOM 클라이언트라는 패키지에서 Export해준 값을 import 하겠다는 의미.
// src/index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root")); // 1
root.render(<App />); // 2-
index.js에선
document.getElementById로 index.html안에 id가 root인 요소에 접근한다. -
index.js에서 render()안에 컴포넌트가 렌더링된다.
렌더링(rendering) → html 요소, 또는 리액트 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것
초기세팅때 컴포넌트를 대신해 html 요소나 리액트 요소를 추가하여 화면에 그릴수도 있다.
App.js
→ CRA 설치 후, 웹 애플리케이션의 첫 화면에 그려지고 있는 파일.
데모를 위한 초기 컴포넌트이다.
README.md
→ 프로젝트에 대한 설명을 작성해두는 파일.
CRA뿐만 아니라 모든 프로젝트에서 포함할 수 있는 파일이다.
고정양식이 없으므로 프로젝트 개요, 기간 등 프로젝트에 관한 내용을 자유롭게 기술할 수 있다.
