Wordle Clone Project 11일차

PROLCY·2022년 10월 26일

React express node.js

Wordle-Clone-Project

목록 보기

10/15

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

목표

서버에 정답 저장 후 프론트에서 정답 불러오기
dictonary API 활용하여 존재하지 않는 단어 입력 시 알림 기능 구현

진행

먼저 서버에 적절하게 라우터를 구성하고, 프론트에서 axios를 통해 데이터를 보내거나 받아오도록 구성했다. 단어 존재 여부를 판단하려면 사전이 필요했는데, 우선은 내가 찾은 무료 dictionary API가 있어서 그것을 활용했다. 링크는 https://dictionaryapi.dev/ 이다.

코드

const express = require('express');

const router = express.Router();

router.get('/', (req, res) => {
    res.send('Hello, Express');
});

module.exports = router;

백엔드의 routes/index.js이다. 후에 화면 렌더링을 위해 사용할 것이다.

const express = require('express');
const axios = require('axios');

const router = express.Router();

const wordCorrect = "GREAT";

router.get('/correct', (req, res) => {
    res.send({
        wordCorrect: wordCorrect
    });
});

router.post('/isExist', async (req, res) => {
    try {
        const word = req.body.word;
        await axios.get(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
        res.send({
            isExist: true
        });
    } catch (error) {
        res.send({
            isExist: false
        });
    }
})

module.exports = router;

routes/word.js이다. wordCorrect에 정답을 넣었고, GET /word/correct 요청이 올 시, 정답을 응답으로 보내준다. POST /word/isExist 요청이 올 시에는 단어가 들어 있는 객체가 함께 오는데, 이 객체에서 단어를 추출하여 dictonary API로 GET 요청을 보낸다. 성공적으로 응답이 오면 isExist = true가 담긴 객체를 프론트로 보내고, 에러가 발생했다는 것은 그 단어가 존재하지 않는다는 뜻이므로 isExist = false가 담긴 객체를 보낸다.

const indexRouter = require('./routes');
const wordRouter = require('./routes/word');

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

app.js이다. 앞서 구성한 라우터들을 연결하였다.

다음은 프론트이다.

"proxy": "http://localhost:4000/"

CORS 오류 방지를 위해 package.json에 프록시를 넣어줬다.

import axios from "axios";

const client = axios.create();

export default client;

api/client.js이다. 따로 분리할 필요가 없는 것 같기도 하다.

	useEffect(() => {
        client.get('/word/correct')
            .then( res => {
                setWordCorrect(res.data.wordCorrect);
            })
    }, []);

정답을 요청하는 부분이다. GET /word/correct 요청으로 받아온 단어를 wordCorrect 상태에 업데이트했다.

const wordText = word.map(letter => letter.text).join('');
client.post(`/word/isExist`, { word: wordText })
	.then( res => {
        if ( res.data.isExist === false ) {
        	setMessage('Not in word list');
            setWordState('not-word');
            setTimeout(() => {setWordState(''); setMessage(null);}, 500);
        }
        else {
        ....

Board 컴포넌트의 onClick 함수에서 ENTER를 눌렀을 시 실행되는 부분 중 일부이다. 우선 word 상태에 text와 state 속성이 같이 있기 때문에 text만 따로 추출하여 wordText를 만들었다. 이후 POST /word/isExist 요청을 wordText를 넣은 객체와 함께 보내서 존재 여부를 받는다. 존재하지 않는다면 message 상태를 'Not in word list'로 업데이트하면서 메시지를 띄워주고, wordState를 'not-word'로 바꾸면서 애니메이션을 출력한다.

메시지도 잘 출력되고, 사진이라 보이진 않지만 애니메이션도 잘 구현된다.