[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 18일차 - JS로 날씨 API 불러오기, JS로 투두리스트 만들기
목차
과제 내용
1. JS로 날씨 API 불러오기
2. JS로 투두리스트 만들기
과제 결과
투두리스트 추가하고 삭제하기최종 완성본
느낀점 및 후기
날씨 API를 불러오는 실습은 지난 시간에 한 번 해보았고(자세한 방법은 지난 블로그에 작성했으므로 확인해보길 바람. https://judidev.tistory.com/50), 실제 온도와 지역을 불러오는 것은 어렵지 않았다.
날씨 api를 불러오는 과정에서 환경변수를 만드는데 오랜 시간이 들었다.
js 파일을 따로 생성하고 js 파일만 script로 읽어서 불러오기 위해서 외부의 파일을 weather.js로 import를 시도했다. 하지만 import와 export가 되지 않아 확인을 해보니, 해당 파일에 'type=module'이 없기 때문이었다.
<script type="module" src="./apikey.js"></script>
<script type="module" src="./weather.js"></script>
// import, export하는 것은 꼭 type=module을 적어주자.
react는 내부에 모듈 시스템이 있기 때문에 별도의 이런 작업이 필요 없었지만 js에서는 import와 export, 즉 외부 파일로 전달하고 입력받기 위해서는 반드시 스크립트에 'type = module'을 적어주어야한다는 것을 명심하자.
그리고 또 다른 부분에서 명심해야할 점은 OpenWeather에서 제공하는 오픈 API의 temp는 실제 우리가 사용하는 섭씨 온도의 temp가 아니다. 그러므로 우리가 아는 섭씨 온도로 변경해주기 위해서는 API에서 제공하는 temp 값에서 273.15를 빼고 toFixed 메소드를 이용하여 소수점 한 자리까지만 보이도록 제어했다.
