목록 컨텍스트를 잃지 않는 상세 모달 만들기: URL 동기화부터 뒤로가기까지
무한 스크롤 목록 위에 콘텐츠 상세를 모달로 띄우면서도 공유 가능한 URL, SEO, 뒤로가기 동작을 페이지처럼 유지한 설계 과정을 정리합니다.
이벤트 페이지 제작 공수를 줄이기 위한 드래그&드롭 빌더 개발기
이벤트 페이지를 만들 때마다 개발자가 직접 이미지를 S3에 올리고 HTML을 작성해야 했던 반복 작업을 없애기 위해, 드래그&드롭 기반 이벤트 페이지 빌더를 개발한 과정을 다룹니다.
웹뷰 환경에서의 구글 소셜 로그인 구현
웹뷰의 팝업 차단과 리다이렉트 제약을 극복하고, JavaScript-Native Bridge와 Android Intent Deep Link를 활용하여 안정적인 소셜 로그인 flow를 구현한 과정을 다룹니다.
모바일 환경에서의 본인 인증 flow 개선하기
window.open과 window.opener의 한계를 극복하고, sessionStorage를 활용하여 모바일 환경에서도 안정적으로 동작하는 본인 인증 flow를 구현한 과정을 다룹니다.
통합 로그인 시스템 구축기: 소셜 로그인과 이메일 로그인을 하나로
네이버, 구글 소셜 로그인과 이메일 계정 시스템을 통합하여 일관된 사용자 경험을 제공하고 신규 회원 가입 flow를 단일화한 과정을 다룹니다.
SCSS Mixin으로 SSR 플리커링 줄이기
JavaScript 반응형 로직을 SCSS Mixin으로 전환하여 SSR 환경의 플리커링(FOUC)을 근본적으로 해결한 과정을 다룹니다.
재사용 가능한 드래그 스크롤 컨테이너 만들기
Vue.js로 PC 환경에서 마우스 드래그 스크롤을 지원하는 재사용 가능한 컴포넌트를 개발한 과정을 다룹니다.
서비스 프론트엔드 성능 최적화 탐구: 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 설정을 통해 해결한 과정을 정리합니다.
Nuxt2에서 Pinia 사용하기
Nuxt2 프로젝트에서 Vuex를 Pinia로 마이그레이션하며 적용 방법과 코드 구조 개선 포인트를 정리합니다.
Infinite Scroll 최적화: DOM 재사용으로 대용량 리스트 처리하기
Intersection Observer와 DOM 재사용(버퍼링) 전략으로 무한 스크롤에서 발생하는 DOM 누적 문제를 줄이고, 대용량 리스트를 안정적으로 처리한 구현 과정을 정리합니다.
Nuxt 3 프로젝트에서 URL을 통한 다국어 설정하기
nuxtjs/i18n 대신 vue-i18n을 적용하고, 라우터 옵션을 확장해 `/en` 같은 URL prefix로 로케일을 전환하는 방법과 주의사항을 정리합니다.
Nuxt 3 프로젝트에서 서브도메인 처리하기
Nuxt 3의 커스텀 라우팅(`app/router.options.ts`)을 이용해 서브도메인에 따라 PC/모바일 페이지를 분기하는 방법과 구현 포인트를 정리합니다.
XSS 공격의 유형과 대처방법
Reflected/Stored/DOM-based XSS의 개념과 동작 방식, 그리고 sanitize-html로 입력/출력을 정화(sanitize)해 방어하는 방법을 정리합니다.
watch와 watchEffect에 대한 고찰
Vue 3 Composition API의 `watch`와 `watchEffect`가 언제 실행되고 무엇을 추적하는지, 그리고 `immediate` 옵션을 포함한 사용 기준을 정리합니다.
Nuxt2에서 Nuxt3로 마이그레이션 도전기
Nuxt2 프로젝트를 Nuxt3로 전환하며 겪었던 주요 차이점과, 라이브러리 업데이트/디렉터리 이동/Composition API 전환 순서로 진행한 마이그레이션 접근을 정리합니다.