⛓️ 클라이언트와 서버 간의 연결고리 만들기서버에서 검증된 데이터를 기반으로 클라이언트에서 타워를 그려내야 했지만, 앞선 트러블슈팅에서 언급했듯 웹소켓에 대한 이해도가 많이 부족한 상황이었다. 클라이언트와 게임 서버의 역할 그 자체에 대한 이해도가 많이 부족했다고도 할 수 있을 것 같다. 그래서 클라이언트에서 우선 구현한 기능들을 서버와 어떻게 주고받아야 할지 연결고리를 이해하고 만드는 것까지 도전의 연속이었다. 주말 내내 github에 'tower defense'를 검색해서 비슷한 프로젝트들의 코드를 뜯어보고, 팀원분들이 먼저 구현한 몬스터나 스테이지 관련 코드들을 뜯어보고 나서야 기본적인 구조가 이해되기 시작했다. 이전 개인 프로젝트를 진행할 당시, 스켈레톤 코드에서 이미 거의 완성되어 있어 건드릴 ..

🖥️ 일단, 클라이언트에서 시작해보기개인 프로젝트에서 웹소켓을 다뤄보기는 했지만, 이해도가 낮은 상태였기 때문에 클라이언트와 서버 간에 데이터를 주고 받는 로직을 처음부터 짜보려고 하니, 오류 메세지가 터미널에 도배되기 일쑤였다. 어떻게 데이터를 보내고, 받아야 하는지도 헷갈릴 정도로 내실이 부족한 상태임을 인정해야만 했다. 그래도 타워 디펜스 게임에서 '타워'를 담당하게 된 만큼, 클라이언트에서라도 기능이 돌아갈 수 있도록 코드를 짜보기로 했다.  function placeNewTower() { if (towers.length >= 10) { alert('타워는 10개까지만 건설할 수 있습니다.'); } else if (userGold = towerCost) { const { x, y ..

컴퓨터 부품은 보통 크게 5가지로 나뉜다. CPU, 주기억장치(RAM), 보조기억장치(HDD/SSD), I/O디바이스(모니터, 마우스 등), 메인보드. 코어 역할 어쩌고  1. CPU란?컴퓨터의 부품은 보통 CPU, 주기억장치(RAM), 보조기억장치(HDD/SSD), I/O디바이스(모니터, 마우스 등), 메인보드 5가지로 크게 나뉜다. 이때 CPU(Central Processing Unit)는 중앙 처리 장치를 의미한다. 프로그램의 명령어를 해석하고 실행하는 역할을 하는 컴퓨터 시스템의 중심이 되는 핵심 요소이다.   CPU는 제어장치, 누산기, ALU, 레지스터로 구성되어 있다. ALU는 연산을 해주는 장치, 제어장치는 명령을 해석해주는 장치, 레지스터는 데이터를 저장하는 장치, 누산기는 중간에서 데이..

⛔ 애타게 JSON 파일을 불러보다과제 초반에 주어진 스테이지 관련 코드를 보고 하드코딩을 진행한 뒤, 유지보수 및 기능 확장이 가능하도록 수정하는 작업을 반복했다. 각 스테이지 별로 아이템이 해금되고, 생성된 아이템에 따라 다른 점수를 획득하는 것이 기본 조건이기 때문에 스테이지에 대한 정보를 받아오는 것이 1차 과제였다.  문제는 아이템, 스테이지, 아이템 해금 정보가 담긴 json 파일들을 import 하는 과정이 쉽지 않았다. import items from '../assets/item.json' with {type: "json"} 위와 같은 형태로 Score.js 파일에 import를 시도했으나, 게임이 먹통이 되거나 undefined 오류가 발생하기 일쑤였다. init 폴더의assets.js처..

🗺️ 아이템에 맞는 점수 부여하기item.json 파일에 정의한 데이터를 사용하기 위해, 에셋 정보를 불러오는 코드를 활용하고자 했다.export const loadGameAssets = async () => { try { const [stages, items, itemUnlocks] = await Promise.all([ readFileAsync('stage.json'), readFileAsync('item.json'), readFileAsync('item_unlock.json'), ]); gameAssets = { stages, items, itemUnlocks }; return gameAssets; } catch (error) { throw..

🗂️ 숨은 코드 찾기제공받은 프론트엔드 파일과 강의에서 빠르게 지나간 스켈레톤 코드들의 분량이 많다보니, 확인하고 싶은 코드가 어디에 있는지 찾는 것부터 쉽지 않았다. 예를 들어, 각 아이템 id에 매칭되는 이미지 파일을 연결해주는 코드가 item.js나 itemController.js에 있을 것이라 예상하고 처음부터 끝까지 훑어보다가 포기할 때 즈음 index.js에서 찾아낸 일이 있었다. 다른 사람이 미리 짜둔 코드를 베이스로 원하는 결과물을 내기 위해서는 1) 전체 파일의 구조를 이해하고, 2) 어떤 방식으로 어디에 구현되어 있는지 인지하는 게 중요하다는 것을 이렇게 또 배우는 것 같다.  📀 아이템을 먹었습니다. 그냥 먹었습니다.보통 장애물을 피해서 달리는 게임에서 코인이나 아이템을 먹으면 스..