fix: asynchronous API call + minor feature and bug fix

[olenmg]

Summary

• Asynchronous API call이 가능하도록 API 호출 부분 모두 async/await으로 변경
• Main page 카드 center align 안되던 버그 수정 (id가 잘못 써져있었음)
• Popular place에 대한 Local storage 구성 추가

Describe your changes

이제 index.html 접속 시 자동으로 localStorage에 popular place에 대한 정보를 넣습니다. key는 congestionPopular이고, lastUpdatedAt으로 마지막 업데이트 시간을 확인합니다.

예시

localStorage.getItem("congestionPopular")

[
  {
      "status": {
          "code": "00",
          "message": "success",
          "totalCount": 1
      },
      "contents": {
          "poiId": "10067845",
          "poiName": "더현대서울",
          "rltm": {
              "congestion": 0.00063,
              "congestionLevel": 1,
              "datetime": "20221130021000"
          }
      }
  },
  {
      "status": {
          "code": "00",
          "message": "success",
          "totalCount": 1
      },
      "contents": {
          "poiId": "497342",
          "poiName": "인천국제공항제1여객터미널",
          "rltm": {
              "congestion": 0.00139,
              "congestionLevel": 1,
              "datetime": "20221130021000"
          }
      }
  },
  ...생략
]

코드에 작성해두었지만 async 함수 호출 시 비동기 처리가 완전히 완료되지 않으면 함수가 Promise를 반환할 수 있기 때문에 async 함수 호출 시에는 아래와 같이 .then()을 써주세요.

getPopularPlaceCongestions().then(console.log);
getPopularPlaceCongestions().then((data) => console.log(data));
...

그 외에 card-list id가 잘못 명시되어 있어서 해당 부분 수정하고 center align 가능하도록 바꾸었습니다.

검색 기능은 곧이어 PR 올릴게요.

Issue number and link

22

[olenmg]

@JackCokebb 우선 추가해야할 script 파일이 아직 남아서 그냥 js 파일 맨 아래에 함수 실행하는 방식으로만 해뒀습니다. html에서 javascript 여러 개를 불러올 때, 모든 js 파일에서 각자 onload listener 실행하면 안될 것 같아서요. 나중에는 index.js 를 둬서 여기서 필요한 걸 다 load 해야할 것 같은데 이렇게 하면 괜찮을까요?

[JackCokebb]

index.js에서 page_load.js에 있는 함수를 호출하게끔 하신다는 말씀이신가요? 그럼 page_load.js는 index.html에만 묶이는 js파일이 아니고 API호출 용 js 파일로써 사용하는건가요??

[olenmg]

@JackCokebb 음.. 근데 생각해보니까 그냥 page_load.js에서 해도 될 것 같은데.. 잘 모르겠네요. 준현님 생각하시기에 좋은 방법으로 하죠. 제가 잘 아는게 아니라서 제가 결정하는 것보다는 준현님 따라가는게 좋을 것 같습니다.

[olenmg]

@JackCokebb 아 그리구 search.js 함수 사용하려면 html에서 search.js도 명시를 해둬야해서 API_KEY랑 PROXY 같은 경우 search.js에서도 page_load.js에서 선언해둔 것을 사용할 수 있는데, 이런거는 data.js와 같은 파일을 둬서 거기에 popular place나 address 목록이나 이런거 넣어두면 좋을 것 같은데 이건 어떻게 생각하시나요?

[JackCokebb]

저도 뭐가 더 좋을지 헷갈리네용,,, 근데 아무래도 index.html 페이지에서 필요한 API는 popular place에 대한 실시간 혼잡도만 불러오면 되는데 page_load.js에는 API 호출 전부 다 들어있어서

이걸 분할하던지 아니면 page_load.js는 API 호출용 js파일로 쓰고 다른 js 파일에서 불러다 쓰는 방법이 있을 거 같아요

더 좋은 방법 혹시 생각나는게 있으신가요??

[JackCokebb]

@olenmg data.js와 같은 파일을 둬서 거기에 popular place나 address 목록이나 이런거 넣어두는게 더 좋은 방법인것 같습니다!

[olenmg]

@JackCokebb 말씀하신대로 파일 분리하는 방법으로 하고, main_load.js와 detail_load.js 로 분리하는 방법도 좋을 것 같아요. 각자 담당하는 page를 load 하는 방식으로요!

[JackCokebb]

넵 그럼 일단은 page_load.js는 두고 파일 분리 끝나면 삭제하는 걸로 할까요???

[olenmg]

@JackCokebb 네 그렇게 하면 될 것 같습니다