배경회원가입 플로우에 MFA 설정 단계를 추가하게 됐어요. 기존 회원가입은 여러 스텝을 거치는 구조였습니다. 이메일 입력, 인증 코드 확인, 프로필 입력, … 클라이언트가 "지금 몇 번째 스텝이냐"를 useState로 들고 있고, 화면이 순차적으로 이어지는, 우리가 흔히 "퍼널" 이라고 부르는 그런 구조요. 여기에 MFA 설정 단계를 끼워 넣어야 했어요. TOTP를 설정하고, recovery code를 확인시키고, 완료 처리까지요. 이것도 스텝이 순차적으로 이어지니까, 기존 회원가입 퍼널에 스텝 몇 개 추가하듯이 자연스럽게 MfaSetupFlow라는 페이지 안의 상태 기계로 묶었어요.type MfaSetupStep = | { step: "totpSetup" } | { step: "emailSetup"..

배경genomic variant를 분석하는 플랫폼을 만들고 있었어요. variant에는 여러 종류가 있고, 각 종류마다 선택 상태를 key로 관리해요.UPD변이를 예로 들면 key 구조가 이래요.region key: subjectId+posdisease key: subjectId+pos::phenoIddisease key가 region key를 prefix로 포함하는 구조예요. 이 덕분에 "이 variant가 이 UPD에 속하는가"를 startsWith 하나로 판별할 수 있어요.const isChecked = selected.some(variant => updList.some(upd => variant.key.startsWith(regionKey(upd)) ));동작은 해요. 근데 코드를 볼 ..

1회차 후기에 이어서 2회차 모의고사 후기를 쓴다.1회차에서도 강조됐던 내용인데, 예측 가능한 코드를 짜야한다는주제가 이번에도 반복적으로 나왔다사람 뇌는 코드를 "이해"하지 않는다사람 뇌가 코드를 읽는 방식은 생각보다 단순하다. 한 줄 한 줄 의미를 분석하는 게 아니라, 함수명이나 구조를 보고 "이렇게 동작하겠지?"를 먼저 예측한다. 그 예측이 맞으면 넘어가고, 틀리면 그때서야 내부를 파고든다.문제는 예측이 틀렸을 때다. 인지 강도가 급격하게 올라간다. 결국 가독성이라는 건 코드가 얼마나 "뻔하게" 읽히느냐의 문제다.호출처의 관심사를 모르게 추상화한다이번에 가장 신선했던 관점이다.DatePicker 컴포넌트를 하나 만든다고 생각해보자. 이 컴포넌트에 date와 setDate를 prop으로 내려보내면 어떻..

배경vscode의 탭 바처럼 동작하는 대시보드를 만들고 있었어요. 파일을 열면 탭이 생기고, 클릭하면 전환되고, X로 닫는 그 구조요.대시보드에는 몇 가지 종류의 화면이 있어요.home — 홈 화면. 항상 존재하는 기본 탭이에요.new — 새 인사이트를 작성하는 페이지. 사이드바에서 "새 페이지 만들기"를 누르면 탭이 열립니다.insight-{id} — 작성이 완료된 개별 인사이트 페이지. new에서 글을 저장하면 insight-42 같은 탭으로 교체돼요.tag-{id} — 특정 태그에 속한 인사이트 목록.trash — 휴지통.이 탭 상태를 어디에 저장할까요? React state에 넣으면 간단하지만, 새로고침하면 날아가요. 그래서 공유 기능도 넣을 겸 URL query string을 single sou..

들어가며지난 글에서 Branded Type으로 유틸 함수 사용을 강제하는 방법을 다뤘어요. getSnvAnchorId, getCnvAnchorId 같은 개별 함수들을 만들어서 각 variant type마다 올바른 ID 포맷을 보장했죠. 근데 variant type이 6개가 넘어가면서 문제가 생기기 시작했어요. 함수가 너무 많아져서 어떤 게 있는지 찾기가 힘들었어요. 자동완성으로 get만 쳐도 수십 개가 뜨는데 그 중에서 anchor id 관련 함수만 골라내는 것도 일이었죠. 마침 예전에 사용하던 쿼리 키 팩토리 패턴이 떠올랐어요. 쿼리 키처럼 일괄 invalidate할 일은 없지만, 관련 함수를 하나의 객체로 묶는다는 아이디어 자체가 딱 맞았어요.// 기존 - 흩어진 개별 함수들export const g..