26일차~(async and promise 과제)

이번주 과제는 전부 아리송하다.... 금방 이해가 되지 않아서 그런듯 하다..... 그 당시에 보면서 이해를 해도 막상 문제에 도달하면 잘 모르겠다. 이것이 메타인지인 것인가.... 하지만 과제를 진행하면서 이해가 되기 시작한것 같다. 어제부터 오늘까지 async and promise 과제를 진행했는데 어떻게 에러를 수정했고 완성했는지 다뤄볼 예정이다.

 

먼저 part1은 코드스테이츠에서 알려준데로 따라하는 튜토리얼이었다. 이 부분이 2시간이길래 '왜 튜토리얼인데 이렇게 길지?'라는 생각이 먼저 들었지만 이 part1에서 코드하나하나 확인하며 이해하면서 진행하다보니 주어진 시간을 다 쓰게 되었다. 문제는 part2 3번째 basicChaining이었다. 처음에 불러와서 어떠한 형식으로 불러와지는지도 몰라서 더욱 어려웠다. 데이터의 형태도 파악을 못했고 기존에 사용했던 specRunner를 오픈라이브서버로 실행시켜 테스트를 진행했던것과는 달리 터미널에서 테스트를 진행했어야해서 테스트창도 보기 힘들었다 솔직히 JSON.parse쓰는것도 동기분들이 쓴다는 것을 주워들어서 사용한것 뿐이다. promise의 메소드인 then또한 이해하지 못한 상태에서 진행했다.

 

먼저 파일을 읽기 위해 파일시스템 모듈인 fs를 이용하여 파일을 읽는 비동기 함수을 만들어 줬다.

const fs = require("fs"); //파일시스템 모듈 불러오기 


const getDataFromFilePromise = filePath => {
  return new Promise((resolve, rejects) => {
    fs.readFile(filePath, 'utf-8', (err, data) =>{
      if(err) {
        rejects(err);
      }else{
        resolve(data);
      }
    })
  })
};

위의 함수를 이용하여 user정보가 들어있는 파일을 읽어와서 배열의 형태로 묶어 반환하는 것이 이번 문제였다. 처음에는 전혀 갈피를 못 잡다가 '데이터 값이라도 찍어보자!' 해서 파일을 읽어서 어떤 형식으로 들어오나 출력해보았다.

const readAllUsersChaining = () => {
  return getDataFromFilePromise(user1Path) // user1의 정보가 들어있는 파일 읽는 함수
}

/*"{
      \"name\": \"김코딩\",
      \"age\": 26,
      \"sex\": \"Male\",
      \"company\": {
        \"name\": \"코드스테이츠\"
      }
    }"*/

출력된 값은 주석 처리된 것처럼 객체처럼 생긴 문자열이었다. 처음에는 문자열인지도 몰랐고 객체인줄 알았다. 그래서 객체 두개를 합하면 되겠지 생각했다.

const readAllUsersChaining = () => {
  return getDataFromFilePromise(user1Path)
  .then((data)=>{
    let a = getDataFromFilePromise(user2Path)
    return [data, a]
  })
}

/*['{
      \"name\": \"김코딩\",
      \"age\": 26,
      \"sex\": \"Male\",
      \"company\": {
        \"name\": \"코드스테이츠\"
      }
    }', Promise{}]*/

 user1의 정보를 읽은 결과 값을 then의 콜백함수의 인자인 data에 받아주고 user2의 정보를 읽은 값을 변수에 할당하여 배열을 감싸 반환했다. 결과 값은 아래와 같이 이상했다...test도 통과가 안됐다. 왜 안될까라는 생각을 하면서 코드를 보고있다가 이때 문자열 형태라는 것도 알게 되었고 동기분들이 JSON을 사용하는걸 보게 되었다. 전혀 생각하지 못했다.... 그래서 JSON을 출력해보기로 했다.

const readAllUsersChaining = () => {
  return getDataFromFilePromise(user1Path)
  .then((data)=>{
    return JSON.parse(data)
  })
}

//{"age": 26, "company": {"name": "코드스테이츠"}, "name": "김코딩", "sex": "Male"}

그러자 이제 제대로 객체가 출려되는 것을 볼수 있었다. 그래서 바로 아까 썼던 코드에 JSON을 넣어 출력 해보았다.

const readAllUsersChaining = () => {
  return getDataFromFilePromise(user1Path)
  .then((data)=>{
    let a = getDataFromFilePromise(user2Path)
    return JSON.parse(`[${data}, ${a}]`)
  }) 
}

//SyntaxError: Unexpected token o in JSON at position 94 at JSON.parse (<anonymous>)

잘 될 것이라는 예상과는 달리 JSON을 사용한 곳에 에러가 발생했다. 구글링을 해보니 JSON의 형태가 아닐때 발생하는 에러라고 했다. 처음에는 물음표 투성이었다. '아니! user1을 했을때는 됐잖아요!' 그래서 user2만 출력 해보기로 했다.

const readAllUsersChaining = () => {
  return getDataFromFilePromise(user1Path)
  .then((data)=>{
    let a = getDataFromFilePromise(user2Path)
    return JSON.parse(a)
  }) 
}

//SyntaxError: Unexpected token o in JSON at position 94 at JSON.parse (<anonymous>)

똑같이 에러가 발생했다. 다시 user1을 출력해 보았다.

const readAllUsersChaining = () => {
  return getDataFromFilePromise(user1Path)
  .then((data)=>{
    let a = getDataFromFilePromise(user2Path)
    return JSON.parse(data)
  }) 
}

//{"age": 26, "company": {"name": "코드스테이츠"}, "name": "김코딩", "sex": "Male"}

객체인 값이 잘 나오는 것을 확인했다 그래서 user2를 읽어오는 함수가 잘못 되었나라는 생각이 들어 user1의 함수위치와 user2의 함수위치를 바꾸어 user2를 출력해보았다.

const readAllUsersChaining = () => {
  return getDataFromFilePromise(user2Path)
  .then((data)=>{
    let a = getDataFromFilePromise(user1Path)
    return JSON.parse(data)
  }) 
}

//{"age": 40, "company": {"name": "Anonymous"}, "name": "박해커", "sex": "Female"}

위치를 바꾸니 user2의 정보 또한 출력이 잘 되었다. 무엇이 다른가 생각을 해보았더니 return을 한 것과 안 한것의 차이였다. 그래서 반환을 한번 더 해주고 then을 한번 더 사용하여 작성했다. 지금은 첫번째 then안에 들어간 반환 값을 두번째 then에 들어간 반환 값에 사용할수 있다는 것을 알고 있지만(실시간세션때 크루분께서 설명하는거 보고 알았음.) 이때는 몰라서 전역변수를 선언해주고 그 변수 안에 할당을 해서 사용했다.

const readAllUsersChaining = () => {
  let a;
  return getDataFromFilePromise(user1Path)
  .then((data)=>{
    a = data
    return getDataFromFilePromise(user2Path)
  })
  .then((data)=>{
    return JSON.parse(`[${a}, ${data}]`)
  }) 
}

//[{"age": 26, "company": {"name": "코드스테이츠"}, "name": "김코딩", "sex": "Male"}, {"age": 40, "company": {"name": "Anonymous"}, "name": "박해커", "sex": "Female"}]

주석과 같이 결과 값이 나왔는데 두개의 user 정보가 배열에 묶여서 반환되게 원한는데로 나온 것을 볼 수 있었고 test 또한 통과했다.

 

이후 한 시간도 걸리지 않아서 part2의 모든 문제를 풀수있었고 part3 또한 많이 어렵진 않았다.