AboutDocsContact

Docs

These are a summary of what I studied.

웹집사 MCP 개발기

여러 레포를 자연어로 검색하는 AI 집사를 만들어 개발팀 협업을 개선한 경험을 공유합니다.

요청 36건 중 34건은 서버가 볼 필요도 없었어요

푸시 한 번에 서버가 15대까지 늘었는데 평균 CPU는 31%였어요. 부하가 아니라 요청 '개수'가 서버를 늘리고 있었고요. CDN 캐시 하나로 오리진 트래픽 96.4%를 지운 기록이에요.

10만 명의 트래픽과 대기룸 시스템

대규모 트래픽 문제를 해결하기 위해 대기룸을 설계하고 구현한 과정

Figma 아이콘 자동화 프로세스 구축기

아이콘 하나 고칠 때마다 아사나 태스크가 오가고 앱·웹 개발자가 매번 붙던 과정을, 매주 Figma 기준으로 자동 반영하는 파이프라인으로 바꾼 이야기예요.

React-Search-Autocomplete 분석 및 자체 구현하기

외부 라이브러리의 성능 문제를 분석하고 자체 컴포넌트로 개선한 경험

Next.js의 App Router

Next App Router에대해 자세히 알아보자.

React Concurrency

React Concurrency에 대해 알아보자.

Suspense와 ErrorBoundary

Suspense와 ErrorBoundary 함께 사용시 주의해야 할 부분을 알아보자.

FOUC 해결방법

Emotion을 사용할 때 발생하는 FOUC 해결방법을 알아보자.

외부 라이브러리를 관리하는 방법

어떻게 하면 효과적으로 외부 라이브러리를 관리할 수 있을 지 생각해보기.

Clean React 학습 정리

Clean React 학습한 내용을 정리했습니다.

Web Server vs WAS

Web Server와 WAS의 각 역할과 차이점을 알아보자.

Next.js 구조화된 데이터 적용

구조화된 데이터를 통해서 더 풍부한 검색 결과를 제공할 수 있으며, 이는 검색을 하는 사용자들이 해당 사이트의 유입률을 높여줄 수 있습니다.

Next.js 배포 파이프라인 최적화

평균 6~8분 걸리던 Next.js 배포를 3분대로 줄인 과정을 정리합니다.

결제 시스템 모듈화

확장 가능한 결제 시스템을 설계하고 구현한 경험

유지보수성과 확장성 코드

유지보수성과 확장성을 고려한 코드 작성법에 대해 고민한 내용을 작성했습니다.

Windowing 기법 활용한 무한스크롤 성능 최적화 구현

Windowing 기법 활용해 무한스크롤 성능을 최적화하는 방법을 알아보자.

다국어 셋팅

Next App Router 프로젝트에서 다국어 셋팅 방법을 알아보자.

HTTP 학습 정리

HTTP 학습한 내용을 정리했습니다.

HTTP/1.1 vs HTTP/2.0

HTTP/1.1과 HTTP/2.0의 차이를 알아보자.

JS 번들러 비교

JS 번들러들에 대해 알아보자.

컴퓨터 한 대로 여러 Github 계정 사용하기

멀티 Github 계정 설정을 셋팅하는 방법을 알아보자

Claude Code Custom Command

Claude Code 커스텀 커맨드로 커밋, PR, 코드 리뷰, 태스크 관리까지 터미널에서 자동화한 경험을 공유합니다.

크로스 도메인 환경에서의 쿠키 인증 이슈 해결 과정

서로 다른 도메인 간 쿠키 기반 인증 시스템 구현 중 발생한 브라우저 보안 정책 이슈와 해결 방안

우아한 TS with React 도서 정리

우아한 TS with React 도서에서 학습한 내용을 정리했습니다.

NodeList 유사 배열 객체

NodeList가 왜 유사 배열 객체로 설계되었는지, 어떻게 순회가 가능한지 알아보자.

Effective TypeScript 학습 정리

Effective TypeScript 학습한 내용을 알아보자.

Babel에 대해

Babel에 대해 자세히 알아보자.

File Input 다루는 법

File Input에 대해 자세히 알아보자.

Reflow와 Repaint 차이

Reflow와 Repaint에 대해 알아보자.

React Hook Form vs Formik

React-Hook-Form과 Formik 차이를 알아보자.