[섹션 1] 자바스크립트 기본

호출 스택

- 스택(stack)은 먼저 들어간 놈이 가장 나중에 나오는 구조(LIFO)이다. (프링글스를 생각해보면 쉽다)

- 항상 맨 처음에는 anonymous가 쌓인다.

- 호출 스택이 텅 비면 실행이 완료됨

- 비동기를 분석할 때는 이벤트 루프까지 같이 봐야한다.

 

 

 

이벤트 루프

- 호출 스택, 백그라운드, 테스크 큐, 메모리로 이루어져 있는 루프이다.

- 비동기 함수를 만나면 백그라운드에 비동기 함수 안에 들어있던 작업이 들어가게 된다. 그리고 호출 스택의 작업과 백그라운드의 작업은 동시에 실행 된다.

- 그리고 이벤트 발생 후 호출되어야 할 콜백 함수들이 순서대로 기다리는 곳이 테스크큐이다. -> 호출스택이 비어있을 때 호출스택으로 하나 하나 전달 된다

- 테스크큐는 순서대로 작업을 실행하지만 우선순위(Promise, then, catch, process.nextick)에 따라 순서가 바뀔 수 있다.

 

 

 

var, let, const

- var은 거의 쓸 일이 없다. 함수 스코프라는 것만 알아두자.

- let, const: 블록스코프

 

 

 

템플릿 문자열

- 백틱(``)을 사용해서 안에 변수를 넣거나 줄바꿈등을 유지할 수 있는 방식이다. 개인적으로 리액트 쓸 때 굉장히 많이 썼다. 문자열 사이에 +를 써주는 방식이 가독성도 떨어지고 실수할 가능성도 높아서 백틱을 주로 사용한다.

 

 

 

화살표 함수

- 화살표 함수는 function을 완전히 대체하지는 못한다. this가 달라지기 때문

- 화살표 함수의 this는 부모의 this를 물려받는다.

 

 

 

구조분해 할당

- 객체나 배열의 값을 다른 변수에 할당할 때 쓰는 방식

const obj = {
  a: "aaaaa",
  b: "bbbbb",
  c: "ccccc",
};

const {a,b,c} = obj;



const arr = [1,2,3,4,5];
const [x,y,,,z] = arr;

 

 

 

클래스

- 클래스는 프로토타입을 깔끔하게 만들어주는 것이다. 어렵게 생각할 필요없다.

 

 

 

프로미스(Promise)

- 프로미스는 내용이 실행 되었지만 결과를 아직 반환하지 않은 객체이다. 

- 성공했을 때, 실패했을 때 상황이 있는데 .then에서는 성공했을 때, .catch에서는 실패했을 때를 실행한다.

- 콜백함수에서는 결과를 바로 반환해버리니까 중간에 다른 코드가 올 수 없었다. 그게 왜 불편한가 하겠지만 코드를 분리할 수 있는데 안하는 것과 코드를 분리할 수 없는 것은 천지차이다. (마치 오픈이 안되는 차를 타는 것과 오픈카를 타는데 굳이 오픈을 안하는 것의 차이)

 

 

 

Async/await

- 발음에 주의하자 어씽크가 아니라 에이씽크이다ㅋㅋ

- await이 then의 역할이라고 보면 된다. resolve(성공) 했을 때의 값을 반환한다.

- await을 쓰려면 async 함수 안에서 써야 한다.

- reject 되는 때를 방지하기 위해서 try/catch문을 써야 한다.

 

 

 

Map/Set

- map은 일반 객체 리터럴{}과 비슷하고 Set은 일반 배열[]과 비슷하다

- map에서 매력적이라고 느낀 부분은

   -> .size를 통해서 객체 속성 개수를 간단하게 알아낼 수 있다는 점

   -> 반복문 돌리기가 쉽다는 점

   -> .has를 통해 값이 있는지 쉽게 알아낼 수 있다는 점

- set은 중복값을 제거할 때 유용하다

 

 

 

null 병합과 옵셔널 체이닝

- null 병합(??)은 null과 undefined를 거를 때 많이 쓴다.

0 ?? 3 //0이 된다
null ?? 3 //3이 된다

 

- 옵셔널 체이닝(?.)은 앞 객체가 null이나 undifined일 상황에서 에러가 나오는 경우를 막음

 

 

 

FormData

- 이미지, 영상, 파일을 보낼 때 axios에서는 formdata에 넣어서 보내야 한다.