다른 색깔 찾기 게임

넘블 프로젝트 클론하기 챌린지

🕹️ 게임하러 가기

🔥 개발 후기글

기간

• 챌린지 기간: 2022년 2월 4일 (금) - 2022년 2월 13일 (일)
• 구현 기간: 약 4일

규칙

• 요구사항 설명 링크
• 이 챌린지에서 우리는 Context, Redux, Recoil 등 상태관리 라이브러리를 사용하지 않고 다른 색깔 찾기 게임을 제작할 거예요.
• 이 챌린지를 통해 우리는 이 챌린지를 통해 우리는 요구사항에 따라 적절한 단위로 component를 나눠볼 수 있고, 어느 component가 어느 state를 가지고 있어야하는가에 대해 실전적으로 익힐 수 있으며, 적절한 prop을 사용해 탄력적인 component 작성에 대해서도 연습할 수 있어요.

기술

• TypeScript (language)
• create-react-app (react)
• react-router-dom (router)
• styled-components (CSS in JS)
• react-animated-numbers (number animation)
• react-responsive-modal (Modal component)
• Eslint & Prettier (linter & formatter)
• Vercel (deploy)

기능 목록

• 게임 시작 버튼 클릭 기능
• 색 랜덤 뽑기 기능
• 게임 보드 기능
• 제한 시간 기능
• 보드 클릭 기능
• 게임 종료 기능
• 홈 이동
• 다시 시작

실행

# Development Stage
npm install
npm run start

# Production Stage
npm install
npm run build
npm install -g serve
npx serve -s build