[Sprint #10] Server-Side-Techniques

Reference

Promise for beginners
Javascript event loop | YouTube
JavaScript Promises In 10 Minutes | YouTube
callbackHell
비동기 함수 - 프라미스에 친숙해질 수 있게 해주는 함수

node js에서 request 사용
Getting HTML with fetch() in vanilla JS

Express & Async/Await
res.json vs. res.send vs. res.end in Express
Express의 요청 객체와 응답 객체
Express.js Routing
Router 객체로 라우팅 분리
[번역] Jest - An Async Example
async/ await | JavaScript Info
JavaScript Fetch API and using Async/Await

WriteFile | Node.js 공식문서

---

Server Side Techniques Sprint

Sprint

Achievement Goals

• 어떤 경우에 중첩된 callback이 발생하는지 이해한다.
• Asynchronous code를 읽고 쓰기 편하도록 Promise를 사용할 수 있다.
• async/await keyword에 대해 이해하고, 작동 원리 및 장점 및 단점을 이해한다.
• node fs module을 활용해 파일을 다룰 줄 안다.
• HTTP server routing을 통해 웹 서버의 동작을 작성하고 이해한다.

Prerequisite

• method chaining (Array의 map, filter 등을 연결해서 쓰는 법)을 할 수 있다.
• 비동기 함수와 callback 함수에 대해서 알고 있고, 이용할 수 있다.
• fetch API를 사용할 수 있다.
• require, module.exports 등의 node module 사용법을 이해하고 있다.

---

• 자바스크립트 비동기 처리와 콜백 함수 | 캡틴판교 를 읽고, callback과 비동기 처리에 대해 공부합니다.
• 자바스크립트 Promise 쉽게 이해하기 - 캡틴판교 를 읽고, Promise에 대해 공부합니다.
• request 라이브러리 사용 방법을 공부합니다.
• node.js fs.readFile 메소드 사용 방법을 공부합니다.

1. Promises

※ 스프린트 진행 순서
callback ➡️ promiseConstructor ➡️ promisification ➡️ basicChaining ➡️ asyncAwait

(1) Callback

Callback Error Handling

(2) promiseConstructor

// * ajax 통신 코드
function getData(callbackFunc) {
  $.get('url 주소/products/1', function (response) {
    callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
  });
}

getData(function (tableData) {
  console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

// * Promise 적용
function getData(callback) {
  // new Promise() 추가
  return new Promise(function (resolve, reject) {
    $.get('url 주소/products/1', function (response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
getData().then(function (tableData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});

(3) promisification

(4) basicChaining

(5) asyncAwait

2. Article Collector

• node server를 이용하여 message 자료를 server 컴퓨터의 in-memory 상에서 저장하고, client 요청 시, 다시 server에서 돌려주는 작업
• node의 writeFile method등을 통해 자료를 저장하기 위해 파일을 저장

---