남민우의 공부 블로그

이번 프로젝트는 '아이템 시뮬레이터'를 개발해보도록 한다.정확히 말하자면 아이템에 대해서만 시뮬레이션 하는 클라이언트 개발이 아니라, 일반적인 게임 서버에서 이루어지는 백엔드 API 를 개발하는 것이다. 그럼 요구사항부터 하나씩 살펴보도록 하자.개발 요구사항1. 데이터 베이스 모델링1. 아이템 테이블 : 아이템 자체의 데이터를 관리2. 계정 테이블 : 접속한 계정에 관한 데이터 관리3. 캐릭터 테이블 : 계정에 따른 캐릭터, 캐릭터 자체의 데이터 관리4. 캐릭터 - 인벤토리 테이블 : 캐릭터가 보유한 아이템들의 데이터를 관리5. 캐릭터 - 장비 테이블 : 캐릭터가 장착한 아이템들의 데이터를 관리 이렇게 5가지의 테이블로 이루어진 데이터 베이스를 만들어야 한다.2. API 개발1. 회원가입 API : 아이..

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

1. 웹 브라우저인터넷 브라우저라고도 불린다.보통 브라우저라고 하면 사용자, 클라이언트 측으로 이해할 수 있으며, 웹 서버로부터 정보를 요청하고, 받아서 사용자에게 보여주는 소프트웨어라고 이해할 수 있다.우리가 흔히 사용하는 'Chrome', 'Internet Explore' 가 이러한 브라우저의 일종이다. 작동 원리로 사이트 접속 시 HTML, CSS, JS 파일을 서버로부터 전달받고 이를 해석하여 우리 사용자에게 보여주는 과정을 거친다.해서 이 웹 브라우저는 정적 파일과 동적 파일이 합쳐진 형태를 지니는데, 정적 파일로만 구성된 웹 페이지는 서버가 브라우저에게 전송한 데이터를 그대로 표시한다.동적 파일로도 구성된 웹 페이지가 현재 일반적인 브라우저의 모습이며 사용자의 행동에 따라 실시간으로 변화하는 ..

내일배움캠프 학습/Node.Js 2024. 11. 20. 21:27

클로저 Closure클로저란 함수와 그 함수가 선언된 렉시컬 환경(outer - scope chaning) 과의 조합을 말한다.그럼 이 렉시컬 환경이란 무엇일까?렉시컬 환경const x = 1;function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10 } innerFunc();}outerFunc();먼저 각자의 스코프를 살펴보자 const x = 1; 은 전역 스코프const x = 10; 은 outerFunc() 의 스코프이다. 그럼 console.log(x) 의 x는 이 값을 어디서 참조할까?먼저 처음에는 이 값을 내부, innerFunc() 에서 참조하는데 이 함수에는 x에 대한 정의가 없다.해서 그..

내일배움캠프 학습/JavaScript 2024. 11. 19. 15:47

DOM : Document Object Modeling이 DOM 을 알기 전에 먼저 자바스크립트가 왜 생겼는지에 대해서 먼저 이해해야 한다.간단히 말해서 '브라우저를 동작하기 위해' 태어난 언어인데, 이 브라우저는 다른 프로그램보다 가볍고 빠른 만큼, 그에 맞게 가벼운 프로그래밍 언어를 만들려고 하였다.해서 자바스크립트의 목적이란, 정적이었던 웹페이지(브라우저)를 동적으로 만들기 위해서 이다. 클라이언트가 서버로부터 이 웹페이지를 이루는 HTML 문서를 수집하면 자바스크립트가 해석한 내용을 토대로 DOM Tree 를 구축한다.그래서 DOM 이 무엇인가? 첫번째 메뉴 두번째 메뉴 세번째 메뉴 메인 영역의 제목입니다. ..

내일배움캠프 학습/JavaScript 2024. 11. 18. 20:37

이번 글에서는 이 로그라이크 게임 프로젝트를 진행하면서 느꼈던 점, 코드 버그 상황 등 트러블 슈팅을 진행한다. 트러블 슈팅사실 모든 기능 구현자체는 크게 어렵지 않았다.다른 언어라고는 해도 게임 개발 경험이 있었고 여러 프로젝트를 완성시켜봤기에 비교적 간단한 기능들로 구성된 이번 '로그소울' 은 수월하게 진행되었다.그 안에서 내가 목표로 하고자 했던 것은 크게 두가지인데,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