기록하자

섹션 1

2장. 알아두어야 할 자바스크립트

호출 스택

   - 함수의 호출, 자료구조의 스택

   - Anonymous(어노니머스) : 파일이 시작할 때 생기고, 파일이 끝날때 사라진다. 항상 존재하는 가상의 전역 컨텍스트라고 생각하면 된다.

이벤트 루프

   - setTimeout()이 호출 스택에 쌓이고, 실행 시 run 함수를 백그라운드에 보낸다. 

   - 이벤트 루프의 역할은 호출 스택이 비어있을 때, 태스트 큐의 함수를 하나씩 호출 스택으로 끌어와서 실행시켜준다. 즉, 호출 스택이 비어있어야 백그라운드에서 태스트 큐로 보내진 함수가 호출 스택으로 이동되어 실행된다.

   - promise가 포함된 실행순서 예제

   - 최초 실행 시, annonymous가 호출 스택에 깔린다. 메모리 부분에 함수 oneMore와 run이 들어간다.

   - oneMore와 run이 선언되고, setTimeout이 호출 스택에 들어가서 실행된다. 실행되면서 타이머(run, 5초)를 백그라운로 보내주고, 실행이 끝났으니 호출 스택에 있는 setTimeout이 사라지고, annonymous 가 사라진다. 5초 후에 백그라운드에 있는 run함수를 태스크 큐로 보내준다. 태스크 큐에 있는 것은 호출 스택에 비어있을 때 호출스택으로 보내진다. 호출 스택이 현재 비어있으므로 run 함수를 호출 스택으로 보내준다.

   - run이 실행되므로 콘솔로그 console.log("run run") 이 실행되고, setTimeout이 실행된다. 그럼, 다시 백그라운드로 익명함수 0초가 들어간다. setTimeout은 무조건 백그라운드로 간다. 

   - 다음으로 promise가 실행되는데 promise는 resolve와 동기이므로 같이 실행된다. 그리고 promise는 then을 만나는 순간 비동기로 간다. 그래서 then은 백그라운드로 간다.

   - 그 다음에 oneMore가 실행된다.

   - oneMore가 실행되면 안에 콘솔로그가 실행된다. console.log("one More") 가 실행되고나면 호출 스택에서 oneMore가 사라지고, 그리고 run도 사라진다. 그럼 아래처럼 된다.

   - 현재 위에 상태에서 백그라운드에 두 개가 있는데, 백그라운드는 어떤게 먼저 끝날 지 모른다. 먼저 끝나는게 태스트 큐로 간다.

   - promise가 setTimeout보다 우선순위가 높다. 그래서 태스크큐에 같이 들어가 있어도, then이 먼저 호출스택으로 이동되서 실행된다. (아래 그림처럼)

   - 실행이 끝났으면 호출 스택에서 사라지고

   - 그 다음에 익명함수가 실행된다.

   - 개발자도구 콘솔에서 실행해서 확인이 가능하다.

   - Promise.then/catch

   - process.nextTick

  위 두 개는 태스크 큐에서 새치기를 한다.(우선순위가 높다)

   - 자바스크립트는 싱글 스레드인데, 백그라운에서 동시 실행이 가능한 이유가, 백그라운드는 자바스크립트가 아니라 C++ 또는 운영체제쪽 다른 언어이기 때문이다. 

const, let

   - ES2015 이전에는 var를 사용한다. const, let과 큰 차이점은 var는 블록 스코프를 무시한다.

   - var는 function으로 감쌌을때에는 스코프가 있다. 함수 스코프를 존중한다. (let, const는 블록 스코프)

   - const는 = 을 한 번만 사용 가능하다.

const a = 3;
a = '5'; //에러

const b = {name: 'zerocho'};
b.name = 'nerocho'; // 객체는 가능

const c; //에러
let c=5;
c = 3;
c = 10;

   - const로 선언해야 실수로 값을 변경되는 것을 방지해준다. const로 선언하고 나중에 값을 바꿀 필요 있을 때 let을 쓴다.(개인 개발방식 취향차이)

템플릿 문자열

var won = 1000;
const result = `이 과자는 ${won}원입니다.` // `는 물결표와 같은 자판임. 백틱(Backtick)으로 불리기도 함.

   - 백틱 문자열은 함수 호출 기능도 있음.

function a() {}
a(); //이렇게 호출하는게 일반적이지만
a``; //이렇게 호출도 가능하다. 태그드 템플릿 리터럴.(태그가 달린 템플릿 리터럴)

객체 리터벌 비교

화살표 함수

   - 화살표 함수는 function을 완벽히 대체하지는 못한다. 그래서 function을 써야할때도 있다.

   - 최신 문법일수록 기존 문법에서 간결함이 추가된다.

   - 객체를 바로 리턴하는 경우는 소괄호가 필수다. 객체 {} 가 함수{}인지 객체{} 인지 소괄호가 없으면 브라우저가 해석하기가 힘들다.

   - 자식 함수 안에서 부모 this를 사용하려면 위의 that처럼 임시 변수에 this를 담아서 자식 함수 안에서 꺼내쓴다.

   - 화살표 함수 안에서는 자기 자신의 this를 갖지 않는다. 그래서 this를 사용하면 그 this가 부모 함수의 this이다.

   - function이 자신만의 this를 가질려면 화살표 함수를 쓰면 안되고 이전처럼 function를 사용해야 한다.

   - function의 사용 예시

button.addEventListener('click', function() {
	console.log(this.textContent); // button의 텍스트가 출력된다.
});

button.addEventListener('click', () => {
	console.log(this.textContent); // 여기서는 동작안한다. this가 button이벤트의 바깥의 this이므로.
});

button.addEventListener('click', (e) => {
	console.log(e.target.textContent); // e를 매개변수로 바꿔서, 이렇게 바꿔 사용하면 된다.
});

   - this를 안쓸거면 화살표 함수로 통일하고, this를 꼭 사용해야 하는 경우는 function를 써야한다.

구조분해 할당

   - 참고 : this가 있는 경우에는 구조분해 할당을 안하는 것이 좋다.

클래스

   - 클래스가 프로토타입이다. 프로토타입을 깔끔하게 만든게 클래스이다.

   - class 내부에 관련 코드들이 묶여서 깔끔해진다.

프로미스

   - 내용은 실행은 되었지만, 결과는 반환하지 않는 객체.

   - Resolve('성공리턴값') => then으로 연결

   - Reject('실패리턴값') => catch으로 연결

async / await

   - async 발음은 어싱크가 아니라 에이싱크이다.

   - 순서가 오른쪽에서 왼쪽으로 진행이 된다. (아래 예시)

   - await는 async function 안에서 호출되어야 한다. 단, 지금은 TopLevel await라는 것이 나와서 안써도 된다.

Map / Set

   - Map 은 일반 객체{}와 비슷. Set은 일반 배열 [] 과 비슷하다.

WeakMap / WeakSet

   - Weak라는 것은 약하다? Weak라는 것은 가비지컬렉팅이 잘된다.(메모리에서 빠르게 정리가 된다)

추가 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/WeakMap

널병합

const a = 0;
const b = a || 3; // || 연산자는 falsy 값이면 뒤로 넘어감
console.log(b); // 3

const c = 0;
const d = c ?? 3; // ?? 연산자는 null과 undefined일 때만 뒤로 넘어감
console.log(d); // 0;

const e = null;
const f = e ?? 3;
console.log(f); // 3;

const g = undefined;
const h = g ?? 3;
console.log(h); // 3;

옵셔널체이닝

const a = {}
a.b; // a가 객체이므로 문제없음

const c = null;
try {
  c.d;
} catch (e) {
  console.error(e); // TypeError: Cannot read properties of null (reading 'd')
}
c?.d; // 문제없음

try {
  c.f();
} catch (e) {
  console.error(e); // TypeError: Cannot read properties of null (reading 'f')
}
c?.f(); // 문제없음

try {
  c[0];
} catch (e) {
  console.error(e); // TypeError: Cannot read properties of null (reading '0')
}
c?.[0]; // 문제없음. 여기서도 ?. 을 넣어야한다. ?만 넣으면 오류다.
C?.[0] ?? 123 //이렇게 null병합이랑 같이 쓸 수도 있다.


a?.b?.c?.d?.e //이런 방법도 가능은 하다. 가독성은 좀 그렇지만...

Ajax

   - 서버로 요청을 보내는 코드

   - 과거에는 XMLHttpRequest를 이용했으나, AJAX 요청 시, Axios 라이브러리를 사용하는게 편하다.

  - 비동기로 호출. 비동기는 항상 실패할 가능성을 염두해 둔다.

  - axios는 프로미스 기반이라 async, await 사용 가능. 그래서 아래처럼 변경 가능하다!

   - post 요청시에는 두 번째 인수로 데이터를 넣는다.

   - HTML 의 form 태그에 담긴 데이터를 AJAX 요청으로 보내고 싶은 경우에는 아래처럼 사용한다.

   - 이미지나 파일을 보낼려면 axios에서는 form 태그에 넣어서 보내야 한다.

   - 주소에 한글을 넣을 때에는, 웬만하면 encodeURIComponent 로 감싸서 넣어준다.

   - 해독은 decodeURIComponent 를 해준다.

HTML 태그에 데이터 저장하는 방법

   - 태그 속성으로 data- 속성명 사용한다.

   - 자바스크립트로 접근이 가능하다.

<ul>
  <li data-id="1" data-user-job="programmer">Zero</li>
  <li data-id="2" data-user-job="designer">Nero</li>
  <li data-id="3" data-user-job="programmer">Hero</li>
  <li data-id="4" data-user-job="ceo">Kero</li>
</ul>
<script>
  console.log(document.querySelector('li').dataset);
  console.log(document.querySelector('li').dataset.userJob);
  // { id: '1', userJob: 'programmer' }
</script>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

해당 포스트는 인프런에서 제로초(조현영)님이 강의하시는 Node.js 교과서 강의 정리 내용입니다.

참고 : Node.js 교과서 인프런 강의 사이트

https://www.inflearn.com/course/%EB%85%B8%EB%93%9C-js-%EA%B5%90%EA%B3%BC%EC%84%9C

유튜브에서 일부 무료로 들을 수 있습니다. 

https://www.youtube.com/watch?v=JS4El_tz79M&list=PLcqDmjxt30RsGIPBBKX7xl05VuqJeCTFn 

그리고 이 강의는 Node.js 교과서 3판 도서를 바탕으로 진행되는 강의이며, 아래 길벗의 더북(TheBook)사이트에서 해당 도서의 일부를 온라인웹상에서 무료로 볼 수 있습니다.

https://thebook.io/

https://thebook.io/080334/