들어가며이전 글에서 로직 계층을 내려서 단일 관심사를 챙기는 이야기를 했었죠. 여러 주제가 섞인 컴포넌트를 분리하고, 각 컴포넌트가 자기 로직만 가지도록 만드는 거였어요. 이번엔 반대 방향입니다. 분기를 상위로 올려서 단일 관심사를 챙기는 이야기를 해볼게요.컴포넌트는 "단일 책임이 아니라 단일 관심사"로 생각해야 합니다.여기서 단일 관심사란 곧 높은 응집도를 의미합니다. 하나의 컴포넌트가 하나의 맥락에 필요한 것들만 모아서 가지고 있는 상태죠. 근데 컴포넌트 안에서 강하게 결합된 로직들을 어떻게 분리할 수 있을까요?트리 구조의 컴포넌트상위에서 복잡도를 해소하기React 컴포넌트는 단방향 트리 구조입니다. 데이터와 제어 흐름이 위에서 아래로만 흐르죠. // 여기서 결정하면 /..

들어가며이전 글에서 훅 추상화를 아토믹하게 쪼개는 이야기를 했었는데요. 몬스터 훅 대신 URL 필터 동기화, 날짜 범위 처리 같은 로직을 각각 분리해서 조합해 쓰는 방식이었죠. 덕분에 각 로직이 한 가지 일만 해서 파악하기 쉬웠어요.근데 막상 컴포넌트를 보면 좀 달랐어요. 예를 들어 상품 상세 페이지를 만든다고 해볼게요function ProductPage({ productId }) { // 상품 정보 관련 const { data: product } = useProductQuery(productId); // 장바구니 관련 const [quantity, setQuantity] = useState(1); const { mutate: addToCart } = useAddToCart(); // 리뷰 관..

토스 팀에서 공개한 Frontend Fundamentals라는 코드 작성 지침서를 기반해 이걸 기반으로 토스 채용 과제를 다같이 풀어보는 모의고사를 진행했다.각자 과제를 풀고 PR을 올려 서로 코드 리뷰를 했고, GitHub Discussion에서 설계 철학을 토론했다. 그리고 유튜브 라이브 방송을 통해 토스 리드 개발자분들의 관점도 들을 수 있었는데, 질의응답 시간이 특히 유익했다.그냥 넘기기엔 아까운 인사이트들이 많아서 정리해본다.Suspense에 대한 관점 전환지금까지 나는 Suspense를 "로딩 fallback UI 보여주는 용도"로만 생각했다. 필요한 곳에만 선택적으로 쓰는 것처럼.근데 이번에 완전히 관점이 바뀌었다:Suspense는 성공 케이스만 신경쓸 수 있게 해주는 깔대기다.n개의 비동기..

AI유전변이 해석 서비스인 GEBRA는 특정 페이지에서 클라이언트 사이드에서 샘플별 복잡한 유전체 데이터 정보를 기반으로 보여주는 페이지가 있어요.여기서 유전 변이 종류별로 연관된 변이들을 효율적으로 태깅하는 작업을 하게 되었는데, 쉬운 예시로 바꾸어 설명해볼게요.시작: 성능 개선하기프로젝트에서 여러 종류의 데이터를 특정 조건으로 서로 연결해야 하는 상황이 있었어요.예를 들면 이런 거죠:제품(Product), 리뷰(Review), 배송(Delivery) 데이터가 있고이들을 "같은 상품 카테고리 + 같은 지역" 기준으로 묶어야 함// 예시 코드 - Beforefunction matchRelatedData(products, reviews, deliveries) { // TODO: 성능 개선 필요 - 중첩 ..

들어가며리포트 에디터 다국어 기능 비즈니스 요구사항이 좀 애매했습니다.지금: 한국 사용자만 한국어/영어 선택 가능 (백엔드 API 개발 중)1달 뒤: 불어 추가 예정이럴 때 하드코딩을 하면...// 한국 사용자만 언어 설정 보여주기const isKorean = user.country === "KR";// 기본 언어 결정const language = user?.country === "KR" ? "kr" : "en";문제는 이런 임시 하드코딩이 15개 파일에 퍼진다는 것입니다.1달 뒤 불어 추가할 때 TODO 주석, JIRA 백로그만 믿고 찾아다니다가 하나라도 놓치면 버그가.... 그래서 생각했습니다.불어 지원까지 시간 많이 남았는데, TODO주석 + JIRA백로그 + 하드코딩을 순수 함수로 빼서 관리포인트..