페이먼츠 미션 PR 아카이브
크루의 PR과 페어 활동에서 자주 나온 고민, 리뷰어 피드백, React 공식문서가 어떤 기준을 제시하는지를 한 자리에 정리했습니다.
페이먼츠는 React 미션입니다. 그래서 이 아카이브는 로또·영화 리뷰와 구성이 조금 다릅니다 — 각 카드에 공식문서 단서가 함께 들어갑니다. 공식문서로 기준을 잡고, 선배 PR로 실제 선택지를 비교할 수 있게 했습니다.
학습 로드맵 — 이 아카이브를 어떻게 활용하면 좋을까
이 아카이브는 모든 카드를 처음부터 끝까지 읽기 위한 책이 아닙니다. 자기 페어가 지금 이 자리에서 만난 고민을 함께 풀어가는 도구입니다.
다음 5단계 흐름을 권장합니다.
1단계 — 우리의 페인포인트 질문을 뽑아본다
8기 페어 고민 → 8장 카드 매핑에서 다른 페어들이 1단계에서 어떤 자리에서 막혔는지를 봅니다. 그중 우리 페어가 지금 가장 걸리는 자리를 하나만 골라봅니다.
어제의 고민과 오늘 선택한 주제는 다를 수 있습니다. 그래도 괜찮습니다 — 우선 하나를 고르세요. 여러 카드를 동시에 펼치면 아무 것도 깊이 못 봅니다.
2단계 — AS-IS 코드를 먼저 본다 (생각이 먼저, input은 다음)
선택한 카드의 AS-IS 코드를 읽습니다. 우리 고민과 맞닿은 코드라면, 이 코드의 장점·단점·개선 포인트를 페어와 이야기 나눠봅니다.
학습이 잘 일어나려면 내 머릿속에서 생각이 먼저 일어나고, 그 다음에 input이 들어가야 연결이 훨씬 잘 됩니다. 공식문서나 선배 코드를 먼저 읽지 마세요. 일단 우리 페어가 어떻게 생각하고 있는지를 입으로 한 번 꺼내보세요.
자기 코드 중 고민되는 한 지점을 보는 것도 같은 효과를 냅니다. AS-IS 코드는 생각을 끄집어내기 위한 자극으로 사용하세요.
3단계 — 관련된 공식문서를 가장 먼저 읽는다
각 카드의 공식문서 단서 섹션을 펼칩니다. 이건 가장 중요한 원천 소스입니다 — 라이브러리를 만든 사람들이 어떤 기준으로 사고하는지를 직접 들을 수 있는 자리.
영문 원문이 부담스러우면 공식문서 단서 — 한글 번역에 옮겨둔 페이지를 함께 읽거나, LLM에게 번역해달라고 하면서 함께 읽기도 좋습니다. 번역에만 의지하지 말고 영문 원문도 한 번씩 본 뒤 한글로 다시 정리하는 흐름이 가장 강합니다.
공식문서에서 중요한 힌트나 의사결정의 근거가 될 수 있는 한 문장을 찾아보세요. 그 한 문장을 페어와 함께 소리 내어 말해보면 더 좋습니다.
4단계 — 선배 코드에서 비슷한 고민을 한 대화와 코드 예시를 찾는다
각 카드의 탐색 미션 섹션을 펼칩니다. 결이 다른 선배 PR 2~3개가 큐레이션되어 있습니다. 코드만 보는 게 아니라 PR 본문과 리뷰어와의 대화를 함께 읽으세요.
무작정 읽지 마세요. 우리 고민의 개선 방향과 근거가 될 만한 단서를 찾는 것이 핵심입니다. “이 사람도 비슷한 자리에서 막혔구나, 그래서 어떻게 풀었지?”라는 시선으로 보세요.
자기 가설에 가까운 PR을 추가로 찾고 싶다면 195개 PR 전체 인덱스 부록에서 직접 펼쳐볼 수 있습니다.
5단계 — 신뢰할 만한 외부 글을 추가로 읽는다
각 카드의 추가 읽을거리 섹션에는 댄 아브라모브(Dan Abramov) 와 Kent C. Dodds의 블로그 글이 큐레이션되어 있습니다. 이 두 사람의 글은 공식문서와 함께 읽을 만한 보조 자료로, 왜 그렇게 사고하는가를 더 깊이 다룹니다.
원문이 길고 영어라 부담스러우면 공식문서 한글 번역 모음에 정리한 요약 페이지를 함께 보세요.
댄 아브라모브와 Kent C. Dodds는 누구인가
이 아카이브에서 자주 인용되는 두 사람을 짧게 소개합니다.
Dan Abramov — React 코어 팀 출신, Redux 공동 제작자
- React 핵심 개발자로 오래 일했고, React 공식문서(react.dev)의 새 문서 작업에 참여한 사람 중 한 명입니다.
- Redux의 공동 제작자이며, Create React App을 만든 팀의 일원이었습니다.
- 블로그 overreacted.io는 왜 React가 이런 방식으로 사고하는가를 깊이 있게 풀어내는 글로 유명합니다 — Why Do React Hooks Rely on Call Order?, A Complete Guide to useEffect, Writing Resilient Components 등.
- 페이먼츠 1단계와 만나는 글: Writing Resilient Components (Q1·Q4), Before You memo() (Q5).
📌 왜 신뢰할 만한가: React 핵심 개발에 참여한 사람의 시선으로, 같은 라이브러리의 설계 의도를 들을 수 있기 때문입니다. 공식문서가 결론을 말한다면, 댄의 글은 그 결론에 어떻게 도달했는지를 풀어줍니다.
Kent C. Dodds — Testing Library 제작자, 교육자
- React Testing Library의 제작자이고, EpicReact.dev·TestingJavaScript.com 같은 React 교육 자료를 운영합니다.
- 블로그 글 수백 편을 발행하며 실무에서 자주 만나는 자리에 대한 결정 가이드를 제공합니다 — AHA Programming, Don’t Sync State. Derive It!, Stop using isLoading booleans 등.
- 페이먼츠 1단계와 만나는 글: Application State Management with React (Q1), AHA Programming (Q1·Q4), Don’t Sync State. Derive It! (Q2·Q3·Q5·Q6·Q8), Stop using isLoading booleans (Q2), useState lazy initialization and function updates (Q3), When to break up a component into multiple components (Q4).
📌 왜 신뢰할 만한가: 광범위한 교육 경험에서 정제된 언제·어떻게·왜를 다룹니다. 공식문서가 기준을 제시한다면, 켄트의 글은 그 기준을 실무 결정으로 연결해줍니다.
단계 선택
1단계 — FAQ 카드
8기 크루가 1단계 페어 진행 중에 적어 보낸 고민을 8장의 카드로 정리했습니다.
- state를 어디에 두고 어떤 구조로 관리할까 — 가장 많은 고민
- input 컴포넌트와 검증 책임은 어떻게 나눌까
- 도메인 규칙(카드 브랜드 식별)은 어디에 둘까
- input 제약·TypeScript narrowing 같은 도구 자체와의 만남
각 카드 = 크루의 질문 + AS-IS 코드 + 공식문서 단서 + 탐색 미션(선배 PR) + 추가 읽을거리(댄·켄트).
이 아카이브는 완성된 책이 아닙니다. 학습이 깊어지면 새 카드가 생기고, 매핑이 다듬어지고, 번역이 보강됩니다. 우리 페어의 새 페인포인트가 12쌍 페어 안에 없는 새 자리라면 코치에게 알려주세요 — 다음 회차의 카드가 됩니다.


