22.04.13 수

블로그에 글을 올리는 것에 회의가 살짝 들어서 느슨해졌습니다.

공부한 것을 기록하기 위함이라지만 사실 내 자신이 꾸준히 공부했다는 것을 누군가에게 보여주기 위해서 작성하는 것이기도 합니다. 그렇다보니 지치게 되는 것도 있는 것 같습니다.

이 글이 과연 내게 도움이 될까?

이런 생각이 드는 것이죠.

 

그럼에도 돌아온 것은 오늘 하루를 정리해본다는 마음으로 글을 썼던 적도 있기 때문입니다.

 

그래서 어제 공부했던 것을 정리해보도록 하겠습니다.

 

이번주에는 async와 await, 이것을 활용한 API 호출, nodes.js, npm 을 공부해보았습니다.

 

1. async & await

async와 await은 비동기 처리를 동기적으로 처리할 수 있게 해줍니다. async를 함수 앞에 붙이게 되면 Promise를 반환하게 되고 그것을 우리가 then으로 받아 사용할 수 있게 됩니다. 하지만 이 경우 await을 활용하면 코드를 단축할 수 있게 됩니다. 또한 await은 async안에서만 사용이 가능합니다.

function delay (ms) {
  return new Promise((resolve) => {
    setTimeout(() => {
        resolve();
             }, ms);
       });
}

async function helloAsync() {
  return delay(3000).then(() => {
    return "hello Async";
  });
}

// async 함수 코드를 await으로 줄일 수 있다.

async function helloAsync() {
  await delay(3000);
  return "hello async";
}

 

 

2. API 호출

1. CLIENT(클라이언트)가 SERVER(서버)에 데이터를 '요청'(Request)한다.
2. 서버가 주문받은 요청을 들어주기 위해 '데이터 검색(또는 '질의')'(Query)한다.
3. DATABASE(DB)에서 원하는 데이터를 찾아서 서버에게 넘겨준다(Query Result)
4. 서버가 클라이언트에게 요청 데이터를 전달, 응답한다(Response)

이 중 우리가 작업할 것은 1, 4이다. 

클라이언트와 서버 사이에서 요청하고 전달받는 과정을 'API 호출'이라 한다.

결국 API 호출은 데이터를 받기 위해서이다. 그런데 문제는 우리가 응답을 언제 받을지 알 수 없다. 언제까지 기다릴 수 없기 때문에 Proimse를 이용해 비동기적으로 받는다.

API 사용 예시

//fetch: api 호출을 할 수 있도록 도와주는 JS 메서드

async function getData () {
  let rawResponse = await fetch('주소')
 let jsonResponse = await rawResponse.json();
 console.log(jsonResponse);
}

getData(); // json 형태의 데이터가 출력된다.

 

3. node.js

자바스크립트는 HTML 내에서 밖에 사용하지 못했으나 브라우저 상의 JS엔진을 떼어 따로 만들어 HTML 밖에서도 구동할 수 있도록 한 것이 바로 node.js이다. 이를 통해 우리는 웹 밖에서도 다양한 작업을 JS로 할 수 있게 되었다.

각 기능별로 파일에 코드를 작성한 것을 "모듈"이라고 한다. (ex. 로그인 기능, 검색 기능 등...)

모듈에 있는 기능이나 함수는 module.exports와 require를 사용해 주고 받을 수 있다.

// node.js에서 module.exports로 객체 단위로 내보낼 수 있다.
// calc.js 파일의 코드
const add = (a, b) => a + b
const sub = (a, b) => a - b

module.exports = {
  moduleName: "calc module",
  add: add,
  sub: sub,
};

// index.js의 코드
const calc = require("./calc");

console.log(calc.add(1, 2)); // 3
console.log(calc.add(4, 5)); // 9
console.log(calc.add(10, 2)); // 8

node.js에서 module.exports로 보낸 객체를 경로와 require를 이용해 가져올 수 있다. 이때 require과 exports는 node.js의 내장함수이기 때문에 바닐라 JS에서는 사용할 수 없다 require과 exports를 사용하는 모듈 시스템은 node.js가 기본적으로 제공하는 Common JS이다.

 

node.js를 설치하면 package.json이라는 파일이 생기며 패키지와 관련된 정보(라이센스, 버전 등등..)이 적혀있다. 그 중 main은 여러 개의 파일 중 이 패키지를 실행할 때 어떤 파일을 실행해야하는지를 명시한다. 

script는 패키지를 개발하면서 자주 실행해야하는 명령어를 사전으로 정의하는 곳으로 이를 통해 긴 명령어를 짧고 쉽게 바꾸거나 추가할 수 있다.

 

4. npm

npm이란 node package Manager의 약자로 node.js의 패키지 관리 도구이다.

vscode에서 npm init으로 간단하게 설치할 수 있다.

패키지를 설치하면 package.json에 dependencies라는 새로운 항목이 생긴다. 이 안에는 설치한 외부 패키지 이름과 버전이 기록된다.

^는 뒤에 적힌 버전 이상으로 설치가 되었음을 알려준다. 또한 파일 목록에 node_modules 폴더와 package-lock.json파일이 생겨난다.

node_modules는 외부 패키지의 파일이 들어오게된다. 즉 외부 패키지 보관소 같은 곳이다.

package-lock.json은 설치된 패키지 버전을 정확히 보여준다 그래서 ^가 없다.

외부 경로에서 다운받은 패키지를 사용할 때 require 주소에 경로를 적을 필요가 없다. 알아서 node_module에서 가져오기 때문이다.

npmjs 사이트에 들어가면 외부 패키지를 이용할 수 있다. 그 중 우리는 randomColor를 설치해서 다음과 같이 사용할 수 있다.

install대로 터미널에 입력하면 설치된다

설치 후 다음과 같이 코드를 입력해서 사용이 가능하다.

const randomColor = require("randomcolor");

console.log(randomColor());

 

여기까지 공부한 내용입니다.