[URECA] Day51 React 가위바위보 프로젝트

📃 주요 코드 설명

 

---

🐛 실습 중 겪은 문제

 

• Objects are not valid as a React child 에러 발생
  • result 값이 string이 아니라 정규표현식(RegExp)처럼 객체로 들어가 있어서 화면에 출력 불가능한 값이 전달됨
  • 콘솔 에러 메시지: found: [object RegExp]
• 카드 컴포넌트가 세로로 나열됨
  • 카드 2개가 <section> 안에서 기본 block 요소로 세로 쌓임
  • 버튼을 카드 사이에 넣는 구조도 구현 어려웠음
• 텍스트들이 왼쪽 정렬되어 UI가 어색함
  • 결과 텍스트, 설명 텍스트, 버튼 아래 텍스트 등 자잘한 글자들이 가운데 정렬되지 않음

 

---

⚙️ 해결과정

 

• result 타입 오류 디버깅
  • determineWinner() 함수가 '이겼다', '졌다' 같은 문자열만 반환하도록 수정
  • JSX에서 result 출력할 때도 typeof result === 'string' 체크하거나 result || ''로 예외 처리
• 카드 가로 정렬 + 가운데 버튼 배치
  • <Card /> 컴포넌트 2개를 감싸는 <div className={cardRow}> 생성
  • 가운데에 <div className={buttonGroup}>를 추가하여 버튼과 결과 표시
  • CSS에 display: flex; justify-content: center; gap: 2rem; 설정으로 가로 배치 완료
• 텍스트 가운데 정렬 처리
  • 결과 텍스트: .resultText { text-align: center; }
  • 버튼 그룹 및 설명 텍스트: .buttonGroup과 .description에 align-items: center, text-align: center 적용

이번 프로젝트는 `React`, `CSS Modules`, `깃허브 페이지`까지 한 방에 정리한 실습이었다.ㅅㅇ님께서 깃허브 페이지 연결 도와주셔서 더 빨리 마무리할 수 있었습니다 🙏 완전 땡큐베리머취!