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 → (% 만 재인코딩) → %2520

URL 인코딩은 멱등(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

교훈

• URL은 디코딩된 원본으로 보관, 인코딩은 출력 직전 한 번 (single source of truth)
• “방어적으로 한 번 더”가 함정 — 멱등이 아닌 연산엔 통하지 않는다

참고

• WebKit Bug 261936
• Changes to URL string parsing in iOS 17 — Augmented Code
• OWASP — Double Encoding
• WHATWG URL Standard

컴포넌트가 렌더링하는 요소를 외부에서 제어하는 세 가지 패턴.

as

태그명을 props로 전달. 가장 단순하지만 타입이 복잡해짐.

type PolymorphicProps<E extends React.ElementType> = {
  as?: E
} & React.ComponentPropsWithoutRef<E>

function Button<T extends React.ElementType = 'button'>({
  as,
  ...props
}: PolymorphicProps<T>) {
  const Comp = as || 'button'
  return <Comp {...props} />
}

asChild + Slot

Radix UI 방식. 자식 요소로 렌더링 위임. prop 병합이 암묵적.

import { Slot } from '@radix-ui/react-slot'

function Button({ asChild, ...props }) {
  const Comp = asChild ? Slot : 'button'
  return <Comp {...props} />
}

Slot이 자동으로 처리하는 것: className 병합, 이벤트 핸들러 합성, ref 병합.

Slot 직접 구현:

const Slot = forwardRef(({ children, ...props }, ref) => {
  if (!isValidElement(children)) return null

  return cloneElement(children, {
    ...props,
    ...children.props,
    ref: ref || children.ref,
  })
})

자식 요소 타입에 따른 조건부 Props:

type ConditionalProps<T> = T extends ReactElement<any, 'a'>
  ? { href?: string; external?: boolean }
  : T extends ReactElement<any, 'button'>
    ? { type?: 'button' | 'submit' }
    : {}

render

Base UI, React Aria 방식. 명시적 prop 전달. 타입 추론이 가장 좋음.

// Element 방식
<Button render={<a href="/about" />}>Link</Button>

// Callback 방식 - state 접근 가능
<Button render={(props, state) => (
  <motion.button {...props} animate={state.isPressed ? ... : ...} />
)}>
  Animated
</Button>

render prop은 (domProps, renderProps) 시그니처. domProps는 ref 포함 DOM 속성, renderProps는 컴포넌트 상태(isPressed, isSelected 등).

선택 기준

| 패턴    | 복잡도 | 타입 안전성 | 유연성 |
| ------- | ------ | ----------- | ------ |
| as      | 낮음   | 보통        | 낮음   |
| asChild | 중간   | 보통        | 높음   |
| render  | 중간   | 높음        | 높음   |

• 단순 태그 변경 → as
• 기존 컴포넌트 합성 → asChild 또는 render
• 상태 기반 커스터마이징 → render

---

• Base UI useRender - render prop 커스텀 훅 구현
• React Aria render prop PR - React Aria Components에 render prop 도입
• Slot/asChild Pattern - Radix Slot vs Base UI render 비교
• React as prop (christianvm) - ElementType, ComponentPropsWithoutRef 타입 활용
• slot-jsx-pragma - cloneElement 없이 asChild 구현하는 JSX pragma
• React as prop (robinwieruch) - 디자인 시스템에서 시맨틱 HTML 유지하며 스타일 분리
• asChild in React, Svelte, Vue, Solid - 프레임워크별 render delegation 비교
• React asChild (jacobparis) - asChild 패턴 구현 튜토리얼
• Polymorphism done well - 타입 안전한 polymorphic 컴포넌트

for file in *.md; do
  new_name="${file#* }"
  mv "$file" "$new_name"
done

| 개념        | JavaScript      | Bash                   |
| ----------- | --------------- | ---------------------- |
| 반복        | `for...of`      | `for...in...do...done` |
| 문자열 분리 | `split(' ')[1]` | `${var#* }`            |
| 문자열 치환 | `replace()`     | `${var/old/new}`       |
| 파일 조작   | `fs.rename()`   | `mv`                   |
| 출력        | `console.log()` | `echo`                 |

Parameter Expansion

file="351 529.md"

${file#* }       # 앞에서 "* " 제거 → "529.md"
${file##* }      # greedy
${file% *}       # 뒤에서 " *" 제거 → "351"
${file%%.*}      # greedy → "351 529"
${file/old/new}  # 첫 번째 치환
${file//old/new} # 전체 치환

#은 앞(키보드에서 $보다 왼쪽), %는 뒤.

따옴표

mv $file $new_name      # ❌ 공백 있으면 깨짐
mv "$file" "$new_name"  # ✅

디버깅

set -x  # 실행 명령어 출력
set -e  # 에러 시 중단

콜백 → Promise → async/await

// 콜백
fetchData(() => {
  processData(() => {
    displayData()
  })
})

// Promise 체인
fetchData().then(processData).then(displayData)

// async/await
async function main() {
  const data = await fetchData()
  const processed = await processData(data)
  await displayData(processed)
}

Promise는 모나드처럼 동작 - then이 bind/flatMap 역할

• map: 값 변환 (중첩 허용)
• flatMap: 값 변환 + 평탄화 (Promise의 then)

TypeScript Maybe Monad 구현

type Maybe<T> = Just<T> | Nothing

class Just<T> {
  constructor(public value: T) {}
  bind<U>(fn: (value: T) => Maybe<U>): Maybe<U> {
    return fn(this.value)
  }
}

class Nothing {
  bind<U>(fn: (value: any) => Maybe<U>): Maybe<U> {
    return this
  }
}

const nothing = new Nothing()

function safeDivide(x: number, y: number): Maybe<number> {
  return y === 0 ? nothing : new Just(x / y)
}

new Just(10).bind((x) => safeDivide(x, 2)) // Just { value: 5 }
new Just(10).bind((x) => safeDivide(x, 0)) // Nothing {}

모나드 입문

모나드 = 복잡한 처리를 숨기면서 연속된 연산을 가능하게 하는 패턴

1. 타입 래퍼 - 값을 감싸는 구조 (예: NumberWithLogs)
2. 래핑 함수 (unit/return) - 값을 모나드로 감쌈
3. 바인딩 함수 (bind/flatMap) - 래핑된 값에 함수 적용

interface NumberWithLogs {
  result: number
  logs: string[]
}

function wrapWithLogs(n: number): NumberWithLogs {
  return { result: n, logs: [] }
}

function runWithLogs(
  input: NumberWithLogs,
  transform: (n: number) => NumberWithLogs
): NumberWithLogs {
  const next = transform(input.result)
  return { result: next.result, logs: [...input.logs, ...next.logs] }
}

Option, Promise도 모나드. then이 바인딩 함수 역할.

Maybe Monad로 null 체크 체이닝

type Maybe<T> = T | null

const Maybe = {
  of: <T>(value: T): Maybe<T> => (value != null ? value : null),
  map: <T, U>(m: Maybe<T>, fn: (v: T) => U): Maybe<U> =>
    m != null ? Maybe.of(fn(m)) : null,
}

// 사용 예: DOM 요소 찾아서 스크롤
Maybe.of(scrollElement.current)
  .map((root) => root.querySelector(`#${id}`))
  .map((target) => target.getClientRects()[0])
  .map((rect) => {
    root.scrollLeft = rect.left
  })

Generator로 early return 패턴도 가능

function* handleScroll(id) {
  const root = scrollElement.current
  if (!root) return
  const target = root.querySelector(`#${id}`)
  if (!target) return
  yield target.getClientRects()[0]?.left ?? 0
}

두 요소 스크롤 동기화

const box1 = document.getElementById('box1')
const box2 = document.getElementById('box2')

let isSyncing = false

function syncScroll(source, target, sourceWidth, targetWidth) {
  const ratio = source.scrollLeft / (source.scrollWidth - sourceWidth)
  target.scrollLeft = ratio * (target.scrollWidth - targetWidth)
}

box1.addEventListener('scroll', () => {
  if (!isSyncing) {
    isSyncing = true
    syncScroll(box1, box2, 1280, 640)
    isSyncing = false
  }
})

box2.addEventListener('scroll', () => {
  if (!isSyncing) {
    isSyncing = true
    syncScroll(box2, box1, 640, 1280)
    isSyncing = false
  }
})

isSyncing 플래그로 무한 이벤트 루프 방지

현재 시간부터 목표 시간까지 남은 시간 계산

function calculateRemainingTime(targetTime) {
  const now = new Date()
  const [h, m, s] = targetTime.split(':').map(Number)

  const target = new Date()
  target.setHours(h, m, s)

  const diff = target - now
  if (diff < 0) return null

  return {
    hours: Math.floor(diff / 3600000) % 24,
    minutes: Math.floor(diff / 60000) % 60,
    seconds: Math.floor(diff / 1000) % 60,
  }
}

calculateRemainingTime('18:30:00')
// { hours: 2, minutes: 15, seconds: 30 }

turf.js로 좌표가 영역 내에 있는지 확인

const turf = require('@turf/turf')

const polygon = turf.polygon([
  [
    [-73.981, 40.768],
    [-73.981, 40.764],
    [-73.975, 40.764],
    [-73.975, 40.768],
    [-73.981, 40.768], // 닫기
  ],
])

const point = turf.point([-73.978, 40.766])

turf.booleanPointInPolygon(point, polygon) // true/false

npm install @turf/turf