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