TIL - 2021.08.15

Today Ariticle

• 애니메이션에서 불필요한 속성 하나가 브라우저 렌더링 성능에 끼치는 영향

• 리뷰는 여기서 - 일일 아티클
  
  

그 외 오늘 참고한 아티클들

• map, reduce 함수에서 async/await 쓰기
• [JS] 마이크로태스크(Microtasks)와 async/await
  
  

Today 테코톡

• 🐰 멍토의 Blocking vs Non-Blocking, Sync vs Async

• 리뷰는 여기서 - 일일 테코톡

Today Deep-Dive

• 정기 모임! 주제는 클로저

Today I Learned

getter/setter를 쓰는 이유.

• 은닉/캡슐화에 대한 이야기도 있지만 get, set을 메소드 명으로 더 명시적으로 한다고만 생각했는데 이후 get/set 로직이 변경될 때 유지보수 측면에서도 getter/setter가 유용하다

class Sample {
	this.a = 1
    setA(number) {
      this.a = number
    }
}

const sample = new Sample()

sample.a = 1 // case1
sample.setA(1) // case2

이렇게 a 프로퍼티에 직접 입력하는 것과 setter를 쓰는 것중에
setter로직이 변경 되는 경우, 예를 들어 넘버를 문자열로 변경해야한다거나 하는 일이 생긴다면 setter는 메소드만 바꾸면 된다

setA(number){
	number = String(numebr)
  	this.a. = number
}

하지만 프로퍼티를 직접 변경하는 로직의 경우 프로젝트 전체에 있는 모든 직접 변경 로직을 수정해야한다

async/await 동작 원리

• async 함수가 호출되어 실행되다가 await를 만나면, 정확히는 await 뒤의 함수 호출이 종료된 이후에 그 시점을 기억한 상태로 async 함수를 콜스택에서 추출해서 마이크로 태스트 큐로 보낸다. 이후 콜스택을 진행한다.
  콜스택이 비워지면 마이크로 태스트 큐에서 await된 async 함수를 하나씩 꺼내서 실행한다.

const a = () => {
  console.log("a 시작");
  b();
  console.log("a 끝");
};
const b = async () => {
  console.log("b 시작");
  await c();
  console.log("b 끝");
};
const c = async () => {
  console.log("c 시작");
  await d();
  console.log("c 끝");
};
const d = () => {
  console.log("d 시작");
  console.log("d 끝");
};

a();
// a 시작
// b 시작
// c 시작
// d 시작
// d 끝
// a 끝
// c 끝
// b 끝

Today Review

• 오늘은 기본기를 다시 다지는 하루였다. 특히 비동기에 대해서!