[220604] TIL

릿·2022년 6월 4일

TIL 원티드프리온보딩프론트엔드스쿨

TIL

목록 보기

26/28

📃 삽질일지

💬 잡소리

진짜 코딩은 마약같다... 프로젝트 자체를 끝내지 않으면 이렇게 할까? 저렇게 할까? 생각한다고 잠을 못 자겠다ㅠㅠ
오늘 부디 끝내기를...

📔 개인과제

디버깅 9: api가 여러번 호출되는 부분 수정

1. isLoading -> readMore로 수정

isLoading을 readMore로 바꾸고
api를 호출할 때 readMore을 true로
setTimeout이 실행되서 page가 ++되면 readMore을 false로
clearTimeout이 실행되면 readMore을 true로 바꾸니

이렇게 제대로 나온다ㅠ 이제 진짜 무한스크롤의 무한디버깅(?) 끝!

1. 로고디자인 하기

오랫만에 일러를 켰는데 너무 오랫만이라 잊어버리고 있었던 게 있다.
일러랑 포토샵은 10분에 한번씩 저장해야한다는 거, 아니면 날아간다는거...

시안에 대한 자세한 설명은 생략한다...ㅋ

2. 소요시간 API정제

...오래걸릴 것 같은 느낌에 손이 선뜻 안간다...ㅋㅋ
그래도 해야해ㅠㅠ 핵심기능이잖아...

그렇다. 내가 이 웹을 만들게 된 이유. 나같은 등산 초보자들이 쉽게 도전할만한 오름을 볼 수 있는 사이트를 만들기 위해서였다. (아마 그랬던 것 같다)

생각해보니까 매번 api를 호출할 필요가 없는게 매번 바뀌는 값도 아니고 거의 몇 천개 이상이 중복인데다가 매번 사이트에서 20만개나 되는 api를 불러와서 같은 오름들 전부 더해서 갯수만큼 나눠서 평균시간을 구하는 건 말이 안된다.

그럼, api를 전부 불러와서 json파일에 저장하는 방법을 찾아보자.

3. csv파일을 json파일로 변환하기

공공데이터포털에는 api를 csv파일로 저장할 수 있었다.

그리고 이런 사이트가 있길래 이용해보기로 했다.

위 사이트는 잘 안되서 https://cdkm.com/kr/csv-to-json 여기서 변환했다.

이렇게 가져와짐! 용량이 너무 크니까 정제를 해보자.

4. 데이터 정제하기

filter함수를 써서 측정시간과 위치정보만 빼와서 새로운 배열을 만들었다.

짠! 잘 나옴.

그럼 이제 같은 이름을 가진 애들의 time의 평균값을 내야하는데...
시간의 평균값을 내는 방법이 있나?

...생각해보니까 초보자들이라면 최대시간 기준으로 보여주는 게 나을 것 같아서 각 오름당 최대시간을 구해서 반올림해서 보여주면 될 것 같다.
평균 9분 50초 걸림보다, 평균 10분 걸림이 낫지 않을까?
(쉽게 쉽게 가자...)

그럼 time을 필터할 때 문자열을 앞에 두자리만 slice해서 가져와서 number로 저장하면 될 것 같다!

return { time: Number(item.측정시간.slice(0, 2)), name: item.위치정보 }

오우 좋았어! 그럼 각 오름당 time최대값만 배열로 만들어 보자.

const maxValueData = filterData.reduce((prev, current) => {
  return prev.time > current.time ? prev : current
})

이렇게 하니까

20만개 데이터 중에서 제일 긴 시간이 이건가보다.

reduce함수에 대해서 조금 더 알아보자.
배열을 순회하면서 하나의 결과값만 저장한다고?
흠...그럼 이름이 같은 오름을 배열로 빼내서 reduce함수로 최대값을 구하고 새로운 배열에 push해 넣는 방식을 하면 될 것 같다.

음... 방법을 모르겠다.
조금 생각을 바꿔서, 20만개의 데이터 중에 중복을 다 뺀 name을 배열에 저장하고, 배열을 순회하면서 해당값의 최대값을 다시 배열에 저장하면 될 것 같다.

const climbingTimeArr = data.map((item: IOreumTimeAPIRes) => {
  return { time: Number(item.측정시간.slice(0, 2)), name: item.위치정보 }
})

const filterNameArr = climbingTimeArr.filter((item: IClimbingTime, i) => {
  return (
    climbingTimeArr.findIndex((item2) => {
      return item.name === item2.name
    }) === i
  )
})

let result: IClimbingTime[] = []

for (let i = 0; i < filterNameArr.length; i += 1) {
  const tmpArr = climbingTimeArr
    .filter((item) => {
      return filterNameArr[i].name === item.name
    })
    .reduce((prev, current) => {
      return prev.time > current.time ? prev : current
    })

  result.push(tmpArr)
}

이렇게 하니까

성공했다! 근데...생각보다 오름이 너무 없는데?
몇개나 매칭되는지 확인해봐야겠다.