[TIL002]

1) 프로그래밍 패러다임(함수형 vs 객체지향)

- 함수형

함수 단위로 나눠서 설계 및 프로그래밍한다.
상태를 변경할 수 없게 만든다(불변성)

• 장점: 동작 예측이 용이. 사이드 이펙트 없음
• 단점: 상태 사용 불가능

- 객체지향

필요한 데이터를 추상화하여 속성(attribute)과 행위(method)를 가진 객체를 설계한다.
생성된 객체들 간의 상호작용을 통해 로직을 구현한다.

• 용이한 코드 재사용
• 쉬운 유지보수 및 확장성
• 느린 개발 속도 / 실행 속도

2) 이벤트 루프

JS의 Call Stack은 단 1개 뿐이다. 이를 개선하기 위해 브라우저에서 지원하는 기능이 이벤트 루프이다.
(JS는 싱글 스레드, 브라우저는 멀티 스레드)
Call Stack이 비게 되면, Callback Queue의 콜백을 순서대로 Call Stack으로 넣는다.

• Callback Queue 구성
  • Task Queue
  • Microtask Queue
  • Animation frames
  • 실행 순서: Microtask Queue -> Animation frames -> Task Queue

• Task Queue: 이벤트가 쌓이는 큐

  • 해당 함수: setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI 렌더링

• Microtask Queue: 일반 이벤트 실행문이 아닌 특정 함수로 만들어짊

  • 해당 함수: Promise, then, catch, finally, await, process.nextTick, Object.observe, MutationObserver
  • 특징: 우선 순위 1순위

• Aniamtion Frames: requestAnimationFrame를 통해 등록되는 큐

  • 해당 함수: requestAnimationFrame
  • 특징: 자연스러운 애니메이션을 위해, 렌더링 이전 마지막으로 DOM구조를 바꿀 찬스
    (애니메이션을 실행하면 DOM구조가 변경되는데, 렌더링 이후 DOM구조를 변경할 시 다음 렌더링까지 기다리는 상황을 피하기 위해)

3) 그 외

• 정규표현식

• 쿠키

  • 클라이언트에서 저장/관리하는 데이터
  • 브라우저 종료 시, 데이터 보존 O
  • 서버에서 Set-Cookie를 응답 헤더로 내려주면, 클라이언트는 받아서 저장
  • 클라이언트에서 자체 조작 가능

• 웹 스토리지 (Key-Value 형태)

  • 로컬 스토리지:
    반영구적 데이터 저장
    브라우저 종료 시, 데이터 보존 O
    도메인 불일치 시 접근 불가
  • 세션 스토리지:
    창(탭) 별로 데이터 저장
    브라우저 종료 시, 데이터 보존 X
    세션 불일치 시 접근 불가

이전에 공부하면서 스쳐 지나가며 들었던 개념들이지만, 아직 실제로 다뤄본 적이 없어서 심화해서 찾아보진 못했다.
일단은 기본적인 내용만 받아들이기로...

참고자료
https://velog.io/@huurray/객체지향-프로그래밍과-함수형-프로그래밍
https://velog.io/@thms200/Event-Loop-이벤트-루프
https://developpaper.com/in-depth-analysis-of-event-loop-and-browser-rendering-frame-animation-idle-callback-animation-demonstration/