FE
24개의 글
FE & Next.js
[Next.js] TanStack Query v5 (2)
이중 캐시의 협업 서버 캐시와 TanStack Query 캐시의 역할 분담 Next.js의 App Router에서는 'use cache' 지시어를 통해 서버 측에서 데이터를 강력하게 캐싱하는 기능을 제공하나 이것만으
FE & Next.js
[Next.js] TanStack Query v5 (1)
기존의 리액트 패칭 방식 우리가 클라이언트 컴포넌트에서 서버로부터 데이터를 가져올 때 전통적인 리액트(React) 개발 환경에서는 컴포넌트 생명주기를 다루는 useEffect 훅과 상태를 저장하는 useState 훅
FE & Next.js
[Next.js] Micro Frontend Paradigm
병렬 랜더링 패러다임 병렬 랜더링은 화면을 구성하는 요소들을 마치 레고 블록과 같은 독립적인 컴포넌트로 쪼개 개발합니다. 그리고, 최종적으로 하나의 화면에서 동시에 랜더링해내는 현대적인 웹 개발 설계 방식입니다. 이
FE & Next.js
[Next.js] Caching Revolution
웹 개발의 딜레마 데이터의 신선도냐, 성능이냐 다음과 같은 근본적인 질문을 던져봅시다. 우리는 왜 캐시를 써야 하며, 잘못 썼을 때 잃게 되는 것은 무엇일까요? 이 점을 이해하기 위해 자정이 되는 순간 파격적인 반값
FE & Next.js
[Next.js] Server Action
서버 액션과 RPC(Remote Procedure Call) RPC는 원격 프로시저 호출이라는 의미로, 원격에 있는 서버의 함수를 마치 로컬 함수처럼 직접 호출하는 기술입니다. 과거에는 클라이언트가 서버의 기능을 쓰
FE & Next.js
[Next.js] Route Handlers
풀스택 아키텍트(FullStack Architect) 실무 시스템의 본질은 화면이 아니라, 이 거대한 소프트웨어 생태계에서는 오직 데이터로만 대화합니다. 시스템과 시스템이 만나는 차가운 경계선을 API(Applica
FE & Next.js
[Next.js] 데이터 패칭(Data Fetching)
서버 컴포넌트에서의 데이터 로딩 먼저 클라이언트 컴포넌트에서의 데이터를 불러오는 방식은 다음과 같습니다. 컴포넌트가 마운트되면, useEffect로 사이드이펙트를 트리거하여 fetch API를 사용해 state를 변
FE & Next.js
[Next.js] 라우팅 시스템의 3대 안전 장치
not found 길 잃은 사용자를 위한 친절한 나침반 설계 현재는 존재하지 않는 페이지 혹은 잘못된 페이지로 이동할 경우 못생긴 404 페이지가 등장합니다. 이는 좋지 않은 UX의 예시로, 사용자 이탈률의 증가를
FE & Next.js
[Next.js] 라우팅 그룹과 나뭇잎 & 컴포지션 패턴
라우팅 그룹 URL을 헤치지 않는 투명 망토 우리 프로젝트가 화려한 디자인의 마케팅용 랜딩 페이지와, 관리자 대시보드를 동시에 포함해야 한다면 아마 app/ 폴더 안에 수 십개의 폴더가 뒤섞여서 어디가 사용자에게 보