Next.js App Router를 사용하다 보면 인증 구조를 다시 생각해야 하는 순간이 온다.기존 84 프로젝트에서는 브라우저에서 Supabase client를 만들고, 로그인 상태를 SessionProvider와 Zustand로 관리했다. 클라이언트 렌더링 중심의 애플리케이션에서는 자연스러운 구조였다.하지만 Server Component와 Server Action에서 “현재 로그인한 사용자”를 알아야 한다면 이야기가 달라진다. 서버는 브라우저의 localStorage나 Zustand 상태를 읽을 수 없기 때문이다.이번 작업에서는 기존 클라이언트 인증을 한 번에 제거하지 않았다.기존 SessionProvider 기반 사용자 경험은 유지하면서, 상품 삭제와 상태 변경처럼 서버에서 신뢰할 수 있는 인증이 ..

부제 : Next App Router 데이터 흐름과 캐싱 구조 정리Next App Router 데이터 흐름과 캐싱 구조 정리1. 왜 이 글을 정리하게 되었는가Next.js 관련 글을 읽다가 다음과 같은 표현을 보게 되었다.Server Component + fetch 구조는 정적이고 단순한 페이지에서만 가능하다.하지만 Next App Router 공식 문서를 확인해보면React Server Componentsfetch 캐싱Server Actionstag 기반 재검증등을 활용하면 인터랙션이 있는 페이지도 충분히 구현할 수 있다.이 글은 특정 글을 반박하기 위한 글이 아니라Next App Router의 데이터 흐름과 캐싱 구조를 공식 문서 기준으로 정리한 글이다.2. Pages Router → App Rout..

46장 제너레이터와 async/await제너레이터란?실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 함수function 키워드와 yield 문을 사용해 구현 이터레이터와 결합하여 순차적인 데이터 생성 가능async/await async 키워드를 사용하면 비동기 함수를 동기 코드처럼 작성 가능await 키워드는 프로미스가 해결될 때까지 기다림try...catch 문을 이용한 에러 처리 가능  47장 에러 처리에러 처리의 필요성에러가 발생하지 않는 코드를 작성하는 것은 불가능.에러를 처리하지 않으면 프로그램이 강제 종료try...catch를 사용하면 프로그램 실행을 계속 유지 가능throw문과 Error 객체throw 문을 사용하여 강제적으로 에러 발생 가능  48장 모듈 모듈이란 ?코드를 분리하여 유..

41장 타이머타이머 함수?일정 시간 경과된 이후에 호출되도록 함수 호출을 예약하기위해 타이머 함수를 사용 주요 타이머 함수 setTimeOutsetTimeout(callback, delay, ...args)delay후 callback을 한 번만 실행 clearTimeoutsetTimeout() 실행 취소 setIntervalsetInterval(callback, delay, ...args)delay간격으로 callback을 반복 실행 clearIntervalsetInterval() 실행 취소 디바운스와 스로틀디바운스 : 짧은 시간 가격으로 발생하는 이벤트를 그룹화, 마지막에 한 번만 이벤트 핸들러가 호출되도록스로틀 : 일정 시간 간격마다 실행  43장 AjaxAjax란 ? async JS and XML ..

37장 Set과 MapSet 사용처 중복제거 -> 배열로 변환 has 메서드 있는지 파악  Map 사용처다양한 키(객체 포함 모든 값) - 값 저장 필요로 할때 has 메서드 있는지 파악    40장 이벤트 이벤트 드리븐 프로그래밍이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수이벤트 핸들러 등록 : 이벤트 핸들러의 호출을 위임하는 것 이벤트 타입마우스 이벤트: click, dblclick, mousedown, mouseup, mousemove, mouseenter, mouseleave키보드 이벤트 :keydown, keypress, keyup포커스 이벤트 : focus, blur폼 이벤트: submit, reset값 변경 이벤트 : input, changeDOM 뮤테이션 이벤트 : DOMContent..

34장 이터러블 (es6 도입)이터레이션 프로토콜에는 이터러블 프로토콜 이터레이터 프로토콜                  itrerable                                                                    iterator                                                                         {           [Symbol.itrerator]( ) {   }               =>              next (  ) {                                                                                   return {..