1. 개념과 구조 - 라이프 사이클 스코프

→ 자바스크립트는 변수 하나, 함수 하나를 일일이 만들고 생성하고 제어하지 않게 되어 있습니다.

스코프라고하는 일종의 그룹핑 역할을 하는 공간으로 그 라이프 사이클을 만들게 됩니다.

그러므로 스코프 공간에 만들어진 변수나 함수는 그 스코프와 삶을 같이 한다고 할 수 있습니다.

2. 개념과 구조 - 동기와 비동기

• 동기 코드란?

  function double(x) {
    return x * 2;
  }
  
  const x = double(100); // A
  const y = x; // B
  // A 줄에 있는 코드가 실행이 되어 변수가 확정이 되어야만
  // 다음 코드가 실행 될 수 있다.
  // 즉 앞에 코드와 다음 코드가 종속성을 갖게 되는 코드라 할 수 있다.
  // 앞에 코드가 완료되기 전에 그다음 코드를 실행할 수 없는 상태.
  

• 비동기 코드란?

  function calcValue(a, b) {
    setTimeout(() => {
      return a + b;
    }, 100);
  }
  
  const r = calcValue(10, 20); // A
  const z = r; // B
  console.log(z); // undefined
  // 비동기 코드로 작성된 setTimeout 함수의 return 값을 동기 코드가 받을 수 없다.
  // 이미 동기 코드(A, B)는 지나가고 비동기 코드(setTimeout())가 실행되지만 return을 받을 변수가 없기 때문이다.
  // 이런 상황이 바로 비동기적 상황입니다.
  // 비동기 코드와 (순차)동기 코드를 엮어 주기 위해서는 callback를 사용하는 방법밖에 없습니다. ★★★
  

  function calcValues(a, b, cb) {
    setTimeout(() => {
      cb(a + b);
    }, 100);
  }
  
  const rr = calcValues(10, 20, (result) => {
    console.log(result);
  });
  // 이 비동기적 callback 함수가 상황이 여러 가지가 있으면 코드가 굉장히 복잡해진다. (콜벡 지옥)
  // 그래서 나온 게 Promise라고 하는 규격입니다.
  

3. 개념과 구조 - 이벤트 시스템

function main() {
  const BUBBLING_PHASE = false;
  const CAPTURING_PHASE = true;
  const PHASE_NAME = ['NONE', 'CAPTURING', 'TARGET', 'BUBBLING'];

  function eventLogger({ target, currentTarget, eventPhase }) {
    console.log(`${target.dataset.name}, ${currentTarget.dataset.name}, ${PHASE_NAME[eventPhase]}`);
  }

  let divs = document.querySelectorAll('.divEvent');
  divs.forEach(div => div.addEventListener('click', eventLogger, BUBBLING_PHASE));
}

document.addEventListener('DOMContentLoaded', main);

// target : 현재 마우스가 클릭된 DOM요소
// currentTarget : 버블링 되었을 때 마지막 버블링 마지막 DOM요소

• 예시

  

  • Yellow Box 클릭 시 : 1,2,3번 로그
  • Blue Box 클릭 시 : 4,5번 로그
  • Red Box 클릭 시 : 6번 로그

4. 개념과 구조 - 런타임 & 컴파일 타임

런타임 상황에서 TypeScript 만으로 해결하지 못하는 경우.

(즉 컴파일 상황과 런타임 상황의 차이로 인해 발생할 수 있는 문제점)

function add(x: number, y: number) {
  return x + y;
}

type ObjType = {
  x: number;
  y: number;
}

// 서버에서 JSON 데이터를 받아올 때 런타임과 컴파일 환경의 차이로 인한 허점
const json = `{ "x": "abc", "y": 20 }`;
const obj1: ObjType = JSON.parse(json) as ObjType;

add(obj1.x, obj1.y);

프로그램이 실행(런타임 환경) 중에 외부로 부터 JSON 데이터를 받아 올 때 다음과 같이 다른 타입이 오는 경우가 발생한다면(외부 데이터 자체 오염됐을 때) TypeScript(컴파일 환경) 에서는 해당 에러를 잡을 수 없다.