ijooha 님의 블로그

동적 라우팅 구현 이슈 동적 라우팅을 구현할 때 URL 파라미터를 받아서 해당 파라미터에 맞는 페이지를 동적으로 렌더링하고자 했으나,params가 제대로 동작하지 않아 문제가 발생했다.        해결 과정 처음에는 params.id가 undefined로 출력되는 문제를 겪었고, 이를 해결하기 위해 여러 가지 방법을 시도했다.폴더 구조나 파일 구성, 링크 설정 등에서 문제가 있을 수 있기 때문에 하나씩 차근차근 점검했다. 우선 Next.js에서 동적 라우팅을 사용하려면 [id]와 같은 폴더 이름을 사용해야 한다는 점을 다시 확인하고, 이 구조로 맞게 설정했는지 다시 보니 문제가 없었다.그 다음 파일 구성을 계속 살펴봤는데, 동적 페이지를 구현하기 위해 [id] 폴더를 만든 후, 해당 폴더에 파일을 생성..

깔끔하게 코드 쓰기프로젝트 링크        개요 프로젝트를 완료했지만 코드가 너무 장황하고 가독성이 떨어져 보였다. 어떻게 하면 깔끔하고 직관적으로 만들 수 있을지 고민하다가,여러 컴포넌트에서 사용한 useMutation과 useQuery를 따로 모듈로 분리해보기로 했다.         과정 💦 01 useMutation 분리 먼저 컴포넌트 안에서 사용했던 훅들은 아래와 같은 형태였다.const mutation = useMutation({ mutationFn: async () => { ... } })짧게 예시로 작성한 거라 나름 깔끔해보이지만 거의 열줄짜리 훅들이었고, useQuery와 함께 사용하거나 훅이 많아지면 굉장히 길었다. 먼저 별도의 useMutations.js 파일을 만들고, Mutati..

Redux 상태를 활용해 Toast 알림 문제 해결하기         문제 상황 ⚠️ 버튼에서 toast()를 실행해야 하는데, Dex 페이지(상위 컴포넌트)에서 렌더링되므로 알림이 뜨지 않았다.처음에는 버튼이 클릭됐을 때 toast가 실행되도록 했더니, 버튼 위에 토스트 알림이 뜨는 대참사..(포켓몬 덱스 프로젝트를 하고 있었어서 버튼이 150개였음.)         원인 분석 🧐 toast()는 Dex 페이지에서 실행되지만, 버튼 클릭 시 상태 변경이 Dex에 즉시 반영되지 않는다.어떻게 해야될진 모르겠지만 우선 상태를 관리해서 정보를 넘겨줘야겠다고 생각했다.        해결 과정 💦 그래서 state에 alert: false를 추가했다.이후 버튼을 눌렀을 때 특정 조건(슬롯이 가득 찼거나, 이..