이미지 콘텐츠 심사 데이터를 보며 판단 기준을 다시 세운 과정
AI 이미지 심사 데이터를 살펴보며 표본의 구성, 평가 단위, 정답 데이터, 재현 방법에 대한 판단을 바꾼 과정을 정리했습니다.
60초 타임아웃에 걸리던 AI 생성을 백그라운드 잡과 폴링으로 옮긴 방법
이미지 한 장에 50~80초가 걸리는데 로드밸런서의 유휴 타임아웃은 60초였습니다. 타임아웃을 늘리는 대신, 생성을 백그라운드 잡으로 돌리고 폴링으로 상태를 받아 요청을 비동기 처리로 바꾼 과정입니다.
이벤트 페이지를 AI로 만들며 무엇을 모델에 맡길지 정하기
빌더로 개발자의 작업은 줄어들었지만, 디자이너의 작업물을 기다리는 하루는 그대로 남아 있었습니다. 배경과 문구를 AI로 생성하며, 무엇을 모델에 맡기고 무엇을 코드로 남길지 정한 과정을 정리했습니다.
목록 컨텍스트를 잃지 않는 상세 모달 만들기: URL 동기화부터 뒤로가기까지
무한 스크롤 목록 위에 콘텐츠 상세를 모달로 띄우면서도 공유 가능한 URL, SEO, 뒤로가기 동작을 페이지처럼 유지한 설계 과정을 정리합니다.
WebView 전용 페이지가 외부 브라우저로 열렸을 때의 안내 flow 처리하기
네이티브 인터페이스가 주입되지 않은 환경으로 진입한 사용자의 경험 저하 문제를, 인터페이스 폴링과 BottomSheet 안내, 플랫폼별 분기로 처리한 과정을 다룹니다.
Lighthouse 접근성 점수가 움직이지 않은 이유
Lighthouse 자동 검사가 잡는 영역과 잡지 않는 영역을 구분하고, 마크업 4건을 정리해 접근성 점수를 84점에서 95점까지 올린 과정을 다룹니다.
Lighthouse cache-insight를 결정하는 must-revalidate 한 단어
next/image 적용 후 줄어든 Lighthouse cache-insight 항목의 진짜 원인을 추적해, max-age도 응답 크기도 아닌 must-revalidate 한 단어가 제외 조건으로 작동한다는 사실을 확인한 과정을 정리합니다.
GitHub Actions로 레포 간 workflow 체이닝하기
repository_dispatch를 활용하여 패키지 publish부터 호스트 프로젝트의 버전 업데이트, 스토리북 빌드, 배포까지 자동화한 과정을 정리합니다.
구조화와 검증이 더 중요했다 - 바이브 코딩으로 챗봇을 만들며 배운 것들
기존 챗봇이 사용 불가해진 상황에서 바이브 코딩으로 챗봇을 직접 만든 경험을 정리합니다. LLM API, S3 로깅, GitHub Actions 자동 지식 보강까지 구현한 과정과 설계 판단을 기록합니다.
이벤트 페이지 제작 공수를 줄이기 위한 드래그&드롭 빌더 개발기
이벤트 페이지를 만들 때마다 개발자가 직접 이미지를 S3에 올리고 HTML을 작성해야 했던 반복 작업을 없애기 위해, 드래그&드롭 기반 이벤트 페이지 빌더를 개발한 과정을 다룹니다.
Vanilla JS 댓글 모듈 자체 개발기
프레임워크 독립적인 Vanilla JS 댓글 모듈을 설계·개발하고 기존에 서비스 중이던 Nuxt 3 프로젝트에 통합한 과정을 다룹니다.
웹 사이트를 PDF 인쇄에 맞게 최적화 해보기
블로그를 PDF 인쇄 결과물에 맞게 구현하면서, 겪은 다양한 문제들을 해결 과정과 함께 정리했습니다.
Next.js GitHub Pages 배포 트러블슈팅: export, basePath, configure-pages
GitHub Pages에 Next.js를 정적 export로 배포하면서 겪은 문제점과 디버그/해결 과정을 정리했습니다.
광고 차단 확장 프로그램이 이벤트 배너를 숨긴 이유
이벤트 배너가 특정 사용자에게만 보이지 않는 문제를 추적하며 광고 차단 확장 프로그램의 필터링 메커니즘을 이해하고, CSS 클래스명 변경으로 문제를 해결한 과정을 다룹니다.
웹뷰 환경에서의 구글 소셜 로그인 구현
웹뷰의 팝업 차단과 리다이렉트 제약을 극복하고, JavaScript-Native Bridge와 Android Intent Deep Link를 활용하여 안정적인 소셜 로그인 flow를 구현한 과정을 다룹니다.
결제 완료 후 뒤로가기 문제 해결하기
결제 완료 후 뒤로가기 시 결제 대행사 페이지로 돌아가는 문제를 해결하며, 브라우저 히스토리 관리와 라우팅 메커니즘을 이해하고 사용자 인터랙션을 활용한 해결 과정을 정리합니다.
대용량 엑셀 다운로드: 클라이언트에서 서버로
클라이언트 기반 엑셀 생성의 한계를 극복하고 SSE를 활용한 서버 사이드 아키텍처로 성능과 사용자 경험을 개선한 과정을 다룹니다.
모바일 환경에서의 본인 인증 flow 개선하기
window.open과 window.opener의 한계를 극복하고, sessionStorage를 활용하여 모바일 환경에서도 안정적으로 동작하는 본인 인증 flow를 구현한 과정을 다룹니다.
외부 PG사 연동 시 리다이렉트 패턴 비교 - GET vs Form POST
결제 시스템에서 다양한 외부 결제 서비스를 연동하면서 경험한 리다이렉트 패턴들의 차이점과 구현 방법을 정리합니다.
HTML lang 속성: 작은 변경이 가져온 큰 변화
HTML lang 속성 하나를 바꿔 브라우저 번역 오작동을 해결하고 웹 접근성을 개선한 과정을 다룹니다.
웹 플랫폼 인증 flow 개선기
브라우저 세션 복원 시 발생할 수 있는 보안 취약점을 개선하고, SSR과 CSR 환경에서 인증 로직을 강화한 과정을 다룹니다.
Next.js 15 App Router 마이그레이션 여정
Express 서버와 Page Router로 구성된 레거시 프로젝트를 Next.js 15 App Router 기반으로 전환한 대규모 마이그레이션 과정을 다룹니다.
HOC와 미들웨어로 구축하는 중앙집중식 오류 처리
Next.js SSR 환경에서 HOC 패턴과 미들웨어 헤더 전파를 활용하여 분산된 오류 처리를 중앙집중화하고 일관된 사용자 경험을 구현한 과정을 다룹니다.
구형 Safari에서 모달 사용 시 스크롤 문제 해결하기
구형 Safari 브라우저에서 모달/오버레이 UI 사용 시 발생하는 배경 스크롤 문제를 document.body와 position: fixed를 활용하여 해결한 방법을 정리합니다.
통합 로그인 시스템 구축기: 소셜 로그인과 이메일 로그인을 하나로
네이버, 구글 소셜 로그인과 이메일 계정 시스템을 통합하여 일관된 사용자 경험을 제공하고 신규 회원 가입 flow를 단일화한 과정을 다룹니다.
SCSS Mixin으로 SSR 플리커링 줄이기
JavaScript 반응형 로직을 SCSS Mixin으로 전환하여 SSR 환경의 플리커링(FOUC)을 근본적으로 해결한 과정을 다룹니다.
재사용 가능한 드래그 스크롤 컨테이너 만들기
Vue.js로 PC 환경에서 마우스 드래그 스크롤을 지원하는 재사용 가능한 컴포넌트를 개발한 과정을 다룹니다.
웹 애플리케이션의 외부 서비스 연동 보안 강화: postMessage 데이터 검증 사례
브라우저 확장 프로그램으로 인한 불완전한 데이터 유입 문제를 발견하고, postMessage 통신의 데이터 검증 로직을 강화하여 외부 서비스 연동의 안정성을 향상시킨 과정을 다룹니다.
서비스 프론트엔드 성능 최적화 탐구: Nuxt.js 3와 캐싱 전략의 현실
Nuxt.js 3 기반 서비스에서 SWR, Redis, In-Memory 캐싱 등 다양한 성능 최적화 전략을 탐구하고, 실제 인프라 지표를 분석하며 '지금 당장'보다 '적절한 시점'의 중요성을 도출한 결론을 정리합니다.
Nuxt 3.8 업데이트 후 구형 WebView에서 발생한 App Manifest 에러 해결기
Nuxt 3.8로 업데이트한 후 iOS WebView에서 발생한 #app-manifest import 오류의 원인을 파악하고, experimental.appManifest 설정을 통해 해결한 과정을 정리합니다.
결제 비밀번호 입력을 위한 숫자패드 컴포넌트 개발 과정
React와 Zustand를 사용하여 결제, 등록, 변경 등 다양한 시나리오에 대응하고, 보안까지 강화한 범용 Numpad 컴포넌트의 설계와 구현 과정을 자세히 살펴봅니다.
Nuxt2에서 Pinia 사용하기
Nuxt2 프로젝트에서 Vuex를 Pinia로 마이그레이션하며 적용 방법과 코드 구조 개선 포인트를 정리합니다.
Infinite Scroll 최적화: DOM 재사용으로 대용량 리스트 처리하기
Intersection Observer와 DOM 재사용(버퍼링) 전략으로 무한 스크롤에서 발생하는 DOM 누적 문제를 줄이고, 대용량 리스트를 안정적으로 처리한 구현 과정을 정리합니다.
Text Embedding으로 유사도 검색 구현하기
OpenAI Embeddings와 MongoDB Atlas 벡터 검색, AWS Lambda/API Gateway를 이용해 텍스트 유사도 검색을 구현한 과정을 정리합니다.
VS Code에서 Pylint import error(E0401) 해결하기
VS Code에서 모듈이 설치되어 있는데도 `Unable to import` 오류가 발생할 때, Python Interpreter 설정을 점검하여 해결한 과정을 정리합니다.
리다이렉트 이후 window.opener가 null이 되는 문제 해결
외부 도메인 리다이렉트 이후 팝업의 `window.opener`가 사라지는 이슈를 `window.name`과 `window.open(name)`으로 복구한 방법을 정리합니다.
Cookie의 domain 속성과 localhost에서 사용 시 주의사항
localhost에서는 cookie의 domain 속성이 무시될 수 있는 이유(RFC 6265)를 정리하고, hosts 설정으로 로컬 서브도메인 테스트 환경을 구성하는 방법을 소개합니다.
Nuxt 3 프로젝트에서 URL을 통한 다국어 설정하기
nuxtjs/i18n 대신 vue-i18n을 적용하고, 라우터 옵션을 확장해 `/en` 같은 URL prefix로 로케일을 전환하는 방법과 주의사항을 정리합니다.
Nuxt 3 프로젝트에서 서브도메인 처리하기
Nuxt 3의 커스텀 라우팅(`app/router.options.ts`)을 이용해 서브도메인에 따라 PC/모바일 페이지를 분기하는 방법과 구현 포인트를 정리합니다.
한글 타이핑 애니메이션을 만들기까지
유니코드 규칙을 활용해 한글을 초성/중성/종성으로 분해하고, 실제 타이핑처럼 보이도록 단계적으로 출력하는 애니메이션 구현 과정을 정리합니다.
화살표 함수의 특징과 일반 함수와의 차이점
화살표 함수(Arrow Function)의 문법과 this/arguments/constructor/prototype/yield 등 일반 함수와의 핵심 차이점을 예제와 함께 정리합니다.
함수 호출 방식에 따른 this 바인딩 방식
함수 호출/메소드 호출/생성자 호출/apply·call·bind 호출에 따라 JavaScript의 this가 어떻게 바인딩되는지 예제와 함께 정리합니다.
Next.js 프로젝트에 SEO 적용하기
Next.js에서 메타 태그 설정, 리소스 최적화, URL 구성, 링크 처리 등 검색 엔진 최적화(SEO)를 위해 점검했던 항목들을 정리합니다.
XSS 공격의 유형과 대처방법
Reflected/Stored/DOM-based XSS의 개념과 동작 방식, 그리고 sanitize-html로 입력/출력을 정화(sanitize)해 방어하는 방법을 정리합니다.
watch와 watchEffect에 대한 고찰
Vue 3 Composition API의 `watch`와 `watchEffect`가 언제 실행되고 무엇을 추적하는지, 그리고 `immediate` 옵션을 포함한 사용 기준을 정리합니다.
Next.js 프로젝트에 Docker 적용기
Next.js 프로젝트를 Docker로 멀티 스테이지 빌드하고, standalone output 기반으로 이미지 크기를 줄이며 환경별 `.env`를 주입하는 과정을 정리합니다.
Node.js 기반 시스템에서 lock 파일의 역할
로컬/개발 서버에서 의존성 버전이 달라 UI 동작이 달라졌던 경험을 바탕으로, `yarn.lock`/`package-lock.json` 같은 lock 파일이 왜 필요한지 정리합니다.
setInterval 함수와 타이머 이슈
브라우저가 유휴 상태일 때 `setInterval`이 지연되어 타이머가 어긋나는 문제를 재현하고, focus 이벤트 기반으로 만료 시간을 재계산하는 방식으로 대응한 과정을 정리합니다.
Nuxt2에서 Nuxt3로 마이그레이션 도전기
Nuxt2 프로젝트를 Nuxt3로 전환하며 겪었던 주요 차이점과, 라이브러리 업데이트/디렉터리 이동/Composition API 전환 순서로 진행한 마이그레이션 접근을 정리합니다.
requestAnimationFrame과 cancelAnimationFrame의 관계
`requestAnimationFrame`이 반복 호출될 때의 특성과, 종료 시점에 `cancelAnimationFrame`으로 정리하지 않으면 발생할 수 있는 성능/메모리 이슈를 정리합니다.
env-cmd를 활용한 환경변수 설정
React 프로젝트에서 `env-cmd`로 환경별 `.env` 파일을 선택해 빌드 시점 환경 변수를 주입하고, API 주소를 안전하게 분리 관리하는 방법을 정리합니다.
React Query의 Hydrate란?
Next.js SSR 환경에서 React Query(TanStack Query)의 `Hydrate`/`dehydrate`를 활용해 서버에서 미리 받아온 데이터를 클라이언트 캐시에 주입하고, 중복 API 호출을 줄이는 방법을 정리합니다.