인프런 Node.js 교과서 강의 정리

인프런 Node.js 교과서 강의 정리 - 섹션 1

기록러 2023. 10. 1. 20:11

2023. 10. 1. 20:11

섹션 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를 써야한다.

구조분해 할당

const example = {a: 123, b: {c: 135, d:146}};

/*기존 방식*/

const a = example.a;

const d = example.b.d;

const {a, b: {d}} = example;

console.log(a); // 123

console.log(d); // 146

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

/*기존방식*/

const x = arr[0];

const y = arr[1];

const z = arr[4];

const [x,y,,,z] = arr;

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

클래스

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

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

프로미스

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

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

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

async / await

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

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

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

const promise = new Promise(...); //임의의 promise 함수

promise.then((result) => ...);

async function main() {

try {

const result = await promise;

return result;

} catch (error) { // promise가 실패할경우, reject를 처리할수 있는 부분이 없으므로

// try catch로 감싸서 처리해준다.

console.error(error);

}

main().then((name) => ...); //maint()의 return값을 받을려면 then을 사용한다.

const name = await main(); // 또는 await로 받는다.

Map / Set

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

const m = new Map();

m.set('a','b');

console.log(m.get('a'));

m.set({a:'b'} , {c:'d'}); // key랑 값을 객체로 줄 수도 있다.

// 이 경우 값을 꺼낼려면

m.get({a:'b'}); // 이렇게 하면 서로 참조하는 게 다르므로 다른 객체이다.

// 그래서 못꺼내온다.

const obj = {key:'key'} //그래서 이렇게 객체를 변수로 미리 선언해서 key로 사용하면

m.set(obj , {c:'d'});

m.get(obj); // 이렇게 꺼내올수 있다.

for (const [k, v] of m) {

console.log(k,v);

}

m.forEach((v, k) => {

console.log(k,v);

});

//객체는 원칙적으로 length가 없지만, map에서는 size로 길이를 알 수 있다.

m.size;

m.has('z'); //해당 key가 있는지 체크.

m.delete('a');

m.clear();

//일반 객체보다는 Map를 쓰는게 더 낫다.

//배열보다는 Set을 쓰는게 낫지만, 배열과 특성이 다르므로 특별한 배열이라고 생각하면 된다.

//Set는 중복을 허용하지 않는다.

const s = new Set();

s.add(1);

s.add(1); // 중복허용 불가. s.add('1'); 이거는 허용된다.

s.add(2); // 여기까지는 값이 {1,2}

s.size; // 2

//중복이 없어야 하는 배열, 또는 배열에서 중복제거가 필요할때 Set을 사용하면 좋다.

WeakMap / WeakSet

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

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

WeakMap - JavaScript | MDN

WeakMap 은 키/값 쌍의 모음으로, 키는 반드시 객체 또는 등록되지 않은 심볼이며 값은 임의의 JavaScript 타입입니다. WeakMap은 키에 대한 강력한 참조를 생성하지 않으므로, 객체가 WeakMap의 키에 포함

developer.mozilla.org

const wm = new WeakMap();

let obj3 = {};

wm.set(obj3,'123');

console.log(wm.get(obj3)); // 123

obj3 = null; //가비지컬렉션에서 지워짐

for (const [k, v] of wm) { //WeakMap은 for문이 안된다?? 오류뜸.

console.log(k,v);

}

wm.forEach((v, k) => {

console.log(k,v);

});

널병합

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

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지 - 인프런 | 강의

노드가 무엇인지부터, 자바스크립트 최신 문법, 노드의 API, npm, 모듈 시스템, 데이터베이스, 테스팅 등을 배우고 5가지 실전 예제로 프로젝트를 만들어 나갑니다. 클라우드에 서비스를 배포해보

www.inflearn.com

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

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