wecode 1주차_7일 TIL_fetch로 json 데이터 불러오기

let firstFunction = function() {
  return new Promise( // new를 안 써주면 Type Error가 뜨더라구요.
  function (resolve, reject){ //실행 되었을때, 안 되었을때가 인자로.. 
    resolve('나는 ') // 실행이 된다면 resolve 괄호 안의 함수가 뜸
  }
  )
}
console.log(firstFunction())

// 첫번째 함수와 이어지는 함수 만들려고 함
let secondFunction = function(dataFromFirstFunction) { 
  return new Promise( 
    function(resolve, reject){
      resolve(dataFromFirstFunction + '아직 배가 고프다')
    }
  )
}

console.log(secondFunction())

firstFunction().then(function(data){
console.log(data)})

firstFunction().then(function(data){
  console.log(secondFunction(data))
})

firstFunction().then(function(data){
  return secondFunction(data)
})

firstFunction().then(function(data) {
  return secondFunction(data);
}).then(function(data){
        console.log(data)
   })

fetch('./data/getAllTimeline.json')
.then((res) => {
  if (res.status === 200 || res.status === 201) { 
    res.text().then(text => console.log(text))
  }
  else {
    console.log(res.statusText)
  }
}).catch(err => console.log(err)) 

{
  "result": [
    {
      "contents": "도리를 찾아서~",
      "date": "19920601",
      "user": "Dory"
    },
    {
      "contents": "와플번트 진짜 맛있었는데 왜 사라진거지 너무 속상하다",
      "date": "20190327",
      "user": "Waffle"
    },
    {
      "contents": "예쓰! 우리는 모두 위코더 룰루~",
      "date": "20190729",
      "user": "Wecode"
    },
    {
      "contents": "아스트로에 차은우가 있다면, 위코드에는 내가 있쥐",
      "date": "20190323",
      "user": "Eunwoo Song"
    },
    {
      "contents": "누구보다도 예리한 감각을 자랑하는 프론트앤드 엔지니어는 누구~?",
      "date": "20190323",
      "user": "Yeri Kim"
    },
    {
      "contents": "아이스크림 드실분?",
      "date": "20190803",
      "user": "Jihun Park"
    },
    {
      "contents": "주말에는 냉방 시스템이 가동되지 않으니 이 점 참고하시기 바랍니다.",
      "date": "20190321",
      "user": "WeWork"
    }
  ]
}

function opening() {
  fetch('./data/getAllTimeline.json') // json파일이 있는 파일의 경로
    .then((res) => res.json()) // 데이터를 json형태로 바꿔주기
    .then(function (data) { // data라는 임의의 값을 인자로 받는 함수.
      let people = data.result; //json파일을 감싸는 객체가 result로 시작해서 data.result
      console.log(people) // people 콘솔을 찍어보면 {contents: "도리를 찾아서~", date: "19920601", user: "Dory"} 이러한 객체가 7개 나옴
      return people.map(function (person) { //people에서 contents,date,user를 뽑아내기 위해 map 사용
      // 이 아래는 html 틀 구현을 위해 쓴 식들
        let contents_wrap = createNode('div') 
        let name = createNode('button')
        let time = createNode('span')
        let doorit = createNode('div')
        contents_wrap.className = 'contents_wrap'
        name.className = 'doorits_id'
        time.className = 'time'
        doorit.className = 'doorits_contents'

        name.innerHTML += person.user
        time.innerHTML += `${String(person.date).split('').slice(0, 4).join('')}-${ String(person.date).split('').slice(4, 6).join('')}-${ String(person.date).split('').slice(6, 8).join('')}`
        doorit.innerHTML += person.contents

        append(contents_wrap, name)
        append(contents_wrap, time)
        append(contents_wrap, doorit)
        append(doorits_box, contents_wrap)

        doorits_box.prepend(contents_wrap)

        //원래 있는 트윗의 개수 불러오기!
        const sum_doorits = document.getElementsByClassName('sum_doorits')[0]
        const total_doorits = doorits_box.children.length
        sum_doorits.innerHTML = total_doorits;
      })
    })
    .catch(err => console.log(err))
}

const sum_doorits = document.getElementsByClassName('sum_doorits')[0](1번의 className)
const total_doorits = doorits_box.children.length //화면에 뜬 전체 트윗중 하얀부분의 개수(2번의 개수)
sum_doorits.innerHTML += total_doorits; (1번에 2번의 개수 넣기)