📚 진행한 공부

• 게임 페이지에서 유저 정보 불러오기 기능 추가

🔫 트러블 슈팅

• 나열된 포켓몬과 선택된 포켓몬의 교체 이슈 해결 ✅
• 페이지 새로고침 시 404 오류 해결 ✅

📖 게임 페이지에서 유저 정보 불러오기 기능 추가

만들어둔 전역 상태관리 zustand 코드를 적어놓은 useUserStore()에서 필요한 정보를 받아온 뒤 div에 추가만 해주면 됐었음

💻 게임페이지 코드

결과물

---

✅ 🔫 나열된 포켓몬, 선택된 포켓몬 교체 이슈 해결

진행하다 보니 또 하나 겪게 된 문제가 있었는데, 바로 메인 포켓몬의 교체 이슈였다.

일단 해당 문제를 설명하자면, 분명 나는 파이리를 눌렀는데 이상해씨가 나오고 이상해씨를 눌렀는데 이상해풀이 나오고 전부 내가 클릭한 포켓몬으로 교체가 되는 것이 아닌 포켓몬으로 불일치하게 메인 포켓몬이 교체가 된다는 것이었다.

이게 도대체 무슨 상황인가!.. 팀원 분의 도움을 받아서 알아보니

선택된 포켓몬과 나열된 포켓몬의 id값 참조 위치가 달라서 교체가 원할하지 않았다는 것이다.

💻 변경 전 코드

💻 변경 후 코드

결과물

아래에 위치하는 포켓몬도 동적으로 보여주기 위해 Image src 부분을 수정했다.

그리고 화면에는 안 보이지만 포켓몬을 움직이기 위해 스페이스바 혹은 방향키를 누르면 해당 메인페이지의 스크롤이 상하좌우로 조금씩 움직이는 게 거슬려서 전체를 감싸고 있는 div className에 overflow-hidden 적어주니 말끔하게 사라졌다.

---

✅ 🔫 페이지 새로고침 시 404 오류 해결

코드를 수정하던 도중, 어느 순간부터 갑자기 새로고침을 하면 최근에 겪었던 404 문제랑 비슷한 문제가 발생했는데 저번처럼 강력 새로고침을 해도 여전히 404오류가 떠서 도대체 뭐가 문제일까 하고 1시간을 넘게 고생을 한 결과 해답을 찾았다!

바로 .env.local 파일에 NEXT_PUBLIC_BASE_URL을 추가해주는 것

이게 왜 404 오류의 해결책이 되는지 서칭을 통해 얻어낸 정보를 풀어보자면

.env.local에 NEXT_PUBLIC_BASE_URL을 추가함으로써 404오류가 해결되는 이유는, Next.js가 환경 변수를 통해 필요한 설정 값을 동적으로 받아오기 때문이다.

이를 토대로 채찍피티 형님한테 좀 더 자세한 이유를 물어봤다.

1. 환경 변수 사용

• Next.js에서 NEXTPUBLIC로 시작하는 환경 변수는 클라이언트 측에서도 접근할 수 있고, 이를 통해 클라이언트와 서버 간에 일관된 설정 값을 사용할 수 있음.

2. API 요청 경로 설정

• NEXT_PUBLIC_BASE_URL 변수를 사용하면 API 요청 시 기본 URL을 명확히 지정할 수 있다. 예를 들어, Axios와 같은 라이브러리에서 이 변수를 사용해 API 호출 시 올바른 주소를 참조하게 됨.

3. 동적 라우팅 문제 해결

• 페이지를 새로고침하거나 뒤로가기 버튼을 눌렀을 때, 동적 라우팅을 사용하는 경우 환경 변수를 통해 설정된 기본 URL이 없으면 올바른 페이지를 찾지 못해 404 오류가 발생할 수 있음.