[javascript] 자바스크립트로 타이핑 게임 만들기

리액트를 공부하다가 자바스크립트 지식이 정말 중요하다는 것을 알게 되었다.

리액트의 useState를 자바스크립트에서는 어떻게 만들었는지 기억이 안나서 클론코딩을 하며 자바스크립트 문법들을 다시 복습해 보았다.

 

 

 

만들면서 이해되지 않은 부분

time>0라는 조건문이 참이면 time에서 1씩 감소되고, 거짓이면 1초마다 실행되는 카운트다운 함수를 멈추게하는 삼항 연산자였는데

거짓부분에 그냥 바로 clearInterval(interval) (*카운트다운 함수를 즉시 종료시켜줌)을 넣어버리는게 낫지 않나 생각했었다.

왜 굳이 isPlaying이란 변수를 만들어서 false, true 값을 주고

!isPlaying라는 조건문을 또 만들어서 clearInterval(interval)을 실행시키게 하는지 이해가 안되었다.

그래서 초반엔 거짓부분에 clearInterval을 바로 넣어버렸다가 나중에 수정하긴했는데

isPlaying이라는 변수를 만든 이유는 카운트다운 함수가 실행되고 있는 중인지를 파악하기 위해 만든 변수였다.

카운트다운 함수가 실행되고 있지 않을땐 input값과 랜덤단어값이 일치해도 획득점수가 올라가지 않아야하므로!

즉, 카운트다운 함수가 실행중 일때만 단어일치함수를 실행시켜야 하므로 만들어둔 변수였다.

 

!isPlaying이란 조건문을 넣어주고 return을 하면 (카운트다운 함수가 실행하지 않으면)

아래에 획득점수 1씩 올라가는 코드, array에서 랜덤으로 단어를 추출해주는 코드가 실행되지 않는다.

 

 

 

 

time=0이고 카운트다운 함수가 실행되지 않을땐

버튼안에 글자도 바껴야함

 

 

 

 

그리고 화면이 첫렌더링 되었을때 초기값 세팅하는 것도 새로웠다.

init( ) 함수를 만들고 화면이 처음 렌더링 되었을때 실행되어야 할 기능들을 넣었다.

단어 불러오는 기능, 단어일치 확인하는 기능

 

 

자바스크립트로 만들면서 React의 useState가 정말 편리하다는 것을 알게되었다.

그리고 둘다 공부 열심히 해야지🎶