리액트 라우터를 이용한 리액트 프로젝트 기본 설정 방법

1. 다음을 입력하면 리액트 개발 환경에 필요한 기본적인 것들이 갖춰진 프로젝트 폴더가 생성된다.

 

npx create-react-app 폴더이름

 

https://create-react-app.dev/docs/getting-started

 

2. 다음을 입력해서 리액트 라우터를 설치한다.

 

npm install --save react-router-dom

 

이제 라우터를 이용해 리액트에서 작성한 결과물을

우리가 만들 서버에서 불러올 수 있다.

 

https://create-react-app.dev/docs/installing-a-dependency

 

3. src/App.js의 내용을 아래 페이지의 Basic Example 링크의 코드로 바꾸는 게 시작하기 좋다고 한다.

 

https://create-react-app.dev/docs/adding-a-router

 

4. 서버 폴더를 만들기 전에 다음을 입력해서 작업한 결과물을 build 폴더에 담자.

 

npm run build

 

리액트 폴더에 build 폴더가 생성된다.

 

https://create-react-app.dev/docs/production-build

 

5. 리액트 폴더에서 만든 데이터를 보여주기 위한 서버 프로젝트 폴더도 따로 만든다.

 

mkdir 폴더이름

cd 폴더이름

npm init -y

 

6. 리액트의 build 폴더를 서버 프로젝트에 복사해 넣는다.

보통 public이라는 이름으로 바꾼다.

 

7. 서버를 활용 하기 위해 다음을 입력해 express를 설치한다.

 

npm install express

 

8. 서버 폴더에서 아래의 내용을 담은 js 파일을 만든다.

 

const express = require('express');

const app = express();

const path = require('path');

 

// public 폴더 안에 들어간 정적 파일들을 로드할 수 있다.

app.use(express.static(path.join(__dirname, 'public'))); // public 폴더

app.get('/*', function (req, res) {

    res.sendFile(path.join(__dirname, 'public', 'index.html'));

});

 

app.listen(3000, () => console.log('서버가 가동 중입니다.'));

 

https://expressjs.com/ko/starter/static-files.html

https://create-react-app.dev/docs/deployment/

 

9. 다음을 입력해 서버를 가동 한다.

 

node 서버파일이름.js

 

10. 이제 브라우저에서 다음의 주소로 public 폴더 안에 있는 파일들을 불러올 수 있다.

 

http://localhost:3000/

 

여기까지 마치면 리액트 프로젝트와 이를 보여주는 서버의 기본 설정을 마친 셈이다.