고지민 개발 블로그

내가 FSD를 적용한 방법
FSD(Feature-Sliced Design)의 기본 개념과 슬라이스와 세그먼트를 실제로 프로젝트에서 어떻게 적용했는지, Next.js 환경에선 FSD를 어떻게 적용했는지 예시 코드와 함께 정리한 글입니다.
#Architecture
#Project
#ModuReview
#Architecture
#Project
2025-10-26
리액트 쿼리로 선언형 프로그래밍 달성하기
리액트 쿼리를 활용해 선언형 프로그래밍을 어떻게 달성했는지, 부록으로 쿼리 키 팩터리에 대한 내용과 Next.js 환경에서 리액트 쿼리로 프리패치하는 방법을 정리한 글입니다.
#Frontend
#ReactQuery
#Frontend
#ReactQuery
2025-10-11
센트리로 에러 모니터링하기
에러 모니터링을 위한 센트리 도입기. Next.js를 사용한 프로젝트에 센트리를 어떻게 연결했고, 보다 풍부한 에러 정보를 위해 어떻게 에러 로깅 코드를 작성했는지 정리한 글입니다.
#DevOps
#Project
#ModuReview
#DevOps
#Project
2025-09-03
Next.js의 캐싱 기능 활용하기
ISR 기반의 HTML 생성을 통해 메인페이지를 어떻게 최적화했는지, 실제 부하테스트를 사용해 전/후를 비교한 내용과 On-Demand 캐시 무효화를 활용해 fetch 데이터를 캐싱한 경험 등 Next.js의 캐시 전략을 정리한 글입니다.
#Optimization
#Project
#ModuReview
#Optimization
#Project
2025-08-16
에디터에 이미지 업로드 구현하기
Tiptap으로 구현한 에디터에 이미지 업로드 기능을 어떻게 구현했는지, 백엔드로부터 presigned url을 발급 받아 S3에 직접 업로드하는 방법, 업로드 프로그레스 계산을 어떻게 했는지 정리한 글입니다.
#Frontend
#Project
#ModuReview
#Frontend
#Project
2025-07-11
tiptap으로 에디터 구현하기
Next.js 프로젝트에 에디터를 구현하기 위해 react-quill이 아닌 Headless 라이브러리인 Tiptap을 사용한 이유, Tiptap의 사용 방법을 정리한 글입니다.
#Frontend
#Project
#ModuReview
#Frontend
#Project
2025-06-16
zustand 코드 까보기
Zustand가 함수 레벨에서 훅의 규칙을 위반하는 이유와 훅의 규칙을 위반하지 않는 순수 함수 기반의 set 함수가 어떻게 동작하는지 직접 코드를 분석해 정리한 글입니다.
#Frontend
#Frontend
2025-05-16
효율적인 에러 처리를 위한 몸부림
리액트 쿼리, Zustand, API 요청 모듈을 조합해 프론트엔드에서 에러를 중앙화하고 보다 사용자에게 의미 있는 에러를 표시하기 위해 시도한 방법을 정리한 글입니다.
#Frontend
#Project
#ModuReview
#Frontend
#Project
2025-04-16
프리티어 환경에서 무중단 배포 달성하기
Next.js로 구축한 프론트엔드 프로젝트를 Vercel로 배포하지 않고, AWS EC2 프리티어 환경에서 Nginx, PM2, 쉘 스크립트를 조합해 Blue-Green 방식의 무중단 배포를 구현한 과정을 정리한 글입니다.
#DevOps
#Project
#ModuReview
#DevOps
#Project
2025-03-27
프론트엔드에서의 에러와 예외
팀 프로젝트에 앞서 프론트엔드에서의 에러와 예외가 무엇인지, 그렇다면 예측 가능한 에러와 예측 불가능한 에러의 차이는 무엇인지, 이 에러들을 어떻게 처리해야 하는지 고민한 내용들을 정리한 글입니다.
#Frontend
#ErrorHandling
#Frontend
#ErrorHandling
2025-03-11
HTTP - 브라우저의 HTTP 요청
fetch를 이용한 요청 외에도 HTML, CSS, JS, 이미지 Form 등 브라우저가 자동으로 생성하는 HTTP 요청들의 종류와 동작 방식을 정리한 글입니다.
#HTTP
#Web
#HTTP
#Web
2025-02-27
HTTP - 쿠키
웹 어플리케이션에서 상태 관리를 위해 사용하는 쿠키의 구조와 유효 범위, 생명 주기, 보안 속성을 위한 여러 디렉티브(Domain, Expires, HttpOnly 등)를 정리한 글입니다.
#HTTP
#Web
#HTTP
#Web
2025-02-13
HTTP - 컨텐츠 협상
클라이언트와 서버 간의 데이터 요청 사이에 효율적으로 자원을 주고받기 위해 수행하는 컨텐츠 협상과 컨텐츠 협상에 주로 사용되는 Accept 헤더에 대해 정리한 글입니다.
#HTTP
#Web
#HTTP
#Web
2025-01-28
HTTP - 기본 흐름 정리하기
HTTP 요청과 응답의 기본 흐름이 어떻게 이루어지는지, URL의 구조인 프로토콜, 도메인, 포트, 경로 등에 대한 정의, 클라이언트와 서버 간 통신 과정을 정리한 글입니다.
#HTTP
#Web
#HTTP
#Web
2025-01-17
타입스크립트 - OOP와 타입스크립트
객체 지향 프로그래밍(OOP)의 개념과 타입스크립트를 사용해 OOP의 4대 원칙인 캡슐화, 추상화, 상속, 다형성을 적용하는 방법을 정리한 글입니다.
#typescript
#typescript
2024-12-31
타입스크립트 - 타입 확장, 좁히기
타입 확장은 무엇이고 반대로 타입 좁히기는 무엇인지, 타입 좁히기를 위한 typeof, instance of, is, in에 대해 정리한 글입니다.
#typescript
#typescript
2024-12-16
타입스크립트 - 고급 타입 정리하기
any, unknown, void, never, Array, enum 타입이 무엇인지, 타입 조합을 위한 교차 타입, 유니온 타입, 인덱스 시그니처, 맵드 타입, 제네릭 등 여러 방법을 정리한 글입니다.
#typescript
#typescript
2024-11-29
타입스크립트 - 기본 타입 정리하기
정적 타입 언어와 동적 타입언어가 무엇인지, 자바스크립트에서의 타입과 타입스크립트에서의 타입의 차이점 등 타입 시스템 구조를 이해하기 위한 핵심 내용을 정리한 글입니다.
#typescript
#typescript
2024-11-16
S3 + Route53 + CloudFront로 프로젝트 배포하기.
AWS S3, Route53, CloudFront를 활용해 정적 사이트를 배포한 경험을 정리한 글로 OAC 설정과 도메인 연결 과정을 자세히 정리했습니다.
#DevOps
#Project
#Burgerput
#DevOps
#Project
2024-10-16
버거풋 프로젝트 폴더 구조 FSD로 개선하기
Feature-Sliced Design (FSD) 구조에 맞춰 프로젝트 폴더 구조를 개선한 내용을 정리한 글입니다. 내용을 보완해 새로운 게시글을 작성했으니 링크를 확인해주세요!
#Architecture
#Project
#Burgerput
#Architecture
#Project
2024-10-02
채팅 서버 배포 파이프라인 구성하기
Next.js로 구축한 채팅 서버를 AWS 환경에 자동 배포하기 위해 사용한 github-actions, CodeDeploy 설정 파일을 정리한 글입니다.
#DevOps
#Project
#Burgerput
#DevOps
#Project
2024-08-21
middleware로 CORS 해결하기
웹소켓 서버에 Next-Auth로 로그인 기능을 구현한 과정과, middleware로 CORS 문제를 해결한 과정을 정리한 글입니다.
#Auth
#Project
#Burgerput
#Auth
#Project
2024-08-10
웹소켓으로 통신해보기
간단한 웹소켓 기반의 Next.js 서버를 만들고, 버거풋 프로젝트에 Socket.io 라이브러리를 사용해 관리자 문의 기능을 도입한 내용을 정리한 글입니다.
#WebSocket
#Project
#Burgerput
#WebSocket
#Project
2024-08-02
버거풋에 로그인 기능 도입하기
JWT 기반 로그인 기능을 구현하고 axios 라이브러리의 인터셉터 기능을 이용해 인증 헤더를 구성과 토큰 재발급 기능을 구현한 과정을 정리한 글입니다.
#Auth
#Project
#Burgerput
#Auth
#Project
2024-06-30
react-hook-form과 rc-slider 조합하기
react-hook-form와 rc-slider 라이브러리를 조합해 슬라이더 입력을 구현한 과정을 정리한 글입니다.
#Frontend
#Project
#Burgerput
#Frontend
#Project
2024-06-16
react-hook-form으로 input 로직 개선하기
기존의 복잡한 input 로직을 react-hook-form 라이브러리로 개선하며 얻은 경험과 성능상 이점을 정리한 글입니다.
#Frontend
#Project
#Burgerput
#Frontend
#Project
2024-06-06
HTTP Method가 알아보기 (5)
CONNECT, OPTIONS, TRACE 등 남음 HTTP 메서드들의 목적과 동작 방식을 RFC 문서를 기반으로 정리한 마무리 글입니다.
#HTTP
#Web
#HTTP
#Web
2024-05-26
HTTP Method가 알아보기 (4)
PUT과 DELETE 메서드의 정의, PUT과 POST의 차이점, DELETE 메서드의 제한된 사용 및 주요 용도와 요청에 대한 상태 코드 등을 정리한 글입니다.
#HTTP
#Web
#HTTP
#Web
2024-05-17
HTTP Method가 알아보기 (3)
GET, HEAD, POST 메서드의 목적과 동작 방식을 RFC 문서를 기반으로 정리한 글로 이전 게시글의 안정성과 멱등성을 기반으로 다루며 사용 방법도 간단히 정리한 글입니다.
#HTTP
#Web
#HTTP
#Web
2024-05-11
HTTP Method 알아보기 (2)
안전한 메서드와 안전하지 않은 메서드, 멱등성, 캐싱과 조건 등 HTTP 메서드의 공통 속성을 단계적으로 자세히 정리한 글입니다.
#HTTP
#Web
#HTTP
#Web
2024-05-05
HTTP Method 알아보기 (1)
RFC 9110 문서를 기반으로 HTTP 메서드의 기본 개념을 정리한 글로, 전체 흐름을 이해하기 위한 서론을 정리한 글입니다.
#HTTP
#Web
#HTTP
#Web
2024-04-30
createPortal로 모달 탈출 시키기
리액트의 createPortal로 모달을 DOM 계층에서 분리해 스타일 상속 문제를 해결한 과정과 구현 방식에 대해 정리한 글입니다. (CSS 상속 회피)
#Frontend
#Frontend
2024-04-24
Burgerput의 로딩 로직 자동화
cURL과 crontab으로 셀레니움 기반의 로딩 로직을 자동화하고, 크롤링 시간을 고려해 ALB idle timeout 설정한 경험을 정리한 글입니다.
#DevOps
#Project
#DevOps
#Project
2024-04-17
Burgerput의 로딩 로직
버거풋 프로젝트의 근본적인 목표와 서버에서 크롤링을 트리거하기 위해 시도한 방법을 정리한 글입니다.
#Project
#Project
2024-04-11
Burgerput 프로젝트 회고
Burgerput 프로젝트의 시작 배경과 개발 과정을 간단하게 정리한 글입니다.
#Project
#Burgerput
#Project
#Burgerput
2024-04-04
Sanity에 스키마 정의하기
Sanity Studio에서 스키마를 정의하고 데이터를 구성하는 과정과 실제 컨텐츠를 추가한 경험을 정리한 글입니다.
#CMS
#Backend
#CMS
#Backend
2024-03-29
Headless CMS란 무엇일까?
Headless CMS의 개념과 전통적인 CMS와의 차이를 정리하고, Sanity의 기본적인 사용 방법을 정리한 글입니다.
#CMS
#Backend
#CMS
#Backend
2024-03-21
블로그(7) - Serverless, API Routes 알아보기
Next.js의 API Routes 활용 방식과 서버리스 개념을 함께 정리하며, nodemailer로 메일 전송 기능을 구현한 방법을 정리한 글입니다.
#Next.js
#Blog
#Backend
#Next.js
#Blog
2024-03-16
블로그(6) - metadata, opengraph 설정
Next.js의 metadata 객체를 사용해 SEO, 소셜 공유를 위한 OG 정보를 어떻게 설정했는지, 동적인 페이지에서 메타데이터를 어떻게 생성하는지 정리한 글입니다.
#Next.js
#Blog
#SEO
#Next.js
#Blog
2024-03-10
블로그(5) - SEO가 뭔가요?
SEO의 기본 개념과 Next.js 13버전에서 sitemap.xml과 robots.txt를 직접 생성하지 않고 sitemap.ts, robots.ts 코드를 사용해 생성하는 방법을 정리한 글입니다.
#Next.js
#Blog
#SEO
#Next.js
#Blog
2024-03-04
블로그(4) - 블로그에 Lottie 사용하기
Lottie 애니메이션이 무엇인지, lottie-react 라이브러리를 사용해 블로그에 Lottie 애니메이션을 적용한 방법을 정리한 글입니다.
#Next.js
#Blog
#Next.js
#Blog
2024-02-28
블로그(3) - Dynamic Routing, react-markdown
블로그 제작기 3. 다이나믹 라우팅을 사용한 상세 페이지 구성, react-markdown과 tailwind typography를 사용해 마크다운을 화면에 렌더링하는 방법을 정리한 글입니다.
#Next.js
#Blog
#Next.js
#Blog
2024-02-23
블로그(2) - react-multi-carousel로 캐러셀 만들기
블로그 제작기 2. react-multi-carousel 라이브러리를 이용해 게시물을 캐러셀 형태로 표시한 방법을 정리한 글입니다.(번들 사이즈가 무려 2.5KB..!)
#Next.js
#Blog
#Next.js
#Blog
2024-02-17
블로그(1) - @next/font, Image 컴포넌트로 최적화하기
블로그 제작기 1. Posts 목록 데이터 받아와 사용자에게 표시하기, @next/font와 Next.js의 Image 컴포넌트로 레이아웃 시프트를 방지하는 방법에 대해 정리한 글입니다.
#Next.js
#Blog
#Next.js
#Blog
2024-02-12
블로그(Intro) - Next의 중요 컨셉과 렌더링 방식
블로그를 Next.js로 개발하게 된 계기, Next.js의 핵심 내용과 4가지 렌더링 방식의 차이를 정리한 글입니다.
#Next.js
#Blog
#Next.js
#Blog
2024-02-06
블로그(번외) - Next 13버전에 다크모드 곁들이기
Next.js 13 환경에서 다크모드를 구현하기 위해 로컬 스토리지를 이용한 방법과 그 과정에서 마주친 문제들을 정리한 글입니다.
#Next.js
#Blog
#Next.js
#Blog
2024-01-27
기술 블로그 제작기
기존 블로그 플랫폼 대신 직접 기술 블로그를 만들게 된 배경과 구현 과정에서 고민했던 부분들을 정리한 글입니다.
#Next.js
#Blog
#Next.js
#Blog
2024-01-23