남민우의 공부 블로그

이번 글에서는 이 로그라이크 게임 프로젝트를 진행하면서 느꼈던 점, 코드 버그 상황 등 트러블 슈팅을 진행한다. 트러블 슈팅사실 모든 기능 구현자체는 크게 어렵지 않았다.다른 언어라고는 해도 게임 개발 경험이 있었고 여러 프로젝트를 완성시켜봤기에 비교적 간단한 기능들로 구성된 이번 '로그소울' 은 수월하게 진행되었다.그 안에서 내가 목표로 하고자 했던 것은 크게 두가지인데,1. 자바스크립트 언어의 활용 이해2. 데이터 추가 및 연동이라고 볼 수 있겠다. 1번은 내용이 조금 길어질 듯 하여 2번에 대해서 먼저 진행한다. 2. 데이터 추가 및 연동기획 단계에서부터 여러 몬스터 종류와 그에 맞는 설정을 주기로 했었고, 스토리를 위한 엔딩 스크립트와 같은 데이터들이 있었기에 데이터 파일의 활용은 필수적이었다.해..

내일배움캠프 학습/진행 프로젝트 2024. 11. 18. 00:24

지난 글에서는 Battle.js 파일까지 설명을 마쳤다.이번 글에서는 그 이후의 동작과 코드들에 대해서 설명한다.Ch5. SpawnMonster.jsimport {Monster} from './Monster.js';import { BossMonster } from './BossMonster.js';import fs from 'fs';function loadMonsters(currentStage){ const data = fs.readFileSync('monster.json', 'utf-8'); const monsters = JSON.parse(data); return monsters.find(monster => monster.stage === currentStage);}export..

내일배움캠프 학습/진행 프로젝트 2024. 11. 17. 23:02

내일배움캠프 과정의 일환으로, JS를 통한 로그라이크 텍스트 게임을 개발했다.로그라이크의 특성에 맞게 기본 조건으로 '랜덤 요소, 세이브 불가능, 턴제' 라는 세가지를 주어준다.또한 기본적으로 주어지는 스켈레톤 코드를 통해 추가 기능과 게임의 동작을 구현한다.https://github.com/Namminu/RogueLike_JS/tree/_develop 프로젝트 소개로그라이크 특성을 유지하되 추가적인 요소를 가미하기 위해 소울류 장르를 덧붙였다.따라서 여러개의 스테이지로 구성하여 이를 1. 일반 스테이지, 2. 보스 스테이지 로 나누고, 보스 스테이지에서는 오랜 시간에 걸친 전투를 진행하고자 하였다.다만 많은 게임에서 재미를 느낄 수 있는 부분은 개인적으로 '플레이어의 성장' 이라고 생각해 레벨/경험치 ..

내일배움캠프 학습/진행 프로젝트 2024. 11. 17. 22:31

콜백 함수란?지난 번에 설명한 적 있듯이, 다른 코드(함수)의 인자로 들어가는 함수를 '콜백 함수' 라고 부른다.setTimeout(function() {console.log("hello");})const numbers = [1,2,3,4,5];numbers.forEach(function(number) { console.log(number);});이 코드들에서의 매개변수 자리에 위치한 function 들처럼 이러한 방식으로 사용하곤 한다.setTimeOut 과 forEach 함수들은 이 콜백 함수를 필요에 따라 호출하는, '제어권'을 넘겨받아서 동작한다.콜백 함수의 원리는 이 '제어권'을 setTimeOut, forEach 와 같은 주체에 넘겨줄테니, 각자의 로직으로 처리해라 라고 위임하는 것과 같다.여..

내일배움캠프 학습/JavaScript 2024. 11. 12. 21:28

1. 나이 든 사용자가장 아래의 코드가 실행 되었을 때, “Passed ~” 가 출력되도록 getAge 함수를 채워주세요var user = { name: "john", age: 20,}var getAged = function (user, passedTime) { // 여기를 작성해 주세요!}var agedUser = getAged(user, 6);var agedUserMustBeDifferentFromUser = function (user1, user2) { if (!user2) { console.log("Failed! user2 doesn't exist!"); } else if (user1 !== user2) { console.log("Passed! If y..

내일배움캠프 학습/JavaScript 2024. 11. 8. 20:53

이번 항목에서는 'This' 의 정의, 활용 방법, 바인딩 Call/Apply/Bind 에 대해서 학습한다.먼저 이 This 란 무엇일까.This코드에서의 This 는 어떠한 객체를 가리킬 때 사용한다.C/C++ 에서 This 는 자기 자신, 클래스 등 스스로를 가리킬 때 사용되었지만 JS 에서는 그 활용이 조금 다르다.이 This 는 항상 런타임에 결정된다. 런타임이랑 코드가 돌아가는 환경으로, JS에는 1. 노드, 2. 브라우저 의 두가지 환경이 있다. 먼저 브라우저에서의 this 를 찾아보면다음과 같이 Window 를 가리키는 것을 알 수 있다.저 console.log(this) 는 특정한 함수 내부나 함수 표현식으로 구현된 코드가 아니니 전역 컨텍스트 항목이라고 볼 수 있고 그 말은 전역환경에서의..

내일배움캠프 학습/JavaScript 2024. 11. 8. 20:40

실행 컨텍스트실행할 코드들, 우리가 작성한 코드들의 환경정보들을 모아놓은 '객체' 를 말한다.이를 '콜 스택' 에 저장하여 코드의 실행 순서를 보장하는 과정을 거친다.콜 스택Call Stack 이라고 부른다. 스택(Stack)과 큐(Queue) 를 먼저 이야기하면다음과 같이 Stack 은 Last in, First Out 의 LIFO, Queue 는 First In, First Out 의 FIFO 구조를 갖고 있다.실행 컨텍스트는 이 스택의 형태로 가장 마지막에 호출된 코드가 제일 먼저 동작하는 방식이다.하위 개념으로 Scope, 변수, 객체, Hoisting 등이 있는데 먼저 구성에 대해서 살펴본다.구성먼저 함수에 집중해서 살펴보자.// ---- 1번var a = 1;function outer() { ..

내일배움캠프 학습/JavaScript 2024. 11. 7. 20:51

데이터 타입은 크게 기본형, 참조형 두 가지로 나눌 수 있다참조형값의 크기가 크다 를 전제로 한다.따라서 기본적으로 Object 의 형을 가지며 Array, Function 등이 이에 해당한다. 이 참조형과 기본형을 구분하는 기준으로 1. 값의 복제 방식, 2. 불변성 여부를 들 수 있다.1. 복제 방식- 기본형 : 값이 담긴 주소값을 바로 복제- 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제참조형에 대한 이해가 조금 어려운데, 이후에 데이터 영역에 관해 설명하면서 다시 봐보도록 하자. 2. 불변성의 여부 : 이 또한 메모리, 데이터 영역의 관점에서 봐야 한다.- 기본형 : 불변성 O- 참조형 : 불변성 X, 가변적 불변성에 대해서 더 알기 전에 배경 지식을 먼저 파악하자데이터의..

내일배움캠프 학습/JavaScript 2024. 11. 6. 21:42