JavaScript 8

TextRPG 만들기 - 마무리

1. 개발 목표이미 주어진 코드에서 TextRPG 구현하기단순 행동 패턴 공격한다연속 공격한다방어한다도망간다클래스 문법 활용, 플레이어, 몬스터 스탯 관리플레이어 경험치가 가득차면 업그레이드 시킬 능력치 고를 수 있게 하기단일 책임의 원칙 최대한 지키기확률 로직 적용공격력 증가량몬스터 스탯 2. 게임 화면 3. 개발 환경 세팅프로젝트 시작npm init -y를 입력하면 프로젝트 폴더 안에는 package.json이 생성됩니다.-y 옵션의 사용으로 폴더명이 프로젝트의 이름이 됩니다.글 깨짐 chcp 65001 입력하면 임시방편으로 글깨짐이 해결된다.글 깨짐은 VSCODE의 UTF-8로 모든설정을 바꿔준다.라이브러리 다운로드npm install chalk figlet readline-syncnpm insta..

JavaScript 2024.08.23

개인 과제를 하던 도중 비동기를 구현 할 줄 몰라서 비동기에 대해 다시 공부했다...

현재 가장 필요한 비동기 작업의 동기적 표현 - Promise + Async/await> 부분을 다시 공부했다.1. Promise란 비동기 처리에 대해, 처리가 끝나면 알려달라는 약속입니다.2. new 연산자로 호출한 Promise 인자로 넘어가는 콜백은 바로 실행돼요.3. 그 내부의 resolve(또는 reject) 함수는 호출하는 구문이 있을 경우 resolve(또는 reject) 둘 중 하나가 실행되기 전까지는 다음(then), 오류(catch)로 넘어가지 않습니다.4. 따라서, 비동기작업이 완료될 때 비로소 resolve, reject를 호출합니다.5. 그럼 await에 걸려있던 함수가 풀립니다. 동기처리로 되어 있는 기명함수로 되어 있는 식을 보겠습니다.var coffeeList = '';var..

JavaScript 2024.08.21

가장 많이 받은 선물 -JS

이 문제는 풀다가 중도 포기를 하게 되었다.그 이유는 문제를 풀다보니 for문과 변수 선언을 너무 많이하게 되서 결국 포기를하고 다른 사람의 풀이를 보면서 어떻게 풀었는지 이해를 하기로 하였습니다. 문제 설명https://school.programmers.co.kr/learn/courses/30/lessons/258712 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 풀이 코드function solution(friends, gifts) { let N = friends.length; //친구들 이름에 따른 idx map 에 저장 const na..

JavaScript 2024.08.20

Math.min(Array)를 넣었더니 NaN이 나왔다

갑작스레 찾아온 NaN(Not a Number) 숫자가 아니란다.너무나도 당황스러웠지만 일단 문제가 무엇인지 찾아보도록 하자. 과거의 문제const numbers = [5, 6, 2, 3, 7]; const min = Math.min(numbers); console.log(min); // NaN현재의 상황은 Math.max든 Math.min이든 최소, 최댓값을 구하는 함수를 사용했더니 숫자가 아니라는 값이 나왔다. Math.min에 관한 공식문서를 살펴보자.Math.min() 정적 메서드는 입력 매개변수로 주어진 숫자 중 가장 작은 수를 반환하거나, 매개변수가 없으면 Infinity를 반환합니다. 라고 적혀있습니다.여기서 중요한 것은 공식문서에서는 주어진 글 그자체로 받아드려야 한다.Math.min의 매..

JavaScript 2024.08.19

클로저 (Closure)

클로저란, 사전에서 뜻을 찾아보면 폐쇄라는 뜻을 가지고 있습니다.함수가 선언될(생성될) 그 당시에 주변의 환경과 함께 갇히는 것을 말합니다.즉, 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합입니다.또 다른 말로, 함수가 속한 렉시컬 스코프를 기억하며, 함수가 렉시컬 스코프 밖에서 실행될 때도 이 스코프에 접근할 수 있게 해주는 기능입니다. 여기서 렉시컬 스코프란 함수가 선언이 되는 위치에 따라서 상위 스코프가 결정되는 스코프입니다. 결국, 내부함수는 외부함수의 지역변수에 접근할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있는 것을 말합니다. 이제부터 다양한 예시를 통해 알아보겠습니다.const x = 1;function outerFunc..

JavaScript 2024.08.16

(CallBack)콜백 함수의 콜백 지옥과 비동기 제어

콜백 지옥이란 간단하게 말해서 남을 고려하지 않은 코드를 작성한 겁니다.즉, 그저 내가 표현하고 싶은 것을 위해 콜백을 이어붙여 가독성, 유지보수를 최악으로 만드는 것을 뜻합니다. 그렇다면, 콜백 지옥을 해결하기 위한 비동기 제어에 대해서 알아보겠습니다.비동기(asynchronous)란, 실행 중인 코드의 여부와 무관하게 즉시 다음 코드로 넘어가는 방식으로 setTimeout, addEventListener 등이 있습니다.또한, 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드입니다. 동기(synchronous)란, 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식을 말합니다. 비동기의 간단한 이해를 돕기 위해 예시를 들겠습니다.// 비동기적 코드의 이해!setTimeout(f..

JavaScript 2024.08.14

(CallBack)콜백 함수

1. CallBack 함수란 다른 코드의 인자로 넘겨주는 함수입니다.다른 코드의 인자로 넘겨준다는 뜻은 콜백함수를 넘겨받는 코드가 있다는 얘기로 대표적으로 forEach, setTimeout 등이 있습니다.예시로 밑을 보시면 되겠습니다.setTimeout(function() {    console.log("hello");}, 1000); const numbers = [1, 2, 3, 4, 5];numbers.forEach(function(number) {    console.log(number);}); 2. CallBack 함수는 action에 대한 제어권을 넘겨줄테니 너가 알고 있는 그 Logic으로 처리를 해달라는 뜻입니다.그럼 여기서 제어권에 대한 이야기를 해야겠죠?CallBack 함수는 어떤 제어..

JavaScript 2024.08.14

왜 이렇게 호출 되는가?

왜 밑의 두 문장처럼 호출되는지에 대해서 설명드리겠습니다. 일단 fighter.opponent.getFullname()을 호출하면 opponent 객체가 outer가 되고 이 outer안에 있는 getFullname이라는 객체의 this가 가르키는 객체는 다른 bind와 같은 지시해준 것이 없기 때문에 opponent를 가르키게 됩니다.따라서 fighter.opponent.getFullname()이 호출 되면 opponent를 가르키는 this -> fullname인 Francis Ngannou가 호출이 됩니다. 여기서  중요한 것은 fighter.opponent.getFullname()는 호출의 주체가 명확한 메서드 입니다. 그다음 fighter.getName()를 호출하면 그냥 함수로서 호출한것이 아..

JavaScript 2024.08.13