Blog
공부하는 개발자의 테크 블로그 — 개발과 AI, 그리고 배움의 기록
FE & Next.js
[Next.js] 라우팅 시스템의 3대 안전 장치
not found 길 잃은 사용자를 위한 친절한 나침반 설계 현재는 존재하지 않는 페이지 혹은 잘못된 페이지로 이동할 경우 못생긴 404 페이지가 등장합니다. 이는 좋지 않은 UX의 예시로, 사용자 이탈률의 증가를
FE & Next.js
[Next.js] 라우팅 그룹과 나뭇잎 & 컴포지션 패턴
라우팅 그룹 URL을 헤치지 않는 투명 망토 우리 프로젝트가 화려한 디자인의 마케팅용 랜딩 페이지와, 관리자 대시보드를 동시에 포함해야 한다면 아마 app/ 폴더 안에 수 십개의 폴더가 뒤섞여서 어디가 사용자에게 보
FE & Next.js
[Next.js] 동적 라우팅
동적 라우팅 상세 페이지 찍어내기 단 하나의 파일만으로 무한대의 페이지를 생성하는 것이 동적 라우팅(Dynamic Routes)입니다. 게시판의 글 번호, 사용자의 ID, 상품의 고유 코드 등은 미리 예측할 수 없는
FE & Next.js
[Next.js] 프로젝트 환경 구축 및 정적 라우팅 시스템
프로젝트 환경 구축하기 복잡한 셋팅을 일일히 만질 필요 없이 nextcreateapp CLI 도구 하나로, 환경을 구축합니다. 가장 먼저 체크할 것은 Node.js 버젼입니다. Node.js 홈페이지에서 장기적인 안
FE & Next.js
[Next.js] 제어의 역전과 랜더링 패러다임
제어의 역전(IoC)이란? 우리가 순수 React를 가지고 애플리케이션을 개발했던 때를 생각해보면 마치 빈 땅을 산 건축가와 같습니다. React는 화면을 그리는 UI라는 벽돌만 제공해주고 집을 짓기 위한 모든 도구
FE & React
[React Basic] 전역 상태 아키텍처의 시작 ContextAPI
props drilling props drilling은 props를 깊게 파내려간다는 의미로, 어떤 부모 컴포넌트가 데이터를 가지고 있는데 그 데이터를 실제로 필요로 하는 컴포넌트가 트리의 아랫쪽, 더 깊은 자식 컴
FE & React
[React Basic] 발전된 구조적 상태 관리 useReducer
발전된 상태 관리의 필요성 오늘 이 내용은 상태 관리에서 useState 훅만 쓰면 되지 않느냐에서 출발합니다. 예를 들어, 상품 장바구니 기능을 구현할 때 useState만을 사용할 경우, State를 하나하나씩
FE & React
[React Basic] 데이터 패칭과 비동기 처리
HTTP Request 그동안 살펴본 예제들은 모두 데이터들이 내부 State에 존재해서 UI 표현에 큰 어려움이 없었습니다. 실제 서비스에서는 대부분의 중요한 데이터가 서버에 있고 이 데이터를 가져와야만 화면에 유
FE & React
[React Basic] 상태 관리 심화 및 폼 데이터 제어
상태 끌어올리기(Lifting State Up) 여러 컴포넌트가 동일한 데이터를 함께 사용해야 할 때 상태값을 어디서 관리하는 게 적절할까요? React에서는 이를 상태 끌어올리기(Lifting State Up)이라