[Node.js] 1~6장 복습

1장. 노드 시작하기

 

1.1 핵심 개념 이해하기

• 서버: 클라이언트에게 정보를 제공하는 주체
• 자바스크립트 런타임: 웹브라우저에서만 실행할 수 있는 자바스크립트를 c언어나 파이썬과 같이 실행시킬 수 하는 것이 노드
• 이벤트 기반: 이벤트(예: 클릭)가 발생했을 경우 지정한 동작을 수행하는 방식
• 논블로킹 I/O: 이전 작업이 끝나기 전에 다음 작업을 수행하는 것을 논블로킹이라고 한다. I/O는 Input/Output의 약어다
• 싱글 스레드: 하나의 프로세스, 다시말해 하나의 실행 단위에서 하나의 흐름만을 가지는 것을 의미한다

 

1.2 서버로서의 노드

 

장점

• 논블로킹 방식으로 I/O를 처리할 수 있는 노드는 I/O 처리가 많은 서버에 적합하다
• 웹 브라우저에서도 자바스크립트를 사용한다. 서버에서도 자바스크립트를 사용하면 하나의 언어로 서버를 전부 구현할 수 있으므로 생산성 측면에서 이점이 있다
• JSON 형식으로 데이터를 주고받는 경우가 많아졌다. JSON은 자바스크립트 형식이므로, 이 데이터를 처리하기 수월하다

단점

• 멀티 스레드 기능에 있어서 다른 언어와 경쟁력이 밀린다
• GO나 nginx처럼 비동기나 정적 파일 제공에 특화된 언어에 비해 속도 측면에서 밀리는 경우가 있다.

 

1.3 서버 외의 노드: 리액트, 뷰와 같이 웹프레임워크로도 쓰인다. 리액트 네이티브와 같은 모바일 앱을 만들 때에도 쓰이고 있다.

 

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

 

2.1 ES2015+: 2015년 이후 크게 바뀐 자바스크립트 문법

 

2.1.1 const, let

• let: 변수 선언 후 다른 값으로 변경 가능
• const: 변수 선언 후 다른 값으로 변경 불가능
• var: let과 동일하게 변수 선언 후 다른 값으로 변경 가능하지만 호이스팅이라는 문제점을 가지고 있음

2.1.2 템플릿 문자열: 백틱(`)으로 문자열 사용이 가능하다. 작은 따옴표, 큰 따옴표와 달리 개행을 사용할 때나 변수를 사용할 때 보다 수월하게 사용할 수 있다

 

2.1.3 객체 리터럴: 키-값 쌍으로 구성된 속성을 만들 수 있다.

let 객체이름 = {
  키1: 값1,
  키2: 값2,
  키3: 값3
};

 

2.1.4 화살표 함수: function 키워드를 쓰지 않고 간단하게 함수 선언이 가능하다. 다만, this의 바인드 위치가 다르므로 주의가 필요하다.

 

2.1.5 구조 분해 할당: 객체나 배열로부터 간단하게 요소를 꺼내올 수 있다.

 

2.1.6 클래스: 코드의 재사용성을 위해 클래스를 제공한다. 자바스크립트는 기존 문법인 프로토타입을 사용해서 이와 같은 기능을 사용할 수 있다.

 

2.1.7 프로미스: 비동기 프로그래밍을 쉽게 하기 위해 사용한다. `.then` 으로 성공시 코드를, `.catch`로 실패시 오류 처리를, `finally`로 성공과 실패에 상관 없이 실행될 코드를 구성할 수 있다.

 

2.1.8 async/await: 비동기 처리시 동기처럼 쓸 수 있어 코드 가독성이 좋아진다. async 키워드가 붙어있는 함수에 await를 쓸 수 있다. await 사용시 프로미스가 fullfilled가 될 때까지 함수를 일시정지 시킨다.

 

2.1.9 map/set: 

• map: 어떤 값이든 요소가 될 수 있는 키-값 쌍의 데이터 집합
• set: 중복을 허용하지 않는 데이터 집합

2.1.10 널 병합/옵셔널 체이닝:

• 널 병합: 삼항 연산자와 사용법이 비슷하다. `??` 연산자의 좌항 값이 null 이거나 undefined이면 우항의 값을, 그렇지 않으면 좌항의 값을 반환한다.
• 옵셔널 체이닝: 접근하려는 값이 null 혹은 undefined인지 확인한 후 접근한다. 만역 null 혹은 undefined라면 undefined를 반환한다.

2.2 프런트엔드 자바스크립트: html에서 사용하는 자바스크립트

 

2.2.1 AJAX: 비동기 웹 서비스를 사용하는 일종의 기법이다. jQuery나 axios를 통해 구현한다.

 

2.2.2 FormData: 비동기적으로 form 데이터를 수집해 전송하기 위해 사용하는 자바스크립트 문법이다.

• append: 주어진 항목에 값을 추가한다
• delete: 주어진 항목을 제거한다
• get: 주어진 항목의 첫 번째 값을 반환한다
• getAll: 주어진 항목의 모든 값을 반환한다
• has: 주어진 항목이 존재하는지 검사한다
• set: 주어진 항목의 값을 새 값으로 설정한다. 

2.2.3 encodeURIComponent, decodeURIComponent: 요청에 한글이 들어가게 되면 경우에 따라 서버가 이를 이해하지 못할 수 있다. 이 때 url encode를 하면 문제를 해결할 수 있다.

 

2.2.4 데이터 속성과 dataset: 

• 데이터 속성: html에서 사용되며, `data-*` 속성을 통해 HTML 태그에 추가 정보를 저장하는 방식
• dataset: dataset에 값을 넣어도 html 태그에 반영됨

3장. 노드 기능 알아보기

 

3.1 REPL 사용하기: RELP은 read(읽기), eval(실행), print(출력), loop(반복)을 줄여 REPL이라고 한다. 다시 말해서 읽고 실행하고 반환하고 이것을 반복하는 것이다.

 

3.2 JS 파일 실행하기: `node [JS 파일]` 명령어를 통해 실행시킬 수 있다

 

3.3 모듈로 만들기: 모듈은 함수나 변수들을 따로 분리하여 관리할 수 있게 하는 방법이다.

 

3.3.1 CommonJS 모듈: 표준이 나오기 이전부터 쓰인 모듈 방식

• 모듈 export: `module.exports` 객체에 할당하여 외부에서 쓰도록 할 수 있다
• 모듈 import: `require()` 함수를 통해 모듈을 가져올 수 있다

3.3.2 ECMAScript 모듈: 자바스크립트의 공식 모듈 형식이다

• 모듈 export: 외부에서 사용할 객체 앞에 `export` 키워드를 사용한다
• 모듈 import: `import { 사용할 객체 } from [경로]`의 형식으로 들여온다

3.3.3 다이내믹 임포트: 조건부로 모듈을 불러온다. `await import([불러올 파일 경로])` 형식으로 사용한다

 

3.3.4 __filename, __dirname: 

• __filename: 현재 실행 중인 스크립트의 전체 경로를 반환한다
• __dirname: 현재 실행 중인 스크립트의 디렉토리 경로를 반환한다

3.4 노드 내장 객체 알아보기

 

3.4.1 global: 전역 객체이다. 모든 파일에서 접근할 수 있다. 전역 객체이므로 생략가능하다. global.require() 대신 require()로 사용하는 것이 그 예시이다

 

3.4.2 console: 기본적인 로깅에 사용한다. `console.log` 외에도 다양한 종류의 메서드를 가지고 있다

 

3.4.3 타이머: 비동기 작업을 예약하거나 반복하기 위해 사용한다. 대표적인 예시로 `setTimeout()`과 `setInterval()`이 있다

 

3.4.4 process: 현재 실행중인 프로세스에 대한 정보를 가지고 있다. 대표적으로 `process.env`가 있다

 

3.4.5 기타 내장 객체: 이 외에도 많은 내장 객체가 있다. 필요할 때 찾아보면서 알아보자

 

3.5 노드 내장 모듈 사용하기: 노드는 브라우저 엔진의 자바스크립트보다 많은 기능을 가지고 있다

 

3.5.1 os: 운영체제와 관련된 메서드와 속성을 제공한다

 

3.5.2 path: 파일 경로를 처리하는 데 도움이 된다

 

3.5.3 url: url을 처리하고 쉽게 파싱할 수 있다

 

3.5.4 dns: DNS에 대한 정보를 다룬다. 예시로 ip 주소를 얻는 기능이 있다

 

3.5.5 crypto: 암호 기능을 제공한다. 대표적으로 해시 생성이 있다.

 

3.5.6 util: 각종 편의 기능이 포함되어 있는 모듈이다

 

3.5.7 worker_threads: 멀티 쓰레딩을 지원하는 모듈이다

 

3.5.8 child_process: 새로운 프로세스를 생성하고 관리할 수 있는 기능을 제공해준다

 

3.5.9 기타 모듈들: 이 외에도 많은 모듈이 있다

 

3.6 파일 시스템 접근하기: fs 모듈을 통해 파일을 생성, 삭제, 조회할 수 있다

 

3.6.1 동기 메서드와 비동기 메서드: 

• 동기 메서드: 순차적으로 처리하는 것을 동기 메서드라고 한다. 앞선 작업이 완료되어야 다음 작업이 수행될 수 있다
• 비동기 메서드: 동기 메서드와 반대로 앞선 작업이 완료되지 않아도 다음 작업이 수행될 수 있다

3.6.2 버퍼와 스트림 이해하기: 

• 버퍼: 데이터를 일시적으로 저장하는 저장소이다. 처리해야할 데이터의 전체를 한 번에 로드해야하기 때문에 크기가 큰 데이터를 처리할 때 메모리에 부담이 갈 수 있다. 큰 크기의 데이터보다는 작은 크기의 데이터에 유리하다
• 스트림: 작은 크기의 버퍼로 데이터를 나눠서 처리하는 방식이다. 고용량 데이터를 처리하기에 유리하다

3.6.3 기타 fs 메서드 알아보기: fs는 파일 시스템을 조작하는 다양한 메서드를 제공한다

 

3.6.4 스레드 풀 알아보기: 쓰레드 풀은 비동기 I/O 작업을 처리하는 데 사용되는 쓰레드 집합이다

 

3.7 이벤트 이해하기: 특정 이벤트가 발생했을 때 수행할 행위를 지정할 수 있다. 대표적으로 `.on`, `.addListener`가 있다

 

3.8 예외 처리하기: 예외 처리를 적절히 수행하지 않으면 프로그램이 다운될 수 있다. `try...catch` 혹은 `.catch()`를 통해 해결할 수 있다

 

3.8.1 자주 발생하는 에러들: 에러가 발생할 때 검색하면서 습득하자

 

4장. http 모듈로 서버 만들기

 

4.1 요청과 응답 이해하기: 

• 요청: 클라이언트가 서버에 정보를 요청하는 것을 의미한다
• 응답: 서버가 클라이언트의 요청을 해석하여 보내는 메시지를 의미한다

4.2 REST와 라우팅 사용하기: REST 아키텍처는 `GET`, `POST`, `PUT`, `DELETE`, `PATCH`를 사용하여 서버를 운영한다. 이를 통해 요청을 구분하기 쉽게 할 수 있고, 유지 보수에 용이하다.

 

4.3 쿠키와 세션 이해하기:

• 쿠키: 클라이언트 측에 저장된다. 사용자의 환경 설정을 기억할 수 있다. 중요한 정보를 담아 사용하기엔 보안적으로 위험할 수 있다
• 세션: 서버측에 저장된다. 사용자의 상태 정보를 유지할 수 있다. 쿠키에 비해 안전하다

4.4 https와 http2:

• https: 데이터 전송을 암호화한 http이다
• http/2: 이진 프레이밍, 멀티플렉싱, 서버 푸시, 헤더 압축을 사용하여 기존 http보다 성능을 개선시킨 버전이다

4.5 cluster: 여러 CPU 코어를 사용할 수 있다.

 

5장. 패키지 매니저

 

5.1 npm 알아보기: node package manager의 약자다. npm을 통해 패키지를 설치, 업데이트, 삭제할 수 있다.

 

5.2 package.json으로 패키지 관리하기: 서버에서 사용하는 패키지의 버전을 설정할 수 있다

 

5.3 패키지 버전 이해하기: 노드의 패키지들은 주요 버전, 부 버전, 패치 버전인 세 자리로 이루어져 있다. 주요 버전의 업데이트는 호환되지 않는 API 변경을 의미하고, 부 버전 업데이트는 이전 버전과 호환되면서 새로운 기능 추가를 의미하고, 패치 버전 업데이트는 이전 버전과 호환되며 버그 수정을 의미한다

 

5.4 기타 npm 명령어

• npm install <패키지명>: 패키지를 설치한다
• npm update <패키지명>: 패키지를 제거할 수 있다

6장. 익스프레스 웹 서버 만들기

 

6.1 익스프레스 프로젝트 시작하기: `npm init` 명령어를 실행하여 `package.json` 파일을 생성해야 한다

 

6.2 자주 사용하는 미들웨어: 미들웨어는 응답 처리 과정에서 제공되는 기능들이다.

• morgan: http 요청을 로그하는 미들웨어다
• static: 정적 파일을 제공하기 위한 미들웨어다
• body-parser: 요청의 본문을 파싱하는 미들웨어다
• cookie-parser: 헤더의 쿠기를 파싱하는 미들웨어다
• express-session: 세션 관리를 위한 미들웨어다
• req(Request 객체): `req` 객체는 HTTP 요청에 관한 정보를 담고 있다
• res(Response 객체): `res` 객체는 HTTP 응답을 다룰 때 사용한다
• next(Next 함수): `next` 함수는 미들웨어 체인에서 다음 미들웨어로 제어를 넘기는 역할을 한다
• res.locals: 현재 요청-응답 사이클에서 응답 객체의 지역 변수를 저장하는 데 사용되는 객체이다
• app.set: 애플리케이션 전반적인 설정을 관리하는 데 사용된다
• multer: 파일 업로드를 위해 사용되는 미들웨어다

6.3 Router 객체로 라우팅 분리하기: 라우트 별로 파일을 만들어 관리하여 가독성 및 유지 보수성을 높일 수 있다

 

6.4 req, res 객체 살펴보기

• req 객체: 요청시 포함하고 있는 본문, 쿠키, 매개변수 등등을 파싱할 수 있다
• res 객체: 응답값을 관리할 수 있다. 쿠키값 설정, 파일 전송, 응답 헤더 및 상태 코드 관리 등의 기능이 있다

6.5 템플릿 엔진 사용하기: 템플릿 엔진은 서버에서 HTML 파일을 동적으로 사용하고 싶을 때 사용한다. php의 twig가 대표적인 예시다

 

6.5.1: 퍼그(제이드): node.js의 템플릿 엔진 중 하나이다

• html 표현: html 표현과 다르게 태그의 표현을 `p hello, jwcs`와 같이 사용한다
• 변수: `-`를 통해 자바스크립트 변수를 선언할 수 있다. `#{}`를 사용하여 html에서 변수를 사용할 수 있다
• 반복문: `each` 또는 `while`을 사용하여 반복문을 구현할 수 있다
• 조건문: `if`, `else if`, `else` 등의 조건문을 사용할 수 있다
• Include: 다른 pug 파일을 포함할 때 `include` 키워드를 사용한다
• Extends와 Block: `extends`는 다른 템플릿을 상속 받을 때 사용한다. `block`은 템플릿 상속에서 자식 템플릿이 내용을 삽입할 수 있는 영역을 정의한다

6.5.2 넌적스: node.js의 템플릿 엔진 중 하나이다

• 변수: `{{변수명}}` 구문을 사용하여 템플릿에 변수를 삽입한다
• 반복문: `{% for %}` 구문을 사용하여 반복문을 구현한다
• 조건문: `{% if %}`, `{% elif %}`, `{% else %}` 구문을 사용하여 조건부 렌더링을 수행한다
• Include: `{% include %}` 구문을 사용하여 다른 템플릿 파일의 내용을 포함시킨다
• extends: `{% extends %}` 구문을 사용하여 다른 템플릿의 레이아웃을 상속받는다
• block: `{% block %}` 구문은 템플릿 상속 시 자식 템플릿이 내용을 삽입할 수 있도록 한다

6.5.3 에러 처리 미들웨어: 다른 미들웨어와 달리 `err` 를 포함한 4개의 매개변수를 받아야한다