Wordle Maker Project 16일차

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

목표

• LoadPage 세션 구현

진행

세션은 MakerPage에서 이용하는 req.session.maker로 판별했다. LoadPage 접속 시 GET /load 요청을 보내는데, 세션이 없다면 'no-session'응답을 보내고, 닉네임 입력 창을 띄워준다. 있다면 req.session.maker에 있는 닉네임으로 solvers를 데이터베이스에서 찾아 응답으로 보내준다. 이후 solvers를 렌더링한다.

코드

    useEffect(() => {
        client.get('/load/')
            .then( res => {
                if ( res.data === 'no-session') {
                    setSubmitNickname(false);
                    setMessage('Enter your nickname!');
                }
                else {
                    setSubmitNickname(true);
                    setSolvers(res.data);
                }
            })
    }, []);

가장 처음 렌더링될 때 실행되는 부분이다.

client.post('/load/', { makerNickname: nickname })
.then( res => {
    setSolvers(res.data);
})

닉네임 입력받고 난 후 그 닉네임을 POST /load 요청으로 함께 보내서 solvers를 받아온다.

const getSolvers = async ( makerNickname ) => {
    const maker = await Maker.findOne({
        where: {
            nickname: makerNickname,
        },
        include: [{
            model: Solver,
            attributes: ['nickname', 'word_list'],
        }]
    });
    const solvers = maker.Solvers.map(
        solver => ({
            nickname: [solver.nickname.split('').map(nickname => ({
                text: nickname,
                state: 'filled',
            }))],
            wordList: solver.word_list === null ? [] : JSON.parse(solver.word_list),
        }));
    return solvers;
};

이 함수는 서버에 있는 함수인데, 닉네임이 인자로 들어오면 그에 해당하는 solvers를 return하는 함수이다.

router.get('/', async (req, res) => {
    try {
        if ( !req.session.maker ) {
            res.send('no-session');
            return;
        }
        res.send(await getSolvers(req.session.maker));
    } catch (error) {
        console.error(error);
    }
});

GET /load 요청을 처리하는 라우터이다. 세션이 없다면 'no-session' 응답을 보내고, 있다면 세션에서 maker 닉네임을 가져와서 solvers를 보내준다.

router.post('/', async (req, res) => {
    try {
        req.session.maker = req.body.makerNickname;
        res.send(await getSolvers(req.body.makerNickname));
    } catch (error) {
        console.error(error);
    }
})

POST /load 요청을 처리하는 라우터이다. 닉네임이 요청으로 함께 오는데, 그 닉네임을 세션에 저장한 후, solvers를 응답으로 보내준다.

보충할 점

• async 함수의 리턴값은 프로미스이므로, await를 붙여줘야 함

내일 할 것

• 웹소켓 맛보기

마무리

지금 LoadPage는 새로고침을 해야만 solver가 새로 입력한 단어들이 로드되는데, 웹소켓을 사용해 실시간 통신을 구현하여 단어를 입력할 때마다 maker가 확인할 수 있도록 바꿀 예정이다. 웹소켓은 처음 다뤄보는 거라 시간이 좀 걸릴 것 같긴 한데, 열심히 노력을 해야겠다.