Gyu&een

현재는 먼저 화면을 잡고 백엔드를 잡고 싶어서, next로 구조를 잡다보니, route.ts로 api호출의 역할을 대신하고 있다.앞선 글에서도 큰 흐름은 그렇게 정리하다보니 정작 중요한 얘기를 못했다. Q. Next.js에 Spring을 붙이면 데이터 흐름은 어떻게 바뀔까앞선 흐름에서는 Next.js 프로젝트 안에서 화면을 만들고, 필요한 데이터도 Next 내부의 API Route에서 mock 데이터로 응답하는 구조를 살펴봤다.이번에는 여기에 Spring 백엔드를 붙이면 어떤 부분이 바뀌는지 정리해보려 한다.결론부터 말하면, Spring을 붙인다고 해서 React 컴포넌트의 흐름이 전부 바뀌는 것은 아니다. 핵심적으로 바뀌는 부분은 route.ts가 하던 서버 역할을 Spring 서버가 가져간다는 점이..

커리큘럼 페이지를 리팩토링 하며 1인 개발에 도전하기로 했다. 그러기 위해선 Next.js를 이해할 필요가 있다. 가장 궁금했던 부분은 Next.js가 어떤 흐름으로 동작하는지였다. 특히 page.tsx, 클라이언트 컴포넌트, hook, API 함수, route.ts가 각각 어떤 역할을 맡고 있는지 정리할 필요가 있었다. 현재 구조는 백엔드를 구축하기 이전에 next만을 이용한 구조입니다.route.ts가 그 역할을 대신하고 있으니,백엔드와 프론트엔드의 api호출 흐름까지 보기 위해선 다음 글도 보시면서 이해하면 좋을 것 같습니다. 이 프로젝트의 Next.js 데이터 흐름은 다음과 같이 정리할 수 있다.app/page.tsx -> 서버에서 초기 데이터 생성 -> MainPageClient에 in..