콜택시 불러줘 ~~(약속해줭)

야 나 개 ·2021년 10월 28일

Map filter reduce 콜백함수

프로그래밍 관련 용어 정리

목록 보기

5/13

택시좀 불러줘~~
카카오? 우버? 뭐든 빠른걸로
(뭔소리 입니까?...)

택시를 부르기 위해 우린
카카오를 켠다.
카카오에서 택시를 부른다.
택시에서 지갑을 연다.
카드를 긁는다.

이런 순차적인 개념을 생각하고 시작하자.

개념

콜백함수는

함수 안에 다른함수를 호출된 함수 그 함수를 콜백함수라고 합니다.

function 첫째함수(콜백){
  console.log(1);
  콜백();
}

function 둘째함수(){
  console.log(2)
}

첫째함수(둘째함수);

첫째함수(function(){
  둘째함수(function(){
    셋째함수(function(){
      어쩌구..
    });
  });
}):

이렇게 쓰는건데

Array.map()
Array.filter()
Array.reduce()
Array.forEach()

이미 내장된 함수가 있음

함수 속에서 다시 리턴해서 이 함수를 불러오면 굳굳~~

저 위에 함수 사용법은 문제풀이로 보여줄께

지금은

Node.js 내장 모듈 사용

Node.js 공식문서

1단계

자바스크립트 상단에 require 구문을 사용해서 불러와야함 !

const fs = require('fs'); // 파일 시스템 모듈을 불러옵니다
const dns = require('dns'); // DNS 모듈을 불러옵니다

추가적으로 공식문서에 없는 모듈은
3rd-party를 설치 해야한다.

예를 들어 underscore를 사용하려면 설치해야한다.

npm install underscore

이제 순차적인 콜백함수를 개념을 익혀보자

2단계

callback 함수 만들기

const fs = require("fs");

const getDataFromFile = function (filePath, callback) {
  fs.readFile(filePath, "utf8", function (err, file) {
    if (err) {
      callback(err, null);
    } else {
      callback(null, file);
    }
  });
};

위에 처럼 꼭 써야한다. (뭐 규칙이다.. 외워라)
자세한 내용은 공식문서에 있음 ㅋㅋㅋ

설명을 굳이 하잖면 읽지도 않겠지만.

함수를 하나 만들어서 변수에 담에 계속 사용할꺼야
파일시스템

Promise 만들기

new Promise만들기는
링크 해둘께 한번 보고 왕
프로미스만들기

const getDataFromFilePromise = filePath => {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, "utf8", function (err, file) {
      if (err) {
        reject(err);
      } else {
        resolve(file);
      }
    });
  });
};

3단계

basicChaning 방법

콜백 순차적으로 함수가 돌아가게 해야해
근데 함수 밖에 변수를 만들어서 결과를 리턴하면
사이드이펙프가 발생할 수 있어!!! 명심해

그래서 정말 직관적으로 순서대로 차근 차근 작성

-bad case-

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');

//basicChaning
const readAllUsersChaining = () => {
  // TODO: 여러개의 Promise를 then으로 연결하여 작성합니다
  let result = [];
  return getDataFromFilePromise(user1Path)
   .then((data1)=>{
     result.push(JSON.parse(data1));
     return getDataFromFilePromise(user2Path);
    })
    .then((data2) => {
      result.push(JSON.parse(data2));
      return result;
    })
}

-good case-

const readAllUsersChaining = () => {
  return getDataFromFilePromise(user1Path)
    .then((user1) => {
      return getDataFromFilePromise(user2Path).then((user2) => {
        return '[' + user1 + ',' + user2 + ']';
      });
    })
    .then((text) => JSON.parse(text));
};

Promise.all 방법

앞서 본건 순차적으로 동기적인 방법인데

promise.all은 전부 실행시켜주지롱

많은 데이터를 불러올때는 이 방법이 정말 좋아

1.진짜로 리턴하고 싶은것을 쓰고
2.then을 사용해서 연결하는거지.

나쁜게 눈에 잘 들어올꺼야.. ㅋㅋㅋㅋ
그래도 좋은방향으로 사용하자

-bad case-


const readAllUsers = () => {
  // TODO: Promise.all을 이용해 작성합니다
  const data1 = getDataFromFilePromise(user1Path).then(data1 => JSON.parse(data1))
  const data2 = getDataFromFilePromise(user2Path).then(data2 => JSON.parse(data2))


return Promise.all([data1 ,data2])

}

-good case-

const readAllUsers = () => {
  return Promise.all([
    getDataFromFilePromise(user1Path),
    getDataFromFilePromise(user2Path),
  ])
    .then(([user1, user2]) => {
      return '[' + user1 + ',' + user2 + ']';
    })
    .then((text) => JSON.parse(text));
};

async / await 방법

new Promise .then 방법 대신

async / await 방법도 있어 .

이름만 좀 다르고 같은 기능을 하지 ~~

-bad case-

const readAllUsersAsyncAwait = async() => {
  // TODO: async/await 키워드를 이용해 작성합니다
  const data1 = await getDataFromFilePromise(user1Path).then(data => JSON.parse(data));

  const data2 = await getDataFromFilePromise(user2Path).then(data => JSON.parse(data));

  return [data1, data2];

}

-good case-

const readAllUsersAsyncAwait = async () => {
  let user1 = await getDataFromFilePromise(user1Path);
  let user2 = await getDataFromFilePromise(user2Path);

  let text = '[' + user1 + ',' + user2 + ']';
  let json = JSON.parse(text);
  return json;
};