React- CRA

사진


React 는 UI 기능만 제공하기 때문에 web application 을 만드는 데 필요한 개발환경 을 직접 구축해야 하는 것들이 많다.
직접 구축하면 성능을 최적화 시킬 수 있지만 web application 구축에 필요한 패키지를 별도로 설치하고 유지보수도 해야 하는 등 신경 쓸 것이 많다.
이러한 문제를 해결하기 위해서 React 팀에서 프로젝트를 시작할 때 필요한 개발 환경을 세팅해주는 도구 (toolchain) 인 CRA ( Create React App ) 를 만들었다.

CRA 를 이용하면 하나의 명령어로 React 개발환경을 구축할 수 있다.
SPA ( Single Page Application ) 환경을 구축할 때는 CRA 를 통해서 React 를 시작하도록 공식문서에서도 추천 하고 있다.



CRA 를 통한 프로젝트 구축


cd [프로젝트를 구축하고자 하는 폴더]

터미널에서 프로젝트를 시작하고자 하는 폴더에 진입 한다. 

npx create-react-app [ 프로젝트명 ]

프로젝트를 시작하고자 하는 폴더에 있는지 확인 후, 명령어를 입력하여 react 프로젝트를 설치한다.
프로젝트 이름은 대문자로 작성하거나 ~’!()*^
일부 특수문자를 포함하면 에러가 생기기 때문에 소문자 ( kebab-case naming convention) 로 작성하여 프로젝트를 설치 한다. 

cd [ 프로젝트 명 ]

CRA 를 통해 react 프로젝트를 설치하면, 설치할 때 입력한 프로젝트 이름의 폴더가 생성되므로, 생성된 프로젝트 폴더에 진입한다. 

npm start

React 프로젝트의 로컬 서버를 띄우기 위해서 명령어를 입력한다.
npm start 명령어를 입력하면 http://localhost:3000 이라는 로컬 서버주소를 확인 할수 있다.

사진
정상적으로 CRA 프로젝트가 설치되면 해당 주소에 접근해 위와 같은 화면을 확인 할 수 있다. 이후 코드를 수정함에 따라 변경되는 UI 를 해당 화면에서 확인하면서 개발을 진행 하게 된다.

초기 세팅


사진


CRA 를 통해 프로젝트를 설치하면 데모를 위한 기본 파일이 존재한다. Public 폴더의 index.html, src 폴더의 index.js, 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 폴더에 존재한다.
  • Script
    • 리액트 프로젝트를 실행하기 위해서 사용할 수 있는 명령어를 관리한다. 예를 들어 로컬서버를 띄위기 위해서 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 을 통해 관리하지 않는다.


public 폴더

웹을 배포한다는 건 특정 폴더를 서버 컴퓨터에 올려두는 것이다. 서버와 연결된 특정 URL 로 접근하면 해당 폴더의 파일을 요청할 수 있고, 뒤에 따로 추가적인 URL 을 붙이지 않으면 index.html 을 요청한다는 의미가 된다. 예를들어, https://naver.com 으로 접근하면 naver.com 에 연결되어있는 서버 컴퓨터의 폴더에 접근해서 index.html 을 가져오는 것이다. CRA 를 배포했을때 실제 서버에 배포되는 폴더가 public 폴더이다.
우리 서버 주소로 접근하면 ( 개발 서버의 경우는 https://localhost:3000) public 폴더에 들어가는 것과 같다고 생각하면 된다. 그래서 public 에 특정 디렉토리 파일을 만들어두면 서버 URL 을 통해서 접근이 가능한 것이다. 

public / index.html

리액트는 SPA (single page application) 로 하나의 index.html 이 존재하고, 이는 웹브라우저에 보여지는 파일이다. index.html 파일을 직접 수정하는 것이 아니라, index.html 파일을 통해 index.html 파일의 id 가 root 인 idv 내부에 코드를 추가하여 화면에 그려지게 된다.

 src 폴더

개발에 사용되는 source 파일을 모아두는 폴더 이다.

 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"));
root.render(<App />);

index.js 에서는 document.getElementById 로 index.html 안에 id 가 root 인 요소에 접근한다. 그리고 html 요소, 또는 리액트 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 rendering 이라고 하는데 index.js 에서 render() 안에 컴포넌트가 랜더링 된다.

초기 세팅 때의 컴포넌트 를 대신하여 html 요소 또는 리액트 요소를 추가하여 화면에 그릴 수 도 있다. 

App.js

CRA 설치 후 웹 어플리케이션의 첫 화면에 그려지고 있는 파일이며 데모를 위한 초기 컴포넌트 이다.

README.md

프로젝트에 대한 정보를 나타내기 위해 작성하는 파일이다. 프로젝트에 관한 지침서라고 생각하면 된다. README 는 markdown 방식으로 작성하며 고정된 양식은 없으므로 프로젝트의 개요, 기간등 프로젝트에 관한 내용을 자유롭게 기술 할 수 있다.
README 를 작성함으로써 어떤 프로젝트인지 알기 쉽고, 어떻게 사용하는지 여러가지 메타정보를 문서화하여 사용자에게 정보를 제공 할 수 있다.

정리


  • 리액트 프로젝트를 시작하는 데 필요한 개발 환경을 세팅해주는 도구인 CRA 로 프로젝트를 구축 한다.
  • npx create-react-app [ 프로젝트명 ] 명령어를 통해 프로젝트를 구축 할 수 있다.
  • CRA 를 통해 프로젝트를 설치하게 되면 데모를 위해 초기 폴더와 파일이 구성되어 있다.
  • punlic 폴더의 index.html, src 폴더의 index.js, package.json 를 제외한 파일은 삭제가 가능하며 폴더 및 파일은 프로젝트의 기획에 맞게 새롭게 구성하여 프로젝트를 진행할 수 있다.