1. 예시의 코드를 실행할 때, 콘솔에 출력될 값과 그 이유를 설명해 주세요.

해당 코드의 결과로는 3이 출력됩니다.

콘솔에서는 num을 찍어주는데, 1번에서 1로 할당되었던 것이

2번은 비록 대기시간은 0으로 바로 될 것 같지만,

비동기처리되어 우선적으로 3번의 3으로 최종적으로 할당 및 출력이 됩니다.

하지만 출력이후에는 num에는 비동기화된 2번 값이 셋팅이 되어 

이 작업 이후 다시 num을 출력하게 되면, 2로 바뀐것을 볼 수 있습니다. 

2. 리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요.

Virtual DOM은 실제의 돔이 아닌 실제 돔을 모방한 가상돔을 의미합니다.

이렇게 복제된 가상돔의 변화를 원래의 돔과 비교하게 되어 변화한 부분만 리렌더링을 하는 방식으로 동작됩니다. 

실제 돔에는 화면을 그리는데 필요한 모든 정보가 포함되어 있어 무겁기 때문에 원래의 돔은 조작하는 대신, 가상돔을 활용해서 변경된 사항만 빠르게 파악해서 랜더링을 해주게 됩니다. 덕분에 빠르고 깜빡거림 없는 부드러운 화면을 사용자에게 제공해줄 수 있게 되는데, 이런 장점 덕분에 다양한 데이터가 수시로 변화되는 화면에 유리합니다. 

🥨  HTTP 메소드

• 주어진 리소스에 원하는 동작을 나타내기에 HTTP 동사 라고도 불리운다.
• 각각의 기능으로 나뉘어 있지만, 일부 메소드의 경우에는 의미를 공유하기도 한다.
• CRUD : Create-Read-Update-Delete
• 요청(Request) 메소드의 종류메소드 데이터 처리 및 바디 포함여부 

  기능	HTTP메소드	데이터에서의 역할	바디 포함 여부
  데이터 조회	GET	READ	X
  데이터 추가	POST	CREATE	O
  데이터 수정	PUT	UPDATE	O
  데이터 삭제	DELETE	DELETE	X

• 위 메소드 외에도 HEAD, CONNECT, OPTION, TRACE, PATCH등의 메소드가 있다. 
• https://developer.mozilla.org/ko/docs/Web/HTTP/Methods
• GET Request, POST Request 등으로 불리운다.

🥨 이벤트 버블링

• 자식요소에서 부모요소로 이벤트가 전파되는 것
• 하나의 요소가 이벤트가 발생되게 되면, 이 요소에 할당된 이벤트 핸들러가 동작이 되고, 뒤이어 같은 타입의 이벤트에 한해 부모요소도 동작이 됨.
• 최상단의 윈도우를 만나기 전까지 이 동작이 반복. 부모요소들까지 동작이 되는 현상이 벌어짐. 이런 현상이 있어도 target 프로퍼티는 최초로 발생된 시작점을 담고 있음
• 이벤트 핸들러가 동작된 요소에 접근하고 싶을 때, e.currentRarget
• 버블링을 멈출 때. e.stopPropagation();을 통해 버블링을 막을 수 있음. 버블링을 막을 일이 많지는 않으나 알아두는 것이 좋음

🥨 캡쳐링

이벤트 흐름의 3가지 단계

1. 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계
   1. 이벤트가 발생하면 가장 먼저, 그리고 버블링의 반대 방향으로 진행되는 이벤트 전파 방식
   2. 캡쳐링 단계에서 이벤트 핸들러를 동작시키려면, addEventListener에 세번째 프로퍼티에 true 또는 { capture:true }를 전달
   3. 자주 사용되지는 않음
2. 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계
   1. 가장 처음 이벤트 핸들러가 동작하게 되는 순간
3. 버블링 단계: 이벤트가 상위 요소로 전파되는 단계
   1. 이후 다시 window 객체로 이벤트가 전파

🥨 이벤트 위임

• 새로운 자식요소를 추가, 삭제해도 이벤트 제어를 자식요소에 신경쓰지 않아도 되어 유연한 코드 작성 가능
• 여러개의 이벤트를 생성하지 않아도 돼서 코드를 줄일 수 있고, 코드 동작에도 성능에도 영향을 미치기 때문에 고려해서 등록하는 것이 좋음
• 자식 요소 중 버블링을 막는 이벤트가 추가될 경우 제대로 동작할 수 없어 버블링을 막는건 되도록 지향해야 한다.
• 자식요소에서 발생한 이벤트를 부모이벤트에 등록한 이벤트 핸들러가 동작됨

자바스크립트에서 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)

얕은 복사

- 값이 저장된 메모리의 주소를 복사 한 것으로 참조만 한다고 보면 된다.

얕은 복사를 한 뒤에 변수를 재사용해서 수정하게 되면 원본값도 동시에 변경된다. 

깊은 복사

- 새로운 메모리 공간에 완전히 복사 한 것으로 내부 값이 그대로 복사된다.

값을 복사를 한 것이기 때문에 변수를 재사용하여 수정하여도 원본값에는 영향을 미치지 않는다. 

var, let, const 를 중복 선언 허용, 스코프, 호이스팅 관점에서 서로 비교

호이스팅은 끌어올리다 라는 뜻으로 자바스크립트에서의 선언이 상단으로 끌어 올려지는 것을 의미한다.

함수 호출 부분이 위에, 함수는 아래에 있어도 호이스팅으로 끌어올려서 실행이 된다.

var, let, const 모두 호이스팅이 되는 부분은 동일하다.

var는 선언과 동시에 undefuned로초기화가 되기 때문에, 선언보다 먼저 변수를 사용하더라도 오류가 발생되지 않는다.

let과 const는 호이스팅 특징에 영향을 받지 않기에 값이 초기화 되기 전에 먼저 사용이 불가하다.

호이스팅의 단점은 전역변수와 함수내 동일 변수가 존재하는 경우 예측이 어려워 오류를 발생시킬 가능성이 높아지기 때문에 var는 사용하지 않는 편이 좋다.

또한 스코프는 범위를 의미하는데, var는 전역번위와 함수 내에서도 사용할 수 있다. 

호이스팅이 되면서 자동으로 초기화가 되는 문제가 있다. 

var와 let은 재선언이 가능한 반면 let은 블록 범위내에서 접근이 가능하다.

const 역시 블록 범위 내에서만 접근이 되며, 재선언 및 업데이트가 불가하다.