본문 바로가기

openweathermap3

[Javascript] 날씨에 따라 배경 이미지 변경하기 openweathermap 으로 얻어진 날씨 정보에 따라 배경 이미지를 변경하는 방법을 알아보자! 활용할 값을 변수에 담아주기 먼저 날씨 정보 중 내가 사용할 온도와 날씨 정보를 변수에 담아 저장하자. const temp = result.main.temp; const weather = result.weather[0].main; 날씨 정보 한글로 변환하기 weather는 날씨에 따라 Clear, Rain, Mist 등으로 표현된다. 나는 영어가 아닌 한글로 화면에 정보를 나타내고 싶어서 얻은 결과값을 weatherValue에서 찾아 한글로 변환할 수 있도록 코드를 작성했다. const weatherValue = { Clear: "맑음", Rain: "비", Thunderstorm: "뇌우", Snow: ".. 2023. 5. 20.
[Javascript] geoloaction으로 내 위치 가져오기 이번에는 Geolocation API 를 이용해서 내 위치 정보를 가져오고, 그 다음에 내 위치의 날씨 정보를 가져올 것이다. Geolocation API 사용하기 - Web API | MDN Geolocation API는 사용자의 현재 위치를 가져오는 API로, 지도에 사용자 위치를 표시하는 등 다양한 용도로 사용할 수 있습니다. 이 글에서는 Geolocation API의 기초 사용법을 설명합니다. developer.mozilla.org 사용자의 현 위치 가져오기 : getCurrentPosition 매서드 사용자의 현재 위치는 getCurrentPosition() 메서드를 호출해서 가져올 수 있습니다. 이 메서드는 사용자의 위치를 탐지하는 비동기 요청을 시작하고, 위치 관련 하드웨어에 최신 정보를 요.. 2023. 5. 19.
[Javascript] JSON과 open weather map API : 날씨 정보 가져오기 에고공 요새 자전거를 타느라 바빠서 블로그에 신경을 못 썼다. 오랜만에 글을 쓴다. 큐큐 코드를 작성할 때 통신 기능을 구현하는 경우가 많기 때문에 API 이해도가 높아야 한다. 그래서 open weather map API를 활용하면서 JSON 데이터를 다루는 법을 공부해보려고 한다. JSON 이란? JSON은 Javascript Object Notation의 줄임말이다. JSON은 문자 기반의 데이터 교환 형식이다. typeof 로 JSON의 데이터 타입을 확인하면 string이 나온다. JSON의 구조는 객체 리터럴 작성법을 따르기 때문에 마치 객체처럼 생겼다. 하지만 객체와 달리 키에 꼭 큰따옴표가 있어야 하며, 값에도 꼭 작은 따옴표가 아닌 큰따옴표를 사용해야 한다. 그리고 데이터를 교환하기 위해.. 2023. 5. 18.