Tag: Next.js

FCP 85% 개선, 데이터 스케일링이 초래한 렌더링 병목 해결하기

FCP 85% 개선, 데이터 스케일링이 초래한 렌더링 병목 해결하기

FCP 85%, DCL 89.5% 개선하기

Next.jsWeb Vitals
Next.js Error Handling Strategy 3 - 경계 구현과 적용

Next.js Error Handling Strategy 3 - 경계 구현과 적용

safeServerAction, networkBoundary 등 각 경계에서 필요한 래퍼 함수를 완성해 아키텍처를 실전에 적용하기

Next.jsError Handling
Next.js Error Handling Strategy 2 - 중앙화된 에러 처리

Next.js Error Handling Strategy 2 - 중앙화된 에러 처리

단일 에러 모델 DomainError와 중앙 에러 처리기 handleError로 아키텍처 완성하기

Next.jsError Handling
Next.js Error Handling Strategy 1 - 경계와 책임

Next.js Error Handling Strategy 1 - 경계와 책임

의도한 에러 vs 의도하지 않은 에러, 그리고 5개의 방어선 '경계'에 책임을 부여하는 전략

Next.jsError Handling
Frontend Error w. Next.js App Router

Frontend Error w. Next.js App Router

Next.js App Router에서 발생하는 에러를 처리하는 방법

Next.jsError Handling
‘딸깍’으로 다국어 지원 데이터 변환 시간 99% 줄이기

‘딸깍’으로 다국어 지원 데이터 변환 시간 99% 줄이기

Google Spreadsheet와 자동화 시스템으로 다국어 데이터 변환 시간을 10분에서 1초로 단축하기

Internationalizationi18n
Next.js에서 FSD 적용하기

Next.js에서 FSD 적용하기

Next.js에 맞게 Feature Sliced Design 아키텍처를 개선해 팀 컨벤션으로 만들기!

Next.jsFeature Sliced Design
Search Engine Optimization 가이드, 검색하면 상단에 나오는 웹 사이트 만들기

Search Engine Optimization 가이드, 검색하면 상단에 나오는 웹 사이트 만들기

검색엔진 최적화(SEO)를 통해 검색 결과 상단에 노출되는 웹 사이트를 만드는 방법을 알아보자

SEOSearch Engine Optimization
Internationalization in Next.js App Router with Middleware 2, URL에서 lang parameter를 제거하자

Internationalization in Next.js App Router with Middleware 2, URL에서 lang parameter를 제거하자

Next.js App Router에서 다국어 지원 기능 만들기

Next.jsi18n
Contentlayer를 활용해 MDX를 Next.js에서 렌더링하기

Contentlayer를 활용해 MDX를 Next.js에서 렌더링하기

Contentlayer를 활용한 MDX 파일 렌더링

Next.jsMDX
Feature Sliced Design(FSD), 기능 분할 설계

Feature Sliced Design(FSD), 기능 분할 설계

기능 분할 설계(FSD)는 프론트엔드 앱을 스캐폴딩하기 위한 아키텍처 방법론이다. 쉽게 말하면 코드 구성에 관한 규칙과 컨벤션의 집합이다. 이 방법론의 주된 목적은 끊임없이 변화하는 비즈니스 요구사항에 직면하면서 프로젝트를 더 이해하기 쉽고 체계적으로 구성하는 것이다.

Next.jsReact
무한 스크롤 캐러셀 제작기

무한 스크롤 캐러셀 제작기

자동으로 흐르는 캐러셀을 만들어보자

Next.jsReact
더 많은 포스트를 불러오는 중...