2022-10-13

TODO #

• vue-query + vueuse
• Inversify + RxJS

Learning #

• 스토리북에서 <script setup> 이 지원되지 않음
• Support script setup in Vue 3 · Issue #16231 · storybookjs/storybook (github.com)

Thoughts #

Reading #

• 폴리필

• DOM

• 컴파일 언어 vs 인터프리터 언어

  • JavaScript에는 컴파일러가 있다?
    • JIT 컴파일러
      • 실시간 컴파일러 기법으로 바이트 코드를 기계어로 번역하는 역할
      • Just In Time 실시간 컴파일러
      • JavaScript를 네이티브 코드로 변환하는 과정
    • 자바스크립트 엔진의 최적화 기법 (1) - JITC, Adaptive Compilation : NHN Cloud Meetup (toast.com)
      • 언어가 인터프리터 방식이라고, JIT가 아닌 것은 아닌데 엔진이 구현하는 방식에 의존적이기 때문이다.
      • 현대의 Safari, Chrome, FireFox의 JS엔진은 모두 JITC 방식을 사용한다.
    • 인라인 캐싱
      • 미리 캐싱을 해서 조회 작업을 생략한다! 가 핵심
      • 멀티 타입(Multi type)을 최대한 지양하자
      • user_id: string | number

• 코딩 습관 개선하기

  • 한 줄 한 줄 읽어도 부하가 없도록, property 접근 시 개별보다는 "한 번에"
  js

  // AS-IS
  element.style.backgroundColor = '#fff';
  element.style.radius = 5;
  
  // TO-BE
  element.style.cssText = 'backgroundColor: "#fff", radius: 5';
  

  // AS-IS
  element.style.backgroundColor = '#fff';
  element.style.radius = 5;
  
  // TO-BE
  element.style.cssText = 'backgroundColor: "#fff", radius: 5';
  

  • 반복되는 패턴
    • 공통 함수로

• Microtask vs Macrotask

  • ⭐️🎀 JavaScript Visualized: Promises & Async/Await - DEV Community 👩‍💻👨‍💻
  • https://ko.javascript.info/event-loop
  • https://youtu.be/8aGhZQkoFbQ
  • 비동기 실행
    • 마이크로태스크
      • Process.nextTick()
      • Promise (async / await)
      • Object.observe
      • MutationObserver
      • queueMicroTask function
    • 매크로태스크
    • 마이크로 태스크가 먼저 실행됨
    • 마이크로 태스크를 다 비우고 매크로를 실행하므로
    • 마이크로 태스크에 많은 재귀호출 실행시 루프에 빠질 위험이 존재한다.

• MutationObserver

• IntersectionObserver

  • entries
  • intersectionObserver가 최초에 실행되는 이유?
    • javascript - IntersectionObserver callback firing immediately on page load - Stack Overflow

• CustomEvent