주요 내용으로 건너뛰기

1. SIMON-GAME 시작하기

기본적인 Component 작성

지난 시간에는 RedP 컴포넌트를 이용해 붉은색 Hello World 를 띄우는 데까지 성공했습니다. 


0. 프로젝트 기본 셋팅 : https://gompro.postype.com/post/730099/


이제 사이먼 게임(https://www.freecodecamp.com/challenges/build-a-simon-game)에 들어가서 


UserStory와 코드펜의 예제를 확인해봅시다.


총 8개(!!)의 UserStory가 있군요.


확실히 프론트엔드 챌린지의 마지막 과제답게 요구사항이 굉장히 많습니다. 하나하나 들여다 보죠.


1. I am presented with a random series of button presses.

버튼을 누르는 순서는 무작위로 생성된다. (매번 정해진 순서로 플레이하는 것이 아님 )


2. Each time I input a series of button presses correctly, I see the same series of button presses but with      an additional step.

만약 버튼을 순서에 맞게 정확히 누르면, 그 단계의 순서와 함께 추가적인 순서가 제공된다.

(만약 이번 순서가 1-2-3-4 라면 정확히 눌렀을 때 1-2-3-4-7 이런 식으로 순서가 제공되어야 한다는 뜻입    니다.)  


3. I hear a sound that corresponds to each button both when the series of  button presses plays, and          when I personally press a button.

효과음은 내가 버튼을 눌렀을 때뿐만 아니라 자동으로 순서가 재생될 때도 나와야한다.


4. If I press the wrong button, I am notified that I have done so, and  that series of button presses starts      again to remind me of the pattern  so I can try again.

만약 잘못된 버튼을 누르면, 그 사실을 유저에게 알려주고 처음부터 순서를 재생하여 유저가 다시 시도할    수 있게끔 한다. 


5. I can see how many steps are in the current series of button presses.

이번 단계를 마치려면 몇 번 버튼을 눌러야하는지 알 수 있다.


6. If I want to restart, I can hit a button to do so, and the game will return to a single step.

만약 다시 시작하고 싶다면, 어떤 버튼을 눌러 첫 단계로 돌아갈 수 있다.


7. I can play in strict mode where if I get a button press wrong, it  notifies me that I have done so, and        the game restarts at a new random  series of button presses.

스트릭트 모드 : 버튼을 잘못 누르면, 그 사실을 유저에게 알려주고 처음으로 돌아가 새로운 순서가 생성      됨.


8. I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game      starts over.

20 단계를 클리어하면 유저에게 게임을 클리어했다는 사실을 알려주고, 게임을 다시 시작한다.


이 8개의 요구사항은 우리 프로젝트가 갖춰야할 spec이라고 할 수 있습니다. 


이제 하나하나 요구사항(?)을 맞춰보도록 합시다.


먼저 mp3s.js를 utils 폴더에 작성하도록 합니다.

포지션 별로 해당되는 음원주소를 배정해주었습니다!


다음으로 포지션 별로 색깔을 정해줍시다.  utils 아래에 constants.js를 작성해주세요.


본격적으로 첫 요구사항부터 시작해볼까요? 가장 만만해보이니까요 ㅋㅋ


utils 폴더에 createRandomSequence.js를 작성해줍시다.



length를 인자로 받아 for문을 통해 각 위치에 해당하는 숫자가 나오면 빈 배열에 그 위치를 집어넣는 간단한 함수입니다. 


이제 create-react-app의 test 스크립트를 통해 이 함수를 검증해봅시다.


test폴더를 src 아래에 만들고 createRandomSequence.test.js를 작성해줍시다.


jest는 create-react-app 에 들어있는 단위 테스팅 프레임워크입니다. 


위와 같이 간단한 test의 첫 번째 인자로 간단한 설명을 넣고, expect(function()) 뒤에 toContain을 붙이면 함수를 테스트해 볼 수 있습니다.


이번 경우에는 일부러 에러를 일으켜 실행결과를 확인했는데 예상한 대로 


["bottom-right", "bottom-right", "bottom-right"]


위와 같이 포지션으로 이루어진 배열을 반환합니다. 


사실 위와 같이 같은 파라미터 값을 제공했을 때 다른 값을 반환하는 함수는 순수함수가 아닙니다. 


그렇기 때문에 테스트 하기도 어렵구요. 그래서 이번에는 맛보기겸 간단한 테스트만을 진행했습니다.


1. I am presented with a random series of button presses.

버튼을 누르는 순서는 무작위로 생성된다. (매번 정해진 순서로 플레이하는 것이 아님 ) 


아무튼 1번 조건을 클리어 했습니다!!


다음 단계로 넘어가기 전에 


사이먼 게임을 어떤 컴포넌트 단위로 쪼갤 지 생각해봅시다. 



스포일러?..
스포일러?..

네. 완성품입니다. 대략 이런 모양으로 만들어볼겁니다. 이 녀석을 컴포넌트 단위로 쪼개봅시다.


컴포넌트 단위로 쪼개진 사이먼 앱
컴포넌트 단위로 쪼개진 사이먼 앱

리액트는 컴포넌트 단위의 분할을 권장하고 있습니다. 재사용가능한 컴포넌트, 리액트의 핵심이죠.


이제 스피디하게 각각의 컴포넌트들을 작성해봅시다. 


먼저 Pad.js 입니다. (components 아래에 만들어주세요.)

다음 차례는 Pad들을 감싸는 Flexboard 차례입니다.

이제 이 두 컴포넌트들을 감싸는 Container 을 만들어봅시다.


src 아래에 containers 폴더를 만들고 Layout.jsx를 작성해줍시다.



Pad에 prop으로 color 넣는 것, className값 주는 것 빼먹지 마세요 ㅎㅎ


이제 index.js로 가서 Layout을 렌더링해봅시다.


(--는 삭제, ++는 추가 혹은 수정입니다.)



오오오!!
오오오!!

 배경은 index.css에 background: black값을 주시면 됩니다!


계속해서 Box.js/RoundButton.js/Label.js 및 Steps.js를 만들어 줍시다. 

이즈음해서 components가 너무 많아졌으니 index.js를 만들어줍시다.


이제 Layout.jsx를 둘로 쪼개줍시다.

1. Pads.jsx - 패드들로 구성된 컴포넌트

2. PadsControl.jsx - 패드를 조작하는 두 버튼으로 구성된 컴포넌트

이제 아무런 기능은 하지 않지만 외양은 제대로 된 사이먼 게임이 완성되었습니다. 이쯤해서 폴더 구조를 비교해보도록 하죠.



다음 편에서는 Redux를 본격적으로 사용해보도록 하겠습니다. 감사합니다.




이준형 님의 창작활동을 응원하고 싶으세요?

댓글