[회고록] 포켓몬 카드 짝 맞추기 토이 프로젝트

 

 

 

📃 개요

온라인 강의에서 자바스크립트 파트 끝난 후 배웠던 내용을 활용하고자 만들었습니다.

 

 

 

⏳ 개발 기간

총 5일이며, 하루 3시간 작업 (고민1일+공부1일+개발3일)

 

 

 

💻 사용한 기술

디자인

· Figma

 

개발

· HTML

· CSS

· JavaScript

 

배포

· GitHub

 

Demo

https://wangkodok.github.io/web-game/project.html

포켓몬 카드 짝 맞추기

 

 

 

🔥 구현한 기능

· 짝 카드 다 맞추면 게임 종료

 

 

 

✍ 회고록

일기장처럼 회고록을 작성하겠습니다. :)

 

🙂 프로젝트 진행 전

나는 유데미에서 웹 개발자 부트캠프 자바스크립트 파트 끝난 후 "배웠던 내용을 활용하여 만들 수 있을까?" 라는 생각이 먼저 들었다. 여태까지 자바스크립트 공부해 와서 익숙해졌다고 생각했지만 유데미에서 온라인 강의를 보고 난 후 생각이 바뀌었다. 돌이켜보니 그저 자바스크립트 기초 문법만 공부한 것이다.

 

어떤 것을 만들어야 할 지 고민하다가 레퍼런스가 많은 프로젝트를 찾아봤더니 "짝 맞추기 게임" 이었다. 나는 이거다 생각하고 배웠던 내용을 활용하여 작업하기로 결정했다.

 

 

 

✍ 배웠던 내용

· Postman 사용하면서 HTTP 메서드 GET, POST 요청

· 자바스크립트 기초 문법부터 시작하여 DOM 조작, 비동기 처리

 

 

 

😭 프로젝트 진행하면서 어려웠던 점

자바스크립트 기초 문법만 공부해서 그런지 익숙하지 않았다.

 

나는 "이럴 때는 어떻게 하지?" 라는 생각이 한 가득 이었다. 생각한 대로 구현하다가 버그, 오류가 발생할 때 "이럴 때는 어떤 방법으로 해결하지?" 이러한 생각이 나지 않아서 어려웠다.

 

· 중복 클릭 방지 그 외 여러 버그들

첫 번째로 뒤집힌 카드를 중복하여 클릭하고 두 번째 카드를 클릭하고 같은 카드가 아니면 카드가 다시 뒤집혀야 하는데 뒤집히지 않았다. 버그가 발생했다. 문제를 해결하기 위해 한참을 생각하고 코드 순서대로 읽어나가면서 수정했지만 해결하지 못했다.

 

버그

 

문제가 되었던 코드

 

위에 동영상이랑 코드보면 카드를 클릭하면 배열에 넣고 배열의 길이가 2개면 첫 번째 뒤집힌 카드, 두 번째 뒤집힌 카드를 비교하고 참이면 뒤집고 틀리면 뒤집고나서 다시 뒤집어야 되는데 뒤집히지 않았다. 여기에서 버그가 일어났다. 한참을 생각하고 문제가 됐던 곳은 배열이었다. 첫 번째 뒤집힌 카드를 2번 클릭하면 배열에 넣었으니 배열의 길이가 2개가 됐고 배열 초기화를 시켜서 배열의 길이가 0이 되어서 다른 카드를 클릭하면 배열 0번에 넣어졌다.

 

 

 

레퍼런스가 많은 프로젝트로 시작해서 그런지 코드를 참고하여 해결했다. 이 과정에서 해결할 수 있는 다양한 코드들을 많이 접해보지 않아서 그런 것 같았다. 또는 생각이 나지 않았던 것 같았다.

 

중복 클릭 방지

 

참고하여 해결한 코드

 

카드를 클릭한 배열에 넣기, 뒤집힌 카드를 배열에 넣기 배열을 하나 더 선언하여 해결했다. 그리고 첫 번째 뒤집힌 카드를 중복 클릭해도 방지가 됐다.

 

코드를 참고하여 중복 클릭 방지, 카드를 연달아서 클릭 시 짝이 아닌 카드가 뒤집혔던 버그를 해결했다.

 

· 비동기가 많아지면 어려웠다.

버그들을 해결해 나가면서 비동기 코드가 있었다. 머릿속으로 생각하면서 해결해 나가는 것이 아직 익숙하지 않아서 어려웠다. 코드를 참고하면서 이벤트 루프를 알고 비동기를 서서히 이해하기 시작했다. 

 

여태까지 나는 순서대로 코드를 읽으면서 해결했었다. 이벤트 루프를 알고 자바스크립트의 동작 원리를 이해하면서 비동기 코드를 보니까 서서히 코드를 보는 눈이 생겼다. 

 

 

 

😊 프로젝트 진행 후 얻은 것

코드를 참고하면서 프로젝트가 끝났다. 이 프로젝트에서 이벤트 루프를 알고 내 모습이 전과 후가 너무 많이 달라졌다. 여태까지 코드를 작성하고 버그, 오류가 생길 때 작성한 코드를 순서대로 보면서 코드 삽질? 했던 기억이 난다. 

 

코드를 보는 눈이 조금이나마 생겼다. 다음 프로젝트는 이벤트 루프를 생각을 하며, 작업해야 되겠다. 그리고 개발에 대한 성장과 더욱 더 흥미를 얻었고 나의 성장이 보여서 좋았다. 앞서 말했듯이 코드를 보는 눈을 더 키우기 위해 이벤트 루프를 생각하면서 공부를 해야되겠다. 이 과정을 겪지 않았다면 전과 후의 모습이 차이가 나지 않았을 것이다. 

 

 

 

자바스크립트의 동작 원리를 이해하면서 그렸던 그림

메모리 힙 (Memory Heap)

· var, let, const

 

콜 스택 (Call Stack)

· 함수를 호출하면 스택이 하나씩 아래부터 쌓이고 위에서부터 실행한다.

 

웹 API (Web API)

· DOM, Ajax, setTimeout

 

마이크로 태스크(Microtask Queue)

· Promise callback, async callback

 

매크로 태스크(MacroTask Queue)

· setTimeout, setInterval

 

(공부하고 있어서 틀리는 부분도 있어요. 😭😭😭 양해 부탁드려요.)

 

 

 

📚 더 공부해야 할 것

다양한 방법으로 구현해낸 코드들을 보면서 내 것으로 만들고 응용할 수 있도록 공부해야 되겠다. 생각을 더 키워야 되겠다.

 

그리고 코드를 보는 눈이 조금 높아졌기 때문에 버그, 오류가 생길 때 해결할 수 있을 것 같았고 이벤트 루프를 그림으로 그리면서 자바스크립트의 동작 원리를 이해하고 동기, 비동기, 메서드 .. 등 공부를 더 확실하게 해야 되겠다.

 

 

 

👋 끝

부족한 긴 글 봐주셔서 고맙습니다. 😊