내가 FSD를 적용한 방법
FSD(Feature-Sliced Design)의 기본 개념과 슬라이스와 세그먼트를 실제로 프로젝트에서 어떻게 적용했는지, Next.js 환경에선 FSD를 어떻게 적용했는지 예시 코드와 함께 정리한 글입니다.
추천 게시글
리액트 쿼리로 선언형 프로그래밍 달성하기
리액트 쿼리를 활용해 선언형 프로그래밍을 어떻게 달성했는지, 부록으로 쿼리 키 팩터리에 대한 내용과 Next.js 환경에서 리액트 쿼리로 프리패치하는 방법을 정리한 글입니다.
센트리로 에러 모니터링하기
에러 모니터링을 위한 센트리 도입기. Next.js를 사용한 프로젝트에 센트리를 어떻게 연결했고, 보다 풍부한 에러 정보를 위해 어떻게 에러 로깅 코드를 작성했는지 정리한 글입니다.
Next.js의 캐싱 기능 활용하기
ISR 기반의 HTML 생성을 통해 메인페이지를 어떻게 최적화했는지, 실제 부하테스트를 사용해 전/후를 비교한 내용과 On-Demand 캐시 무효화를 활용해 fetch 데이터를 캐싱한 경험 등 Next.js의 캐시 전략을 정리한 글입니다.
에디터에 이미지 업로드 구현하기
Tiptap으로 구현한 에디터에 이미지 업로드 기능을 어떻게 구현했는지, 백엔드로부터 presigned url을 발급 받아 S3에 직접 업로드하는 방법, 업로드 프로그레스 계산을 어떻게 했는지 정리한 글입니다.
tiptap으로 에디터 구현하기
Next.js 프로젝트에 에디터를 구현하기 위해 react-quill이 아닌 Headless 라이브러리인 Tiptap을 사용한 이유, Tiptap의 사용 방법을 정리한 글입니다.
zustand 코드 까보기
Zustand가 함수 레벨에서 훅의 규칙을 위반하는 이유와 훅의 규칙을 위반하지 않는 순수 함수 기반의 set 함수가 어떻게 동작하는지 직접 코드를 분석해 정리한 글입니다.
효율적인 에러 처리를 위한 몸부림
리액트 쿼리, Zustand, API 요청 모듈을 조합해 프론트엔드에서 에러를 중앙화하고 보다 사용자에게 의미 있는 에러를 표시하기 위해 시도한 방법을 정리한 글입니다.
프리티어 환경에서 무중단 배포 달성하기
Next.js로 구축한 프론트엔드 프로젝트를 Vercel로 배포하지 않고, AWS EC2 프리티어 환경에서 Nginx, PM2, 쉘 스크립트를 조합해 Blue-Green 방식의 무중단 배포를 구현한 과정을 정리한 글입니다.
타입스크립트 - OOP와 타입스크립트
객체 지향 프로그래밍(OOP)의 개념과 타입스크립트를 사용해 OOP의 4대 원칙인 캡슐화, 추상화, 상속, 다형성을 적용하는 방법을 정리한 글입니다.
타입스크립트 - 타입 확장, 좁히기
타입 확장은 무엇이고 반대로 타입 좁히기는 무엇인지, 타입 좁히기를 위한 typeof, instance of, is, in에 대해 정리한 글입니다.
타입스크립트 - 고급 타입 정리하기
any, unknown, void, never, Array, enum 타입이 무엇인지, 타입 조합을 위한 교차 타입, 유니온 타입, 인덱스 시그니처, 맵드 타입, 제네릭 등 여러 방법을 정리한 글입니다.
HTTP Method 알아보기 (1)
RFC 9110 문서를 기반으로 HTTP 메서드의 기본 개념을 정리한 글로, 전체 흐름을 이해하기 위한 서론을 정리한 글입니다.
블로그(7) - Serverless, API Routes 알아보기
Next.js의 API Routes 활용 방식과 서버리스 개념을 함께 정리하며, nodemailer로 메일 전송 기능을 구현한 방법을 정리한 글입니다.
블로그(Intro) - Next의 중요 컨셉과 렌더링 방식
블로그를 Next.js로 개발하게 된 계기, Next.js의 핵심 내용과 4가지 렌더링 방식의 차이를 정리한 글입니다.