🖥️ Frontend

Frontend

React, Vue, Next.js, 상태 관리, 렌더링 모델, 웹 성능까지 화면과 사용자 경험을 설계하는 기술을 다룹니다.

이 카테고리에는 현재 39개의 포스트가 있습니다.

Featured In This Category

가장 먼저 읽기 좋은 글

마이크로 프론트엔드 — Module Federation 실전 적용

마이크로 프론트엔드를 기술 데모가 아니라 팀 경계와 배포 독립성의 관점에서 정리합니다. Module Federation 구조, shared 의존성, 런타임 로딩, 상태 공유, 운영 함정과 적용 기준까지 실무적으로 설명합니다.

Popular Picks

이 카테고리에서 많이 읽기 좋은 글

POPULAR

React Server Components 완전 정복 — RSC와 Server Actions

React Server Components를 개념 소개 수준이 아니라 아키텍처 선택의 관점에서 정리합니다. Client Component와의 경계 설정, Server Actions, 캐싱, 스트리밍, 실무에서 자주 겪는 함정까지 Next.js App Router 기준으로 설명합니다.

POPULAR

Next.js 14 App Router 완벽 가이드 — 서버 컴포넌트부터 라우팅까지

Next.js App Router를 폴더 구조 소개가 아니라 렌더링 모델의 관점에서 정리합니다. 서버 컴포넌트, 클라이언트 컴포넌트, 레이아웃, 로딩/에러 처리, 캐싱, Route Handler까지 실무 기준으로 설명합니다.

POPULAR

Core Web Vitals 최적화 — LCP, CLS, INP 실전 가이드

Core Web Vitals를 체크리스트 수준이 아니라 사용자 체감 성능과 렌더링 구조의 관점에서 정리합니다. LCP, CLS, INP가 왜 나빠지는지, 무엇부터 측정하고 어떤 순서로 최적화해야 하는지 실무 예제로 설명합니다.

Reading Flow

이 순서로 읽어보면 좋습니다

STEP 1

Core Web Vitals 최적화 — LCP, CLS, INP 실전 가이드

STEP 2

React Server Components 완전 정복 — RSC와 Server Actions

STEP 3

스트리밍 UI의 실패 복구 패턴

부분 렌더링, 서버 스트리밍, AI 응답 UI에서 중간 실패를 사용자 경험으로 흡수하는 설계 방법을 정리합니다.

Key Tags

이 카테고리의 핵심 태그

#frontend 33 #architecture 17 #react 17 #vue 13 #nextjs 4 #ux 4

전체 글

2026년 5월 27일

마이크로 프론트엔드 — Module Federation 실전 적용

#micro-frontend #module-federation #webpack #architecture

2026년 5월 26일

Core Web Vitals 최적화 — LCP, CLS, INP 실전 가이드

#performance #web-vitals #frontend #optimization

2026년 5월 25일

React Server Components 완전 정복 — RSC와 Server Actions

#react #rsc #nextjs #server-components

2026년 5월 17일

스트리밍 UI의 실패 복구 패턴

부분 렌더링, 서버 스트리밍, AI 응답 UI에서 중간 실패를 사용자 경험으로 흡수하는 설계 방법을 정리합니다.

#frontend #streaming #ux #resilience #react

2026년 5월 12일

Optimistic UI의 Reconciliation 경계

낙관적 UI는 빠르게 느껴지지만, 서버 진실과 충돌하는 순간 복잡성이 드러납니다. 어디까지 낙관적으로 처리할지 경계를 정리합니다.

#frontend #optimistic-ui #state-management #ux #react

2026년 5월 9일

프론트엔드 Partial Hydration 경계 설계

모든 컴포넌트를 한 번에 깨우기보다, 어디까지 상호작용이 필요한지 경계를 나누는 것이 프론트엔드 성능 최적화의 핵심입니다.

#frontend #performance #hydration #architecture

2026년 5월 8일

React Activity와 View Transitions 도입 포인트

React의 최신 Activity, View Transitions 흐름은 단순한 애니메이션 기능 추가가 아닙니다. UI 상태 보존과 전환 경험을 어떻게 다시 설계할지 정리합니다.

#frontend #react #activity #view-transitions

2026년 5월 3일

Optimistic UI와 실패 복구 설계

낙관적 업데이트는 빠르게 보이는 것만으로 끝나지 않습니다. 실패 시 사용자 신뢰를 지키는 복구 설계까지 함께 정리합니다.

#frontend #optimistic-ui #ux #state-management

2026년 4월 29일

프론트엔드 학습 경로: 입문부터 고급까지

컴포넌트와 상태 기초부터 렌더링 전략, 성능, 아키텍처 트레이드오프까지 체계적으로 배우는 프론트엔드 로드맵입니다.

#frontend #learning-path #react #roadmap

2026년 4월 28일

프론트엔드 Error Boundary 전략

실패를 적절히 격리하면서도 UI 전체를 복구 미로로 만들지 않는 error boundary 배치 전략을 정리합니다.

#frontend #react #resilience #ux

2026년 4월 28일

Server-Driven UI의 실전 트레이드오프

서버 주도 UI가 도움이 되는 경우와 오히려 제품 플랫폼을 느리게 만드는 경우를 실전 관점에서 정리합니다.

#frontend #server-driven-ui #architecture #product

2026년 4월 27일

프론트엔드 Edge Personalization 아키텍처

캐시 효율, 관측성, 운영 단순성을 해치지 않으면서 edge personalization을 설계하는 실무 가이드입니다.

#frontend #edge #personalization #architecture

2026년 4월 18일

프론트엔드 렌더링·캐싱·Hydration 설계 가이드

대규모 프론트엔드 시스템에서 SSR, SSG, ISR, RSC, hydration 경계, 브라우저 캐시, CDN 캐시, 데이터 캐시를 어떻게 조합해야 하는지 실전 기준으로 정리합니다.

#frontend #ssr #rsc #caching #hydration

2026년 4월 17일

프론트엔드 BFF 패턴 가이드

프론트엔드에서 BFF를 도입할 때 필요한 API 조합, 인증 경계, 캐싱, 팀 구조, 운영 trade-off를 실무 관점에서 정리합니다.

#bff #frontend #api #architecture

2026년 4월 17일

프론트엔드 성능 아키텍처 가이드

프론트엔드 성능을 번들 최적화 수준이 아니라 렌더링, 데이터 흐름, 캐싱, 관측 가능성까지 포함한 아키텍처 관점에서 정리합니다.

#frontend #performance #architecture #web-vitals

2026년 4월 17일

Nuxt 아키텍처 설계 가이드

Nuxt 기반 프론트엔드 아키텍처를 설계할 때 고려해야 할 렌더링 전략, 데이터 계층, 라우팅 경계, 캐싱, 운영 모델을 실무 관점에서 정리합니다.

#nuxt #vue #ssr #architecture

2026년 4월 17일

Nuxt vs Next.js 심화 비교 가이드

Nuxt와 Next.js를 렌더링 모델, 개발 경험, 운영 복잡도, 팀 구조, SEO 전략 관점에서 실무적으로 비교합니다.

#nuxt #nextjs #comparison #architecture

2026년 4월 17일

React 아키텍처 설계 가이드

React 애플리케이션을 유지보수 가능한 시스템으로 설계하는 방법을 정리합니다. 컴포넌트 경계, 상태 계층, 서버 상태, 렌더링 모델, 팀 협업 구조까지 실무 중심으로 다룹니다.

#react #architecture #frontend #nextjs

2026년 4월 17일

React 디자인 시스템 아키텍처 가이드

React 기반 디자인 시스템을 설계할 때 필요한 토큰, 컴포넌트 계층, 접근성, 배포 전략을 실무 관점에서 정리합니다.

#react #design-system #architecture #frontend

2026년 4월 17일

React + SPA 아키텍처 가이드

React 기반 SPA를 설계할 때 필요한 화면 경계, 상태 구조, 라우팅, 데이터 계층, 성능 전략을 실무 관점에서 정리합니다.

#react #spa #architecture #frontend

2026년 4월 17일

React + SSR/Streaming 아키텍처 가이드

React 기반 SSR과 스트리밍 렌더링을 설계할 때 필요한 데이터 흐름, 경계 분리, 캐싱, 점진적 렌더링 전략을 실무 관점에서 정리합니다.

#react #ssr #streaming #architecture

2026년 4월 17일

React 상태관리 전략 가이드

React 애플리케이션에서 로컬 상태, 서버 상태, 전역 상태를 어떻게 분리하고 설계해야 하는지 실무 관점에서 정리합니다.

#react #state-management #architecture #frontend

2026년 4월 17일

Vue.js 아키텍처 설계 가이드

Vue.js 프로젝트를 단순 컴포넌트 모음이 아니라 유지보수 가능한 프런트엔드 시스템으로 설계하는 방법을 정리합니다. 상태 경계, 라우팅, 데이터 흐름, 폴더 구조, 성능과 협업 관점까지 실무 중심으로 다룹니다.

#vue #architecture #frontend #spa

2026년 4월 17일

Vue 컴포넌트 설계 원칙 가이드

Vue 애플리케이션에서 컴포넌트 책임, 재사용 경계, props/events 설계, 슬롯 전략을 실무 관점에서 정리합니다.

#vue #component #architecture #frontend

2026년 4월 17일

Vue + SPA 아키텍처 가이드

Vue 기반 SPA를 빠르게 만드는 방법이 아니라, 오래 운영 가능한 단일 페이지 애플리케이션으로 설계하는 방법을 정리합니다. 라우팅, 상태, 데이터 패칭, 캐싱, 배포와 성능까지 다룹니다.

#vue #spa #frontend #architecture

2026년 4월 17일

Vue + SSR 아키텍처 가이드

Vue 기반 SSR 애플리케이션을 언제 도입해야 하는지, SPA와 무엇이 달라지는지, 데이터 로딩과 캐싱, hydration, 배포 모델까지 실무 관점에서 정리합니다.

#vue #ssr #frontend #nuxt

2026년 4월 17일

Vue 상태관리 전략 가이드

Vue 애플리케이션에서 Pinia와 로컬 상태, 서버 상태를 어떻게 구분하고 설계해야 하는지 실무 관점에서 정리합니다.

#vue #pinia #state-management #architecture

2026년 4월 17일

Vue vs React 심화 비교 가이드

Vue와 React를 문법 취향이 아니라 아키텍처, 상태 모델, 렌더링 방식, 팀 확장성, 생태계 관점에서 깊이 비교합니다. 어떤 조직과 제품에 더 잘 맞는지 실무 기준으로 정리합니다.

#vue #react #comparison #frontend

2026년 4월 15일

Vue Router 4 설계 가이드

Vue Router 4를 단순 라우팅 도구가 아니라 화면 전환과 권한 흐름을 설계하는 관점에서 정리합니다. 중첩 라우트, 가드, lazy loading, URL 설계 기준까지 다룹니다.

#vue #vue-router #frontend #javascript

2026년 4월 15일

Vue 3 Composition API 완벽 가이드

Composition API 문법 소개를 넘어 로직 조합, composable 설계, ref와 reactive의 경계, 유지보수 관점까지 실무형으로 정리합니다.

#vue #javascript #frontend

2026년 4월 14일

Pinia 상태 관리 설계 가이드

Vue 3에서 Pinia를 도입할 때 알아야 할 핵심 설계 포인트를 정리합니다. store 경계, 서버 상태와 클라이언트 상태 분리, action 책임, TypeScript 활용까지 실무 관점에서 다룹니다.

#vue #pinia #상태관리 #frontend

2026년 4월 13일

Vue 3 컴포넌트 통신 설계 가이드

Vue 3에서 props, emit, provide/inject, store를 언제 써야 하는지 정리합니다. 단순 문법 설명보다 데이터 흐름과 컴포넌트 경계를 어떻게 설계할지에 초점을 맞춥니다.

#vue #frontend #javascript #컴포넌트

2026년 4월 12일

Vue 3 + TypeScript 설계 가이드

Vue 3 프로젝트에서 TypeScript를 실무적으로 적용하는 방법을 정리합니다. defineProps, defineEmits, ref/reactive 타입, 컴포저블 타입 모델링, 과한 일반화를 피하는 기준까지 다룹니다.

#vue #typescript #frontend

2026년 4월 11일

Vite + Vue 3 프로젝트 설계 가이드

Vite와 Vue 3로 빠른 개발 환경을 구성할 때 필요한 핵심 판단을 정리합니다. alias, 환경 변수, 프록시, 빌드 전략, 개발 경험과 배포 안정성을 함께 고려하는 방법을 다룹니다.

#vue #vite #frontend #개발환경

2026년 4월 10일

React Hooks 설계 가이드

React Hooks를 단순 문법이 아니라 상태와 부수효과를 분리하는 설계 도구로 이해합니다. useState, useEffect, useRef, custom hook을 언제 어떻게 써야 하는지 실무 관점에서 정리합니다.

#react #hooks #frontend #javascript

2026년 4월 9일

React Context API로 전역 상태 관리하기

Context API의 기본 사용법을 넘어 언제 적합한지, 리렌더링 비용을 어떻게 통제할지, 어떤 상태에는 쓰지 말아야 하는지까지 정리합니다.

#react #context-api #상태관리 #frontend

2026년 4월 8일

Next.js 14 App Router 완벽 가이드 — 서버 컴포넌트부터 라우팅까지

#react #nextjs #frontend #서버컴포넌트

2026년 4월 7일

TanStack Query(React Query)로 서버 상태 관리하기

TanStack Query를 단순한 fetch 헬퍼가 아니라 서버 상태 관리 모델로 정리합니다. queryKey 설계, staleTime, invalidation, optimistic update, 서버 상태와 클라이언트 상태의 경계까지 실무 관점에서 설명합니다.

#react #tanstack-query #react-query #frontend

2026년 4월 6일

React + TypeScript 설계 가이드

React 프로젝트에서 TypeScript를 실무적으로 적용하는 기준을 정리합니다. Props 타입, 이벤트 타입, 제네릭 컴포넌트, 상태 모델링, 과도한 타입 복잡도를 피하는 방법까지 다룹니다.

#react #typescript #frontend

AI 서비스 개발, 운영, 성능개선을 하나의 루프로 연결합니다

Frontend

가장 먼저 읽기 좋은 글

마이크로 프론트엔드 — Module Federation 실전 적용

이 카테고리에서 많이 읽기 좋은 글

React Server Components 완전 정복 — RSC와 Server Actions

Next.js 14 App Router 완벽 가이드 — 서버 컴포넌트부터 라우팅까지

Core Web Vitals 최적화 — LCP, CLS, INP 실전 가이드

이 순서로 읽어보면 좋습니다

Core Web Vitals 최적화 — LCP, CLS, INP 실전 가이드

React Server Components 완전 정복 — RSC와 Server Actions

스트리밍 UI의 실패 복구 패턴

이 카테고리의 핵심 태그

전체 글

마이크로 프론트엔드 — Module Federation 실전 적용

Core Web Vitals 최적화 — LCP, CLS, INP 실전 가이드

React Server Components 완전 정복 — RSC와 Server Actions

스트리밍 UI의 실패 복구 패턴

Optimistic UI의 Reconciliation 경계

프론트엔드 Partial Hydration 경계 설계

React Activity와 View Transitions 도입 포인트

Optimistic UI와 실패 복구 설계

프론트엔드 학습 경로: 입문부터 고급까지

프론트엔드 Error Boundary 전략

Server-Driven UI의 실전 트레이드오프

프론트엔드 Edge Personalization 아키텍처

프론트엔드 렌더링·캐싱·Hydration 설계 가이드

프론트엔드 BFF 패턴 가이드

프론트엔드 성능 아키텍처 가이드

Nuxt 아키텍처 설계 가이드

Nuxt vs Next.js 심화 비교 가이드

React 아키텍처 설계 가이드

React 디자인 시스템 아키텍처 가이드

React + SPA 아키텍처 가이드

React + SSR/Streaming 아키텍처 가이드

React 상태관리 전략 가이드

Vue.js 아키텍처 설계 가이드

Vue 컴포넌트 설계 원칙 가이드

Vue + SPA 아키텍처 가이드

Vue + SSR 아키텍처 가이드

Vue 상태관리 전략 가이드

Vue vs React 심화 비교 가이드

Vue Router 4 설계 가이드

Vue 3 Composition API 완벽 가이드

Pinia 상태 관리 설계 가이드

Vue 3 컴포넌트 통신 설계 가이드

Vue 3 + TypeScript 설계 가이드

Vite + Vue 3 프로젝트 설계 가이드

React Hooks 설계 가이드

React Context API로 전역 상태 관리하기

Next.js 14 App Router 완벽 가이드 — 서버 컴포넌트부터 라우팅까지

TanStack Query(React Query)로 서버 상태 관리하기

React + TypeScript 설계 가이드