CRA
CRA란?
리액트는 UI기능만 제공하기 때문에 웹 애플리케이션을 만드는데 필요한 개발환경을 직접 구축해야 하는 것들이 많다. 직접 구축을하면 성능을 최적화 시킬 수 있지만, 웹 애플리케이션 구축에 필요한 패키지를 별도로 설치하고 유지보수도 해야하는 등 신경 쓸 것이 많아서 리액트를 처음 접하면 직접 개발환경을 구축하는 것이 어려울 수 있다. 이러한 문제를 해결하기 위해서 리액트 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 도구 CRA(Create-React-App)를 만들었다.
CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있기 때문에 처음 리액트를 접하거나 SPA(Single Page Application)환경을 구축할 때는 CRA를 통해서 리액트를 시작하도록 공식문서에서도 추천하고 있다.
CRA를 통한 프로젝트 구축
폴더진입
cd [프로젝트 구축하려는 폴더]
프로젝트 설치
npx create-react-app [프로젝트명]
프로젝트 폴더 진입
cd [프로젝트명]
로컬서버 띄우기
npm start
*react서버 종료: ctrl+C
로컬서버 확인
CRA 초기 세팅
CRA를 통해 프로젝트를 설치하면 데모를 위한 기본 파일이 존재한다. public폴더의 index.html / src폴더의 index.js / package.json을 제외한 파일은 데모를 위한 파일이어서 삭제가 가능하고 프로젝트 기획에 맞게 새롭게 구성할 수 있다.
node_modules, gitignore, package.json
node_modules
npm으로 다운받은 패키지들의 소스 코드가 존재하는 폴더입니다. CRA에서는 기본 세팅 때 개발 환경에 필요한 패키지를 설치해주기 때문에 이미 여러 가지 패키지 폴더가 존재합니다. 추가로 패키지를 설치할 때의 실제 코드는 node_modules 폴더 하위에 생성됩니다.
gitignore
.gitignore 파일에는 용량, 보안 등 여러가지 문제로 Github 에 올리지 않아야 하는 파일을 추가할 수 있습니다. .gitignore 파일에 추가된 폴더와 파일은 Git으로 추적하지 않습니다.
package.json
CRA 기본 패키지 외에 추가로 설치된 라이브러리 혹은 패키지의 종류, 버전 등의 정보가 기록되는 파일입니다. 모든 프로젝트마다 package.json파일은 하나씩 존재합니다. 또한, 새로운 라이브러리 혹은 패키지를 설치한다는 것은 누군가가 만든 소스 코드를 다운받는 것을 뜻합니다. npm으로 설치하면, package.json의 dependencies에 라이브러리 혹은 패키지의 정보가 자동으로 추가됩니다.
- dependencies
npm을 통해서 설치한 모든 패키지 리스트와 버전 확인이 가능하며, 관련된 패키지의 실제 코드는node_modules 폴더에 존재합니다.
- scripts
리액트 프로젝트를 실행하기 위해서 사용할 수 있는 명령어를 관리합니다. 예를 들어 로컬 서버를 띄우기 위해서 npm (run) start 명령어를 사용하는데, start라는 개발 모드를 실행하기 위한 명령어를 통해서 개발 서버를 열게 해주기 때문입니다. 또한, build는 배포 모드를 실행하기 위한 명령어로 npm (run) build 명령어로 프로젝트 폴더 안에 배포를 위한 파일을 생성할 수 있습니다.
- package-lock.json
npm을 사용해서 패키지를 설치하거나 업데이트하면 자동으로 생성되거나 수정되는 파일입니다. 이 파일 안에는 설치된 패키지의 정확한 버전이 명시되어 있습니다.
패키지를 node_modules와 package.json에서 이중으로 관리하는 이유
프로젝트를 진행할 때 Git과 Github를 통해서 협업을 진행하고 관리합니다. CRA를 통해 프로젝트를 설치하게 되면 node_modules는 개발환경에 필요한 여러 가지 패키지로 구성되어 있습니다. node_modules는 모든 패키지의 소스 코드가 들어있는 만큼 많은 용량을 차지합니다. 반면에 개인이 설치한 패키지에 관한 정보는 package.json에 기록되어 있기 때문에 package.json의 패키지 정보를 통해 npm install 명령어로 패키지의 이름과 버전 정보를 확인하여 필요한 패키지를 자동으로 설치할 수 있습니다. 그래서 많은 용량을 차지하는 node_modules는 .gitignore에 추가하여 Git과 Github를 통해 관리하지 않습니다.'
index.html, index.js, App.js
public/index.html
리액트는 SPA(Single Page Application)로 하나의 index.html이 존재하며, 웹 브라우저에 보여지는 파일입니다. 리액트에서는 index.html 파일을 직접 수정하는 것이 아니라, index.js 파일을 통해 index.html 파일의 id가 root인 div 내부에 코드를 추가하여 화면에 그려지게 됩니다.
참고] public폴더의 역할
우리가 웹을 배포한다는 건 특정 폴더를 서버 컴퓨터에 올려두는 것입니다. 그래서 서버와 연결된 특정 URL로 접근하면 해당 폴더의 파일을 요청할 수 있고, 뒤에 따로 추가적인 URL을 붙이지 않으면 index.html을 요청한다는 의미가 됩니다. 예를 들어, https://naver.com 로 접근하면 naver.com에 연결되어있는 서버 컴퓨터의 폴더에 접근해서 index.html을 가져오는 것입니다. CRA를 배포했을 때 실제 서버에 배포되는 폴더가 public 폴더입니다. 우리 서버 주소로 접근하면(개발 서버의 경우는 http://localhost:3000) public 폴더에 들어가는 것과 같다고 생각하시면 됩니다. 그래서 우리가 public에 특정 디렉토리, 파일을 만들어두면 서버 URL을 통해서 접근이 가능한 것입니다.
src/index.js
리액트의 시작(Entry Point)이 되는 파일입니다. 어떻게 컴포넌트가 화면에 그려지는지 알아보도록 하겠습니다.
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 />); // 2ndex.js에서는 document.getElementById로 index.html안에 id가 root인 요소에 접근합니다.
그리고 html 요소, 또는 리액트 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering)이라고 하는데 index.js에서 render()안에 컴포넌트가 렌더링 됩니다.
초기 세팅 때의 컴포넌트인 을 대신하여 html 요소 또는 리액트 요소를 추가하여 화면에 그릴 수도 있습니다.
[참고] src폴더의 역할
개발에 사용되는 소스 파일을 모아두는 폴더입니다.
App.js
CRA설치 후, 웹 애플리케이션의 첫 화면에 그려지고 있는 파일이며 데모를 위한 초기 컴포넌트입니다.
README.md
프로젝트에 대한 정보를 나타내기 위해 작성하는 파일로 프로젝트에 관한 지침서라고 생각하면 됩니다. README는 마크다운(Markdown)으로 작성하며 고정된 양식은 없으므로 프로젝트의 개요, 기간 등 프로젝트에 관한 내용을 자유롭게 기술할 수 있습니다. README를 작성함으로써 어떤 프로젝트인지 알기 쉽고, 어떻게 사용하는지 여러 가지 메타정보를 문서화하여 사용자에게 정보를 제공할 수 있습니다.
[참고] README.md예시
Summary
리액트 프로젝트를 시작하는 데 필요한 개발 환경을 세팅해주는 도구인 CRA로 프로젝트를 구축합니다.
$ npx create-react-app [프로젝트명] 명령어를 통해 프로젝트를 구축할 수 있습니다.
CRA를 통해 프로젝트를 설치하게 되면 데모를 위해 초기 폴더와 파일이 구성되어 있습니다.
ublic 폴더의 index.html, src 폴더의 index.js, package.json 를 제외한 파일은 삭제가 가능하며 폴더 및 파일은 프로젝트의 기획에 맞게 새롭게 구성하여 프로젝트를 진행할 수 있습니다.
Reference: Wecode
