12월 첫째 주 TWIL

Immersive Course

Immersive Course(이하 IM)는 프로그래밍 교육기관 코드 스테이츠의 웹 개발 심화 코스이다. 아래 내용은 IM에서 배우고, 내가 찾아보고, 다른 수강생들이 전해 준 지식이다.

---

1. Fetch API

[ Fetch API | MDN ]
[ Using Fetch | MDN ]
[ WindowOrWorkerGlobalScope.fetch() | MDN ]

Fetch API는 클라이언트에서 Request나 Response와 같은 HTTP의 파이프라인을 구성하고 접근하는 수단을 제공하며, 리소스들을 비동기적으로 쉽게 주고받을 수 있는 fetch()메서드를 제공한다.

fetch() 메서드의 기본 문법

첫 번째 인자(resource)로 리소스를 얻거나 보내고자 하는 지점의 주소(URL) 혹은 Request 객체를 부여한다.
두 번째 인자(init)는 옵션이다. 사용자가 지정한 여러 가지 정보를 담은 객체이다. HTTP 요청 종류, 헤더, 바디, 캐시 등을 지정할 수 있다.

fetchResponsePromise = fetch(resource, init);

GET 요청

fetch('url') // 옵션(init)을 아무것도 지정하지 않으면 'GET' 요청이 된다.
  .then(function(response) {
  return response.json();
  // 서버로부터 받은 문자열화된 리소스(response)를 
  // json()메서드를 이용해 자바스크립트 객체로 파싱한다.
  })
  .then(function(myJson) {
  // myJson은 위에서 리턴받은 response.json()이다.
  console.log(JSON.stringify(myJson));
  });

POST 요청

fetch(url, {
  method: 'POST', // *GET, POST, PUT, DELETE, etc.
  mode: 'cors', // no-cors, cors, *same-origin
  cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
  credentials: 'same-origin', // include, *same-origin, omit
  headers: {
    'Content-Type': 'application/json',
    // 'Content-Type': 'application/x-www-form-urlencoded',
  },
  redirect: 'follow', // manual, *follow, error
  referrer: 'no-referrer', // no-referrer, *client
  body: JSON.stringify(data), // body data type must match "Content-Type" header
  })
  .then(response => response.json());

2. package.json

[ npm-package.json | npmjs.com ]
[ What is the file 'package.json'? | nodejs.com ]

npm을 이용하기 위한 정보와 프로젝트 전반에 대한 정보가 들어 있는 파일이다. 프로젝트가 어떤 모듈들을 이용하고 있는지를 npm과 유저에게 알리는 데 사용된다. 프로젝트 폴더에서 CLI에 npm init 를 입력하여 package.json 파일을 생성할 수 있다.

npm

[ npm | npmjs.com ]
모든 Node.js 프로그램, 플러그인, 모듈 등을 포함하는 저장소에 연결하는 도구이다.

필드 주요 항목

1. dependencies
프로젝트에 필수적이고, npm을 통해서 설치할 수 있는 라이브러리와 모듈들의 목록이다. npm install 명령을 실행하면 여기에 기록된 라이브러리가 ./node_modules 안에 모두 설치된다.
이 목록에 기록되도록 라이브러리 설치하려면, 라이브러리를 설치할 때 --save 옵션을 부여해야 한다.

➜ npm install libraryName --save

JEST와 ESlint를 설치했을 때 package.json에는 이렇게 추가된다.

"devDependencies": {
  "eslint": "^5.12.0",
  "jest": "^24.1.0"
}

2. devDependencies
프로젝트에 필수적이지는 않지만, 부가적으로 필요할 수 있는 라이브러리와 모듈들의 목록이다.
이 목록에 기록되도록 라이브러리 설치하려면, 라이브러리를 설치할 때 --save --dev 옵션을 부여해야 한다.

3. scripts
원하는 단축 명령어를 키로, 단축 명령어를 통해서 실행시키고 싶은 명령을 값으로 입력하면 CLI에서 사용할 수 있다. 암묵적으로 "start" 에는 서버를 여는 명령을, "test"에는 테스트를 실행하는 명령문을 넣어서 사용한다.

"scripts": {
  "start": "node index.js",
  "test": "jest"
}

위 처럼 package.json에 입력한 후, 아래처럼 CLI에서 입력하면 값으로 부여한 명령이 실행된다.

➜ npm start
➜ npm test

3. 자바스크립트 모듈 - 서버사이드

[ Node.js의 module loading system | PoiemaWeb ]
CommonJS는 자바스크립트를 브라우저 밖에서도 사용할 수 있도록 모듈화 명세를 만드는 그룹이다. Node.js는 CommonJS의 명세를 기본으로 삼아 module 단위로 각 기능을 분할하여 사용할 수 있도록 만들어졌다.
exports 혹은 module.exports 객체를 이용해 필요한 파일을 외부로 공개하고, require() 함수로 파일을 불러온다.

// file my-module.js
const sum = (a, b) => {
  return a + b;
}

exports.sum = sum;
// exports로 대상을 지정하여 공개한다.

const mod = require('./my-module');
// require로 모듈을 불러온다.

const result = mod.sum;
console.log(result(3, 4));
// 7

모듈 파일 안에 있는 변수를 포함하여 객체와 함수 등을 외부로 공개할 수도 있다.

// file my-module.js
const num1 = 1;
const num2 = 2;

exports.sum = (a, b) => num1 + num2 + a + b;
// 이 때 num1, num2는 private 변수가 된다.

const mod = require('./my-module');

const result = mod.sum;
console.log(result(3, 4));
// 10

4. Node.js를 이용하여 서버 뼈대 구성하기

[ Getting Started With Node.js : A Beginners Guide | Pramod Chandrayan ]
[ Node.js | nodejs.org ]

Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다. Node.js덕분에, 브라우저에 종속되어 있던 JavaScript의 사용 영역이 넓어졌다. Node.js로 자바스크립트를 사용해 서버를 구축할 수 있다.
Node.js는 기본적으로 여러 가지 모듈을 제공한다. 이를 코어 모듈이라 하며, 코어 모듈들은 Node.js의 폴더의 /lib에 들어있다. 제공되는 모듈 중 하나인 http는 HTTP서버를 쉽게 만들 수 있는 객체이다.

http 모듈을 사용하려면 우선 require() 함수로 불러온다.

const http = require('http');
// 코어 모듈은 파일 경로를 적지 않아도 된다.

createServer() 메서드를 사용해 서버 객체를 만든다.

const server = http.createServer((request, response) => {
});

서버를 실제로 구동하려면 listen() 메서드에게 IP와 PORT를 알려주고 실행시켜야 한다.

const ip = '127.0.0.1';
const port = 3000;

server.listen(port, ip);

[ res.writeHead() | nodejs.com ]
res.writeHead()는 응답 header를 클라이언트로 전송한다. 첫 번째 인자로 status code를, 마지막 인자로 header의 내용을 담은 객체를 받는다. 이 메서드는 응답 당 한 번, res.end() 메서드가 호출되기 전에 호출되어야 한다.

[ res.end() | nodejs.com ]
res.end()는 서버에게 response 헤더와 바디가 전송되었음을 알린다. 응답 당 한 번 무조건 res.end() 메서드가 호출되어야 한다.

const server = http.createServer((request, response) => {
  response.writeHead(200, { 'Content-Type': 'text/plain' });
  response.end('Hello World');
});

코드를 정리하면 다음과 같다.

const http = require('http');
const ip = '127.0.0.1';
const port = 3000;

const server = http.createServer((request, response) => {
  response.writeHead(200, { 'Content-Type': 'text/plain' });
  response.end('Hello World');
});

server.listen(port, ip);

이렇게 만든 서버는 클라이언트의 요청(GET, POST 등)에 대한 반환 코드를 작성하지 않았기 때문에 요청을 받고 그에 맞는 응답을 보낼 수는 없지만, node server 명령으로 서버를 열고 지정한 주소 http://127.0.0.1:3000/ 에 들어가면 res.end()로 보낸 메시지 'Hello World' 를 확인할 수 있다.