Wordle Clone Project 3일차

PROLCY·2022년 10월 17일

React

Wordle-Clone-Project

목록 보기

3/15

오늘은 10월 17일 3일차이다.

목표

백스페이스 기능 구현
정답 여부 판단 로직 구현

진행

백스페이스 구현은 어렵지 않았다. 현재 관리하고 있는 word 상태를 불변성을 유지하면서 맨 뒤에 있는 글자만 짤라주면 되었다.
우선 Wordle에서는 위치와 문자 모두 맞으면 배경색을 초록색, 문자만 맞으면 노란색으로 변경해준다. 둘 다 맞지 않으면 회색을 넣어주고, 판단이 끝난 단어에 대해서는 글자색을 하얀색으로 변경해준다. 따라서 기존에 문자로 이루어진 배열 형태의 word 상태를 text, textColor, bgColor를 가진 객체로 이루어진 배열 형태로 바꿀 필요가 있었다.
정답 여부 판단 로직은 정답 단어와 word 상태를 비교하는데, 정답 단어의 index 0부터 비교한다. 이때 word 상태의 같은 인덱스 문자와 비교해보고, 맞으면 초록색, 틀리다면 word 상태의 다른 인덱스에서 비교한다. 이 때 나온다면 노란색. 모든 비교가 끝난 후, 배경색이 흰색인 문자들에 대해 배경색을 회색으로 바꿔준다.

코드

		if ( e.target.innerText === BACK ) {
            if ( word.length === 0 )
                return;
            setWord(word.slice(0, -1));
            console.log(word);
            return;
        }

백스페이스를 구현한 부분이다. onClick 함수 안에 들어가 있다.

		setWord(word.concat({
            text: e.target.innerText,
            textColor: black,
            bgColor: white,
        }));

이것도 onClick 함수 안의 부분인데, 문자만 추가하던 것을 배경색과 글자색을 속성으로 가지는 객체를 추가하는 것으로 변경하였다.

		if ( e.target.innerText === 'ENTER') {
            if ( word.length < wordMaxLen ) {
                alert("단어가 짧습니다!");
                return;
            }
            setWordList([
                ...wordList,
                ColoringWord(word, wordCorrect),
            ]);
            listIndex++;
            console.log(listIndex);
            setWord([]);
            return;
        }

onClick 함수 내에서 ENTER를 눌렀을 시 실행되는 부분이다. 원래는 setWordList가 concat 함수로 되어 있었다. 그래서 word 상태를 객체 배열로 바꾼 후 테스트해볼 때 오류가 자꾸 나서 해결하느라 많은 시간을 썼다. 원인은 concat 함수 때문이었다. 내가 원한 건 wordList 배열 안에 word 배열을 넣는 것이었는데, concat 함수는 그런 식으로 작동하는 것이 아니었다. 함수에 대한 이해가 부족했던 것 같다. 그래서 위와 같은 형태로 불변성을 유지하면서 word를 추가해 줬다. ColoringWord는 밑에 나오겠지만 단어를 색칠하는 함수이다.

	const ColoringWord = ( word, wordCorrect ) => {
        const wordLen = word.length;
        for ( let i = 0 ; i < wordLen ; i++ ) {
            if ( wordCorrect[i] === word[i].text ) {
                word[i].bgColor = green;
                word[i].textColor = white;
                continue;
            }
            for ( let j = 0 ; j < wordLen ; j++) {
                if ( wordCorrect[i] === word[j].text ) {
                    word[j].bgColor = yellow;
                    break;
                }
            }
            word[i].textColor = white;
            if ( word[i].bgColor === white )
                word[i].bgColor = gray;
        }
        return word;
    };

단어 색칠 함수이다. 진행 파트에서 설명한 것과 똑같이 반복문을 구성했다.

정답은 오늘 Wordle의 정답인 STEIN을 넣고 내가 넣었던 단어들을 그대로 넣었다. 잘 나오는 모습이다.