개인 포트폴리오 사이트(Next.js 15 / App Router)를 만들고 Lighthouse를 돌려보니첫 페인트 시점, 메인 스레드 점유 시간, 폰트 로딩 시 레이아웃 시프트 등에서개선할 만한 지점들이 보였다.이번 글에서는 LCP / TBT / CLS 세 가지 지표

숙박 플랫폼에서 어메니티 아이콘 시스템을 설계했습니다. 단순히 아이콘을 렌더링하는 것에서 끝나지 않고, 구현하면서 발견한 문제들을 직접 개선하는 과정까지 겪었습니다. SVG 변환 자동화, id 충돌 방지, 번들 최적화 등 그 과정을 정리한 글입니다.작업한 서비스는 세

Vercel로 배포한 포트폴리오 사이트에서 Lighthouse SEO 점수가 100점에서 63점으로 급락했다. 코드를 아무리 뜯어봐도 문제가 없는데, 원인은 의외로 단순했다.포트폴리오 사이트를 Vercel에 배포한 후 Lighthouse로 성능을 측정

아이콘 36개를 어디서 불러오느냐로 Lighthouse 점수가 87점에서 75점까지 떨어졌습니다. 원인은 loading="lazy" 한 줄이었습니다.포트폴리오 사이트의 기술 스택 섹션을 개발하면서 아이콘 처리 방식이 성능에 이렇게까지 영향을 미칠 거라고는 생각하지 못했

웹 개발을 하다 보면 페이지 로딩 시 폰트가 갑자기 바뀌는 경험을 한 적이 있을 것이다.이 현상을 FOUT(Flash of Unstyled Text)라고 한다.이번 글에서는 FOUT이 무엇인지, 왜 발생하는지, 그리고 실무에서 어떻게 방지하는지 정리해본다.FOUT (F

Next.js에서 환경 변수(Environment Variables)는단순 설정값이 아니라 보안, 배포, 환경 분리를 담당하는 핵심 요소이다.특히 Next.js는 Server와 Client가 함께 존재하기 때문에환경 변수의 사용 범위를 명확히 구분해야 한다.Next.j

Next.js 배포는 단순히 서버에 올리는 과정이 아니라 빌드, 최적화, 환경 분리, 실행까지 포함된 과정이다. 1. Vercel 배포 Next.js는 Vercel에서 가장 쉽게 배포할 수 있다. 배포 흐름 GitHub에 코드 push Vercel에서 프로젝트 import 자동 빌드 배포 완료 (URL 생성) 특징 Next.js와 높은 호환성 S...

웹 서비스에서 SEO(Search Engine Optimization)는검색 엔진 노출과 유입에 직접적인 영향을 준다.Next.js(App Router 기준)는 Metadata API를 통해SEO 설정을 매우 간단하고 강력하게 관리할 수 있다.이 글에서는 다음 3가지를

Next.js는 기본적으로 다양한 성능 최적화 기능을 내장하고 있다.특히 이미지, 폰트, 번들 크기 최적화는 실제 서비스에서 로딩 속도와 UX에 큰 영향을 준다.이 글에서는 다음 3가지를 핵심으로 정리한다:next/imagenext/font번들 최적화 개념일반 <

Next.js App Router를 사용하다 보면 다음과 같은 문장을 자주 보게 된다."Middleware는 Edge Runtime에서 실행된다"여기서 자연스럽게 이런 의문이 생긴다.👉 Edge Runtime은 정확히 무엇이고, 언제 사용해야 할까?이 글에서는 Edg

Next.js App Router를 사용하다 보면사용자가 페이지에 진입하기 전에 공통 로직을 처리해야 하는 경우가 자주 발생한다.예를 들어:로그인 여부 확인 (인증)특정 페이지 접근 제한요청 로깅조건에 따른 리다이렉트이런 로직을 페이지나 API마다 반복 구현하면 코드

Next.js App Router를 사용하면서 서버 로직을 처리하는 방법은 크게 두 가지가 있다.Route Handlers (API Routes)Server Actions두 방식 모두 서버에서 실행되지만,👉 사용 목적과 구조가 다르기 때문에 구분해서 이해하는 것이 중

Next.js App Router를 사용하다 보면 이런 상황을 자주 겪게 된다."데이터를 바꿨는데 왜 화면이 그대로지?""왜 어떤 요청은 다시 안 나가지?""revalidate를 했는데 왜 안 바뀌지?"이런 문제의 대부분은👉 Next.js의 캐싱 구조를 정확히 이해하

👉 Next.js 13+에서 추가된 핵심 기능으로,👉 클라이언트 → 서버 데이터 변경(Mutation)을 단순하게 처리할 수 있다.기존에는 데이터 변경을 위해 API Route를 따로 만들어야 했지만,Server Actions를 사용하면 컴포넌트에서 직접 서버 로직

사용자 경험(UX)을 크게 좌우하는 요소 중 하나는 로딩 상태와 에러 처리 UI이다.특히 Next.js(App Router)에서는 이를 파일 단위로 구조화하여 매우 직관적으로 관리할 수 있다.처음에는 단순한 보조 UI라고 생각했지만, 직접 적용해보면서Streaming만

Next.js 13부터 도입된 App Router에서는 기존 Page Router와 달리애플리케이션의 UI를 페이지가 아닌 Layout 중심으로 설계한다.이 글에서는 다음 내용을 정리한다.layout.tsxtemplate.tsxNested Layout 구조공통 UI 관

Webpack Dev Server 웹팩 데브 서버(Webpack Dev Server)는 개발 과정에서 사용하는 개발용 서버로, 빌드 대상 파일이 변경되면 매번 웹팩 명령어를 다시 실행하지 않아도 코드 변경 후 저장 시 자동으로 빌드하고 브라우저를 새로고침하여 변경 내

Next.js App Router에서는 Parallel Routes라는 기능을 통해하나의 레이아웃에서 여러 개의 라우트를 동시에 렌더링할 수 있습니다.이를 통해 복잡한 UI 구조를 더 유연하게 구성할 수 있습니다.대표적인 예:Dashboard LayoutSidebar

Next.js App Router에서는 Intercepting Routes라는 기능을 통해 현재 페이지를 유지한 채 다른 라우트를 가로채서(intercept) UI로 표시할 수 있습니다. 대표적으로 모달 라우팅(modal routing) 구현에 사용됩니다. 예를 들

Next.js를 공부하면서 인상 깊었던 부분은 서버 컴포넌트 기반의 데이터 페칭과 Streaming 구조였다.기존 SSR의 한계를 어떻게 보완하는지, 그리고 React 18의 Suspense와 어떻게 연결되는지 정리해본다.SSR(Server Side Rendering)