key

map에서 컴포넌트를 반복 렌더링할 경우 각 항목에 고유한 key를 부여하는 것이 중요.
key는 버츄얼 돔에서 리액트가 어떤 항목이 변경되고, 추가되고, 제거 되었는지 식별하는데 도움이 되므로 성능 최적화와 UI 업데이트 효율성에 중요한 역할

문제 1-1. 목표 무한생성

네비게이션 메뉴 클릭 시 페이지의 url은 변경되는데 단기, 장기 목표는 값이 변하지 않음.

빌드 시점에 HTML 파일을 미리 생성해두는 방식

사용자 요청마다 서버에서 HTML 생성

로그인 성공 페이지

• 로그인 성공 후 Redirect 된 url에서 토큰 값 받기
  • 토큰으로 사용자의 정보 가져옴

Next Data-Fetching은 사전 렌더링 중 발생
사전 렌더링이 오래걸릴 것 같은 경우에만 빌드타임에 미리 사전 렌더링을 맞춰둘 수 있는 등 다양한 방법 제공
[한입 크기로 잘라먹는 Next.js(15+)]

로그인 화면 띄우기

네이버 개발자 계정 생성 및 앱 등록

• 네이버 개발자 센터에서 애플리케이션 등록 (API 이용 신청)
  1. 애플리케이션 등록에서 애플리케이션 이름, 사용 API 설정
     

각 페이지마다 공통적인 레이아웃을 반복해서 정의할 필요가 없으며, 레이아웃 변경 시 하나의 컴포넌트만 수정하면 전체 페이지에 적용.
[한입 크기로 잘라먹는 Next.js(15+)]

로그인 성공 페이지

• 카카오 API를 사용하여 로그인 성공 후 인가 코드 받기
  • 인가 코드로 카카오 토큰 API로 토큰을 요청.
    • 토큰으로 사용자의 정보를 가져옴
    • 토큰으로 로그인을 유지

Styling

• 넥스트에서는 App 컴포넌트가 아닌 파일에서 import 문으로 css 파일을 그대로 불러오는 것을 제한.
  → 다른 페이지에 작성된 css 코드와 충돌이 일어날 수 있으므로