[초보자] React 설치부터 배포까지의 과정을 정리

안녕하세요 클래스메소드 김재욱(Kim Jaewook) 입니다. 이번에는 React 설치부터 배포까지의 과정을 정리해 봤습니다.

npm을 이용한 create react app 설치

먼저 React를 설치하는 방법은 여러 방법이 존재하지만, npm을 이용해서 설치해 보도록 하겠습니다.

npm은 node.js 로 만들어진 프로그램을 쉽게 설치해주는 앱 스토어입니다. 즉 npm을 설치하기 위해서는 node.js를 설치하면 됩니다. 위의 node.js홈페이지로 들어오면 바로 다운로드 할 수 있는 버튼이 2개가 있습니다. 왼쪽은 가장 안정적인 버전, 오른쪽은 가장 최신 버전입니다.

원하는 버전을 다운로드 하면 됩니다.

• 현재는 안정적인 버전이 14.17.16 버전이고, 최신 버전이 16.9.1 버전입니다

npm -v

npm -v 명령어를 입력해서 npm 버전을 확인합니다. 버전 명이 나오면 설치가 되어있는 상태고, 뜨지 않는다면 미설치 상태입니다.

설치는 적당히 next 누르면서 설치를 진행하면 됩니다.

npm install -g create-react-app

그리고 npm을 이용해서 react를 설치합니다. -g라는 옵션을 주는데, 글로벌로 어떤 곳에서든 실행할 수 있게 옵션을 줍니다.

create-react-app -V

설치가 끝나면 해당 명령어를 통해 잘 설치가 되었는지 버전을 확인합니다.

버전이 잘 나온다면 정상 설치가 된 것 입니다. 여기서 npx로도 설치를 할 수 있는데, npx의 경우 항상 최신버전의 react를 설치하지만, 임시로 설치하는 것이기 때문에 매번 새롭게 다운로드를 받아야합니다. 그에 반해 npm은 한번 설치를 하게 되면 추가적으로 다운로드 할 필요가 없지만 버전업이 됐을 시, 최신 버전을 사용하지는 못합니다.

개발환경 구축

이제 create react app을 이용해서 개발환경을 구축해 보도록 하겠습니다.

그러기 전에 먼저 react-app이라는 폴더를 하나 만들어줍니다.

cd react-app

cd 명령어로 해당 디렉토리로 이동합니다

create-react-app .

create-react-app라는 명령어를 입력하면 개발환경이 구축됩니다. 마지막에 있는 . 은 현재 경로를 의미합니다.

웹앱 실행

이제 설치한 react를 실행해봅시다.

npm run start

npm run start 명령어로 실행할 수 있습니다. 실행하는 경로는 설치한 react 경로에서 터미널을 열어 명령어를 입력하면 됩니다. cmd창으로 해도 되고, vs로 해도 됩니다.

명령어를 입력하고 잠시 기다리면 로컬호스트 3000 포트로 웹 페이지가 하나 실행이 됩니다.

JS 코딩

이번에는 react는 어떤 디렉토리 구조로 되어 있고, 어떤 부분을 건드려야 수정을 할 수 있는지 살펴보도록 하겠습니다.

디렉토리는 public과 src 2개로 나뉘어 있습니다. 먼저 public를 살펴보면 index.html이 들어있습니다.

즉 웹의 메인 페이지가 public 이라는 디렉토리에 포함되어 있다는 의미입니다.

react를 하면서 여러 컴포넌트들을 만들어나가게 되는데, create-react는 여기 div id ="root" 안에 들어가도록 약속되어 있습니다.

개발자도구로 보면 root라는 아이디 아래에 class App와 App-header 등등이 들어가 있는 것을 볼 수 있습니다.

그렇다면 이 아래에 있는 class들은 어떤 파일들을 수정해야 할까요?

바로 src 디렉토리에 있는 파일들을 이용해서 수정할 수 있습니다.

그중 진입 파일은 index.js에 포함되어 있습니다.

index.js 파일을 살펴보면 document.getElementById('root')라고 되어있는 부분을 볼 수 있습니다.

이 부분은 어디에 해당하느냐? 좀 전에 살펴본 index.html에서의 root 부분에 해당합니다.

그리고 <App />은 react를 통해 만든 사용자 정의 태그, 즉 컴포넌트입니다.

이 컴포넌트의 실제 구현은 가장 상단에 import App from './App';이라고 되어있습니다. /App이라는 파일을 import해서 불러온 것입니다.

똑같이 src 디렉토리를 보면 App.js 라고 되어있는데, 이 녀석이 방금 그 App입니다. 즉, 이 App이라는 놈을 불러와서 메인 화면을 구성한 것입니다. idnex에 출력되는 실제 내용은 <div ClassName ="App"> 부터 시작해서 마지막 </div>까지가 내용입니다.

그럼 안에 내용들을 지우고 Hello React!! 를 넣어봅시다.

Hello React!! 를 넣어보면 Hello React!!로 화면이 바뀌게 되고, 오른쪽 개발자 모드 또한 Hello React!!로 바뀐 것을 볼 수 있습니다.

CSS 코딩

이번에는 react에서 CSS를 수정하는 방법을 알아보도록 하겠습니다.

index.js 파일을 보면 idnex.css라는 파일이 있습니다. 그럼 index.css 라는 파일로 들어가서 수정 해보도록 하겠습니다.

백그라운드 색을 aqua로 바꾸면 잘 변경이 되는 것을 볼 수 있습니다.

React 배포

이번에는 사용자들에게 배포할 파일들만 따로 빼내서 좀 더 가볍게 이용할 수 있는 방법에 대해서 알아보고자 합니다.

리액트를 새로고침하면 그냥 hello react라는 문자밖에 없는데, 1.8MB나 됩니다.

현재 리액트는 개발의 편의성을 위해서 여러 가지 기능들을 추가해놓은 상태이기 때문에, 상당히 무거운 편입니다. 개발자만 사용하게 된다면 모르겠지만 이 파일을 그대로 유저가 이용하게 된다면 상당히 느려질 것입니다.

​이 부분을 어떻게 해결할지 알아보고자 합니다. 이전에는 npm run start or npm start 라는 명령어로 웹 페이지를 실행시켰지만 실제 배포할 때는

npm run build

라는 명령어를 입력합니다.

명령어를 입력하고 나면 build라는 디렉토리가 새로 생긴 것을 볼 수 있습니다.

index.html을 한번 열어보면 이상하게 나오는 것을 볼 수 있습니다. 이렇게 나오는 이유는 원래 사용했던 index.html과 같이 불필요한 공백들과 같이 용량을 차지하는 녀석들을 전부 다 제거하기 위해서입니다. 즉 실제 서비스할 때는 build 안에 있는 파일들을 사용하면 됩니다.

그리고 build를 할 때 다음과 같은 명령문이 뜨게 되는데 serve라고 하는 npm을 통해 설치할 수 있는 간단한 서버입니다.

npm insatll -g serve
npx serve -s build // 한번만 실행

npx의 경우 한 번만 실행시킬 서버를 다운로드 하는 것이고, serve라는 웹서버를 다운받아서 실행 시킬 때, build라는 놈을 root로 하겠다는 의미입니다.

명령어를 입력해 보면 아래 주소가 뜨게 됩니다. 접속해서 용량을 살펴보겠습니다.

여기서 다시 용량을 살펴보면 1.8MB였던 웹앱이 139KB로 엄청나게 줄어든 것을 볼 수 있습니다.

이런 식으로 리액트 전체를 다 서버로 돌리는 것이 아니라 build를 통해 용량을 줄여서 배포하면 유저 입장에서는 더 가벼운 웹앱을 이용할 수 있습니다.

참고

• 생활코딩 React
• React 설치와 개발환경 셋팅
• [ReactJS] 리액트 간단하게 설치하는 방법 (Window)