Wordle Maker Project 10일차

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

목표

• MakerPage 세션 구현

진행

9일차에서 계획한 것처럼 페이지에 접속 시 세션을 조회하고, 없으면 닉네임 입력-정답 단어 입력-링크 렌더링 과정을 거치고, 있다면 서버로부터 정답 단어와 링크를 받아와 바로 렌더링한다.

코드

useEffect(() => {
    client.get('/make/')
        .then( res => {
            if ( res.data === 'no-session') {
                setMessage('Enter your nickname!');
            }
            else {
                const wordText = res.data.correct_word;
                let correct_word=[];
                for( let i = 0 ; i < wordMaxLen ; i++ ) {
                    correct_word.push({
                        text: wordText[i],
                        state: 'correct'
                    })
                }
                setWord(correct_word);
                setMessage(res.data.url);
                isFinished = true;
            }
        })
}, []);

MakerPage의 가장 처음 렌더링부분이다. 서버로 GET /make 요청을 보내는데, 응답으로 'no-session'이 오면 닉네임을 입력하라는 메시지창을 띄우고, 아니라면 정답단어를 받아와 state 속성을 추가하여 word 상태를 업데이트해주고, url을 메시지로 렌더링해준다.

router.get('/', async (req, res) => {
    try {
        if ( !req.session.maker ) {
            res.send('no-session');
            return;
        }
        const maker = await Maker.findOne({
            attributes: ['id'],
            where: {
                nickname: req.session.maker,
            }
        });
        const url = await Url.findOne({
            attributes: ['url', 'correct_word'],
            where: {
                maker: maker.id,
            }
        });
        res.send({
            url: url.url,
            correct_word: url.correct_word,
        });
    } catch (error) {
        console.error(error);
    }
});

GET /make 요청을 처리하는 부분이다. 세션을 조회하고 없다면 no-session이라는 문자열을 보내고, 있다면 세션에 들어 있는 닉네임 정보를 활용해 id 추출, 그 id로 해당하는 url과 correct_word를 추출하여 응답으로 보내준다.

내일 할 것

• SolverPage 세션 구현

마무리

오늘은 간단히 진행했다. 세션을 데이터베이스에 저장하라는 말을 이제야 이해할 수 있게 되었다. 분명 브라우저의 쿠키에는 데이터가 남아있었는데, 서버를 재시작하면 서버에서 인식을 못했다. 작업이 마무리되면 레디스에 연결하는 것도 해봐야겠다.