💻 앱 실행 화면
vercel 배포 링크 (모바일 최적화 X) :
https://rocksicssorspaper.vercel.app
React.js,CSS,HTML 을 학습하기 위하여 만든 간단한 앱
가위바위보 버튼을 누르면 내가 낸 것과 랜덤 로직을 이용한 컴퓨터가 낸 것을
기반으로 승패를 화면에 보여준다.
누적된 승패 결과는 왼쪽 상단에 간단하게 표시하도록 하였으며
우측 상단에 Reset 버튼을 눌러 해당 결과를 초기화 할 수 있다.
코드를 간략하게 확인해보자면
버튼을 누름으로써 간단한 로직을 이용해 승패를 결정하며
승패 결과를 useState 상태변화 함수를 이용하여 상태를
비동기적으로 업데이트하고 컴포넌트가 리렌더링 되어지면서
그 결과물을 즉각적으로 반영하기 위하여
useEffect() 를 사용함으로써 승패 결과가 UI에 즉시 반영되어지게끔 구현하였다.
❌ 발견한 버그 및 수정
승패 결과가 나타나기전까지는 저 Result 컴포넌트 부분은 빈 여백으로 되어있었다.
하지만 가위바위보 버튼이 눌리면서 컴포넌트가 렌더링 되어짐과 동시에
버튼 UI가 밑으로 살짝 밀리는 현상이 있었다.
gpt 검색 결과로 css class이름을 삼항연산자로 해당 props가 있는지 유무를 확인하고
class 이름을 별도로 다뤄서 css 스타일로 해결해보려고 시도하였었다.
하지만 효과가 없었다.
최종적으로 CSS로 min-height 효과를 줘서 최소 높이를 설정하였더니 렌더링 전과 후로
고정된 위치에 정상적으로 렌더링 되어짐을 확인했다.
📖 프로젝트를 하며 느낀점
개발자들이 왜 리액트에 열광하는지 리액트의 강력한 기능인
코드 재사용의 용이한 컴포넌트 단위 기능 구현,
자바스크립트와 HTML을 한번에 사용할 수 있는 강력한 JSX 문법
반응형 앱 구현을 위해 필요한 상태변화 함수등의 리액트 훅 등을
스스로 간단한 프로젝트에 녹아내며 학습할 수 있었고
화려하진 않지만 기본적인 UI 구현시 필요한 CSS 코드 작성법 등을 스스로 찾아내며
학습할 수 있는 기회가 되었다.
🥲 아쉬웠던 점
강의를 통해 배운 내용에다 gpt 조언 기반 내용으로만 만들다보니
입맛대로 CSS를 조금 손보았지만 모바일 환경에서 실행하니 아주 난장판이다.
CSS 학습을 좀더 하여 모바일에 어떻게 하면 최적화된 사이징을 할지 생각을 해보면서
다음 미니 프로젝트를 진행하면 좋을 것 같다.
