Next.js입문 4일 차 @본격 시작, route handler

오늘은 모든 강의를 완강하고 본격적으로 개인 과제를 시작했다. 이번 과제는 lol 게임 정보 사이트를 만드는 것으로, 이전에 라우터 처리는 해두었기 때문에 오늘은 fetch에 집중했다. 

 

 

첫번째 난관은 가져오는 데이터의 형태가 객체 안의 객체의 형태라서 map을 돌리기가 난감했던 것이다. 

 

이전에는 가져오는 데이터의 형태가

 

[{},{},{}]의 객체 배열 형태라서

 

map을 통해 쉽게 배열 요소의 각 객체 데이터를 빼내올 수 있었는데 이번에는

 

{ name:{}, name:{}, name:{} }의 객체 속 객체의 형태라서 map으로 데이터를 바로 빼내올 수 없었다. 

 

그래서 이번에는 Object.value()로 객체 속의 한 단계 아래 요소들을 뽑아와서 객체 배열로 바꾸어줄 필요가 있었다. 

 

그래서 친숙한  [{},{},{}]의 객체 배열 형태 를 가진 데이터를 뽑아와서 map을 돌릴 수 있었다. 

 

 

두번째로 난감한 것은 route handler로 서버를 만들고 그 서버에서 데이터를 가져오는 과정에서 자꾸만 응답이 아니라 요청이 콘솔에 찍혔던 것이다. 

늦은 시간까지 튜터님을 붙잡고 질문을 했지만 결국 해결할 수 없었는데, 이전에 dev환경과 build 환경은 다르다고 말씀하신 게 생각이 나서 build환경에서 콘솔을 찍어보니 성공적으로 요청이 아니라 응답이 찍힌 것이 보였다. 

다만 이 글을 쓰면서 다시 build를 해보니 어디선가 오류가 나고 있다며 콘솔만 찍히고 build는 실패하는 일이 일어나고 있다. 

 

비록 '이게 왜 되지' 하는 상황이지만... 실마리는 잡은 것 같아 다행이다. 몇 번 실험을 해 본 결과, 이 콘솔은 api route.ts 쪽에서 찍히는 것이고 page.tsx 쪽에서는 전혀 찍히지 않았다. 그렇다면 아마 사용을 잘못한 것 같은데... 

 

 

+ 계속 찾아본 결과 잠시 yarn 문제로 build가 안 되었던 것 같아서 다시 build로 문제를 찾아보았는데, 올바른 응답은 route.ts쪽에서만 찍히고 page.tsx 쪽에서는 요청이 찍히는 것을 확인할 수 있었다. 요청 자체는 가는 걸 보아하니 아무래도 사용처 문제인 듯 하고, 또 다른 글에서는 서버 컴포넌트에서 route handler를 사용하지 말라고도 했으니 내일은 클라이언트 컴포넌트에서 시도해볼 생각이다.