8/24 TIL : node.js, promise, async/await

🔎 node.js : Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임

• 스크립트 언어라 어느 환경에서도 동작
• 성능이 빠르고 좋음
• js를 쓰는 개발자가 많음
• Ryan Dahl이 서버용 기능을 개발

 

🚩 개발환경 세팅(윈도우 기준)

1. node.js 설치(https://nodejs.org/ko/)
2. 버전 관리 tool 설치(https://github.com/coreybutler/nvm-windows/releases)
3. nvm 버전 확인: [터미널] nvm version
4. node.js 버전 확인: [터미널] nvm ls

 

🚩 npm: node package manager

• [터미널] npm init -y
• 파일 실행: [터미널] node 파일명

 

🚩 formatting: 코드의 스타일을 통일시켜 가독성을 높이고 버그를 예방

1. prettier 설정: [터미널] npm install --save-dev prettier
2. prettier 확장 설치
3. .prettierrc 파일 생성
4. { "semi": true, "singleQuote": true }
5. .vscode 폴더 생성, setting.json 파일 생성

{
    "[javascript]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

 

🚩 Linting: formatting에 가깝지만 더 많은 규약과 규율을 검사해주는 방법, 웹개발에서는 airbnb에서 사용하는 linting 규율이 유명함

1. ESLint 설치: [터미널] npm install --save-dev eslint
2. .eslintrc.js 파일 생성
3. module.exports = { extends: ['airbnb-base'], rules: { 'linebreak-style': 0, 'no-console': 'off', }, };
4. airbnb linting rule: [터미널] npm install --save-dev eslint-config-airbnb-base eslint-plugin-import

 

🚩 typescript 설치: [터미널] npm install --save-dev typescript

1. js 파일에 // @ts-check 주석 추가
2. [터미널] npm install --save-dev @types/node

 

🚩 간단한 node.js 서버 - main.js

// @ts-check
const http = require('http');

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.end('Hello');
});

const PORT = 4000;
server.listen(PORT, () => {
  console.log(`The server is listening at port: ${PORT}`);
});

---

🔎 JavaScript 실행 개념

1. JS의 메인 스레드는 명령어를 순서대로 call stack에 밀어 넣고, 쌓인 순서대로 명령어를 처리함
2. 명령어로 처리하는 와중 web api 또는 callback queue에 호출이 생기면 해당 영역으로 호출된 함수를 넣어줌
3. web api는 호출된 기능을 처리 완료하면 callback queue에 완료된 것을 넣어줌
4. callback queue는 call stack이 전부 비면, 이벤트 루프가 callback queue의 것을 call stack에 밀어넣어줌(tick)

 

🚩 callback

• 아무리 인터넷이 빨라도 비동기 방식인 JS는 서버의 응답을 받기도 전에 다른 코드를 수행하게 되고, 문제가 발생할 수 있음 => 특정 응답이 발생했을 때 코드를 실행하기 위해 callback 방식을 사용 => 코드 수행 순서를 JS 메인 스레드에만 의존하지 않아도 됨
• 그러나 코드 가독성이 좋지 않기 때문에 버그, 코드 유지보수 문제가 있음

 

🚩 promise: ES6에서 추가된 JS 문법

• new Promise로 새로운 생성자를 만들어서 사용
• promise가 생성되면 일단 작업을 실행하고 해당 작업이 완료 여부를 executor 매개변수(= resolve/reject)를 통해 전달
• resolve: 결과를 기다려야하는 코드가 수행 완료되면 작업이 완료되었음을 resolve로 전달, resolve가 실행되면 then으로 해당 결과를 받아서 처리
• reject: 비동기 작업이 실패했을 때 reject를 callback으로 전달, catch로 결과를 받아서 처리, 보통 Error라는 생성자를 사용
• finally: promise 코드의 성공 여부와 상관없이 무조건적으로 실행. then, catch와 함께 사용

const promise = new Promise((resolve, reject) => {
  console.log('Promise의 기능을 바로 수행합니다');
  setTimeout(() => {
    // resolve('작업 성공 시 결과를 resolve로 전달해줍니다');
    const userId = 'bulsok';
    if (userId === 'bulsok') resolve(userId);
    else reject(new Error('에러!'));
  }, 2000);
});
promise
  .then((value) => {
    console.log(`요청하신 ID는 ${value}`);
  })
  .catch((err) => {
    console.log(err);
  })
  .finally(() => {
    console.log('Promise 시퀀스 종료');
  });

 

🚩 Syntactic sugar

• promise도 여러번 연결되면 chain이 발생하므로 코드 가독성이 떨어지기 때문에 제공하는 것 => async/await
  • async: function 앞에 async를 붙이면 해당 함수는 항상 promise를 반환, 내부에 await 키워드 사용 가능
  • await: promise가 완전히 수행될 때까지 기다리는 역할, 기다리는 중에 cpu는 다른 일을 처리할 수 있기 때문에 리소스 낭비 없음