React를 통해 Personal Portfolio 만들기 - 스프린트 일지

어제오늘 이틀간 진행했던 스프린트에서는 React를 사용해서 클라이언트 사이드를 만들고, 빌드한 후 서버 사이드에서 React 빌드 결과물을 담는 폴더를 만들어서 웹 서버를 통해 사이트를 제공하도록 했다.  빌드가 뭔지 몰라서 빌드부터 하고 서버 사이드를 건드리다가 '이게 아닌 것 같은데...' 싶었는데 알고 보니 빌드는 클라이언트 세팅이 끝난 뒤에 해주면 되는 거였다. 빌드를 하게 되면 클라이언트 사이드에서의 작업물이 알아보기 힘든 형태로 압축된다. 이것은 기능적인 면이고, 빌드의 목적은 배포를 하기 위함이다.

 

React-router

• Routing : 사용자가 어떤 주소로 들어왔을 때(URL), 그 주소에 해당되는 적당한 페이지를 사용자에게 보여주는 것. 이것을 '라우팅' 또는 '라우터'라고 한다.
• React-router는 React에서 라우팅 기능 구현을 도와주는 도구다.
• BrowserRouter : react-router-dom을 적용하고 싶은 컴포넌트의 최상위 컴포넌트를 감싸주는 wrapper 컴포넌트.
• BrowserRouter 컴포넌트로 App 컴포넌트를 감싸면 App은 BrowserRouter를 사용할 수 있는 상태가 된다.

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import About from "./경로/About";
import Nav from "./경로/Nav";

function App() {
  return (
    <Router>
      <div>
        <Nav />
        <Switch>
          <Route path="/about">    -> path는 사용자가 웹사이트에 접속할 경로
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">    -> 사용자가 웹사이트에 아무런 path를 지정하지 않고 들어왔을 때
            <Home />    -> Home 컴포넌트를 사용자에게 라우팅 해주겠다는 뜻
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

- 전체 태그를 <Router> 컴포넌트로 감싸는 것을 통해 App은 BrowserRouter를 사용할 수 있는 상태가 됨.

- 라우트를 설정할 때는 Route 컴포넌트를 사용하고, 경로는 path 값으로 설정한다. 첫 번째 라우트 "/about"에서는 About 컴포넌트를 보여주게 했고, 두 번째 라우트 "/users"에서는 Users를, "/"에서는 Home을 보여주게 했다.

- Switch 컴포넌트 : 라우트들을 이 컴포넌트에 감싸면 매칭되는 첫 번째 라우트만 보여줄 수 있다.

 

서버 사이드 셋업에서, React 빌드 결과물을 담는 폴더를 만들어서, 웹 서버를 통해 사이트를 제공하게끔 만들어주는 것, 그리고 http://localhost:5000/static과 같은 URL로 접근할 때 클라이언트 파일들이 접근 가능하도록 만들라는 요구사항이 있었다.

const express = require("express");
const app = express();
const path = require("path");
const port = 5000;

app.use("/", express.static(__dirname + "/public"));

app.get("/*", function (req, res) {
  res.sendFile(path.join(__dirname, "public", "index.html"));
});

app.listen(port, () =>
  console.log(`Example app listening at http://localhost:${port}`)
);

 

첫 번째 요구사항은 express에서 정적 파일 제공 https://expressjs.com/ko/starter/static-files.html 문서에 해답이 나와있었다.

우선 서버 프로젝트 내에 public이라는 폴더를 만들고 클라이언트에서 빌드한 파일을 복사해 넣었다. 그리고 express의 기본 제공 미들웨어 함수인 express.static을 사용했다.

__dirname은 현재 위치를 가리키는 Node.js의 전역 변수다.

app.use("/", express.static(__dirname + "/public"));

이 부분을 통해 웹 서버를 통해 사이트를 제공할 수 있게끔 해주었다.

 

두 번째 요구사항에 대한 답은 https://create-react-app.dev/docs/deployment 이 문서에 나와있다.

app.get("/*", function (req, res) {
  res.sendFile(path.join(__dirname, "public", "index.html"));
});

바로 이 부분을 통해 두 번째 요구사항, 사용자가 http://localhost:5000/static 과 같은 URL로도 접근이 가능하도록 만들어 주었다.

path 모듈을 사용했는데, path.join 메소드를 사용해 현재 폴더 디렉토리를 쉽게 계산할 수 있다는 장점이 있다.