최근 게시글
-
Vercel CLI로 Preview/Production 배포하기 (SPA 새로고침 404 검증까지)
Vercel에 배포된 SPA(React Router BrowserRouter 등)는 서브 경로에서 새로고침/직접 접근 시 404가 날 수 있습니다.이건 “서버가 /posts/123 같은 경로를 정적 파일로 찾다가 실패”하는 전형적인 케이스라서,fallback rewrite(항상 index.html로 보내기)로 해결합니다. 1) main 머지 전에 “진짜 적용되는지” 확인하는 가장 좋은 방법: CLI로 Preview 배포(1) CLI 설치/로그인npm i -g vercelvercel login(2) 프로젝트 루트에서 Preview 배포 (기본값)vercel처음 실행이면 연결(linking) 질문이 나오고, 한 번 연결되면 .vercel/이 생깁니다.배포가 끝나면 Preview URL이 출력됩니다.(3) ..
2026.01.20
-
Supabase Free 플랜 “일시정지(Pause)” 방지하기: GitHub Actions
Supabase 무료 플랜은 프로젝트를 일주일간 사용하지 않으면 일시정지(pause) 상태가 될 수 있습니다.포트폴리오처럼 “가끔 누군가 들어와서 확인하는 서비스”는, 하필 그 타이밍에 DB가 멈춰 있으면 로그인/CRUD가 실패하면서 서비스가 죽어 보이는 문제가 생깁니다.그래서 가벼운 조회(SELECT 1회)를 주기적으로 실행해 프로젝트가 비활성 상태로 떨어지지 않도록 keepalive를 구성했습니다. 방법(with.Next.js)1) 헬스 체크 API 만들기배포된 서비스에서 호출 가능한 엔드포인트를 하나 만들고그 안에서 DB에 “가벼운 SELECT”를 1번만 실행예) /api/dbHealthCheck/supabaseimport supabase from "@/utils/supabase/client";e..
2026.01.11
-
Chrome에서 ::-webkit-scrollbar가 갑자기 안 먹는 이유 (Chrome 121+ 표준 스크롤바 속성 충돌 해결)
모달 내부 스크롤바를 커스텀하려고 ::-webkit-scrollbar를 붙였는데,어떤 순간부터 Chrome인데도 규칙이 통째로 적용되지 않는 상황을 겪었습니다. 개발자 도구에서 확인하니 아래처럼 webkit-scrollbar를 지원하지 않는다고 나왔습니다 결론부터 말하면, 최근 Chrome(121+)에서 표준 스크롤바 속성(scrollbar-color, scrollbar-width)을 지원하기 시작하면서,같은 요소에서 레거시 WebKit 방식(::-webkit-scrollbar*)과 충돌이 발생할 수 있습니다.( ::-webkit-scrollbar를 아예 지원하지 않는 것은 아님) https://caniuse.com/?search=scrollbar-color%3A "scrollbar-color:" |..
2026.01.06
-
[data-*]
HTML 표준에서 data- 로 시작하는 속성은 '개발자가 자유롭게 정의하는 메타 데이터' 개요위 처럼 작성시 브라우저 DOM에 그대로 존재. - 실제 렌더된 HTML에 포함 - 스타일, 접근성, 검색 엔진에는 영향 X - JS에서 querySelector / getAttribute로 접근 가능 의도된 요소에만 지정하고 싶을 때 JS에서 활용 가능 [실무에서 사용 예시] - 애널리틱스 추적용 'data-track-id' - 테스트용 'data-testid' - 드래그 앤 드롭용 'data-draggable' - 에디터/문서 시스템에서 섹션 마킹
2026.01.03
-
AI 코딩의 품질 붕괴를 막는 법
AI가 발전과 함께 '바이브코딩'이 빠르게 확산되고 있습니다.구현 전체를 AI 프롬프트에 맡기지 않더라도, AI를 전혀 사용하지 않는 개발자는 거의 없다고 봐도 무방합니다. 다만, 모두 한 번씩 하는 경험이 있습니다. AI를 사용해 개발하는 과정에서 AI가 로직의 전후관계를 잘 이해하지 못하고,엉망인 확장성에 기능 구현조차 하지 못하는 얽힌 상황이 생기는 것입니다.여러 유튜브 강의 영상과 강연에서 다룬 내용들 중 와닿았던 것들을 정리하고, 추가 팁을 더한 글입니다. 바이브코딩의 과정에 더욱 치중되어 작성되었습니다. AI 사용 중 품질 붕괴가 발생하는 전형적인 신호동일한 수정 요청 반복요청하지 않은 기능 구현테스트를 삭제하거나 비활성화하는 등 개발자의 눈을 가리기 위한 행동"ㅇㅇ 기능 구현해줘" → "이게..
2025.12.28
-
popstate Guard - 뒤로가기 오작동 방지
결제 같은 중요한 플로우에서는 브라우저 뒤로가기(popstate) 를 막아야 할 때가 있습니다.이를 위해 history.pushState와 popstate 이벤트 핸들러를 조합해 일시적인 가드(guard) 를 걸 수 있습니다. 문제점 ① – preventDefault는 무의미 popstate 이벤트는 취소(cancellable)가 아니기 때문에 아무 효과가 없습니다.// 잘못된 예시const onPopState = (event: PopStateEvent) => { event.preventDefault(); // 효과 없음}; 문제점 ② – 히스토리 누적기존 방식은 popstate가 발생할 때마다 다시 pushState를 호출했습니다.이러면 히스토리 스택이 계속 늘어나서, 해제 시 history.bac..
2025.08.18
-
Zustand persist - version/migrate
상태가 커질수록 로컬 저장소에 남은 과거 스냅샷이 발목을 잡는 경우가 있습니다. Zustand persist의 version/migrate를 제대로 쓰면 안전하고 예측 가능한 업그레이드가 가능합니다. 왜 version/migrate가 필요할까?persist는 상태를 localStorage/sessionStorage에 JSON으로 저장합니다.코드에서 필드를 삭제/변경해도, 브라우저 저장소엔 과거 스냅샷이 그대로 남아 복원(rehydrate)됩니다.이때 스키마가 달라지면 불일치, 깜빡임, 에러, 심지어 민감정보 잔존 문제가 발생할 수 있습니다.version/migrate는 “이전 스키마 → 현재 스키마로 안전하게 변환”하는 공식적인 레일입니다.핵심 개념 한 줄 요약version: 현재 스토어 스키마의 버전 ..
2025.08.18
-
React에서 모듈 레벨 캐시 + inflight dedupe로 중복 fetch 막기
결제 페이지 작업중 “fetch 함수를 여러 컴포넌트에서 동시에 접근할 때 할 때 네트워크 요청이 중복되는 문제”를 정리사용한 방식 : 모듈 스코프 캐시와 진행중 요청 공유문제 상황여러 컴포넌트가 같은 쿠폰 목록을 필요로 함각자 useEffect에서 getCouponList()를 호출 → 동시에 두세 번 요청 날아감UX 지연 + 불필요한 트래픽 + 레이스 컨디션 위험.목표중복 요청 방지: 처음 1회만 네트워크 요청 보내고, 나머지는 진행 중 요청에 합류하거나 결과 캐시 사용.구조 변경 최소화: 기존 훅/컴포넌트 인터페이스는 크게 건드리지 않기 작업 내역 요약모듈 스코프(파일 상단)에_cachedCoupons: 마지막 성공 결과_inflight: 진행 중인 요청의 Promise를 둔다.훅이 실행될 때캐시..
2025.08.15
-
커스텀 모달 고도화 해보기(접근성 향상, 포커스 제어 관련)
[next.js 환경] 프로젝트를 하다 보니 기존에 간단히 만들어두었던 커스텀 모달에 대응해야할 게 점점 늘어나서, (모바일일 때 풀 화면 데스크탑에선 모달 / 전역 관리를 통해 toggle 제어 등)기존 모달을 조금 더 고도화하면서접근성포커스 제어스크롤 락 처리이 세 가지를 중점적으로 개선해봤습니다.(세세한 단계별 기록은 없음. 혹시 몰라 기록차 게시글 작성) 개선 전 상황이전 모달은 단순히 열리고 닫히는 기능에만 집중되어 있었어요.포커스 제어, 키보드 핸들링, 스크롤 락 등 사용성에 중요한 요소들이 빠져 있었습니다.또한 모바일에서는 풀스크린 형태, 데스크탑에서는 지정된 크기 등 반응형 레이아웃 대응도 미흡했습니다. 개선 포인트1. 접근성(Accessibility) 향상div 에 role="d..
2025.08.12
-
SSR도 하고 전역 상태 관리도 하고싶어
(개요)Next.js를 사용, 결제 페이지의 배송지 관련 기능을 구현중입니다.서버의 주소지 정보를 fetch 해오고, 띄운 후, 배송지 변경이 가능해야합니다.+ 다른 배송지로 변경 혹은 배송지 수정, 삭제 등은 모달에서 처리되어야합니다 (디자이너의 바람입니다) 제 바람은 SSR 렌더링 방식을 사용해 초기 로드 속도, 검색 엔진의 이점을 가져오고싶고. props drilling은 생기지 않았으면 합니다.(page.tsx > DeliveryAddress > (변경 클릭시) modal 의 애매하지만 깊다면 깊은 구조를 가지기 때문에) (기존 구조)기존에는 서버 컴포넌트에서 가져온 데이터를 중간 컨테이너 컴포넌트로 props 전달 후.useState에 초기값으로 넣고, 배송지 컴포넌트와 총 결제 정보가 든 컴..
2025.07.28