220928_TIL

오늘 한 일

• class를 이용한 연습문제를 풀어보면서 class, extends, getter, setter 등의 기능 다루기
• destructing문법
• import, export를 이용한 파일간 불러오기 기능
• 웹브라우저 동작원리 (stack, queue)

---

class Dog {
  constructor(이름, 색상) {
    this.name = 이름;
    this.color = 색상;
  }
  한살먹기() {
    if (this instanceof Cat) {
      this.age++;
    }
  }
}
let 강아지 = new Dog('말티즈', 'white');

class Cat extends Dog {
  constructor(이름, 색상, 나이) {
    super(이름, 색상);
    this.age = 나이;
  }
}
let 고양이 = new Cat('코숏', 'brown', 3);

a instanceof b 이렇게 쓰면 a가 b로부터 생성된 오브젝트인지 아닌지를 true/false로 알려주는 연산자이다. 이런 연산자도 공부하면서 같이 알게 되었다. 그래서 Cat으로 부터 생성된 오브젝트들만 한살먹기() 내부 기능을 사용가능하고 Dog는 오류발생.

추가로 getter와 setter를 연습문제를 통해 주의사항을 알게 됐다 getter는 데이터를 꺼내쓸 때 사용하기 때문에 return이 반드시 필요하고 setter는 데이터를 할당할 때나 수정해줄 때 사용하며 파라미터가 한개 꼭 존재해야한다는 내용이다. get을 함수 앞에 썼는데 return이 없으면 오류가 나며 set을 함수 앞에 적었는데 파라미터가 없거나, 파라미터가 2개 이상이라면 오류가 발생한다.

데이터를 함수로 저장하는 방식은 내부에 있는 변수를 직접적으로 건드리지 않아서 실수를 방지하며 parseInt같은 것을 이용하여 문자열로 숫자를 입력했을 때 발생하게 되는 문제들을 안전장치를 이용해 막을 수 있다는 장점이 있는데 이런 함수로 저장하는 방식을 좀 더 직관적이고 편리하게 작성하기 위해 getter와 setter를 사용하면 좋다. get과 set을 사용하면 출력시 함수의 소괄호를 작성하지 않아도 되기 때문이다.

---

stack과 queue의 동작원리에 대해 공부했다. 자바스크립트 엔진은 stack이란 곳에서 원래 한번에 한개의 코드만 실행이 가능하다. setTimeout이나 Ajax를 이용한 서버통신, 이벤트리스너 등의 코드들은 오래 걸리기 때문에 stack에 바로 저장되지 않고 제외 되었다가 queue라는 곳에 하나하나씩 줄을 세워가며 대기하다가 stack의 공간에 코드가 없이 빈 순간마다 queue에 대기하고 있던 아까의 setTimeout 등의 코드가 진행되는 식이다.

Stack을 바쁘게 만들면 ajax 요청, 이벤트리스너, setTimeout 이런 코드 실행이 불가능해진다. 반복문을 길게 만들어서 돌린다면 10초걸린다고 했을 때. 그럼 10초 동안 ajax 요청, 이벤트리스너, setTimeout 이런 코드는 실행이 불가능한 것이다. Stack이 10초동안 비지 않기 때문에 그런 것! 이렇게 되면 우리가 흔히 볼 수 있는.. 브라우저가 멈추거나 하얗게 변하거나 그런 현상이 일어난다.

결론 : Stack을 바쁘게하면 웹사이트가 버벅이겠구나 라는 생각을 하며 코드짜도록 해야한다.