[1人 프로젝트] 다른 색깔 찾기 게임 1회차

도전을 즐겁게, 넘블

👩‍💻 이 프로젝트로 정한 이유

스스로 React에 대해 잘모른다고 생각했기때문에 추가적인 토이 프로젝트를 진행하겠다고 생각했다. 혼자서 프로젝트를 하는것은 의욕이 나지않는다고 생각해 인터넷을 통해 함께 프로젝트를 진행하는게 있는지 찾아보았다. 넘블이라는 사이트에서 React를 활용해 다른 색깔 찾기 게임을 제작하는 프론트엔드 개발자 챌린지가 있다는 것을 알게되었고, 오늘부터 진행하게 되었다.

특이한 점은 아무런 교육이나 강의가 없고, 조건과 힌트만 주어진 상태에서 혼자서 프로젝트를 개발하는 것이다.

 

 

---

 

 

🎉 성과

완성한 부분

1. 15초 시간제한 기능 구현하기
2. 0초 되었을때, 게임종료가 되었다는 메시지 띄우기
3. 사각형의 색상을 랜덤으로 적용시키기
4. 컴포넌트를 반복하여 style을 적용시킨 사각형을 화면에 표시하기
5. 사각형 중 한개만 색상 다르게 만들기

 

 

---

 

 

✨ 느낀점

👍 알게 된 점

useState, useEffect 그리고 setTimeout으로 15초 시간제한 기능 구현하기

1. useState로 timer변수에 기본값으로 15를 준다.

2. time함수를 생성하고, setTimeout 메서드를 넣어 setTimer로 인해 1000ms(1초)마다 timer변수값이 1씩 감소하게 한다.

3. useEffect를 활용하여 timer의 숫자가 변할때 time함수를 실행시킨다.

4. 무한정 값이 감소되는 것을 방지하기위해, 조건문으로 timer의 변수값이 0이면 setTimeout를 종료시키는 clearTimeout코드를 작성한다.

 

0초 되었을때, 게임종료가 되었다는 메시지 띄우기

1. useState를 이용해 나중에 구현할 스테이지, 점수변수를 선언한다.

2. window.confirm을 이용해 스테이지와 점수를 표시할 메시지를 작성한다.

 

사각형의 색상을 랜덤으로 적용시키기

1. useEffect를 활용해 stage가 변할때마다 색상색을 바꿔주는 코드를 작성한다.

2. 0~255에 해당되는 값을 style값으로 넣어준다.

 

컴포넌트를 반복하여 style을 적용시킨 사각형을 화면에 표시하기

1. Math.pow(Math.round((stage + 0.5) / 2) + 1, 2)으로 얻은 stage별 사각형 개수를 useState로 정의한 count변수에 넣고, 스프레드 연산자를 활용해 해당 숫자만큼 배열 arr를 생성한다.

2. arr와 map함수를 이용해 style을 적용시킨 사각형을 만드는 컴포넌트를 반복하여 실행한다.

 

사각형 중 한개만 색상 다르게 만들기

1. map함수로 생성한 index값의 범위안의 랜덤한 수를 randomNumber변수에 넣는다.

2. opacity값을 가진 style 객체를 생성한다.

3. map함수에 조건문을 넣어 랜덤한 수와 index값이 같다면 opacity값을 넣은 diffstlye을 style로 적용시킨다.

 

💢 힘들었던 점

계획 세우기

첫번째 React 실습은 강의를 통해 프로젝트를 진행했다면, 이번에는 나 혼자서 프로젝트를 진행하게 되었다. 처음에는 무엇부터 코드를 작성해야하는지 잘 몰라 헤메게되었다. 그러다가 내가 혼자서 개발했을때를 생각해보니, 구현해야할 모든 기능을 나열하고 우선순위를 두어 기능을 구현했던것이 떠올랐다. 예전에 경험했었던 일이었지만, 아직 계획을 세우는게 익숙하지 않은탓인지 처음 진행하는거 같았다. 다음 프로젝트를 진행할때는, 구현할 모든 기능을 공책에 미리 적어보고 하루에 진행할 양을 정하는 계획을 꼭 세워야겠다.