enum LogLevel {
DEBUG = 'debug',
INFO = 'info',
WARN = 'warn',
ERROR = 'error',
}
type Message = string
class Logger {
private level: LogLevel
constructor(level: LogLevel = LogLevel.DEBUG) {
this.level = level
}
private log(level: LogLevel, message: Message) {
if (this.level === LogLevel.DEBUG || level !== LogLevel.DEBUG) {
const label = level.toUpperCase()
console.log(`[${label}] ${message}`)
}
}
/**
* - 개발 혹은 테스트 단계
* - 운영 환경에서는 남기고 싶지 않은 로그 메세지
*/
public debug(message: Message) {
this.log(LogLevel.DEBUG, message)
}
/**
* - 정상 작동에 대한 정보
* - 시스템을 파악하는데 유익한 정보
*/
public info(message: Message) {
this.log(LogLevel.INFO, message)
}
/**
* - 잠재적으로 문제가 될 수 있는 상황
* - 언제든 발생할 수 있는 일반적인 문제 상황
* - 사용자에게 노출되는 메세지에 상세한 가이드가 필요
*/
public warn(message: Message) {
this.log(LogLevel.WARN, message)
}
/**
* - 심각한 오류나 예외 상황
* - 즉시 조치가 필요할때
*/
public error(message: Message) {
this.log(LogLevel.ERROR, message)
}
}요청 본문은 한 번만 읽을 수 있다. 누가 미리 읽었는지는 읽기 메서드를 Proxy 로 감싸서 찾는다.
const bodyReadingMethods = ['arrayBuffer', 'blob', 'formData', 'text', 'json']
bodyReadingMethods.forEach((methodName) => {
request[methodName] = new Proxy(request[methodName], {
apply(...args) {
console.trace(`Premature "request.${methodName}" call!`)
return Reflect.apply(...args)
},
})
})URL %2520 버그 = iOS 17.0/17.1 WebKit pasteboard가 복사 시 URL을 재인코딩 (WebKit Bug 261936).
현상
- 공백이
%2520으로 깨짐, 한글은%EC%88%98정상 → 부분 재인코딩 - 복사-붙여넣기 경로만 영향, 클릭(JS redirect)은 정상
- iOS 집중 + referrer 누락 패턴과 일치
원인
%2520 = %25(= %) + 원래 있던 20. 공백(%20)이 한 번 더 인코딩된 것.
공백 → %20 → (% 만 재인코딩) → %2520URL 인코딩은 멱등(idempotent)이 아니다 — encodeURIComponent를 두 번 하면 값이 달라진다.
진범은 WebKit Bug 261936:
- iOS 16↓:
NSURL URLWithString:이 invalid char에nil - iOS 17.0/17.1: invalid char를 자동 percent-encode (regression)
- iOS 17.2: 수정
pasteboard가 NSURL을 만들 때 %20은 invalid로 잘못 판단해 재인코딩, 한글 percent-encoding(%EA%B0%80)은 valid UTF-8로 통과 → 비대칭의 원인.
해결
원인이 외부(OS 버그)면 추적보다 방어가 ROI 높음.
- 화이트리스트 라우트 패턴에서만 디코딩
- 디코딩 후 위험 패턴(
..,//,\) 차단 - segment별
encodeURIComponent후 301 redirect
무조건 이중 디코딩 금지 — ..%252f..%252f → ../../ path traversal 우회 벡터.
교훈
- URL은 디코딩된 원본으로 보관, 인코딩은 출력 직전 한 번 (single source of truth)
- “방어적으로 한 번 더”가 함정 — 멱등이 아닌 연산엔 통하지 않는다
참고
시뮬레이터 Safari를 GUI로 디버깅하는 정도는 그냥 macOS Safari 개발자용 메뉴. inspect-webkit(CDP 브리지)으로 우회하려다 막혔다.
이유: inspect-webkit은 README부터 “for AI agents and CI” 타겟 — 사람 GUI 디버깅이 애초에 주력 시나리오가 아니었다.
교훈: 도구의 의도된 사용자를 README에서 먼저 확인한다.
참고
- inspect-webkit — Safari/WKWebView 타겟을 CDP로 브리지 (헤드리스, AI/CI 지향)
- Eruda — 페이지에 주입하는 모바일 콘솔 (브리지 불필요)
- Inspecting iOS and iPadOS — Apple — macOS Safari로 시뮬레이터 디버깅 (정도)
dnd-kit drop 직후 튕김 — setQueryData 는 화면을 한 틱 늦게 바꾼다
dnd-kit Sortable + react-query에서 drop 직후 아이템이 원래 자리로 돌아갔다가 새 자리로 점프한다. 12프레임짜리 튕김이고, DragOverlay를 쓰면 더 두드러진다. onDragEnd에…
TypeScript 타입변수 추론 진단
T가 왜 그 타입으로 정해졌는지 역추적하는 절차. 수집·해소 2단계 모델과 우회 패턴.
언제 — 함수 호출에서 T 가 엉뚱하게 정해졌을 때. 증상으로 찾아 들어간다.
localtunnel은 쉽게 테스트하고 공유할 수 있도록 로컬 호스트를 공개합니다! 다른 사람들이 변경 사항을 테스트하도록 하기 위해 DNS를 엉망으로 만들거나 배포할 필요가 없습니다.
app.listen(PORT, async () => {
const tunnel = await localtunnel({
port: PORT,
subdomain: name,
})하지만 너무 느려서 ngrok 쓰는게 현실적일수도 있겠다. -20220917
Footnotes
-
로컬 환경에서 웹훅 테스트를 위해, API 엔드포인트를 만들고 localtunnel이나 ngrok을 사용하기. ↩
charles
- The Android Emulator and Charles Proxy: A Love Story | by Mark Dappollone | Medium
- Is it possible to rewrite a status code with Charles Proxy? - Stack Overflow
fiddler
mitmproxy
- mitmproxy로 iOS 기기의 네트워크 트래픽 살펴보기 :: Outsider’s Dev Story
- Android nougat 이상 emulator에서 mitmproxy 사용하기 | by Jungwook Park | kjcoop | Medium
Footnotes
redux 에서 trace 가 필요하면 redux-devtools 의 trace 설정을 켠다. 다만 메모리 릭 가능성이 있어서 상시로 켜두긴 어렵다 — 우회한다면 무식하지만 의심 지점에 console.trace()를 직접 넣는다.