아니 갑자기 행맨..? 아니 컴포넌트..?이게 이게 뭐야..
뭐냐고욤,,, 어떻게 하는건데... 진짜 한개도 이해하지 못했다. 주륵..
그래도 조금 그나마 기쁜건, 오늘 4주차 테스트(모의테스트, 실전테스트)를 치면서 계속 애매하게 맴돌던 promise와 resolve, reject / then, catch
이 구문들이 약간은 머리에 들어온 것 같다. 아직 catch 활용은 잘 모르겠지만..
그렇지만 갑자기 또 이해했다고 생각한 async await 활용법이 헷갈리기 시작했다.
도대체 whyrano..whyrano.. 뇌가 하날 배우면 하날 잊는다.
아!! 그리고 fetch 로 api 가져와서 활용하는 구문?은 좀 익숙해졌다!!! 1. 코드구조
[상태 관리]
- 남은 시간, 남은 기회, 선택한 알파벳, 게임의 진행 상태 등의 데이터를 저장하고 그 정보에 따라 필요한 UI를 화면에 그려야 함.
- 이때 데이터를 앱의 상태라고 함.
- 앱의 상태는 하아늬 State 객체로 관리
- 출처 : 엘리스 SW엔지니어 트랙
[상태 관리 패턴]
- 상태를 관리하는 객체를 변하지 않음. ==> 불변객체라고 함.
- 상태가 변경되면 State는 전혀 다른 객체가 됨.
- 상태를 변경하는 코드는 컴포넌트 코드와 섞이지 않도록 함
- 컴포넌트는 상태를 어떻게 변경할지 알지 못함.
- 상태를 변경하고자 하면 특정 메서드를 호출하도록 한다.
[컴포넌트란]
- 특정 UI의 영역을 담당하는 코드
- 행맨 게임에서는 메시지를 그리는 컴포넌트, 키보드를 그리는 컴포넌트 등이 있음.
- 컴포넌트를 잘게 쪼개어 화면을 구성
[컴포넌트 패턴]
- 컴포넌트는 상태를 직접 변경해서는 안됨.
- 컴포넌트는 상태를 받아 사용하며, 상태 변경을 요청한다.
- 상태 변경은 상태를 관리하는 코드에서 한다.
- ex) 컴포넌트가 키보드 입력을 요청하면, 상태관리
- 게임 조작 컴포넌트 안에는 세부 컴포넌트들이 있고, 큰 컴포넌트가 이를 감싸는 구조
- 출처 : 엘리스 SW 엔지니어 트랙
[게임 로직]
앱 초기화
- 처음 게임을 실행하면 APP코드가 실행된다. (DOMContentLoaded)
- App은 상태를 초기화함.
- App에 이미지를 미리 로드하여 저장한다.
- 이미지 로드가 끝나면 화면을 그린다.
게임의 상태 -1
- state는 게임의 상태를 담는 객체
state = {
gameSatus: } - gameStatus는 게임의 현재 상태. Lose, Win, Ready, Start등이 된다.
- timer는 게임이 끝날 때까지 남은 시간
- wordLoading은 단어 로딩 유무를 boolean으로 체크
게임의 상태 2
- chancesLeft 는 알파벳 선택의 남은 기회
- enteredCharacters는 선택한 알파벳을 객체로 저장함.
- charMap은 정답단어를 객체로 저장함
- wordArr은 화면에 그릴 단어를 배열로 저장함.
-charsLeft는 몇개의 알파벳을 더 맞추어야 할 지의 정보를 저장함.
게임 시작
- Start 버튼 누르면 게임 시작
- 키보드를 누르면 단어 안에 있는 알파벳인지를 검사
- 단어 안에 있다면, charsLeft와 enteredCharacters등을 변경하고 게임 종료를 검사
- 단어 안에 있지 않다면, chancesLeft와 enteredCharacterse 등을 변경하고 게임 종료를 검사
- 시간이 지날 때마다 게임 종료를 검사
- 모든 상태의 변경 떄마다 컴포넌트를 다시 그린다.
게임 종료와 재시작
- 모든 알파벳을 맞추었거나, 시간이 종료되거나, 모든 기회가 끝나면 게임이 종료됨
- 게임 종료시 키보드를 더이상 누를 수 없게 함.
- 재시작 시 상태를 초기화하며 그에 맞추어 UI를 그린다.
백엔드개발자