https://github.com/hustle-dev/numble_challenge

🎲 넘블 챌린지 미션용 레포입니다.
https://github.com/hustle-dev/numble_challenge

react typescript

Last synced: about 1 month ago
JSON representation

🎲 넘블 챌린지 미션용 레포입니다.

• Host: GitHub
• URL: https://github.com/hustle-dev/numble_challenge
• Owner: hustle-dev
• License: mit
• Created: 2022-02-04T06:39:24.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-02-28T16:25:06.000Z (over 4 years ago)
• Last Synced: 2025-09-06T10:34:41.161Z (10 months ago)
• Topics: react, typescript
• Language: TypeScript
• Homepage: https://numble-challenge-kappa.vercel.app/
• Size: 329 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# NUMBLE_Challenge

넘블 챌린지 미션용 레포입니다. 

## 미션

### 1. 아래 페이지 클론 코딩

https://numble-react.vercel.app/

> 이번 챌린지에선 마크업보다 데이터 흐름, 컴포넌트 구분에 집중

**상세 스펙**

- `Math.pow(Math.round((stage + 0.5) / 2) + 1, 2)`개의 사각형이 표시되며, 그 중 하나만 색깔이 다릅니다.

- 한 stage의 제한 시간은 15초입니다.

- 색이 다른 사각형(정답)을 클릭한 경우 아래 변경사항이 적용됩니다.

  - 다음 스테이지로 넘어갑니다.

  - `Math.pow(stage, 3) * 남은시간` 만큼의 score가 누적됩니다

- 오답을 클릭한 경우 아래 변경사항이 적용됩니다.

  - 현재 stage의 남은 시간이 3초 줄어듭니다.

- 남은 시간이 0초 이하가 되면 게임이 종료됩니다. 최종 stage와 누적 score를 출력하고, 새로운 게임을 시작할 수 있습니다.

- stage가 올라갈수록 정답과 오답의 색상 차이가 줄어듭니다.

### 2. 다음 조건에 맞게 진행

1. React Framework를 사용할 것

2. Function Component를 활용할 것

3. Javascript보다는 Typescript를 활용할 것

4. 서버에 배포할 것 (Vercel과 같은 서비스를 이용해보세요)

5. Context, Redux, Mobx, Recoil 등 상태관리 도구를 사용하지 않을 것

### 3. 결과물을 아래와 같은 형식으로 제출

1. 배포한 서비스 URL

- ex. https://www.numble.it

2. Github 주소

- Public 저장소에 올려주세요

3. 블로그 주소

- 블로그는 velog 작성을 권장드리며 블로그, 브런치 등 이미 기술블로그를 작성하는 공간이 있으시다면 다른 곳에 작성하셔도 무방합니다. Notion에 작성하시고 공유하셔도 괜찮습니다.

- 블로그를 작성할 때는 다음과 같은 내용을 포함해주세요.

  - 주요 코드에 대한 설명

    - 주요 로직(ex. 소비자 구매 로직)과 그 이유

    - 코드 내에서 고려한 특정 유저 행동과 그에 대한 대처

  - 활용한 라이브러리와 그 이유

  - 프로젝트를 진행할 때 어려웠던 점/고민했던 부분과 해결방법