남민우의 공부 블로그

이번 프로젝트는 '아이템 시뮬레이터'를 개발해보도록 한다.정확히 말하자면 아이템에 대해서만 시뮬레이션 하는 클라이언트 개발이 아니라, 일반적인 게임 서버에서 이루어지는 백엔드 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

콜백 함수란?지난 번에 설명한 적 있듯이, 다른 코드(함수)의 인자로 들어가는 함수를 '콜백 함수' 라고 부른다.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