행맨 게임 만들기 1 - 행맨 게임 소개와 행맨 게임 코드 구조 <상태 관리와 컴포넌트>

자바스크립트 심화 4주차 수업만이 남아있다. 이 주차에는 행맨 게임을 만들어보는 시간인데 정말 재미있을 것 같다. 사실 내가 자바스크립트를 공부하는 목적도 모두 게임을 만들기 위함이다.
이제 본 수업에 들어가 게임을 만드는 방법에 대해서 배워보기로 하자.

---

 
 
 
 

이론 1 - 행맨 게임 소개

 

 
 
 
 
 

 
 
 
 
 

 
 
 
 
 

 
 
 
 
 

 
 
 
 

 
 
 
 

 
 
 
 

---

 
 
 
 
 

이론 2 - 행맨 게임 코드 구조 : 상태 관리

 

여기서 객체는 완전히 새로운 객체이다.
 
 
 
 
 

 
상태 관리에서 컴포넌트로 코드를 넘겨준다. 유저가 어떤 동작을 했을 때 상태 변경할 수 있는 요청을 보낸다. 이때 요청은 콜백 함수를 호출함으로 이루어진다. 그러면 상태 관리 코드에서는 상태를 넘기면서 상태를 바꾼다.
 
 
 
 
 

 
다른 객체가 되면 기존 객체의 데이터는 변하지 않기 때문에 더 쉽게 상태를 관리할 수 있다. 상태 변경은 상태 관리에서만 하도록 하고, 컴포넌트는 상태를 받아서 URL에 랜더링하고 유저에게 상태를 받아 변경하는 요청을 보내게 한다.
컴포넌트는 상태를 어떻게 변경할지 알지 못하고 함수만 호출한다.

---

 
 
 
 
 
 

이론 3 - 행맨 게임 코드 구조 : 컴포넌트

 

 
컴포넌트로 UI를 구성하면 화면을 기능적으로 분할해서 사용할 수 있다. 어떤 컴포넌트에 어떤 데이터를 쓰고 어떤 UI를 그릴지 좀더 명확하게 할 수 있다.
 
 
 
 
 
 

 
 
 
 
 

 
각각의 컴포넌트가 있고 이 컴포넌트를 하나로 감싸고 있다.

---

 
 
 
 

학습을 마치고

게임에 대한 기본적인 내용을 설명하는 수업이었다. 이제 이론 수업 하나만 더 들으면 실습을 통해 게임을 만들어보려고 한다. 실습 영상이 20분이 넘어가는 무척 긴 시간이라 많은 학습을 요하지만 재미있는 프로젝트니 금방 할 것 같다.
어렸을 때 영어 학원에서 행맨 게임을 많이 했던 기억이 난다. 외국인 선생님은 영어 단어를 빈칸으로 두고 우리들에게 단어를 맞추어보라고 하셨다. 이 행맨이 죽기 전에 단어를 맞추어야 하는 게임이다.
 
엄마는 내게 영어를 공부하라고 강요하신 적도 없었고 나도 별로 관심이 없어서 초등학교 5학년 때였나 처음으로 영어학원에 다녔었다. 공부보다는 놀이를 통해 영어를 배우는 교육기관이었는데 정말 즐겁게 영어를 배웠다.
매일 학교 끝나면 영어 학원에서 틀어주는 애니메이션을 시청하고 게임을 하고 노는 시간이 참 좋았다. 덕분에 난 영어를 늦게 시작했지만 남들보다 특별히 뒤쳐지지는 않았다. 요즘은 조기 교육이다 해서 유치원에서부터 영어를 가르치는 곳이 많지만 난 모국어를 떼기도 전에 다른 언어를 배우는 건 별로 좋지 않다고 생각한다.
이런 아이들은 자신의 모국어에 대한 자부심도 없고 외국어는 남들보다 조금 잘할지 모르지만 인격적으로는 좋은 영향을 미치치 못하는 것을 많이 보아왔다.
 
난 영어를 늦게 접할 수 있게 해주신 부모님께 오히려 감사한다. 사실 한국인에게 가장 중요한 것은 영어가 아니라 우리말을 잘하는 능력이다. 그것은 10세 전후에 형성된다.