cwkPippa-style Frontend 코드 투어

"에디터에서 파일들 열어. 패턴이 거기 그대로 있어. 야생에서 알아보는 게 테스트."

레시피로서의 route

이 투어가 어떤 Pippa-style TypeScript frontend 든 — 너의 자기 프로젝트, open-source 앱, 또는 어떤 well-typed React codebase — 에 쓰는 레시피야. 5 파일, 순서대로. 각각 한 layer 대표; 함께 전체 모양 cover.

투어 route

1. src/types/index.ts — 여기서 시작. 모든 공유 타입이 이 파일에 살아: identity union (`BrainName` 같은), record 모양 (`Conversation`, `Message` 같은), event 용 discriminated union. 이 파일 읽는 게 시스템이 뭔지 읽는 거. Enum-by-convention 용 literal-union 패턴, streaming event 용 discriminated union, record interface 의 optional 필드 주목.

2. src/lib/api.ts — API client. `fetchConversations()` 같은 함수가 어떻게 return 타입을 `Promise` 로 선언하는지 봐. `../types` 의 type-only import 주목. 에러가 어떻게 타입 붙는지 (`catch` 의 `unknown`, `instanceof Error` 로 narrow) 주목.

3. src/hooks/useChat.ts — 중앙 chat hook. SSE streaming 이 여기서 발생. Reducer state 모양 (discriminated union), action 타입 (또 다른 discriminated union), `useReducer` 의 state 와 dispatch 가 어떻게 통해 타입 붙는지 봐.

4. src/App.tsx — top-level component. 여기서 state 들어 올려짐; child component 가 typed props 받음. Component tree 가 chat, sidebar, council, admin, settings 영역 연결.

5. src/components/chat/MessageList.tsx (또는 어떤 leaf component 든) — Props 가 어떻게 inline 타입 붙고, children 이 어떻게 render 되고, callback 이 어떻게 타입 붙는지 주목.

찾을 거

읽으면서 식별:

보는 모든 literal-union (status 필드, enum-shaped 식별자).
모든 discriminated union (event, action, result).
모든 `import type`.
`if`, `switch`, type predicate 통해 narrowing 발생하는 모든 자리.
Generic 함수 signature 가 타입 보존하는 모든 자리.
모든 `Promise` 와 T 가 뭔지.

읽기가 테스트. 실제 Pippa-style frontend 읽고 각 타입이 뭐 하는지 설명 가능하면 Quest 가 작동. 뭔가 opaque 하게 느끼면 그게 다시 봐야 할 lesson.

Code

체크리스트로서의 투어 route·text

# 투어, 개념적으로 — 5 파일, 각각 한 layer.

src/types/index.ts         # 공유 타입 — 시스템이 뭔지
src/lib/api.ts             # API client — Promise<T> + import type
src/hooks/useChat.ts       # 중앙 state — reducer + discriminated union
src/App.tsx                # top-level — state lifting + typed props
src/components/chat/...    # leaf — inline Props + event handler

# 순서로 walk. 에디터에서 타입 hover. Import 추적.
# 이 Quest 의 모든 TypeScript 패턴이 5개 어딘가에 나타나.

Exercise

Access 가능한 실제 TypeScript frontend 골라 — 너의 자기 프로젝트나 어떤 well-typed React 앱이든. 위 5-파일 레시피 walk. 각 파일에 대해 파일이 뭐 하는지 한 문장 요약 (너의 말로, 주석 복사 아냐). 그다음 각 파일에 나타나는 이 Quest 의 TypeScript 패턴 3개 식별.

Hint

파일에 패턴 3개 못 찾으면 — 충분히 신중히 안 읽고 있어 — 대부분 modern TS frontend 가 12개 써. 봐: type-only import, literal-union enum, discriminated union, narrowing 체크, generic 함수, Promise, useState 타입 붙은 초기 값, custom hook tuple.

cwkPippa-style Frontend 코드 투어

레시피로서의 route

투어 route

찾을 거

Code

External links

Exercise

Progress

댓글 0