200줄짜리 스토어

목표

Redux·Zustand·Jotai 가 공통으로 푸는 문제를 직접 풀어 봅니다.
파일 하나, 200줄이 안 됩니다.

만들 것

/root/work/state/store.mjs 에서 createStore 를 export 합니다.

export function createStore(initial) {  return { getState, dispatch, subscribe, select }}

| 함수 | 계약 |
|---|---|
| getState() | 현재 상태를 즉시 돌려준다 |
| dispatch(fn) | fn(현재) 의 반환값이 새 상태. 원본을 고치지 않는다 |
| subscribe(l) | 해제 함수를 반환한다 |
| select(sel) | sel(현재) 를 돌려주되, 상태가 그대로면 다시 계산하지 않는다 |

채점 방식

채점기가 여러분의 store.mjs 를 import 해서 계약을 하나씩 확인합니다.
브라우저도 프레임워크도 쓰지 않습니다.

node --version        # v22node store.mjs        # 문법 확인용 (아무것도 출력 안 해도 됩니다)

단계

1. getState · dispatch
2. 제자리 수정 금지
3. subscribe → 해제 함수
4. 같은 참조면 알리지 않기
5. select — 파생은 계산
6. 메모이제이션
7. 마이크로태스크 배치
8. 순회 중 해제 안전성
9. 정리 → 09-notes.md

참고

• npm install 은 안 됩니다. 네트워크가 없고, 필요하지도 않습니다.
• 상태 모양은 자유입니다. 채점기는 { n: 0, items: [] } 같은 평범한

객체를 넣고 계약만 확인합니다.

단계 9개

1. 스토어의 뼈대
2. 제자리 수정을 막는다
3. 구독과 해제
4. 안 바뀌었으면 알리지 않는다
5. 파생 상태는 계산한다
6. 같은 입력이면 다시 계산하지 않는다
7. 한 틱에 세 번 바꿔도 렌더는 한 번
8. 순회 중에 해제해도 안전하게
9. 라이브러리가 왜 그렇게 생겼는지