diff --git a/book/300_architecture/313_React_구조_원칙.md b/book/300_architecture/313_React_구조_원칙.md index 4b8bea2..23460fd 100644 --- a/book/300_architecture/313_React_구조_원칙.md +++ b/book/300_architecture/313_React_구조_원칙.md @@ -1,7 +1,7 @@ # React 프론트엔드 구조 원칙 **작성일**: 2025-11-29 -**수정일**: 2025-11-29 +**수정일**: 2025-12-01 (환경별 코드 분리, 에러 처리, 데이터 검증 원칙 추가) **참고**: 311_FastAPI_구조_원칙.md, 312_문서_작성_원칙.md ## 1. 컴포넌트 설계 원칙 @@ -112,7 +112,31 @@ src/ - ❌ 순환 import - ❌ Prop Drilling: 3단계 이상 전달 시 상태 관리 도입 -## 8. 체크리스트 +## 8. 환경별 코드 분리 원칙 + +**핵심 원칙**: 개발/프로덕션 환경 구분 필수 + +- 개발용 기능은 `process.env.NODE_ENV === "development"` 조건으로 숨김 +- 프로덕션 배포 전 개발 기능 노출 여부 확인 +- 환경별 다른 동작이 필요한 경우 조건부 렌더링/실행 + +## 9. 에러 처리 일관성 원칙 + +**핵심 원칙**: 환경별 일관된 에러 로깅 + +- `console.error` 대신 환경별 로깅 유틸리티 사용 +- 프로덕션 환경에서도 에러 로그 기록 +- 로깅 유틸리티는 개발/프로덕션 환경에 따라 적절히 처리 + +## 10. 데이터 검증 원칙 + +**핵심 원칙**: 백엔드 응답 구조 검증 및 폴백 처리 + +- 백엔드 응답 구조 검증 (빈 배열, 누락 필드) +- 데이터 누락 시 사용자에게 명확한 안내 메시지 제공 +- 예상치 못한 데이터 구조에 대한 폴백 처리 + +## 11. 체크리스트 코드 작성 전/후 확인: - [ ] 각 컴포넌트가 단일 책임을 수행하는가? @@ -124,7 +148,7 @@ src/ - [ ] TypeScript 타입이 명확히 정의되었는가? - [ ] useEffect 의존성이 정확한가? -## 9. 참고 +## 12. 참고 - 상위 원칙: 이 문서는 일반적인 React 프로젝트 원칙을 다룹니다. - 프로젝트별 특화 규칙: 각 프로젝트의 README나 문서에 추가 규칙 명시