Wordle Maker Project 4일차

오늘은 11월 4일 4일차이다.

목표

• 서버 기초 작업

진행

서버 기초 작업은 간단히 진행했다. 기본적인 미들웨어들을 설치해서 연결해주고, 단어들이 있는 mongoDB도 mongoose를 통해 연결해줬다. 라우터는 현재는 index, solve, make를 만들어놨고, 추후 더 추가할 예정이다. index 라우터는 맨 처음 접속했을 때, solve 라우터는 Wordle을 푸는 페이지와 관련된 라우터이고, make 라우터는 Wordle을 만드는 페이지와 관련된 라우터이다.
solve 라우터에는 Wordle Clone Project에서 했던 것과 동일하게, 정답, 단어 추가, 단어 검증 라우터가 들어가 있다.
프론트에서는 내가 입력했던 단어들을 서버에서 불러올 때 애니메이션이 부자연스러워서 useEffect를 통해 순차적으로 진행되도록 처리했다.

코드

const express = require('express');
const axios = require('axios');
const Word = require('../schemas/word');

let wordList = [];
let keyState = {};
let wordCorrect;

const router = express.Router();

router.get('/correct', async (req, res) => {
    if ( !req.session.ip ) {

        req.session.save(function() {
            req.session.ip = req.ip;
            console.log(req.session.ip);    
        })

        let random = Math.floor(Math.random() * await Word.count());
        const randomWord = await Word.findOne({}).skip(random);
        wordCorrect = randomWord.word;
        console.log(wordCorrect);
    }
    res.send({
        wordCorrect: wordCorrect,
        wordList: wordList,
        keyState: keyState
    });
});

router.post('/add', (req, res) => {
    const newWord = req.body.newWord;
    keyState = req.body.keyState;
    wordList.push(newWord);
    console.log(wordList);
    res.status(200);
});

router.post('/exist', async (req, res) => {
    try {
        const wordFound = await Word.find({ word: req.body.word });
        
        if ( !wordFound.length )
            res.send({
                exist: false
            })
        else {
            res.send({
                exist: true
            })
        }
    } catch (error) {
        console.error(error);
    }
});

module.exports = router;

정답 단어를 생성하는 부분은 추후 데이터베이스에서 닉네임에 대응하는 단어를 가져오는 걸로 변경할 예정이다.

    useEffect(() => { // WordList가 6줄이 될 때 기존 wordList 정보 요청
        if ( lineSet === sixLines ) {
            client.get('/solve/correct')
            .then ( res => {
                setWordCorrect(res.data.wordCorrect);
                setWordList(res.data.wordList);
                keyState = res.data.keyState;
            })
        }        
    }, [lineSet]);

프론트의 Board 부분이다. 여섯 줄로 바꾸는 setLineSet과 단어 리스트들을 초기화해주는 setWordList가 서로 실행 순서가 렌더링할 때마다 달라서 애니메이션이 부자연스러웠다. 그래서 useEffect로 lineSet 상태가 바뀐 후 wordList를 초기화 해줘서 순서를 지정해줬다.

내일 할 것

• SQL 데이터베이스 설계

마무리

오늘은 오랜만에 널널하게 작업을 할 수 있었다. 진전이 많이 된 거 같아 다행이다. 이번주 주말은 알바가 있어서 많은 시간을 투자하지 못 할 것 같은데, DB를 어떻게 구성할지 생각하고 조금만 구현하는 걸로 해야 겠다.