2026년 1월 20일 (화요일)

클로저가 품은 stale 데이터, 그리고 함수형 업데이트의 구원

오늘 하루는 React의 고전적인 함정에 빠졌다가 탈출하는 것으로 시작했습니다. 그리고 그 여정이 꽤 인상적이었기에 기록으로 남깁니다.

사라지는 입력값의 미스터리

쇼핑몰 H 관리시스템에서 배너 관리 기능을 테스트하던 중 이상한 현상이 발견됐습니다. 배너를 여러 개 추가하고 내용을 입력한 뒤, 하나를 삭제하면 남아있어야 할 배너의 입력값까지 전부 사라지는 버그였죠.

범인은 useCallback의 클로저가 캡처한 stale items 배열이었습니다. (React 좀 해보신 분들은 고개를 끄덕이실 그 문제 맞습니다)

// 기존 - 클로저가 오래된 items를 붙잡고 있음 => setSettings({ ...settings, items })}

// 수정 - 함수형 업데이트로 항상 최신 상태 참조 => {
  if (typeof itemsOrUpdater === 'function') {
    setSettings(prev => ({ ...prev, items: itemsOrUpdater(prev.items) }));
  } else {
    setSettings(prev => ({ ...prev, items: itemsOrUpdater }));
  }
}}

RepeaterField 컴포넌트의 onChange 타입을 함수형 업데이트까지 지원하도록 확장하고, 이를 사용하는 13개 페이지를 모두 수정했습니다. 조용히 숨어있던 버그 하나가 생각보다 많은 곳에 영향을 주고 있었네요.

캐시, 그 미묘한 균형

콘텐츠 관리자 입장에서 "저장했는데 왜 안 바뀌어요?"는 꽤 스트레스받는 상황입니다. 그래서 각 콘텐츠 타입별로 캐시 반영 시간을 명시하는 CdnCacheNotice 컴포넌트를 개선했습니다.

배너는 1분, 브랜드는 30분, 이벤트는 5분. 베타 운영 기간에는 DISABLE_CACHE=true 환경변수로 모든 캐시를 끌 수 있게 만들어뒀습니다. (운영 들어가면 다시 켜야죠, 당연히)

아트페어 H VIP시스템의 대규모 정비

오늘 아트페어 H VIP시스템에서는 CSV 업로드 기능이 크게 개선됐습니다. 업로드 전 검증 결과를 모달로 미리 보여주고, 기존 VIP 데이터를 덮어쓸 때는 경고까지 띄워주는 친절한 UX가 추가됐죠.

한편 VIP 등록 폼 로직은 useVipRegisterForm 커스텀 훅으로 깔끔하게 통합됐고, 전화번호 입력 포맷팅 컴포넌트도 새로 추가됐습니다. 사용자 ID 타입이 string과 number 사이에서 왔다갔다하던 문제도 이번에 정리했습니다. (타입 일관성, 정말 중요합니다)

소소하지만 확실한 개선들

이벤트 목록에서 UID 대신 전체 URL을 표시하고 복사 버튼까지 추가
발매일정 시간 입력을 type="time"에서 자유 형식 텍스트로 변경 (12PM, 오후 3시 같은 표현 가능)
TipTap 에디터의 SSR 하이드레이션 오류 수정 (immediatelyRender: false 한 줄로 해결)
브랜드 중복 등록 시 Prisma의 P2002 에러를 잡아서 구체적인 메시지 표시

온라인 매거진 H에서는 팝업 랭킹 이미지에 크롭을 적용했고, 기관 공식 웹사이트 H은 기관 전화번호를 조용히 변경했습니다.

버그 하나 잡으려다 보니 13개 파일을 수정하게 되는 게 프론트엔드 개발이죠.

총 50개의 커밋, 15,000줄 이상의 변경. 오늘 하루도 코드베이스가 조금 더 단단해졌습니다.

글 작성자

한송욱

@coolwithyou

CTO, Tech LeadSoftware Engineer

프로필 보기

커밋 참여자

이상희

Software Engineer

+7052-1270

추지혜

Software Engineer

+4777-827

한송욱

Software Engineer

+3314-656

개발자 개인정보 및 고객사 정보 보호를 위해 프로젝트명과 일부 세부 정보는 마스킹 처리되어 있습니다.

작업한 프로젝트

쇼핑몰 J 관리시스템

1개 커밋+27-27

아트페어 H VIP시스템

24개 커밋+11703-1981

온라인 매거진 H

3개 커밋+126-116

쇼핑몰 H 관리시스템

21개 커밋+3285-627

기관 공식 웹사이트 H

1개 커밋+2-2

상세 커밋 내역

스타일 수정

쇼핑몰 J 관리시스템 · coolwithyou · +27 / -27

코드 업데이트

아트페어 H VIP시스템 · chujihye · +3973 / -79

스타일 수정

온라인 매거진 H · sangheedev · +61 / -57

코드 업데이트

아트페어 H VIP시스템 · Chu Jihye · +475 / -426

스타일 수정

온라인 매거진 H · sangheedev · +3 / -2

코드 업데이트

온라인 매거진 H · Lee Sanghee · +62 / -57

기능 추가

쇼핑몰 H 관리시스템 · coolwithyou · +87 / -1

버그 수정

쇼핑몰 H 관리시스템 · coolwithyou · +51 / -3

코드 개선

아트페어 H VIP시스템 · chujihye · +186 / -266

버그 수정

쇼핑몰 H 관리시스템 · coolwithyou · +133 / -20

기능 추가

아트페어 H VIP시스템 · sangheedev · +66 / -3

기능 추가

아트페어 H VIP시스템 · sangheedev · +38 / -2

기능 추가

쇼핑몰 H 관리시스템 · coolwithyou · +6 / -4

코드 업데이트

아트페어 H VIP시스템 · sangheedev · +2 / -19

기능 추가

쇼핑몰 H 관리시스템 · coolwithyou · +39 / -5

기능 추가

쇼핑몰 H 관리시스템 · coolwithyou · +56 / -17

버그 수정

쇼핑몰 H 관리시스템 · coolwithyou · +147 / -56

기능 추가

쇼핑몰 H 관리시스템 · coolwithyou · +97 / -5

기능 추가

쇼핑몰 H 관리시스템 · coolwithyou · +125 / -11

기능 추가

쇼핑몰 H 관리시스템 · coolwithyou · +27 / -53

기능 추가

아트페어 H VIP시스템 · sangheedev · +763 / -194

기능 추가

쇼핑몰 H 관리시스템 · coolwithyou · +1781 / -372

버그 수정

쇼핑몰 H 관리시스템 · coolwithyou · +1 / -0

버그 수정

아트페어 H VIP시스템 · chujihye · +50 / -34

버그 수정

쇼핑몰 H 관리시스템 · coolwithyou · +2 / -2

기능 추가

아트페어 H VIP시스템 · sangheedev · +57 / -88

설정 변경

아트페어 H VIP시스템 · sangheedev · +6 / -6

코드 개선

아트페어 H VIP시스템 · chujihye · +11 / -13

버그 수정

쇼핑몰 H 관리시스템 · coolwithyou · +2 / -2

기능 추가

쇼핑몰 H 관리시스템 · coolwithyou · +10 / -18

버그 수정

쇼핑몰 H 관리시스템 · coolwithyou · +0 / -2

코드 개선

아트페어 H VIP시스템 · sangheedev · +18 / -50

버그 수정

아트페어 H VIP시스템 · sangheedev · +4 / -3

기능 추가

아트페어 H VIP시스템 · sangheedev · +43 / -3

기능 추가

아트페어 H VIP시스템 · chujihye · +75 / -8

코드 개선

아트페어 H VIP시스템 · sangheedev · +47 / -663

기능 추가

아트페어 H VIP시스템 · sangheedev · +14 / -1

설정 변경

기관 공식 웹사이트 H · coolwithyou · +2 / -2

기능 추가

아트페어 H VIP시스템 · sangheedev · +43 / -8

기능 추가

쇼핑몰 H 관리시스템 · coolwithyou · +63 / -19

기능 추가

아트페어 H VIP시스템 · sangheedev · +15 / -1

버그 수정

아트페어 H VIP시스템 · chujihye · +7 / -1

버그 수정

쇼핑몰 H 관리시스템 · coolwithyou · +42 / -2

기능 추가

아트페어 H VIP시스템 · sangheedev · +99 / -98

코드 개선

아트페어 H VIP시스템 · sangheedev · +13 / -13

코드 업데이트

아트페어 H VIP시스템 · sangheedev · +2849 / -1

코드 업데이트

아트페어 H VIP시스템 · Lee Sanghee · +2849 / -1

버그 수정

쇼핑몰 H 관리시스템 · coolwithyou · +2 / -1

버그 수정

쇼핑몰 H 관리시스템 · coolwithyou · +43 / -10

기능 추가

쇼핑몰 H 관리시스템 · coolwithyou · +571 / -24

오늘 하루는 React의 고전적인 함정에 빠졌다가 탈출하는 것으로 시작했습니다. 그리고 그 여정이 꽤 인상적이었기에 기록으로 남깁니다.

사라지는 입력값의 미스터리

범인은 useCallback의 클로저가 캡처한 stale items 배열이었습니다. (React 좀 해보신 분들은 고개를 끄덕이실 그 문제 맞습니다)

// 기존 - 클로저가 오래된 items를 붙잡고 있음 => setSettings({ ...settings, items })}

// 수정 - 함수형 업데이트로 항상 최신 상태 참조 => {
  if (typeof itemsOrUpdater === 'function') {
    setSettings(prev => ({ ...prev, items: itemsOrUpdater(prev.items) }));
  } else {
    setSettings(prev => ({ ...prev, items: itemsOrUpdater }));
  }
}}

캐시, 그 미묘한 균형

아트페어 H VIP시스템의 대규모 정비

소소하지만 확실한 개선들

이벤트 목록에서 UID 대신 전체 URL을 표시하고 복사 버튼까지 추가
발매일정 시간 입력을 type="time"에서 자유 형식 텍스트로 변경 (12PM, 오후 3시 같은 표현 가능)
TipTap 에디터의 SSR 하이드레이션 오류 수정 (immediatelyRender: false 한 줄로 해결)
브랜드 중복 등록 시 Prisma의 P2002 에러를 잡아서 구체적인 메시지 표시

온라인 매거진 H에서는 팝업 랭킹 이미지에 크롭을 적용했고, 기관 공식 웹사이트 H은 기관 전화번호를 조용히 변경했습니다.

버그 하나 잡으려다 보니 13개 파일을 수정하게 되는 게 프론트엔드 개발이죠.

총 50개의 커밋, 15,000줄 이상의 변경. 오늘 하루도 코드베이스가 조금 더 단단해졌습니다.