📎

Exporting values variables

github.com
@value b from "./b.module.css";

.root {
  color: aquamarine;
}

.root :global(.b) {
  text-decoration: line-through;
}

@value 로 가져온 이름은 선언 값뿐 아니라 셀렉터 안에서도 치환된다1 — 다른 모듈의 클래스 b 를 가져오면 :global(.b) 가 그 모듈의 해시된 클래스(._b_15lvz_1)가 된다. @value 줄이 없으면 문자 그대로 .b 라 아무것도 안 잡힌다.

Footnotes

  1. icss-utils replaceSymbols.js — postcss-modules-values 가 모은 정의를 이 함수로 치환하는데, 선언(decl)뿐 아니라 규칙의 셀렉터(rule.selector)도 돈다. ↩

#css
#371
📎

URL: parse() static method

developer.mozilla.org

URL() 생성자는 던지고 canParse() 는 false, parse() 는 null — 같은 파싱인데 실패를 알리는 방식만 다르다1

  • URL.parse(url) 메서드는 주어진 URL에 따라 새 URL 객체를 생성
  • 두 번째 파라미터 base는 상대 URL을 해석하기 위한 기준 URL로 사용되며, 이를 통해 URL의 경로가 올바르게 조정됨
  • URL 객체나 다른 문자열을 파라미터로 사용할 수 있으며, 내부에서 문자열로 변환됨
describe('null 입력에 대한 URL API 동작 테스트', () => {
  test('new URL(null)은 TypeError를 발생시킨다', () => {
    expect(() => new URL(null)).toThrow(TypeError)
  })

  test('URL.canParse(null)은 false를 반환한다', () => {
    expect(URL.canParse(null)).toBe(false)
  })

  test('URL.parse(null)은 null을 반환한다', () => {
    expect(URL.parse(null)).toBe(null)
  })
})

Footnotes

  1. URL: parse() static method - MDN: “This is an alternative to using the URL() constructor to construct a URL within a try…catch block, or using canParse() to check the parameters and returning null if the method returns false.” ↩

#url
#368
📎

VisualViewport

developer.mozilla.org

가상 키보드와 fixed

모달과 스크롤 잠금

sticky

#keyboard#modal#sticky#webview
#362
📎

SPA (Single-page application)

developer.mozilla.org

새 버전 배포 후 다시 불러오기 — 지속적인 폴링에 의존하지 않고 SPA를 업데이트하고 다시 로드하기 위한 다양한 기술과 전략에 대해 설명합니다. CloudFront와 같은 콘텐츠 전송 네트워크(CDN)를 API 프록시로 활용하여 SPA를 무효화하고, 새 콘텐츠를 사용할 수 있을 때 사용자가 애플리케이션을 새로 고치라는 메시지를 구현하고, 캐시 버스팅 기술과 서비스 워커를 사용하는 등의 방법을 살펴봅니다.

#spa#pwa#cache
#361

취소 가능한 fetch 요청을 생성하는 createCancelableFetch 함수 구현 — signal 을 넘긴 fetch 는 abort() 가 불리면 AbortError 로 reject 된다.1

/**
 * 취소 가능한 fetch 요청
 *
 * @param url - 요청 URL
 * @param options - fetch 옵션
 * @returns {run, cancel} - run: 요청 실행 함수, cancel: 요청 취소 함수
 *
 * @example
 *
 * ```ts
 * const { run, cancel } = createCancelableFetch('/api/data')
 *
 * run()
 *   .then((data) => console.log('Fetched data:', data))
 *   .catch((err) => console.error('Error or canceled:', err))
 *
 * cancel()
 * ```
 */
function createCancelableFetch(url: string, options: RequestInit = {}) {
  const abortController = new AbortController()

  const run = async () => {
    const response = await fetch(url, {
      ...options,
      signal: abortController.signal,
    })

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }

    return response.json()
  }

  const cancel = () => abortController.abort()

  return {
    run,
    cancel,
  }
}
  • AbortController를 사용하여 요청을 중단할 수 있는 기능 제공
  • run 함수로 fetch 요청을 실행하고, cancel 함수로 요청을 취소할 수 있음
  • 요청 실패 시 오류를 처리하고 예외를 발생시킴

Footnotes

  1. Window: fetch() - MDN: “The request was aborted due to a call to the AbortController abort() method.” (AbortError 항목) ↩

#abort-controller
#360
📎

CSS 필드 크기 조정

developer.chrome.com

field-sizing를 사용하면 콘텐츠를 기반으로 크기 조절을 사용 설정하는 데 CSS 한 줄이 필요합니다. 이 콘텐츠 기반 크기 조절 스타일은 textarea 외에도 다른 요소에도 적용됩니다.

#field-sizing#input#textarea#select
#358

비동기 호출의 결과와 오류를 튜플 형식으로 반환

const [error, data] = await tuple(someAsyncFunction())
// 성공: [null, 결과값]
// 실패: [error] 또는 [new TupleItError(error)]

오류 처리 간소화 - 단일 체크로 오류 관리 가능 (Error 가 아닌 값으로 reject 돼도 TupleItError 로 감싸서 if (error) 하나로 갈린다)1

Footnotes

  1. tuple-it index.js: “Wrapping into TupleItError avoids the need to check if (error !== undefined) in favor of a simpler if (error)” ↩

#error#tuple
#357
📎

Event

developer.mozilla.org

Event 인터페이스는 DOM에서 발생하는 이벤트를 나타냅니다.

Footnotes

  1. React 로 보는 버블링·캡처링 입문. 이벤트는 문서에서 타깃까지 내려가고(캡처) 다시 올라온다(버블) — 바깥 요소 핸들러가 같이 불리는 이유. stopPropagation() 으로 올라가는 걸 끊고, target 대 currentTarget 을 구분하며, 캡처 단계에서 가로채려면 onClickCapture 나 addEventListener 의 세 번째 인자 true 를 쓴다. ↩

  2. <label> 을 클릭하면 버블링이 두 번 일어난다 — 라벨에서 조상까지 올라간 뒤, 브라우저가 라벨된 요소(for 로 이어진 <input> 등)를 대신 클릭해 거기서 다시 올라간다. 라벨 안에 input 을 중첩하면 라벨 핸들러가 두 번 불리고, 막으려면 stopPropagation 도 두 번 필요할 수 있다. ↩

  3. 이벤트 ↩

  4. monitorEvents를 활용한 디버깅 ↩

#event#bubbling#capturing
#355
💡

useStateObject는 React의 useState를 확장한 가벼운 래퍼로, 객체 상태 관리를 간편하게 할 수 있도록 설계되었습니다.

export type StateObject<T extends object> = T & {
  set: React.Dispatch<React.SetStateAction<T>>
  setItem: <K extends keyof T>(key: K, value: T[K]) => void
  merge: (newState: Partial<T>) => void
  reset: () => void
}

그렇다면 Map과 Set도 시도해보기 — 같은 Map 을 고쳐서 넘기면 Object.is 로 같은 값이라 React 가 갱신을 무시하므로, 매번 복사본을 만든다.1

function useStateMap<K, V>(init: Iterable<[K, V]> = []) {
  const [map, setMap] = useState(new Map<K, V>(init))

  const update = useCallback(
    (updater: (currentMap: Map<K, V>) => void) => {
      setMap((prev) => {
        const newMap = new Map(prev)
        updater(newMap)
        return newMap
      })
    },
    [setMap]
  )

  return {
    map,
    set: (key: K, value: V) => update((m) => m.set(key, value)),
    delete: (key: K) => update((m) => m.delete(key)),
    clear: () => setMap(new Map()),
    has: (key: K) => map.has(key),
    get: (key: K) => map.get(key),
    entries: () => Array.from(map.entries()),
    size: map.size,
  }
}
function useStateSet<T>(init: Iterable<T> = []) {
  const [set, setSet] = useState(new Set<T>(init))

  const update = useCallback(
    (updater: (currentSet: Set<T>) => void) => {
      setSet((prev) => {
        const newSet = new Set(prev)
        updater(newSet)
        return newSet
      })
    },
    [setSet]
  )

  return {
    set,
    add: (value: T) => update((s) => s.add(value)),
    delete: (value: T) => update((s) => s.delete(value)),
    has: (value: T) => set.has(value),
    clear: () => setSet(new Set()),
    entries: () => Array.from(set),
    size: set.size,
  }
}

Footnotes

  1. useState - React: “React will ignore your update if the next state is equal to the previous state, as determined by an Object.is comparison. This usually happens when you change an object or an array in state directly:” ↩

#react
#354

로컬·테스트 서버에서 크롬 인증서 경고를 강제로 통과한다.

언제: 이 연결은 비공개로 설정되지 않았습니다 화면에 NET::ERR_CERT_AUTHORITY_INVALID·NET::ERR_CERT_COMMON_NAME_INVALID 가 뜨고, 고급 → 안전하지 않음(계속)이 없거나 매번 누르기 번거로울 때.

절차

  1. 경고 화면 아무 곳이나 클릭한다 — 페이지에 포커스를 준다
  2. 입력창 없이 그대로 thisisunsafe 를 타이핑한다

입력창이 없는 게 정상이다. 경고 페이지의 keypress 핸들러가 한 글자씩 받아 BYPASS_SEQUENCE 와 대조하고, 다 맞으면 CMD_PROCEED 를 보낸다 — “안전하지 않음(계속)“을 누른 것과 같은 명령이다.

확인: 마지막 글자를 치는 순간 넘어간다. 안 넘어가면 포커스가 주소창에 있는 것이다 — 1번부터.

출처

#thisisunsafe
#352
33 중 12페이지
이전 페이지다음 페이지