주요 내용으로 건너뛰기

3. SIMON-GAME : AUTO PLAY 구현

Redux 와 Async Await 을 이용한 auto play 구현

지난 시간에는 Redux 를 이용해 액션을 만들어보고 액션을 통해 상태를 변화시켰습니다. 


2. SIMON-GAME WITH REDUX : https://gompro.postype.com/post/730446/


이번 시간에는 지난 번에 얘기했던 UserStory를 충족시키는 액션을 만들어보죠.


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.

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


네. 자동플레이 기능이 필요하군요.


자동플레이가 되려면 어떤 것들이 필요할까요?


일단, lightenPad 만으로는 안 될 겁니다. lightenPad 는 최초로 눌렀을 때만 애니메이션을 보여주거든요.

(playing을 true로는 바꿀 수 있지만 false로 바꿀 수는 없음)


그렇다면 반대로 playing을 true에서  false로 바꾸는 액션이 일단 필요하겠군요.


다음으로 유저의 행동을 고려해봅시다. 


코드펜의 예제를 플레이해보신 분은 아시겠지만 자동으로 순서가 재생되는 도중에 패드를 클릭하면


아무일도 일어나지 않습니다.


대다수의 유저에게는 당연한 일이겠죠. 


만약에 자동 재생 도중에 유저가 클릭했다고 해서 애니메이션이 동시에 재생된다거나 하면 


그건 심각한 결함입니다.


그래서 사이먼 게임 앱에는 자동재생 도중 유저가 클릭하더라도 애니메이션을 재생하지 않도록 하는 장      치가 필요합니다.


이제 정리해보죠. 


1. lightenPad의 반대 액션, 즉 lightenOffPad가 필요하다.


2. 자동재생 도중 유저의 클릭을 막아줄 '상태'가 필요하다.


PadReducer를 한 번 들여다보죠.

   지난 시간에는 아무일도 하지 않는 것처럼 보였던  status 가 있군요. 


이제 자동재생 도중에는 status를 'playing..' 상태로 유지하고 


자동재생이 마치면 status를 'loading..'  상태로 변경할 겁니다.


자, 결과물을 한 번 볼까요?


 PadActions  와 index.js 에 세 가지 액션을 추가한 뒤,

PadReducer 에 세 가지 액션을 추가해주었습니다.

   이제 뭔가 할 수 있을 것만 같네요.


   여태까지 만든 액션들을 조합해서 한 번 자동재생 함수를 만들어 봅시다.


그 전에 sleep이라는 함수를 만들어 놓고 하겠습니다.

이 함수는 프로미스를 이용해 setTimeout 을 반환하는 함수입니다.


몇 초간 딜레이하는 기능을 수행하죠.


이런 함수가 왜 필요하냐구요?


playSeq 함수부터 살펴봅시다.

잘 살펴보시면 condition을 만족할 때


순서대로 startMusic - lightenPad - lightenOffPad - endMusic을 불러내고 있음을 알 수 있습니다.


Redux dev tool을 이용해 sleep이 있을 때와 없을 때를 비교해보면 sleep 함수의 필요성을 금방 눈치채실    겁니다.


한 번 해보죠.

실행하고서 결과를 확인해봅시다.


sleep이 있을 때는 애니메이션이 실행되지만 없을 때는 소리만 납니다.


당연한 결과일 수도 있습니다. 


sleep이 없다면 playing 상태가 바로 false가 되니까요. (lightenOffPad가 바로 실행되기 때문)


이제 start 버튼을 눌렀을 때 자동으로 재생되게 할 수 있을까요?


바로 해봅시다.


그 전에 PadsControl에도 state와 action을 나눠줘야겠군요.


PadsControlContainer 를 만들어 줍시다.


지난  PadsContainer와 거의 흡사하기 때문에 금방 이해하실 겁니다.


status와 seq를 가져오고, playSeq를 가져왔죠.


이제 PadsControlContainer를 PadsControl 대신 Layout.jsx에 렌더링해줍시다.



   PadsControl에 onclick부분만 수정하면 자동 재생 파트는 끝이 납니다.


확인해보세요.


몇 번을 실행하든 우리가 계획한 순서대로 실행되는 액션들
몇 번을 실행하든 우리가 계획한 순서대로 실행되는 액션들

이제 감이 오시나요? 


Redux의 공통된 패턴은 액션타입과 액션 작성 -  리듀서에 case 추가 -  컨테이너 컴포넌트에 연결 이 세 가지 입니다. 


그리고 컨테이너 컴포넌트에서 여러가지 액션을 조합한 playSeq 같은 함수를 만들 수도 있죠.


이제 3번 UserStory도 충족됐군요.


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편 https://gompro.postype.com/post/732275

5편 https://gompro.postype.com/post/732388

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

댓글