[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <weather.js>

export function initializeWeather() {
  const weather = document.querySelector("#weather span:first-child");
  const city = document.querySelector("#weather span:last-child");
  // HTML에 각 JS 객체 연결
  const API_KEY = "-";
  // OEPN API 고유 키값 (- 자리에는 개인의 키 값 연결 필요) 선언 (가독성을 위해 이렇게 함)

  if (!weather || !city) {
    console.error("Weather or city element not found in DOM");
    // 에러일 경우 에러값 콘솔 메시지로 출력하게 하기
    return;
  }

  function onGeoOk(position) {
    const lat = position.coords.latitude;
    // OPEN API 의 위도 객체 선언
    const lon = position.coords.longitude;
    // OPEN API 의 경도 객체 선언
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;
	// OPEN API 연결

    fetch(url)
    // fetch : 데이터를 가져온다
    // fetch(url) : url은 위에서 정의한 원본 URL과 동일
    // fecth의 경우 시간이 다소 걸리는 편이므로 Promise, 약속 객체를 반환한다
    // Promise란 비동기 작업 결과를 처리하기 위한 JS 객체 해석이 약속이라 되는 만큼 성공하던 실패하던 결과를 줌
    // Promise를 사용하는 틀은 유동적이지만 then과 많이 쓰임
      .then((response) => response.json())
    // 날씨 정보를 받아온 이후에 실행할 내용, response는 Promise 즉 fetch(url)에서 약속한 값인데 서버 응답 결과이다 
    // response.json() : 서버에서 반환된 서버 응답 결과는 사람이 사용하는 방식이 아닌 JS 문자 방식 데이터인데 이를  브라우저에서 바로 사용할 수는 없고 JavaScript 객체로 변환해야 활용이 가능하다 여기서 JS 객체로 변환해주는 역할이다
    // json은 자바스크립트 객체 표기법이라 해석되며 문자 기반 데이터 교환 표준이다, 텍스트 기반이기 때문에 다양한 언어에서 사용이 가능하다
      .then((data) => {
    // => : 화살표 함수
    // ‘(매개변수) => 실행 후 반환값’ 형태라 볼 수 있다
    // 화살표 함수는 매개변수가 하나일 경우 return을 생략할 수 있다
    // 서버에서 컴퓨터 입장의 날씨 데이터를 받아왔다면 이를 json을 통해 가공해 웹브라우저에서 사용할 수 있게 만든다
    // 웹 브라우저에서 사용할 수 있게 가공된 데이터는 data로 표현한다
    
    // 초반에 city와 weather를 각 span에 할당했는데
    // 이제 각각 .innerText를 사용해 HTML에 값을 넣어준다
        city.innerText = data.name;
    // data.name으로 API 응답에서 도시 이름을 가져오고
        weather.innerText = `${data.weather[0].main} / ${data.main.temp}°C`;
    // data.weather[0].main는 현재 날씨 상태, data.main.temp는 현재 온도다
    // 값을 가져올 때 사용하는 name, weather 등의 출처는 https://openweathermap.org/api/one-call-3 ← API를 받아온 사이트에 나와있다
      })
      .catch((error) => {
        console.error("Error fetching weather data:", error);
    // 오류를 콘솔 창에 띄우기
      });
  }

  function onGeoError() {
    alert("Can't find your location. Please enable location services.");
    // 오류를 콘솔 창에 띄우기
  }

  navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);
  // HTML5 Geolocation API 메서드로 사용자의GPS, Wi-Fi, IP 주소 등을 기반으로 한다고 한다 현재 위치(위도와 경도 등)를 브라우저를 통해 가져오는 기능이다
  // 바로 아래 상세 설명
}

 

위에서 바로 아래에 설명한다 하던 부분은

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

 

기본 문법이 이러하다

 

successCallback : 필수 값으로 위치 정보를 성공적으로 가져왔을 때 실행할 콜백 함수이다

콜백 함수란 어떤 작업이 완료된 후 호출되도록 미리 정의된 함수이다

비동기로 설정할 일이 있을 때 주로 사용한다 한다

 

errorCallback: 선택 값(안써도 무관)으로 함수 동작 실패(날씨를 가져올 수 없을 경우)시 실행되는 함수

options: 선택 값으로 옵션 기능을 담당

successCallback와 errorCallback에 각각 onGeoOk와 onGeoErrorr 함수를 넣었다

 

콜백 함수란 어떤 작업이 완료된 후 호출되도록 미리 정의된 함수이다

비동기로 설정할 일이 있을 때 주로 사용한다 한다

 

API 또한 비동기 방식인데 비동기 방식이란 작업을 요청한 뒤 결과를 기다리지 않고 다음 작업을 바로 수행하는 방식이다

JS 확장 라이브러리인 React에서 SNS등 실시간 동기화가 필요할 때 ( 페이지를 새로고침하지 않고 프로필 사진을 변경하기, 프로필 사진 변경 로딩 중 페이지 닫히지 않게 .. ) 많이 사용된다

 

 

위 사진처럼 동기와 비동기의 개념은 동기는 직렬, 비동기는 병렬이라고도 생각할 수 있다

 

JS에서 API를 받아올 때 비동기 호출이 중요한 이유는

React는 SPA(Single Page Application)이라고 한 페이지에서 각기 기능이 업데이트 된다

반면 JS는 단일 스레드(CPU에서 실행되는 작업 단위), 하나의 작업만을 처리할 수 있는 흐름으로 작동한다

위 코드에서 비동기 호출로 설정을 해주면 흔히 ‘사용자 경험 개선’이라고 말하는 사용자에게 친절한 페이지를 만들 수 있다

 

React, Vue.js, jQuery, Redux 등 JS의 확장 라이브러리는 상당히 많지만 각 기능과 장단점이 다르므로 적절하게 쓰는데 우리가 다룰 JS와 React의 장단점은

 

다음과 같다

React는 복잡한 UI 관리, 상태 관리, 재사용 가능한 컴포넌트가 필요한 프로젝트에 적합하고,

순수 JavaScript는 단순한 UI 또는 적은 상호작용이 필요한 프로젝트(정적 웹사이트, 간단한 위젯)에 적합하다 한다

 

---

 

OPEN_API

 

https://openweathermap.org/api 해당 페이지의 API를 사용

Weather API - OpenWeatherMap

 

스크롤 후 하단의 무료 컨텐츠 클릭 (API 문서)

 

 

스크롤을 하여 내려오면 이 부분이 있는데

좌표에 따른 날씨를 알려주는 기능이라 한다

 

{lat}은 위도의 줄임말이고 {lon}은 경도의 줄임말이다

{API key}는 사이트 프로필에서 가져오면 된다

 

무료 버젼은 시간당 50회 사진 새로고침 제한이 있다