[React] CRA

CRA란??

리액트는 UI 기능만 제공하기 때문에 웹 애플리케이션을 만드는 데 필요한 개발환경을 직접 구축해야 하는 것들이 많습니다. 직접 구축을 하면 성능을 최적화시킬 수 있지만, 웹 애플리케이션 구축에 필요한 패키지를 별도로 설치하고 유지보수도 해야 하는 등 신경 쓸 것이 많아서 처음에 리액트를 접하면 직접 개발환경을 구축하기 어려울 수 있습니다. 이러한 문제를 해결하기 위해서 리액트 팀에서 리액트 프로젝트를 시작하는 데 필요한 개발 환경을 세팅해주는 도구(toolchain)인 CRA(Create-React-App)를 만들었습니다. CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있기 때문에 처음 리액트를 접하거나 SPA(Single Page Application)환경을 구축할 때는 CRA를 통해서 리액트를 시작하도록 공식문서에서도 추천하고 있습니다.

프로젝트 구축 방법

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

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

  Ex) 만약 pwd라는 폴더에 구축하려고 한다면" cd pwd " 이렇게 입력해주면
  PS C:\Users\User\Desktop\tast1\pwd> 이렇게 폴더로 이동합니다.

• 2. 프로젝트 이름은 대문자로 작성하거나 ~'!()*^등의 일부 특수문자를 포함하면 에러가 생기기 때문에 소문자(kebab-case naming convention으로 작성하는 것이 일반적)로 작성하여 프로젝트를 설치합니다.

  npx create-react-app [프로젝트명]
  Ex) npx create-react-ap giseon

이렇게 하면 giseon 이라는 폴더에 CRA가 설치되는것을 볼수 있습니다.

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

$ cd [프로젝트명]
Ex) cd giseon

• 4. 웹 개발을 할 때는 서버가 필요합니다. 당장 웹 서버를 구축하지 않고, 자신의 로컬 컴퓨터에 가상의 서버를 구축할 수 있으며, 로컬 컴퓨터 상의 가상 서버를 로컬 서버라고 합니다.

리액트 프로젝트의 로컬 서버를 띄우기 위해서는 아래의 명령어를 입력합니다.

$ npm start

• 5. npm start 명령어를 입력하여 아래와 같은 메시지와 http://localhost:3000 이라는 로컬 서버주소를 확인할 수 있습니다.

이런 화면이 인터넷창에 새로 열리면 기본적인 CRA 설치는 끝났다고 볼수 있습니다.

• 실행 종료법

"ctrl + c" 를 눌러주면 "일괄 작업을 끝내시겠습니까 (Y/N)?"라는 알림이 터미널에 뜨고 y를 눌러주면 CRA이 종료된다.

다시 실행하려면 $ npm start를 터미널에 작성해주면 다시 동작한다.

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을 통해서 접근이 가능한 것입니다.

예를 들어, public/images/logo.jpg 파일을 만들어두면, 서버에 접속해서 해당 파일에 접근할 수 있습니다. 실제로 http://localhost:3000/images/logo.jpg 를 브라우저 주소창에 입력하면 브라우저상에서 해당 이미지를 볼 수 있습니다.

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

1. index.js에서는 document.getElementById로 index.html안에 id가 root인 요소에 접근합니다.

2. 그리고 html 요소, 또는 리액트 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering)이라고 하는데 index.js에서 render()안에 컴포넌트가 렌더링 됩니다.
   초기 세팅 때의 컴포넌트인 을 대신하여 html 요소 또는 리액트 요소를 추가하여 화면에 그릴 수도 있습니다.

[참고] src폴더의 역할

개발에 사용되는 소스 파일을 모아두는 폴더입니다.

App.js

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

• 후기

처음에는 터미널에 명령어 입력하는것도 어려웠는데 이제는 자유자제 까지는 아니지만 조금씩 익숙해 지고 있다...

처음 npx create-react-ap giseon 후 폴더를 다시 지정해서 npm start를 해줘야 하는데 다시 지정하지 않고 계속 npm start를 해서 몇분 정도 고민했었다

하나 배우면 하나 더 배우고 계속 그런방식으로 하루 하루가 지나가고 있어서 잘 하고 있는지 모르겠지만 하루 하루 지날수록 조금은 알아가는것 같아 다행이라고 생각한다.