Wordle Maker Project 28일차

PROLCY·2022년 11월 28일

React express node.js

Wordle-Maker-Project

목록 보기

28/31

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

목표

오류 해결
solverPage에 makerPage로 가는 버튼 추가

진행

발생한 오류는 solverPage에서 단어를 다 지워서 빈 칸 상태일 때 loadPage에서는 맨 앞 글자가 남아있는 오류이다. 해결을 위해서 구조를 조금 바꾸어주었다.
기존에는 단어가 바뀔 때마다 서버에 POST /solve/:maker/typing 요청을 보내 실시간으로 wordList를 업데이트해주고, enter를 누를 시에는 따로 POST /solve/:maker/enter 요청을 보내 색칠된 단어를 보내줬다. 이렇게 한 이유는 axios 내에서 setWord를 해도 useEffect가 실행되지 않았기 때문이다. 나는 이게 axios 내에 있어서 그런 줄 알았는데, 이유는 따로 있었다.

setWord(ColoringWord(word, wordCorrect));

이것이 axios 내의 setWord 부분이었는데, 처음에는 몰랐는데 js에서는 함수 파라미터로 전달된 값이 함수 내에서 변경되면, 기존의 것도 변경되었다. 즉 함수 파라미터는 얕은 복사가 일어나는 것이다. 이것도 자료형마다 다르다던데, 일단 배열은 그랬다. 그래서 내가 원한 건 word 상태를 coloring한 word로 업데이트하는 것이었는데, 이미 ColoringWord 함수 내에서 변경되고 있던 것이다. 그래서 useEffect가 호출이 안 되었던 것 같다.

setWord(ColoringWord(word.map(letter => ({...letter})), wordCorrect));

그래서 이런 식으로 바꿔서 깊은 복사가 일어나도록 하였고, 그 결과 word에 걸려있는 useEffect가 실행되는 것을 확인할 수 있었다.

    useEffect(() => {
        if ( submitNickname  ) {
            if ( wordList[listIndex] === undefined ) {
                setWordList([
                    ...wordList,
                    word
                ]);
            } else {
                setWordList(wordList.map((element, index) => {
                    if ( index === listIndex )
                        return word;
                    else
                        return element;
                }));
            }
            client.post(`/solve/${params.maker}/typing`, { newWord: word, listIndex: listIndex }) // 입력한 단어 및 키 상태 서버에 등록
                .then( res => {
                    if ( word.length !== 0 && word[0].state !== 'filled' ) {
                        setListIndex(listIndex + 1);
                        setWord([]);
                    }
                })
                .catch(error => {
                    console.log(error);
                })
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [word, params]);

이것이 그 useEffect이다. 단어를 wordList에 넣어주고, 요청을 보낸다. 이후 만약 단어가 색칠된 상태(단어의 길이가 0이 아니고, state가 filled가 아닐 때)라면 listIndex를 +1 해주고 word를 빈 칸으로 업데이트하여 다음 단어를 입력받을 준비를 한다.
이 오류를 해결한 후에는 solverPage에 makerPage로 가는 버튼을 넣어주었다. 넣은 이유는 사용자가 링크를 공유받아서 링크로 들어가고 난 후, 문제를 다 풀면 더 즐길 것이 없이 화면을 꺼야하기 때문에, makerPage로 가는 버튼을 넣어줌으로써 자신도 문제를 만들어 볼 수 있도록 하였다.

const Header = props => {
    const navigate = useNavigate();
    
    const onClick = () => {
        if ( props.title === 'Wordle Maker' )
            navigate('/load');
        else if ( props.title === 'Wordle Loader' )
            navigate('/');
        else if ( props.title === 'Wordle Solver' )
            navigate('/');
    };
    return (
        <HeaderBlcok>
            <LeftSpace />
            <Title>{props.title}</Title>
            <Buttons>
                {
                    (props.title === 'Wordle Maker' && <button onClick={onClick}>Wordle Loader</button>) ||
                    (props.title === 'Wordle Loader' && <button onClick={onClick}>Wordle Maker</button>) ||
                    (props.title === 'Wordle Solver' && <button onClick={onClick}>Wordle Maker</button>)
                }
                
            </Buttons>
        </HeaderBlcok>
    )
};

Header 컴포넌트이다. props.title에 따라 다른 onClick 함수와 다른 버튼을 렌더링하는 것을 볼 수 있다.

렌더링된 화면은 위와 같다.

보충할 것

얕은 복사와 깊은 복사

내일 할 것

최종적으로 코드 정리 및 주석 달기

마무리

내가 원하는 바는 다 구현한 것 같아서 이제 수요일 30일차를 마지막으로 프로젝트를 마무리할 예정이다. wordle을 만드는 기능, 만든 것을 공유할 수 있는 기능, 푸는 사람들의 현황을 실시간으로 확인할 수 있는 기능이 내가 처음에 생각한 큰 틀이었는데, 내가 만족하는 수준까진 잘 작동하는 것 같다. 내일은 시간이 지나도 내가 알아볼 수 있도록 코드를 깔끔하게 정리하고, 주석을 세세하게 달 예정이다.

PROLCY

이전 포스트

Wordle Maker Project 27일차

다음 포스트

Wordle Maker Project 28일차