복습 정리 노트

이 포스트에서는 당근마켓 클론코딩의 #5.0 ~ #12.7 단원에서 학습한 내용들을 정리한다.  # 5.0 Route Handlers로그인 form을 입력하면 백엔드에서 값을 어떻게 가져가서 확인하고, 로그인을 시켜주는가 API route를 만들고, API URL을 이용해서 데이터를 전송→ 이때 route handler를 만들기 위해서는 파일명을 반드시 route.ts로 해야한다.→ 그래야 NextJS에서 route handler임을 인식한다. 프론트엔드에서 fetch(주소, { method: "POST", body: JSON.stringify({ value: 값 }))로 전송하면, 백엔드에서 request: NextRequest에 대해 await request.json()과 같이 값을 받을 수 있었다..

이번 포스트에서는 NextJS가 무엇인지에 대해 알아보고, NextJS를 이용하여 간단한 영화 정보 사이트를 만들고 실제 웹사이트를 배포하는 과정까지 수행해 보겠습니다. 완성 결과 미리보기 먼저 완성된 웹사이트의 형태를 같이 보겠습니다. API를 제공하는, 데이터가 저장된 사이트로부터 데이터를 잘 fetch 해 와서 정보를 잘 나타내어주는 것을 확인할 수 있습니다. 주의깊게 살펴볼 부분은 렌더링이 진행되는 과정에서, 먼저 로딩이 끝난 컴포넌트부터 렌더링이 부분적으로 완료될 수 있다는 것입니다. (물론 이 부분은 NextJS만의 기능이 아닌 React의 기능을 이용한 것이지만, 이러한 컴포넌트별 렌더링 기능을 포함하여 페이지의 빠른 로딩을 위한 다양한 기능이 사용되므로, 더 좋은 사용자 경험을 제공할 수 ..