Wordle Clone Project 14일차

PROLCY·2022년 10월 28일

React express node.js

Wordle-Clone-Project

목록 보기

12/15

오늘은 10월 28일 14일차이다.

목표

쿠키와 세션을 이용하여 한 번 입력한 답은 새로고침해도 똑같이 유지

진행

우선은 express-session이 미들웨어에 들어가 있기 때문에 따로 구현은 하지 않았다. 하지만 개념에 대해 확실히 짚고 넘어갈 필요가 있다. 우선은 따로 사용자를 구분할 정보를 요청으로 받지 않을 것이기 때문에 ip로 구분하기로 했다. req.session.ip에 정보가 없다면 새로 만들어준다. 클라이언트에서 /word/correct 요청을 보내면서 렌더링을 하기 때문에 /word/correct 라우터에 세션을 만드는 코드랑 데이터를 보내주는 코드를 넣었다. 보내주는 데이터는 wordCorrect, wordList, keyState이다.
이 세 변수들은 서버에서 관리해야 한다. wordCorrect는 서버에서 생성한다고 해도 wordList와 keyState는 클라이언트에서 데이터를 받아와야 한다. 따라서 POST /word/add 라우터를 새로 정의하여 단어를 입력할 때마다 입력한 단어와 keyState를 불러왔다. 그리고 렌더링할 때 응답으로 보내줬다.

코드

client.post('/word/add', { newWord: word, keyState: keyState }) // 입력한 단어 서버에 등록
	.catch(error => {
    	console.log(error);
    })

이 부분은 클라이언트에서 정보를 보내주는 부분이다. ENTER를 눌렀을 때 입력한 단어가 존재한다면 POST 요청을 보내 서버의 데이터들을 업데이트한다.

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

백엔드의 POST /word/add 라우터이다. 데이터들을 받아서 서버에 업데이트해주고 200 상태를 보낸다.

    useEffect(() => { // 처음 렌더링될 때 실행
        client.get('/word/correct')
            .then( res => {
                setWordCorrect(res.data.wordCorrect);
                setWordList(res.data.wordList);
                keyState = res.data.keyState;
            })
    }, []);

    useEffect(() => { // wordList가 바뀔 때마다 listIndex와 isFinished 초기화
        listIndex = wordList.length;
        if ( listIndex > 0 ) {
            if ( wordList[listIndex-1][0].state === 'all-correct' )
                isFinished = true;
        }
    }, [wordList]);

프론트의 Board 컴포넌트 첫 부분이다. 렌더링할 때 백엔드로 GET /word/correct 요청을 보내 데이터들을 받아서 업데이트해주고, listIndex와 isFinished를 설정해준다. 이렇게 하면 사용자가 새로고침을 해도 자신이 입력한 데이터들을 확인할 수 있다.

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
    });
});

백엔드의 GET /word/correct 라우터이다. req.session.ip가 없다면 새로 만들어서 저장해주고, 이것은 사이트에 처음 왔다는 의미니까 random으로 단어를 설정해준다. 이 타이밍은 나중에 기존 Wordle과 같이 24시간에 한 번씩으로 바꿀 예정이다. 이후 응답으로 서버의 데이터들을 보내준다.

새로고침해도 키보드의 상태와 단어 보드의 상태가 잘 유지되고 있다. 상태를 업데이트하다보니 애니메이션도 똑같이 실행된다.