1. 이벤트 루프와 비동기 통신의 이해

1.1 동기(synchronous) vs 비동기(asynchronous)

1.1.1 동기란?

직렬 방식의 작업 처리 방식이며, 요청이 시작된 이후에는 무조건 응답을 받은 이후에야 다른 작업을 처리할 수 있다. 그동안 다른 모든 작업은 대기한다.
이 때문에 한 번에 다양한 많은 작업을 처리할 수 없다.

1.1.2 비동기란?

병렬 방식의 작업 처리 방식이며, 요청을 시작한 후 응답의 여부와 상관없이 다음 작업이 이루어지기 때문에 한 번에 여러 작업을 실행할 수 있다.

1.2 싱글 스레드 자바스크립트

1.2.1 프로세스란?

프로세스는 프로그램을 구동해 프로그램의 상태가 메모리상에서 실행되는 작업 단위, 즉 하나의 프로그램 실행은 하나의 프로세스를 가지고 그 프로세스 내부에서 모든 작업이 처리되는 것을 의미한다.

1.2.2 스레드란?

하나의 프로그램에는 하나의 프로세스만이 할당되어, 여러 개의 복잡한 작업을 수행할 필요성이 대두됐는데, 이때 더 작은 실행 단위를 스레드라고 한다.
하나의 프로세스에서 여러 개의 스레드를 만들 수 있고 스레드끼리는 메모리를 공유하여 여러 작업을 동시에 수행할 수 있다.

1.2.3 멀티 스레드

스레드는 하나의 프로세스에서 동시에 서로 같은 자원에 접근할 수 있는데, 동시에 여러 작업을 수행하는 멀티 스레드의 경우에는 동시성 문제가 발생될 수 있다.
또한, 하나의 스레드가 문제가 생기면 같은 자원을 공유하는 다른 스레드에도 동시에 문제가 일어날 수 있다.

1.2.4 자바스크립트의 스레드

자바스크립트는 싱글 스레드에서 작동하며, 동기 방식으로 작동한다.
즉, 자바스크립트 코드의 실행이 하나의 스레드에서 순차적으로 일어나, 코드가 한 줄 한 줄 실행되어 작업이 끝나기 전까지 뒤이은 작업이 실행되지 않는다는 것을 의미한다.

1.3 이벤트 루프

1.3.1 호출 스택과 이벤트 루프

호출 스택은 자바스크립트에서 수행해야 할 코드나 함수를 순차적으로 담아두는 스택이다.
이벤틀 루프란 이 호출 스택이 비어있는지의 여부를 확인하는 것이며, 자신만의 단일 스레드 내부에서 호출 스택 내부에 수행해야 할 작업을 확인하고, 수행해야 할 코드가 있다면 자바스크립트 엔진을 이용해 실행한다.
이때, 코드를 실행하는 것과 호출 스택이 비어있는 지 확인하는 것은 모두 단일 스레드에서 일어난다. 즉, 두 작업은 동시에 일어날 수 없으며 한 스레드에서 순차적으로 일어나게 된다.

1.3.2 태스크 큐

실행해야 할 태스크의 집합이며 이벤트 루프는 태스크 큐를 한 개 이상 가지고 있다. 태스크 큐는 set 형태를 띄고 있어 실행 가능한 가장 오래된 태스크를 가져온다.
태스크 큐에서 의미하는 실행해야 할 태스크는 비동기 함수의 콜백 함수나 이벤트 핸들러 등을 의미한다.

1.3.3 이벤트 루프의 역할

호출 스택에 실행 중인 코드가 있는지, 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인하는 역할을 한다.
호출 스택이 비었다면 태스크 큐에 대기 중인 작업이 있는지 확인하고,
이 작업을 실행 가능한 오래된 것부터 순차저긍로 꺼내와서 실행한다.
이 작업은 태스크 큐가 빌 때까지 이루어진다.

1.3.4 비동기 함수의 실행

비동기 함수는 따라서 자바스크립트 코드가 동기식으로 실행되는 메인 스레드가 아닌, 태스크 큐가 할당되는 별도의 스레드에서 수행된다. 이 별도의 스레드에서 태스크 큐에 작업을 할당해 처리하는 것은 브라우저나 Node.js의 역하리다.
즉, 자바스크립트 코드 실행 -> 싱글 스레드
외부 api 등 -> 자바스크립트 코드 외부에서 실행 + 태스크 큐로 들어감

1.3.5 마이크로 태스크 큐

마이크로 태스크 큐는 기존 태스크 큐보다 우선권을 가지며 대표적으로 Promise 가 있다. 따라서, 마이크로 태스크 큐가 빌 때까지는 기존 태스크 큐의 실행이 뒤로 미뤄지게 된다.

2. 자바스크립트 문법

2.1 구조 분해 할당

배열 또는 객체의 값을 말 그대로 분해해 개별 변수에 즉시 할당하는 것으로 배열과 객체에서 사용하며, 선언문 없이 즉시 분해해 변수를 선언하고 할당하고 싶을 때 사용

2.1.1 배열 구조 분해 할당

배열 구조 분해 할당은 자유롭게 이름을 선언할 수 있다.
따라서 useState 에서 배열을 반환한다.
또한, 배열 구조 분해 할당은 , 의 위치에 따라 값이 결정된다.

const array = [1, 2, 3]
const [ first, second, third ] = array

2.1.2 객체 구조 분해 할당

객체에서 값을 꺼내온 뒤 할당하는 것을 의미한다.
또한 새로운 이름으로 다시 할당하는 것 또한 가능하다.
기본값을 주는 것도 가능하다.

const object = {
  a:1,
  b:1,
}

const { a: first, b: second, c=10 } = object

2.2 전개 구문

2.2.1 배열 전개 구문

배열 내부에서 ...배열이름 을 사용하면 해당 배열을 전개하는 것처럼 선언하고 내부에서 활용할 수 있다.
또한, 기존 배열에 영향을 미치지 않고 배열 복사가 가능하다

const arr1= ['a', 'b']
const arr2= arr1 // 내용이 아닌 참조 복사
const arr3 = [...arr1] //값만 복사

2.2.2 객체 전개 구문

객체에서도 배열과 비슷하게 사용이 가능한데, 주의해야할 점은 객체 전개 구문에 있어 순서가 중요하다는 것이다.
전개 구문 이후에 값 할당이 있다 -> 전개 구문이 할당한 값을 덮어씀
전개 구문 이후에 값 할당이 없다 -> 전개 구문이 해당 값을 덮어씀

const obj = {
  a:1,
  b:1,
  c:1,
  d:1,
  e:1
}

const obj1 = {
  ...obj,
  c:10
}
// {a:1, b:1, c:10, d:1, e:1 }

const obj2 = {
  c:10,
  ...obj
}
// {c:1, a:1, b:1, d:1, e:1 }