동기 & 비동기 과제 풀이

Hover·2023년 3월 20일
0

Javascript

목록 보기
4/6

0. 시작하기

node.js에서는 파일을 읽는 비동기 함수 readFile을 제공한다.

위 함수를 통해 callback과 promise, async,await 의 사용법을 익히는 과제다.

1. callBack.js

const fs = require("fs");

const getDataFromFile = function (filePath, callback) {
  // TODO: fs.readFile을 이용해 작성합니다
};

getDataFromFile("README.md", (err, data) => console.log(data));

module.exports = {
  getDataFromFile,
};

코드를 확인해보면, getDataFromFile이라는 함수를 구현하는 문제다.

"README.md" 읽기 파일과 err와 data를 params로 가지는 함수를 callback function으로 받고 있다.

module.exports는 다른 components에서도 사용할 수 있게 만들어주는 함수다.

filePath의 파일을 받아서 callbackfunction에 넣는 것이다.

readFile을 사용하면 된다.

fs.readFile(filePath,"utf-8",(err,data)=>{
  if(err){
    callback(err,null);
  }
  else{
    callback(null,data);
  }
});

callback함수는 각각 err,data를 받는다.
만약 에러가 발생 시 data는 전달되지 못하므로 null처리를 해준다.
따라서 err발생시 callback함수는 err,null을 전달받게 된다.

에러가 발생하지 않으면 반대로 null,data를 전달해주면 된다.

2.promiseConstructor.js

const fs = require("fs");

const getDataFromFilePromise = (filePath) => {
  // TODO
};
getDataFromFilePromise("README.md").then((data) => console.log(data));

module.exports = {
  getDataFromFilePromise,
};

이번 문제를 보면 getData...("README.md").then(callback)) 형태로
이루어져 있는 것을 볼 수 있다.

promise 뒤에 .then이 붙으므로 getDataFromFilePromise는 promise를 return 하는 함수인 것을 알 수 있다.

return new Promise((resolve, reject) => {
    fs.readFile(filePath, "utf8", (err, data) => {
      if (err) {
        reject(err, null);
      } else {
        resolve(data);
      }
    });

promise는 resolve하고 reject라는 두 함수를 매개변수로 받는 함수를 매개변수로 받는다.

그후 다음과 같은 작업을 한다

pending -> fullfilled or rejected

pending : promise가 resolve 될지 rejected 될지 대기하는 상태
fullfilled : 이행 상태(성공적)
rejected : 에러 발생

따라서 err가 발생하면 rejected가 되어야하고 err가 발생하지 않으면 resolve가 되어야한다.

3.basicChaining.js

const path = require("path");
const { getDataFromFilePromise } = require("./02_promiseConstructor");

const user1Path = path.join(__dirname, "files/user1.json");
const user2Path = path.join(__dirname, "files/user2.json");

// HINT: getDataFromFilePromise(user1Path) 및 getDataFromFilePromise(user2Path)를 이용해 작성합니다
const readAllUsersChaining = () => {
	//TODO
};

readAllUsersChaining();

module.exports = {
  readAllUsersChaining,
};

이번 문제는 두 파일을 합쳐서 두 객체가 담긴 하나의 배열을 return 하는 것이다.

user1Path,user2Path는 각각 정보가 담긴 json의 경로를 나타내준다.

다만 문제가 하나 있다.

return promise(user1Path) 시 리턴되는 데이터 then은 string형이다.
따라서 두 데이터를 배열로 바꿀 수 있는 방법은 JSON.parse를 사용하면 된다.

mdn에서의 json.parse는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성합니다 로 정의되어있다.

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);
// Expected output: 42

console.log(obj.result);
// Expected output: true

mdn에서의 예시
string형을 객체로 쓸 수 있게 만들어준다.

  let arr;
  return getDataFromFilePromise(user1Path)
    .then((data) => {
      console.log(typeof data);
      arr = data;
      return getDataFromFilePromise(user2Path);
    })
    .then((data) => {
      return JSON.parse(`[${arr},${data}]`);
    });

따라서 위와 같이 arr이라는 변수에 string형으로 모두 담아 json.parse로 return시키면 된다.

4. promiseAll.js

4번 문제는 3번과 똑같지만, then-chain 형식이 아닌 Promise.all을 사용한다.

const readAllUsers = () => {
  // TODO: Promise.all을 이용해 작성합니다
  return Promise.all([
    getDataFromFilePromise(user1Path).then((data) => JSON.parse(data)),
    getDataFromFilePromise(user2Path).then((data) => JSON.parse(data)),
  ]).then((data) => {
    return data;
  });
};

string 형식의 data를 모두 객체로 변환한 위 한 배열에 담았다.

profile
프론트엔드 개발자 지망생입니다

0개의 댓글