📎

State (computer science)

en.wikipedia.org

In information technology and computer science, a system is described as stateful if it is designed to remember preceding events or user interactions. The remembered information is called the state of the system.

상태가 없는 시스템은 출력이 지금 입력만으로 정해져 같은 입력이면 늘 같은 출력이 나온다. 상태가 있는 시스템은 지난 입력에서 얻은 정보를 기억해 두고, 출력이 지금 입력과 그 기억으로 정해진다. 처리할 때마다 지금 상태를 읽고 다음 상태를 써 넣는다. 이 기억이 상태다. 입력이 하나씩 들어올 때마다 상태가 s0 에서 s1 으로 바뀌고, 어떤 입력은 상태를 바꾸지 않으며, 다음 입력에서 s2 가 된다. 시스템이 과거에 대해 아는 것은 지금 상태가 전부다. 가능한 상태를 모두 모은 것이 상태 공간이다. 0 또는 1 을 담는 기억 칸이 N 개면 상태는 최대 2 의 N 제곱 가지다 — 칸이 둘이면 00, 01, 10, 11 네 가지.

#state
#474

verbatimModuleSyntax 를 켜면 type 없는 import 는 출력에 그대로 남는다 — 타입만 가져올 땐 import type 으로 표시해야 한다(안 하면 TS1484).1

import type { A } from 'a'

Footnotes

  1. 아래 TSConfig Reference 의 verbatimModuleSyntax: “any imports or exports without a type modifier are left around. Anything that uses the type modifier is dropped entirely.” ↩

#typescript#verbatim-module-syntax
#462
📎

File

developer.mozilla.org
const emptyCsvFile = new File([''], 'default.csv', { type: 'text/csv' })
const emptyPngFile = new File([''], 'default.png', { type: 'image/png' })

formData.append('product_coupons', emptyCsvFile)
formData.append('product_imgs', emptyPngFile)

console.assert(emptyCsvFile.size === 0)

빈 파일을 FormData에 첨부하여 전송하는 방법 — File 은 Blob 이라 append 가 파일 필드로 받고, 파일명은 File 의 이름이 그대로 간다.1

  • File 객체를 사용하여 빈 파일을 생성할 수 있다.
  • 파일의 MIME 타입을 지정하여 타입에 맞는 빈 파일을 만들 수 있다.
  • 생성된 빈 파일을 FormData 객체에 추가하여 전송할 수 있다.

이는 서버에 빈 형태의 파일을 전송할 때 유용하며, API 테스트 및 디폴트 값 설정에 활용될 수 있다.

Footnotes

  1. FormData: append() - MDN: “This can be a string or Blob (including subclasses such as File).” / “The default filename for File objects is the file’s filename.” ↩

#form-data#File
#461
📎

Web Authentication API

developer.mozilla.org
#web-authn
#457
📎

Web Audio API

developer.mozilla.org
#audio
#455
📎

스레드 (Thread)

developer.mozilla.org
#thread
#454
📎

Chrome DevTools Protocol

chromedevtools.github.io

The Chrome DevTools Protocol (CDP) is a JSON-based protocol that connects debug and automation targets (such as browsing contexts and workers) with trusted debug and automation clients. It allows tools to instrument, inspect, debug, and profile Chromium, Chrome, and other Blink-based browsers.

Footnotes

  1. DevTools 화면 자체(TypeScript·CSS 웹앱). 이 프런트엔드가 CDP 로 대상과 대화하므로, 떼어다 다른 곳에 붙이면 자기만의 디버거가 된다 — 아래 chii 가 그렇게 쓴다. ↩

  2. Node 에서 CDP 를 부르는 클라이언트. 명령·이벤트를 JS API 로 감싸서, 예컨대 페이지를 열고 나가는 요청을 전부 덤프하는 걸 몇 줄로 짠다. ↩

  3. DevTools·CDP 생태계 링크 모음 — 학습 자료, 프로토콜 클라이언트, DevTools 프런트엔드를 다른 플랫폼에 쓰는 법, 확장. 마지막 커밋이 2021-01 이라 최신 도구는 빠져 있다. ↩

  4. 모바일 웹 페이지 안에 띄우는 가벼운 콘솔 패널(로그·네트워크·요소·스토리지). CDP 없이 페이지 안에서 돈다 — WeChat 미니프로그램의 공식 디버깅 도구. ↩

  5. weinre 같은 원격 디버거인데 화면을 최신 devtools-frontend 로 바꿨다. 디버깅할 페이지에 스크립트를 넣고, 다른 기기의 브라우저에서 DevTools 로 붙는다. ↩

#devtools
#452
📎

Service Worker API

developer.mozilla.org
#service-worker
#451
#HMR
#443
📎

Generator

developer.mozilla.org

The Generator object is returned by a generator function and it conforms to both the iterable protocol and the iterator protocol.

소비자가 next() 를 부를 때만 generator 가 다음 yield 까지 돌고 멈춘다 — 다음 next() 전에는 한 줄도 계산하지 않고, next(v) 의 v 는 멈춰 있던 yield 식의 값이 된다. break 하면 return() 이 finally 를 돌리고 닫힌다. 이 리듬에서 셋이 나온다: 당긴 만큼만 계산하니 무한 수열도 된다, async generator 는 앞 페이지를 다 쓴 뒤에야 다음 페이지를 요청한다, for await 에서 끊어도 finally 의 정리가 실행된다.

Footnotes

  1. Streaming 작업 시 비동기처리 방법을 알려주고 있는데…경험이 없어서 일단 메모. ↩

#generator#javascript
#441
33 중 9페이지
이전 페이지다음 페이지