docs: React 구조 원칙에 환경별 코드 분리, 에러 처리, 데이터 검증 원칙 추가

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나 문서에 추가 규칙 명시