[LLM 경제 뉴스 요약 서비스] # 06. React/Next js로 프론트엔드 구축 with 모노레포

안녕하세요-지난 포스팅에 이어, 오늘은 배포된 FastAPI 서버를 활용해 경제 뉴스 요약 리스트를 보여주는 프론트엔드를 구축해보겠습니다.프로젝트 구성- Framework: React/Next js- PNPM 기반 모노레포 구조- 스타일: TailwindCSS- 서버 상태 관리: Tanstack Query- Lint/Formatter: Biome- 번들러: Turbopack 시작에 앞서..Next js란?Next.js는 React를 기반으로 SSR(Server Side Rendering), SSG(Static Site Generation), Server Components 등을 지원하는 프레임워크입니다.CSR 중심이었던 기존 React의 한계를 보완하며, 성능·SEO·개발 경험(DX) 측면에서 많은 ..

Next 13에서 카카오 로그인을 수행하는 과정을 포스팅해보려합니다. 개발환경은 다음과 같습니다. Next 13, react-query, Strapi (CMS) Next api route 에서 카카오 로그인을 처리하고 User에 대한 접근은 strapi의 API를 통해 수행하였습니다. Routing: Route Handlers | Next.js Using App Router Features available in /app nextjs.org REST API | Strapi Documentation Interact with your Content-Types using the REST API endpoints Strapi generates for you. docs.strapi.io 로그인 로직은 크게 1. ..

많은 사이트에서 글을 작성하고나 편집할 때, 페이지 이동시 알림 창을 띄우는 UI를 많이 봤습니다. 해당 기능을 개발하면서 생각보다 골치 아팠고 처음 알게 된 처리방법을 찾아 포스팅을 해보려 합니다- 구현 요구사항에 따른 처리 프로세스는 크게 세 가지가 있어요. Link 컴포넌트를 통한 이동 막기 새로고침 이동 막기 뒤로 가기 막기 하나 씩 살펴보겠습니다- Link를 통한 이동 막기 next/router 자체에서 라우팅 이벤트를 제공하고 있어요. next/router | Next.js Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook. nextjs...

이전 포스팅에서 "CSR에서 렌더링 전에 redirect가 가능한가"에 대해 알아봤습니다. https://keeper.tistory.com/54 ClientSide에서 rendering 전 redirect 가능한가? Next 를 이용하여 파라미터의 유효성을 검사하여 리다이렉트 시키는 과정에서 고민이 생겨 간단하게 포스팅을 남겨보려 합니다. 요구사항은 페이지가 렌더되기 전에 유효성을 검사하여 /404 로 keeper.tistory.com 이 외에도 Next js의 redierct 방식들을 찾아보면서 더 다양한 방법으로 redirect를 제공한다는 것을 알게 되어 다시 포스팅을 해보게 되었습니다. 알게 된 redirect 방식은 크게 3가지가 있습니다. next.config.js middleware Serv..

+ 해당 포스팅은 next@12.x 버전의 내용입니다. Next js에서 URL 파라미터의 유효성을 검사하여 리디렉션 시키는 과정에서 고민이 생겨 간단하게 포스팅을 남겨보려 합니다. 요구사항은 페이지가 렌더되기 전에 유효성을 검사하여 /404 로 리디렉션 시켜라 였습니다. Next js의 SSR을 이용하면 쉽게 getServerSideProps 함수를 이용하여 렌더 전에 서버에서 검사하여 redirect 시킬 수 있었습니다. 그렇다면 서버사이드가 아닌 클라이언트 단에서 렌더 전에 redirect 시킬 수 있을까? 에 대한 질문에 바로 대답을 못하는 것을 느끼고 next의 렌더링 과정에 대한 이해가 부족하다 생각했고 공부해보게 되었습니다. 단순하게 클라이언트에서 useRouter로 redirect 시킨다면..