App Router
-
왜 useBack 커스텀 hook을 만들었는가?Next.js 2025. 2. 15. 18:58
내비게이션 경험은 사용자 만족도를 결정짓는 핵심 요소입니다.특히 모바일 환경이나 복잡한 내비게이션 구조를 가진 웹 애플리케이션에서는 router.back()이 예상대로 동작하지 않는 경우가 많습니다.이 문제를 해결하고자 useBack이라는 커스텀 hook을 개발하였습니다.기존 router.back()의 한계1. 히스토리 스택 부족 문제router.back()은 브라우저 히스토리를 기반으로 작동하지만, 사용자 흐름에 따라 예상치 못한 동작을 유발할 수 있습니다.사용자가 외부 링크를 통해 유입되었거나 페이지를 새로고침한 경우, 히스토리 스택이 충분하지 않아 router.back()이 동작하지 않을 수 있습니다.이 경우 사용자가 "뒤로 가기" 버튼을 눌러도 이전 페이지로 이동하지 못하고 빈 화면 혹은 예기치 ..
-
React Portal에 대해 알아보기 (Feat. Next.js 예시)React 2024. 11. 16. 15:57
React를 사용하다 보면 컴포넌트 트리 구조 내에서 DOM 구조와 시각적인 표현이 일치하지 않는 상황을 마주할 때가 있습니다.이런 경우에 React Portal은 강력한 도구로 활용될 수 있습니다.이번 글에서는 React Portal의 작동 원리부터 실제로 어떻게 활용할 수 있는지 살펴보겠습니다.1. React Portal이란 무엇인가?React Portal은 React 16부터 도입된 기능으로, 현재의 컴포넌트 계층 구조 밖의 DOM 노드로 자식을 렌더링 할 수 있게 해 줍니다.일반적으로 React 컴포넌트는 부모 컴포넌트의 DOM 노드 내에 렌더링 되지만, Portal을 사용하면 컴포넌트를 DOM 트리의 다른 위치에 렌더링 할 수 있으면서, 그리하여 논리적으로는 기존의 컴포넌트 트리 구조를 유지할 ..
-
FSD 폴더 구조 소개 (feat. NextJS App Router, Pages)Tip 2024. 7. 27. 12:54
많은 프론트엔드 개발자의 고민은 폴더 구조일 것입니다.오늘은 Feature-Sliced Design(FSD)라는 요즘 가장 괜찮다고 생각하는 폴더 구조를 소개하겠습니다.FSD는 프론트엔드 애플리케이션을 구조화하기 위한 아키텍처적 방법론입니다.FSD의 주된 목표는 프로젝트를 이해하기 쉽고 변화하는 비즈니스 요구에 안정적으로 대응할 수 있도록 만드는 것입니다.FSD의 주요 개념1. 레이어(Layers)애플리케이션의 전반적인 구조를 구성하는 최상위 폴더입니다.주요 레이어는 다음과 같습니다.하위 요소는 상위 요소들을 Import 할 수 없습니다.(pages에서 widgets, entities, shared는 Import 해서 사용할 수 이 있지만 shared는 아무것도 Import 해서 가지고 올 수 없다.)*..