Wordle Clone Project 16일차

오늘은 10월 30일 16일차이다.

목표

• 프론트엔드와 백엔드 합치기
• favicon과 meta 태그 수정

진행

합치는 것은 간단했다. 먼저 React 프로젝트를 빌드해주고, 빌드하고 나면 build 폴더가 생기는데, 그것을 node.js 서버에 연결해주면 되었다. express.static에 build 폴더를 연결해주었고, GET / 요청이 왔을 시에는 build/index.html을 클라이언트에 보낸다.
favicon은 wordle 이미지를 png로 받아와서 ico로 바꿔 준 다음 적용했고, meta 태그도 수정하여 Wordle이 떠있도록 하였다.

코드

app.use(morgan('dev'));
app.use('/', express.static(path.join(__dirname, 'build')));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
    resave: false,
    saveUninitialized: false,
    secret: process.env.COOKIE_SECRET,
    cookie: {
        httpOnly: true,
        secure: false,
    },
    name: 'session-cookie',
}));

app.use('/', indexRouter);
app.use('/word', wordRouter);

app.js 부분이다. express.static을 이용하여 정적 파일을 제공하고 있다.

const express = require('express');

const router = express.Router();

router.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, '../build/index.html'));
});

module.exports = router;

indexRouter.js이다. 맨 처음 로드 시 /build/index.html 파일을 보낸다.

서버 포트인 4000번 포트에 들어가도 잘 렌더링되고 있다. favicon과 meta 태그도 잘 보인다.

내일 할 것

• 프로젝트 마무리 및 다음 프로젝트 준비

마무리

기능들이 잘 작동해서 다행이다. 내일은 Wordle Clone Project를 최종적으로 마무리하고, 11월에 진행할 Wordle Maker Project 시작을 준비할 것이다. 그리고 남은 시간 동안은 서버 사이드 렌더링과 클라이언트 사이드 렌더링에 대해 공부를 좀 해야겠다. 둘의 차이점과 장/단점들을 알아야 다음에 어떤 방식을 사용할 지 명확하게 결정할 수 있을 것 같다.