React 최종 프로젝트 완성 기준

요구사항 축소

반드시 필요한 사용자 흐름 2~3개와 이번에 하지 않을 항목을 명확히 적는다.

작게 닫아야 품질을 볼 시간이 생긴다

홈, 목록, 상세, 설정처럼 URL로 복원되어야 하는 화면을 정한다.

뒤로가기와 새로고침을 함께 본다

입력 상태, 서버 데이터, 전역 설정, URL query를 각각 어디에 둘지 결정한다.

한 store에 모두 넣지 않는다

loading, empty, error, unauthorized, retry 상태를 실제 UI로 구현한다.

성공 화면만 만들면 제품이 아니다

production build로 실행해 env, 에셋 경로, deep link, 새로고침을 확인한다.

dev server 통과는 최종 통과가 아니다

흐름

사용자 흐름 한 사용자가 시작부터 목표 달성까지 막힘 없이 갈 수 있어야 한다.

페이지 수보다 흐름 완성이 중요하다

Data

불러오기와 저장 성공, 실패, 빈 결과, 재시도 상태를 모두 다룬다.

mock과 실제 API 차이를 본다

State

상태 위치 로컬, URL, 서버 캐시, 전역 상태의 책임이 분리되어야 한다.

새로고침 후 복원 기준을 정한다

Deploy

운영 실행 빌드 산출물이 정적 서버나 배포 환경에서 그대로 동작해야 한다.

환경값 노출을 검색한다

핵심 흐름 주요 사용자 흐름을 새 브라우저 세션에서 처음부터 끝까지 실행한다.

실패 상태 네트워크 실패와 빈 데이터 상태가 실제 화면으로 처리되는지 본다.

배포 확인 production build에서 딥링크 새로고침과 asset 404가 없는지 확인한다.