주간 회고 :: 코드잇 스프린트 3기 14주차

어리바리 개발곤듀 밍밍이 🎀·2024년 3월 2일

주간회고

목록 보기

9/13

🎀 주간 목표 달성 확인

✅ 딥다이브 스터디 진행 (깃헙 자료 보러가기)
✅ 기술 면접 스터디 (깃헙 바로가기)
✅ Next.js 강의 듣기
✅ React 에서의 불변성 포스팅 바로가기
✅ 쿠키, 세션 기반 인증과 토큰(JWT) 기반 인증 포스팅 바로가기
✅ 검색봇한테 잘 보이는 법 - SEO(검색 엔진 최적화) 바로가기

🎀 피드백

📎 micro와 macro task queue

비동기 작업을 하나씩 작동 시키기 위해 올려보내주는 역할을 하는 것이 이벤트 루프이다.
그리고 이벤트 루프에 의해 콜스택에 들어가 실행되기 전의 콜백함수가 대기하고 있는 곳을 Callback Queue 혹은 Task Queue라고 한다. (참고 자료)

그리고 콜백큐 안에는 두가지의 task로 나뉘어지고 우선순위도 부여된다.

Micro Task Queue

setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI Rendering
Macro Task Queue

process.nextTick, Promise, Object.observe, MutationObserver

Micro Task Queue가 우선 순위가 높아서, 먼저 모두 실행되어지고 후에 Macro Task Queue가 실행된다.

콜백큐가 또 두가지로 나뉘어진다는 사실은 이번에 처음 알게되어 새로웠다!

📎 화살표 함수의 this (addEventListener)

우선 그냥 함수 호출하는 경우에 대해 이해하고 넘어가자.

const mingming = {
  name: '지민',
  hi: function() {
    const sayName = function() {
      console.log(this);
    }
    sayName();
  }
};

mingming.hi() // 전역 객체

일반적으로 함수를 그냥 호출하게되면 해당 함수 안의 this는 전역을 가리킨다.
mingming.hi() 찍으니까 window 전역 객체가 찍힌것을 확인할 수 있다.

const mingming = {
  name: '지민',
  hi: function() {
    const sayName = function() {
      console.log(this.name);
    }
    sayName();
  }
};

mingming.hi() // undefined

만약 this.name을 찍으면 어떻게 될까?
undefined가 출력된다. 왜냐면 전역 객체에는 name이라는 프로퍼티가 존재하지 않기 때문이다.

그럼 화살표 함수는 어떨까?

const mingming = {
  name: '지민',
  hi: function() {
    const sayName =()=> {
      console.log(this);
    }
    sayName();
  }
};

mingming.hi() // {name: '지민', hi: ƒ}

객체가 찍히게 되었다.
그로인해 this.name을 해주게 되면

const mingming = {
  name: '지민',
  hi: function() {
    const sayName =()=> {
      console.log(this.name);
    }
    sayName();
  }
};

mingming.hi() // 지민

지민이 잘 찍힌다!

일반 함수에서는 this를 부여하되 값을 지정해주지 않는다면, 화살표 함수에서는 this가 존재하지 않는다.
그래서 화살표 함수는 상위 스코프에서 this를 참조하게 된다.

❗️하지만 문제는 addEventListener에서의 화살표 함수 this이다.

const button = document.getElementById('mingButton');

button.addEventListener('click', () => {
  console.log(this);	// Window 전역 객체
  this.innerHTML = 'clicked';
});

button.addEventListener('click', function() {
   console.log(this);	// mingButton 엘리먼트
   this.innerHTML = 'clicked';
});

이미 addEventListener 콜백 함수는 this에 이벤트가 적용된 요소가 바인딩 되도록 설정되어있다.
그래서 이 때 화살표 함수를 사용하게 되면, 기존 바인딩 된 요소가 사라지고 상위 스코프를 참조하게 되어 원하는 값이 나오지 않을 수 있으니 주의가 필요하다!

🎀 한주를 마무리하며!

🪄 KEEP

내가 1등으로 제출한지도 모르고 있었는데, 아주 사소한 부분에 대한 언급(혹은 칭찬)임에도 불구하고 기분이 좋았다. 사실 1등으로 제출하는게 대단한게 아니라 칭찬이라 하기도 뭣하지만. 아무튼 기분이 좋다 😎👍🏼
스프린트 기간의 거의 50% 정도 지나온 것 같다. 돌이켜보면, 스프린트에 참여하기 전의 나에 비해 지금의 나는 확실히 많은 성장을 이뤄낸 것 같다.
기술적인 면에서도 그렇고 (아직 많이 부족하지만), 특히 협업하고 소통하는 부분에서의 성장과 개발이라는 일에 대한 내 마음가짐에 대한 성장이 확실하게 느껴지는 것 같다. 🤓