레슨 10-2: 클라이언트 코드 문제 해결(풀 스택 앱 완성)

좋아요, 그럼 풀 스택 앱에 있는 리액트 코드를 계속해서 디버깅해 봅시다
이미지에서 보시다 시피 가장 눈에 띄는 건 열이 너무 많다는 겁니다, 이 문제를 해결하면

 ChatGPT의 도움은 필요하지 않을 것 같네요. boardSettings에서 columns 값이 100인 것을 확인했으니, 여기서 0을 하나를 빼고 저장하겠습니다. 그런 다음 다시 브라우저로 돌아가보도록 하겠습니다.

 

그런데 뭔가 이상이 있어 보이닌깐 회원가입 페이지로
돌아가서 유저이름과 비밀번호에 mason2를 넣고  다시 가입해볼께요

8행까지 있고, 열은 10열까지 있는 것 같군요. 그리고 게임을 진행해보면 색깔이 이상하게도
현재 차례를 확인하는 부분에 문제가 있는 것 같네요.
 setCurrentPlayer() 함수에 코드가 빠진 것 같습니다. 
누가 차례인지 확인하는 부분을 살펴보시면 될 것 같습니다. 해당 부분을 수정해보세요.

 

코드를 모두 복사하고 ChatGPT로 가서 이렇게 물어보죠
‘setCurrentPlayer 함수의 기능 구현이 누락됐습니다다음의 코드에서 함수 로직을 완성해 주세요’

코드를 좀 자세히 읽어봐야 해요 그냥 복사해서 붙이지 안됩니다.

setCurrentPlayer(
    currentPlayer === boardSettings.colors.p1 ? boardSettings.colors.p2 : boardSettings.colors.p1
);

여기에 삼항 연산자를 사용합니다
currentPlayer가 p1 색깔과 같다면 boardSettings의 p2 플레이어 색깔로 바뀌어야 해요
그리고 setCurrentPlayer()에 인자로 넘겨줍니다

훌륭한 방식이네요, setCurrentPlayer() 함수를 찾아보도록 하겠습니다.
함수 내부를 확인해보니 아무 내용도 없군요.
그러니 이제, 이 코드를 저장해볼까요?

Chrome을 열어서 처음부터 다시 시작해봅시다.
localhost:3001로 다시 들어가볼게요.
새로운 사용자를 생성하겠습니다.
이름과 비밀번호 모두 'mason3'으로 설정하겠습니다.

삼항 연산자가 제 역할을 했어요.
파랑이 차례가 끝나면, 다시 'mason3'의 차례가 되는 거죠.
아주 잘 작동하네요.

그럼, 'mason3'이 먼저 4개를 연결해 볼게요.
원래 'mason3'이 이기는 상황이야.
하지만, 안 되는 것 같네요

2번 플레이어가 오른쪽에 놓으면,
2번 플레이어가 승리하게 되는군요.
이건 잘 동작하는 것 같아요.

게다가, 플래시 효과까지 완벽하게 나타나네요, 모든 기능이 잘 작동하는 것 같아요.
그런데 세로 방향으로 이기는 경우가 제대로 작동하지 않는 것 같아요.
코드를 다시 살펴보면서 'horizontal'을 찾아볼게요.
isHorizontalWin() 함수가 있군요, 이건 가로 방향에 대해 승리 조건을 확인하는 함수예요.
그런데 세로 방향을 확인하는 함수는 찾아볼 수가 없네요.
세로 방향의 승리 조건을 확인하는 함수를 새로 만들어야 할 것 같아요.
그 부분이 빠진 것 같네요.
일절 보이지 않아요.
이번에는 전체 코드를 복사하기 보다는 필요한 부분만 가져와볼까요.
전체 300줄의 코드를 복사하기 보다는, 실제로 코드가 몇천 줄이 넘어가는 경우도 있는데 그걸 모두 복사하는 것은 쉽지 않으니까요.
isHorizontalWin() 함수만 복사하도록 할게요, 가로 방향 승리 조건은 확인할 수 있지만 세로 방향 승리 조건을 확인하는 함수가 없으니까요.

이 함수를 복사한 후에는, 아래쪽으로 이동해서
‘아래 있는 코드는 커넥트4 게임에서 대각선 연결로 이겼는지 확인하는 함수입니다.세로 연결 승리를 확인하는 함수를 작성해 주세요’ 라고 물어보겠습니다.

코드 작성 규칙도 잘 따라왔어요, 'isHorizontalWin'이라는 함수 이름을 보고
'isVerticalWin'이라는 이름으로 함수를 만들었군요.
rows, columns, empty라는 변수도 설정해 주었네요, 아주 잘했어요. 그 아래를 보면
중첩된 반복문이 나타나는데, 바깥쪽 반복문에서는 열(columns)을,
그리고 안쪽 반복문에서는 행(rows)을 검사하고 있어요.
괜찮아 보이는데,
조금 복잡해 보이는 중첩 반복문이네요.
같이 놓고 한 번 비교해 보도록 해요.

한 줄 한 줄 자세히 살펴봅시다. isHorizontalWin() 함수에서는 'rows, columns, empty'라는 세 개의 변수를 선언합니다.
이 변수들에는 boardSettings의 값을 저장하는데, 이 때 구조 분해를 활용해요.
구조 분해를 통해 rows와 columns에는 boardSettings의 행과 열의 값을, 그리고 empty에는 colors의 값을 저장해요.
그 다음으로, 행의 개수만큼 반복문을 돌려 각 행의 (columns-4)열까지 확인하는 작업을 해요.
승리를 위해선 4개가 일렬로 놓여야 하니까, 4를 뺀 값을 확인하는 거죠.
행과 열의 인덱스를 활용해 시작 지점을 확인하고, 돌이 없으면 다음으로 넘어가며, 돌이 있으면 카운터를 1로 설정합니다.
그 후, column+1열부터 column+4열까지 순회하며 board 배열의 해당 인덱스 값이 board[start]와 동일한지 확인합니다.
이 과정에서 카운터를 1씩 증가시키며, 카운터가 4에 도달하면 승리 상태를 생성합니다.
가로 승리는 열을 따라 확인하지만, 세로 승리는 행을 따라 확인해야 해요.
행을 순회하고 있지만, 궁극적으로 확인하고 있는 건 열의 값이며, 카운터가 1에서 4가 될 때까지를 보는 거죠.
혹시 이해가 안 되면, ChatGPT에게 이 중첩 반복문이 무엇을 하는지 물어보세요. 분명히 답을 얻을 수 있을 거예요.
그럼에도 불구하고 isVerticalWin() 함수를 작성했는데, 이 함수를 호출하는 부분이 없어 보이네요. 이 부분이 계속 마음에 걸리네요.
일단 이 상태로 저장하고, 아직은 끝나지 않았습니다.
isHorizontalWin() 함수는 어디선가 호출되는데,
'isHorizontalWin'을 검색해보면 isWin() 함수에서 앞 대각선, 뒤 대각선, 그리고 가로 방향을 확인하는 부분을 볼 수 있어요. '||' 기호는 OR 조건을 의미하는 거죠.
당연히 isVerticalWin() 함수는 없네요.
그럼 이제 isVerticalWin() 함수도 호출하도록 설정해야겠어요.

이제 이 문제는 해결된 건지 확인해볼 시간이네요.
정말로 잘 작동할까요?
우리는 다시 기본 경로인 localhost:3001로 돌아가 보겠습니다.
처음 페이지에서 사용자 이름과 비밀번호를 입력하고 게임을 시작해볼까요?
이제 세로로도 승리를 거둘 수 있게 되었습니다!

앱의 모든 기능이 완벽하게 작동하는 것을 확인했습니다.
이렇게 ChatGPT를 활용하여 실제 앱의 디버깅을 해볼 수 있어요.
하지만 아직 해야 할 일이 남아 있을까요?
그럼요, 끝이 어디인가요?
아직 사용자 로그인 기능에 인증 과정도 추가되지 않았잖아요.
그 부분도 앱 개발 과정에서 매우 중요한 부분을 차지하죠.
ChatGPT에게 이 부분에 대해 질문해봐야겠어요.

그렇습니다, passport는 이런 상황에 완벽하게 맞는 솔루션이죠.
이 강의는 ChatGPT의 놀라운 능력을 소개하기 위해 기획되었습니다.
지금까지 한 작업을 다시 한번 되돌아보고, 앞으로 어떤 방향으로 나아갈지는 다음 시간에 이야기하도록 하겠습니다.