Algorithm Cinema

사소하지만 잡기 어려운 키 불일치로 props 1단계 미적용 버그

증상 (Symptom)onPrev/onNext 눌렀을 때 (화살표) 이전, 다음 요일로 넘어갔어야했다.그런데 UI(식단 내용) 갱신 X즉, 부모에서 idx는 바뀌지만 자식이 받는 첫 props가 “유효 데이터”가 아님정리하면 API에서 데이터를 받아오면 나의 컴포넌트는 이런 순서로 동작했다. useMenuData()가 처음 렌더될 때는→ idx도 초깃값(null 또는 0)아직 keys와 todayKey가 빈 상태([], '')React가 렌더를 수행 →빈 배열([]) 반환 → 자식 컴포넌트는 “메뉴 없음”만 보임.getByDate(dateKey)는 아직 유효한 키를 못 찾음 그 후 react-query가 API 응답을 받고 keys 갱신 →이때 제대로 “한 번만” todayKey에 맞춰야 정상 작동.us..

MJS 식단 페이지 리팩토링 기획안

1. 기획 배경 — “하나의 페이지에 모든 걸 넣은 게 문제였다” 처음 식단 페이지를 만들 때는 MVP 수준으로 단일 컴포넌트에모든 로직(데이터 fetch, 상태, 날짜 이동, UI)을 넣어 빠르게 완성했어요. 하지만 그 구조는 다음과 같은 문제를 드러냈습니다. 모바일에서도 데스크톱용 주간 테이블이 그대로 표시되어 가독성이 나쁨브라우저 크기에 따라 한 컴포넌트 안에서 조건문이 난무함React Query / 상태 / 날짜 계산 로직이 뒤섞여 유지보수가 어려움간단한 변경도 “하루 걸리는 구조”가 됨 이 시점에서 UI 관심사와 데이터 로직을 분리하고, 기기별 UX를 맞추자는 기획이 시작됐습니다. 2. 리팩터링 방향성 — “역할 단위로 쪼갠다”우리는 React의 단일 책임 원칙(Single Responsib..