[team-project_종합 게임 사이트 만들기] 오목 게임 만들기 (6)

[ 오늘의 작업 과정 ]

- 임시 서버 부분 back이 만들어둔 서버로 교체해 돌을 클릭할 때마다 돌을 둘 수 있는 자리인지 아닌지 판별해서 결과를 보내주도록 한다. 

- 각 돌 승리시 back에서 데이터 받아와 승리 모달창 띄우기 (과정 생략)

 

---

1. 임시 서버 부분을 back에서 만들어둔 서버로 교체해 통신을 수정했지만 어디 칸을 클릭하던  아래와 같이 '돌을 둘 수 없는 자리입니다' 라는 결과만 받아와진다. 

 

이를 해결해주기 위해 encodeGameBoard 함수 안에 있는 아래의 세 줄의 코드를 아래처럼 axios 안으로 옮겨주니 결과값이 올바르게 출력된다. 이미 돌이 놓여져 있는 칸을 클릭할 때만 '돌을 놓을 수 없습니다' 결과가 보내진다. 

  axios.post("http://15.164.164.15:8080/omok/place", { 
... 생략
      .then((res) => {
         // 클릭된 셀의 위치를 {{i:1, j:2}, {i:2,j:1}...} 형식으로 누적되 저장
        setClickedCell([...clickedCell, { i, j }]);

        // 현재 클릭된 셀의 돌 색을 변경
        document.getElementById(`cell-${i}-${j}`).style.background = newColor;

        // 현재 클릭된 돌의 색상을 변경
        setColor(newColor);

        console.log(res.data);
      })
      .catch((err) => {
        console.log("실패");
      });
  };

 

 이 이유는 'encodeGameBoard' 함수는 현재 게임 보드의 상태를 인코딩하는 역할을 한다. 이 함수는 게임 보드의 각 셀에 대한 정보를 숫자로 변환해 문자열로 표현하는데 이 때 'encodeGameBoard' 함수를 호출하여 얻은 문자열이 게임 상태의 일부로 서버에 전송된다. 

 여기서 중요한 점은 클릭한 셀의 정보가 'encodeGameBoard' 함수 밖에서 사용되는 것이 아니라 'axios' 함수 내에서 필요하고 클릭한 셀의 정보는 현재 돌의 색상과 함께 서버로 전송되 현재 게임 상태를 업데이트 할 수 있다. 

 따라서 클릭한 셀의 정보를 encodeGameBoard 함수 내부에서 사용하지 않고, 대신 axios 함수 내부에서 사용하는 이유는 클릭한 셀의 정보와 현재 돌의 색상을 함께 서버로 전송하기 위함입니다. 서버는 클라이언트로부터 받은 정보를 기반으로 게임 상태를 업데이트하고 응답을 반환한다. 

 

아래는 각 돌 승리시 back에서 데이터 받아와 승리 모달창 띄우는 과정까지 끝낸 모습이다.