240821 TIL - 프로그래밍 심화주차 3, 코딩은 무공?

LIHA·2024년 8월 21일

목록 보기

22/108

발제

1주차 - 요건 기본! 다 알아야 해
2주차 - ES6 문법, 일급 객체
3주차 - 이건 딱히?
4주차 - async / await, Promise 객체, 동기와 비동기의 차이
5주차 - 클래스, 객체지향 프로그래밍, 정적 메소드

트러블슈팅

5주차 과제에서 어려웠던 점

여기를 어떻게 구현해야 할지 몰라 헤맸다.
내가 처음에 구현한 모습은 아래와 같았다.

여러 의문점들

왜 then을 쓰지?
-> 밑에 보면 showCircle이 return Promise ~ 로 프로미스 객체를 반환한다. then은 Promise의 메서드로, 프로미스가 시행되거나 거부될때 실행될 콜백함수를 취한다.
참고 블로그

원을 그려주는 함수가 이렇게 생겼다. 얘가 Promise 객체를 반환한다.

원격 리포지토리 어떻게 설정하더라?

원격 리포지토리가 어딘지 보려면: git remote -v
원격 리포지토리를 새로 등록하려면: git remote add origin (.git으로 끝나는 리포주소)
주워들은 팁 - github에 가장 처음 커밋할 것은 무엇보다 .gitignore인게 좋다고

왜 로그가 안 찍히지? -> console.clear(); 때문

이걸 어떻게 적절하게 잘 써야 할 것 같은데, 이걸 안 쓰자니 정보화면까지 다 찍히고 쓰자니 로그가 아무것도 안찍힌다.
forEarch 구문이 관건인 것 같은데... log를 대체 어떻게 쌓아야 할까? 🤔🤔🤔🤔🤔

강의 되짚기 - 2주차

정말 많이 쓰는 형태 - 단축 속성명

객체는 key - value 값으로 쓰기 때문에, key 값과 value 값의 이름이 같으면 꼭 : 으로 쓰지 않고 생략해버릴 수도 있다.
이렇게만 보면 마치 배열처럼 보이지만, 이건 배열이 아니라 객체다. 키밸류 값이 똑같으면 생략할 수 있기 때문이다.

전개 구문 - 구조분해할당과 함께 가장 많이 사용되는 ES6 문법

...arr 로 풀어버리면 배열 껍데기까지 벗어버리고 그냥 아예 값만 와르르 쏟아지는 것.
console.log(arr)과 console.log(...arr) 해보면 다르게 나온다.

여기에 따라오는 rest parameter - ...args로 써주는 나머지 매개변수

console.log(args) 로 쓰면 배열 형태로 나온다.
console.log(...args) 로 써야 그냥 그 값 그대로 나온다.

템플릿 리터럴 - 우리가 쓰던 그 백틱 두개

장점1 : ${} 를 사용하여 변수를 가져올 수 있다
장점2 : 멀티라인을 지원한다

Map의 목적 -> 데이터의 구성, 검색, 사용을 효율적으로 처리

Map은 Key에 어떤 데이터 타입도 다 들어올 수 있다. 왜냐하면 Map은 키가 정렬된 순서대로 저장되기 때문.
제공 기능: 검색, 삭제, 제거, 여부확인
사용법:

const myMap = new Map();
myMap.set('key','value'); // 이렇게 데이터 추가함
myMap.get('key'); // 이렇게 데이터 검색함

Map도 어찌됐건 대량 데이터를 다루기 위한거라 반복에 관한 API들이 중요 -> keys, values, entries
Symbol.iterator 속성을 가지고 있으면 for ~ of 문법을 쓸 수 있다!

const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

for (const key of myMap.keys()) {
	console.log(key);
}

for (const value of myMap.values()) {
	console.log(value);
}

for (const entry of myMap.entries()) {
	console.log(`${entry[0]} : ${entry[1]}`);
  // 엔트리는 키밸류를 하나의 배열로 묶어 이터레이터로 감싸준 것
  
  console.log(myMap.size); // map의 size (길이)
  console.log(myMap.has("two")); // key 기반 검색
}

Set -> 고유한 값을 저장하는 자료구조. 목적은 사실 Map과 같다

값만 저장하고 키는 저장하지 않는다.
값이 중복되지 않는 유일한 요소로만 구성된다. (ex 주민등록번호) -> 대충 집합 같은 구조
MDN 문서 가보면 진짜로 교집합 차집한 같은 걸 Set으로 흉내낼 수 있다고 나와있다.
제공 기능: 추가, 검색, 삭제, 모든값 제거, 존재여부 확인
사용법:

const mySet = new Set();
mySet.add('value');
mySet.add('value2'); // 여기까지 했을 때 mySet.size 하면 2 나옴
mySet.add('value'); // 여기까지 하고 mySet.size 해도 2 나옴 -> 중복인거 합쳐버림

console.log(mySet.has('value')); // true
console.log(mySet.has('value3')); // false

for (const value of mySet.values) {
	console.log(value);
}

정섭 튜터님의 제작 팁

hp와 atk()가 공통이니 뽑는것도?
this.을 붙여서 상태처럼 쓸 필요는 없다!
그냥 데미지를 리턴하고 그 값을 hp에서 빼는 것도 가능!
지금같은 구현이라면 바깥에서 데미지를 카운트해주는 무언가가 필요할것!
함수 한개로 음수면 데미지, 양수면 힐로 구현할 수 있을 것!