React(생활코딩)_2일차_리액트 시작_2

Lina Hongbi Ko·2023년 8월 9일

React_생활코딩

목록 보기

3/23

앞전에서는 리액트를 사용할때 어떤 디렉토리를 이용하고, 어디서 사용되는지를 알아보았다. 이번에는 css코드를 어떻게 작성하고, 또 어떻게 배포하는지에 대해 알아보자.

CSS는 어디서 수정할까.

create-react-app에서 생성한 샘플 애플리케이션의 css코드를 먼저 살펴보자. index.js 파일 상단을 보면

// index.js 파일

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

index.css파일이 import 되어있는 것을 확인할 수 있다. 이 파일을 열어서 css를 수정하면 index.html 파일이 바뀐 것을 알 수 있다.

그리고 4번째 줄의 코드를 보면,

<script>
import App from './App';
</script>

App.js에서 App 컴포넌트를 import 한 것을 확인할 수 있다. 여기서 App 컴포넌트의 이름은 바꿀 수 있지만(첫 글자는 대문자) 파일 이름인 App.js는 바꿀 수 없다. (바꾼다면 경로도 변경해야함) 이름을 변경했다면 그 아래의 render() 내에 있는 컴포넌트의 이름도 변경해주어야 한다. 예를 들어보면,

// App컴포넌트의 이름을 MyReactApp으로 변경한 index.js파일

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import MyReactApp from './App';
import reportWebVitals from './reportWebVitals';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <MyReactApp />
  </React.StrictMode>
);

그리고
App.js 파일을 다시보면 App.css를 import하는 부분을 볼 수 있다.

// App.js파일

import React,  { Component}  from "react:
import logo from './logo.svg';
import './App.css';

요 말인 즉슨, App.js에 있는 App이라는 컴포넌트가 로드됐을때 App.css도 함께 로드 되고 그에 맞는 스타일도 적용된다. App.css는 말 그대로 App 컴포넌트의 css를 담당하는 파일이다.

책에서는 App.css와 index.css파일의 내용을 모두 삭제한 상태에서 시작하므로 우리도 그 상태로 시작하자.

배포는 어떻게 할까.

이제 배포(dploy)하는 방법을 알아보겠다. 그전에 배포란 무엇일까 하는 의문이 든다.

프로래밍에서 배포의 의미는 크게 3가지로 나뉜다고 한다.

Release: 같은 제품을 새롭게 만드는 것
(예: 새로운 버전을 배포, 새로운 아이핀 번호 부여)
Deploy: 프로그램 등을 서버와 같은 기기에 설치하여 서비스 등을 제공하는 의미
Distribute: 제품을 사용자들이 사용할 수 있도록 서비스 등을 제공하는 의미

여기서 설명하고 싶은 배포는 Deploy. 즉 리액트에서의 deploy에 대해서 배워보자.

💡 리액트에서 배포란?

: creat-react-app을 통해 개발을 하다 보면 이 환경이 상당히 무겁다는 것을 알 수 있다. 이것은 리액트가 개발 편의성을 위해 여러가지 기능을 추가해놓았기 때문이다. 실제로 리액트페이지를 열어서 개발자도구를 이용해 Network로 들어가서 용량을 보면 높은 것을 알 수 있다.
개발자가 개발할때는 상관없지만 사용자가 이 환경에서 앱을 사용한다면 성능이 매우 느리고 불편할 것이다. 뿐만 아니라 보안문제도 발생할 수 있다고 한다. 그래서 우리는 프로덕션모드(production-mode), 사용자가 쓸 환경에서의 애플리케이션을 만들때, 이 말은 build 한다고 하는데 이런 명령어를 쓴다.

cmd에서 리액트를 실행하고 있는 디렉토리로 이동해서 아래와 같은 명령어를 입력해준다.

npm run build

이 명령어를 실행하면 알아서 빌드가 진행되고 배포 버전으로 파일들이 만들어진다. 그리고나서 우리는 build라는 폴더가 새로 생긴 것을 확인할 수 있다. 이 안에서 index.html 파일을 볼 수 있는데, 이 파일을 실제로 열어서 보면 공백도 하나도 없고 보기도 불편하다.

이것은 create-react-app이 실제 프로덕션 환경에서 사용되는 앱을 만들기 위해 기존 index.html파일에서 공백과 같이 불필요한 용량을 차지 하는 것들을 삭제하기 때문이다. 이밖에 src에서 작업했던 파일들의 용량도 줄이고, 어플리케이션의 프로덕션모드에 불필요한것들을 없애는 작업을 수행한다.

그래서 이 책에서는 결론적으로 이렇게 말하고 있다.

✏️ "실제로 앱을 서비스할때는 build안에 있는 파일들을 사용해야 한다."

: 웹서버의 Document Root 즉, 웹서버가 HTML문서를 찾는 최상위 디렉토리에 빌드를 통해 생성한 build 디렉토리의 파일과 폴더를 위치시켜야 한다는 말이다.

이렇게 하면 실서버 환경은 완성이다.

그렇다면 웹서버를 통해 빌드된 앱을 간단히 실행해보자.
이것은 serve라는 명령어를 통해 확인할 수 있다. serve는 npm이나 npx로 설치할 수 있다.

npm install -g serve

npx serve

creat-react-app를 실행(설치)하려고 했던 명령어와 비슷한 느낌으로 npm을 사용하면 현재 사용중인 컴퓨터의 어디에서나 serve라는 명령을 통해 웹서버를 실행할 수 있다. 반면에, npx로 실행하면 서버를 설치하지 않고, 한번만 사용할 웹서버를 내려받아 실행할 수 있어서 용량을 차지 하지 않는다.

나는 역기서도 역시 npx를 이용할 것이다.