minarae’s story

회사에서 Frontend 개발시에 nextjs를 사용하고 있다. 지금까지 React + nextjs를 공부하고 개발하면서 여러 고비를 넘기면서 개발을 이어왔는데 다시 한 가지 난제에 부딪히게 되었다. nextjs는 SSR(Server Side Rendering)을 지원해주는 프레임워크이지만 어쨌든 이미 로딩된 페이지 안에서의 동작은 브라우저에서 처리되기 때문에 비동기로 호출되는 데이터에 대한 정보는 서버에서는 잡을 수가 없다. 그래서 Nextjs에서는 Page 디렉토리 안에 api로 된 페이지에 대해서는 특별히 서버에서 직접 처리되도록 하여서 서버에서 처리할 수 있도록 기능을 제공한다. 자세한 내용은 아래 nextjs 문서에서 확인할 수 있다. API Routes: Introduction | Next.j..

앞에서 남긴 로그를 보면 포멧팅 되지 않은 상태로 출력된다. 이렇게 출력된 로그는 짧은 쿼리는 상관없겠지만 복잡한 쿼리를 확인하기에는 다소 무리가 있다. 비교적 간단한 쿼리이지만 쿼리를 작성할 때 로그를 출력할 것을 생각하고 작성하지 않는다면 복잡한 쿼리는 보기 어려울 것이다. 위의 이미지의 쿼리는 쿼리를 실제로 작성한 쿼리이기 때문에 그나마 들여쓰기라도 했지만 ORM을 통해서 생성되는 쿼리는 더 복잡하게 출력된다. 그래서 쿼리 로그를 남길 때 일정 부분 포멧팅해줄 필요가 있다. 물론 필요한 부분의 쿼리를 복사해서 인터넷에서 포멧팅해주는 사이트에서 해줄 수 있을 것이다. 하지만 쿼리를 한 번에 알아보고 싶다는 필요가 있다. 포멧팅을 하면 로그의 용량은 증가할 것이지만 용량을 포기하고 로그를 한 번에 보고..