[React] 개발 환경 설정

📃 목차
1. ReactJS 개발 환경 설정하기
 ① React 설치하기
 ② React 개발 모드와 배포 모드
2. Create React App
 ① node.js 설치
 ② React 설치
 ③ 프로젝트 폴더 구성
 ④ React 예제 실행하기
📕 Reference

 

React 개발 환경을 설정하는 방법은 두 가지가 존재한다.

하나는 <script> 태그를 추가해서 React 앱을 개발하는 방법과

다른 하나는 Create React App 명령어를 입력해서 React 초기 개발 환경을 설정하는 방법이다.

---

1. ReactJS 개발 환경 설정하기

① React 설치하기

 

기존 페이지, 'index.html' 파일에 아래와 같이 <div> 태그를 추가해 주자.

이때 <div> 태그의 id 속성 값으로 'root'를 설정해 주도록 하자.

<!-- index.html -->

<div id="root"></div>

 

이제 우리가 JavaScript로 개발한 React Element를 root라는 id 값을 가진 <div> 요소에 표시할 것이다.

 

위의 <div> 태그를 추가 완료했다면 이제 아래 두 <script> 태그를 추가해 주자.

아래 두 <script> 태그를 추가하면 기존 페이지에 React와 ReactDOM을 설치할 수 있다.

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

 

 

이 글을 쓰는 시점에서 위의 <script> 태그로 Import 한 React18와 ReactDOM18이 최신 버전이지만

나중에 이 글을 보는 독자 입장에서는 최신 버전이 아닐 수도 있다.

 

만약 그런 경우라면 아래 링크로 들어가서 최신 버전의 React와 ReactDOM을 Import 해주자.

https://ko.legacy.reactjs.org/docs/add-react-to-a-website.html

웹사이트에 React 추가 – React

---

이제 React, ReactDOM을 설치 완료했으니 간단한 예제를 한 번 실행해 보자.

방금 전 React, ReactDOM을 설치한 <script> 태그 아래에 임의의 <script> 태그를 만들고

아래 소스코드를 복사 + 붙여 넣기를 한 다음에 코드를 실행해 보자.

 

'Click!'이라고 적힌 버튼을 클릭하면, "Hello World"가 적힌 알림 창이 출력된다.

<!-- index.html -->

<script>
    const root = ReactDOM.createRoot(document.getElementById("root"));
    
    const Btn = React.createElement(
    	"button",
        { onClick: ()=> alert("Hello World")},
        "Click !"
    );
    
    root.render(Btn);
</script>

 

React 예제 실행 결과

 

---

② React 개발 모드와 배포 모드

 

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

 

React로 개발한 웹 페이지를 배포할 때는 'development.js'를 'production.min.js'로 수정해 주자.

 

앞에서 <script> 태그를 통해 설치했던 React와 ReactDOM은 development, 개발 모드로

프로그램 개발 중에 버그로 이어질 수 있는 요소들에 대해 경고를 보내는 검증 코드가

포함되어 있기 때문에 전체적인 용량이 많이 드는 편이다.

 

그리고 지금 추가하는 'production.min.js'는 배포 모드로

개발 모드에 비해서 버그로 이어지는 요소에 대해 경고를 보내는 검증 코드가 적다.

즉, 전체적인 용량이 적게 들어서 웹 페이지를 배포하기 용이하다.

 

지금은 웹 페이지에 표시되는 React Element의 개수가 적기 때문에

React, ReactDOM을 개발 모드로 설치해 놔도 웹 페이지의 로딩 속도에 큰 영향을 주지 않지만

 

추후에 랜더링 되는 React Element의 개수가 늘어날수록

웹 페이지의 로딩 속도가 다소 느려질 수 있다.

 

그리고 이는 내가 만든 웹 사이트를 이용하는 사용자 입장에서 불편한 요소로 작용될 수 있기 때문에

이를 미리 방지하기 위해서 웹 페이지를 배포할 때 React, ReactDOM을 배포 모드로 대체해 주자.

---

2. Create React App

앞에서 <script> 태그 두 개를 추가해서 React, ReactDOM을 설치하는 방식이었다.

이 방식은 추후에 React 앱을 개발할 때, Babel이나 Webpack 등의 다양한 라이브러리를 일일이 추가해줘야 한다.

 

매번 React 앱을 개발하려고 할 때마다 이런 식으로 <script> 태그를 추가해서 React를 설치하고

개발하는데 필요한 라이브러리를 하나하나 찾아서 추가를 해주기에는 너무나도 번거롭다.

 

다행히 React는 이런 식의 번거로운 초기 작업을 한 번에 처리해 주는 방법이 존재한다.

그 방법을 Create React App, 줄여서 CRA라고 한다.

---

① node.js 설치

 

Create React App, CRA 방식을 통해 React 초기 개발 환경을 설치하기 위해서는

제일 먼저 최신 버전의 node.js가 내 컴퓨터에 설치가 된 상태여야만 한다.

컴퓨터에 node.js를 설치하지 않은 상태라면 구글에 "node.js"를 검색해서 나오는

Node.js 웹 사이트로 들어가면 최신 버전의 node.js를 다운로드할 수 있다.

---

만약 내 컴퓨터에 이미 node.js가 설치가 된 상태라고 해도 그게 최신 버전이라는 보장은 없다.

내 컴퓨터에 설치된 node.js의 버전을 확인하기 위해서 명령 프롬포트를 실행

[Window] + [R] 키로 '실행' 창을 띄우고, "cmd"를 입력하고 [확인]을 클릭해서 명령 프롬포트를 실행하거나
아니면 시작 메뉴에서 [Windows 시스템] → '명령 프롬포트' 클릭, 해당 프로그램을 실행할 수 있다.

 

아래 명령어를 입력한 후 [Enter] 키를 누르면, 내 컴퓨터에 설치된 node.js의 버전을 확인할 수 있다.

node -v

---

다시 본론으로 돌아와서, Node.js 웹 사이트로 들어가면 아래와 같은 창을 볼 수 있다.

LTS와 Current 버전에 대해서는 아래 접은 글을 펼치면 확인할 수 있을 것이고

일단 필자는 Current 버전을 다운로드 받도록 하겠다.

LTS, Long Term Support

- 말 그대로 장기간 지원을 받을 수 있는 버전

- 약 30개월 동안 해당 버전에서 발견되는 각종 버그 패치등의 다양한 지원을 받을 수 있는 버전

- 안정성이 보장되는 버전

 

Current

- node.js의 최신 기능을 사용할 수 있는 버전

- LTS 버전에서 지원되는 일부 기능이 사라지거나 수정될 수도 있음.

---

 

LTS든 Current 버전이든 둘 중 하나를 클릭하면 아래와 같은 파일이 다운로드된다.

다운로드가 완료됐다면 해당 파일을 실행해보자.

해당 프로그램을 실행하면, 아래와 같은 node.js 설치 창이 나오는 것을 확인할 수 있다.

설치 프로그램이 안내하는 데로 따라가다 보면 Node.js 설치가 완료될 것이다.

 

Node.js 설치 시작 / Node.js 설치 완료

 

node.js의 설치를 완료했다면, '명령 프롬포트' 프로그램을 실행해서

아래 명령어를 입력해서 내 컴퓨터에 최신 버전의 node.js가 문제없이 설치가 완료됐는 지를 확인해 보자.

node -v

최신 버전의 node.js가 정상적으로 설치 완료됐다.

---

② React 설치

 

최신 버전의 node.js의 설치를 완료했다면, 임의의 프로젝트 폴더를 하나 만들고

명령 프롬포트를 실행, 아래 명령어를 입력해서 실행 위치를 프로젝트 폴더로 지정하거나

cd '프로젝트 폴더 경로'

 

아니면 VSC와 같은 프로그램에서 해당 프로젝트 폴더에서 마우스 우클릭

'Open in integrated Terminal'을 클릭하면 해당 프로젝트 폴더에서 Terminal을 실행할 수 있다.

 

프로젝트 폴더에서 명령 프롬포트, 터미널을 실행했다면 이제 아래 명령어를 입력해 보자.

npx create-react-app example

# npx create-react-app 'project_name'

 

좀 긴 설치 과정이 지나면 아래와 같은 창이 나오고, React 설치가 종료된다.

---

③ 프로젝트 폴더 구성

 

create react app 명령어를 입력할 때, 설정해뒀던 프로젝트 이름으로 된 폴더를 열어보면

아래 이미지처럼 여러가지 파일이 해당 폴더 내부에 있는 것을 확인할 수 있다.

 

/node_modules
 - node.js 패키지 구성 요소 중 하나
 - 외부 Module을 저장해둔 폴더이다. (React도 여기에 해당됨)

package.json / package-lock.json
 - 프로젝트의 설정과 관련된 파일
 - 프로젝트 내부의 폴더, 패키지들을 연결하는 역할을 하는 파일
 - package.json에서 프로젝트의 이름이나 주소, 버전을 설정할 수 있고
   이 외에도 패키지에 설치된 React의 버전도 설정할 수 있다. 

 - 추가적으로 프로젝트에서 사용가능한 명령어는 "script": {..}에서 확인할 수 있다.

 

/public
 - 웹 페이지, index.html 파일이 저장된 폴더
 - 해당 폴더 내부에 저장된 파일들은 Webpack이 후 처리를 하지 않고
   그대로 '/build' 폴더에 복사된다.

/src
 - js, css 등의 파일이 저장된 폴더
 - 'npm build' 명령어로 React로 개발한 프로젝트를 Build할 때
   해당 폴더 내부에 존재하는 파일들은 Webpack으로 처리된다.

---

④ React 예제 실행하기

 

프로젝트 패키지 구조도 대략적으로 알아봤으니

이제 CRA 명령어로 생성된 React 기본 예제를 실행해보자.

프로젝트 폴더에서 Terminal을 열고, 아래 명령어를 입력한 다음 Enter 키를 눌러보자.

예제 실행 결과

 

React App이 실행해봤으니 이제 여기서 화면 중앙의 문구를 한 번 수정해보자.

'/src' 폴더 내부의 'App.js' 파일을 열면 아래와 같은 코드가 보일 것이다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>   
      </header>
    </div>
  );
}

export default App;

 

여기서 App 함수 내부의 <p> 태그로 감싸진 텍스트를 임의의 문장으로 수정하고 파일을 저장해보자.

그 다음 현재 실행 중인 React App을 확인해보면 웹 페이지에 표시되는 문장이 바뀐 것을 확인할 수 있을 것이다.

<p> 태그 내부의 텍스트를 수정한 것이 반영됐다.

---

이번 게시글에서 다루는 것은 'React 개발 환경 설정'에 관한 것이기 때문에

React App이 어떤 원리로 동작하는 지에 대해서는 지금은 다루지 않을 예정이다.

 

React를 공부하면서 정리한 내용을 Github page로 배포하다보니

블로그에 정리해서 글로 올리는 것이 많이 더뎌진 것 같다.

이미 한 번 정리한 내용을 또 정리하다보니 다소 귀찮게 느껴지는 것도 없잖아 있다.

 

그래도 최대한 공부한 내용을 다시 정리해서 블로그에 올릴 수 있도록 노력해야겠지..?

---

📕 Reference

React 기초 / 코딩애플
ReactJS로 영화 웹 서비스 만들기 / Nomad Coder
React 공식 문서
create-react-app이 무슨 일을 할까? / velog