개인 프로젝트 - 날씨 앱 (1) 현재 위치 받아오기

 

날씨앱 메인페이지에서 구현 할 내용이, 내가 있는 위치의 날씨 정보 이므로, 현재 위치를 우선 알아야 한다.

그 과정에 필요한 내용.

날씨 앱 말고도 현재 위치로써 활용할 수 있을 내용이 많을 것 같다!

---

1. 현재 위치 받아오기

 

구글링 해보니 geoLocation 해당 사이트에서 위치 api 제일 많이 받아오는 것 같았다.

날씨 앱 만드시는 분들 중에 왕초보를 위한 설명은 없는 것 같아서 한번 적어보기로..

 

일단 geoLocation으로 위치 받아오는 것부터 친절하게 연습해보자

 

공식 문서만 참고하기엔 아직 어렵기도 해서 구글링 해서 찾아낸 방법

공식 문서 언제쯤 읽고 변형해서 코드 찔까나..

 

 

공식 홈페이지에서 다음과 같이 알려주고 있다.

 

 

 

사용자가 동의 하면, 해당 함수로써 api호출!

 

Geolocation.getCurrentPosition()는 위치를 가져오는 메서드인데,

이 메서드를 단독으로 사용할 수는 없고 navigator.geolocation 객체를 통해서 접근해야 해요. 그래서 실제 사용할 때는 이렇게 쓴다:

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

 

• navigator.geolocation = 브라우저에서 실제로 쓰는 객체
• navigator.geolocation.getCurrentPosition() = 실제로 사용하는 코드

• successCallback: 위치 정보를 성공적으로 가져왔을 때 호출되는 함수.
• errorCallback: 위치 정보를 가져오는 데 실패했을 때 호출되는 함수.

 

아래는, 해당 메서드에 대한 자세한 설명이다 :)

🔧 전체 구조

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

• navigator.geolocation: 사용자의 위치 정보를 제공하는 Web API입니다.
• getCurrentPosition(): 사용자의 현재 위치를 비동기적으로 요청하는 메서드입니다.
• 두 개의 콜백 함수 인자를 받습니다:
  1. 성공 시 호출될 콜백 함수 (successCallback)
  2. 실패 시 호출될 콜백 함수 (errorCallback)

---

 성공 콜백 함수: success

function success(position) {
  console.log(position);
}

• 사용자의 위치 정보가 성공적으로 받아졌을 때 실행됩니다.
• position 객체는 다음과 같은 정보를 포함합니다:
  • position.coords.latitude (위도)
  • position.coords.longitude (경도)
  • position.coords.accuracy (정확도, 단위: 미터)
  • 기타 속도, 고도 정보 등도 포함될 수 있음
• console.log(position)으로 전체 위치 정보를 콘솔에 출력합니다.

---

실패 콜백 함수: error

function error(err) {
  console.warn(err);
}

• 위치 정보를 가져오는 데 실패했을 때 실행됩니다.
• 예: 사용자가 위치 접근을 허용하지 않음, 브라우저가 위치 정보 지원 안 함, 타임아웃 등
• err 객체에는 다음과 같은 정보가 포함됩니다:
  • err.code: 에러 코드 (1: PERMISSION_DENIED, 2: POSITION_UNAVAILABLE, 3: TIMEOUT)
  • err.message: 에러 메시지
• console.warn(err)로 에러 정보를 경고창으로 출력합니다.

---

 예시 결과 (성공 시 콘솔에 찍히는 예)

{
  coords: {
    latitude: 37.5665,
    longitude: 126.9780,
    accuracy: 20,
    // ... 기타 정보
  },
  timestamp: 1629271423000
}

---

⚠️ 주의사항

• 사용자는 브라우저 팝업을 통해 위치 접근을 허용해야 합니다.
• 일부 브라우저에서는 HTTPS 환경이 아니면 위치 정보 접근이 제한됩니다.
• 모바일에서 특히 유용하지만, 데스크톱에서도 사용 가능합니다.

---

 

 

성공하게 되면, 아래와 같은 함수를 반환하는데

navigator.geolocation.getCurrentPosition(success, error) 에서 success는 위치 정보를 성공적으로 가져왔을 때 실행되는 콜백 함수. 이 함수는 하나의 인자를 받고. 그 인자가 바로 position 객체고, 이 안에 위치 정보가 담겨 있다.

 

navigator.geolocation.getCurrentPosition(
  function success(position) {
    console.log(position);
  },
  function error(err) {
    console.warn(err);
  }
);

 

  position 객체 구조:

position은 이렇게 생겼고:

{
  coords: {
    latitude: ...,
    longitude: ...,
    altitude: ...,
    accuracy: ...,
    altitudeAccuracy: ...,
    heading: ...,
    speed: ...
  },
  timestamp: ...
}

예제:

navigator.geolocation.getCurrentPosition(
  function success(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;

    console.log("위도:", latitude);
    console.log("경도:", longitude);
  },
  function error(err) {
    console.warn("오류 발생:", err.message);
  }
);

---

참고:

coords.latitude	위도
coords.longitude	경도
coords.accuracy	위치 정확도 (미터 단위)
timestamp	위치를 가져온 시점의 시간 (ms 기준)

 

---

해당 코드 실제로 작성해봐서 어떻게 되는지 확인해보자.

navigator.geolocation.getCurrentPosition(
  function success(position) {
    console.log(position);
  },
  function error(err) {
    console.warn(err);
  }
);

이렇게 뜨고, 콘솔창 열어보면 위치 관련 뜬 걸 확인할 수 있다.

 

---

날씨 api를 받아오기 위해선 경도와 위도 정보가 필요하여 변수를 만들어 각 각 위도와 경도 정보를 넣어주어야 하는데,

 

우선, 저렇게 성공 콜백함수로써 받아온 데이터를 사용하려면

 

navigator.geolocation.getCurrentPosition(
  function(position) {
    // 이 안에서 position을 사용할 수 있음
  }
);

이런 구조에서, 

navigator.geolocation.getCurrentPosition(
  function success(position) {
    const latitude = position.coords.latitude;    // 위도
    const longitude = position.coords.longitude;  // 경도
    console.log("위도:", latitude);
    console.log("경도:", longitude);

  }
);

이런식으로 필요한 부분을 사용할 수 있는거다.

 

저렇게 변수로써 담아주는데, 사실 컴포넌트 분리나 이런 것 생각하면,

다음 단계에서 useState로써 상태에 담아주어야 한다. 

 

 

* 저 position 자리가 헷갈린다면?

 

function success(position) {
  // ...
}

여기서 (position)은 **함수의 매개변수(parameter)**
getCurrentPosition() 함수는 첫 번째 인자로 콜백 함수를 받는데, 위치 정보 가져오기가 성공하면 자동으로 그 위치 정보를 담은 객체(position)를 함수의 첫 번째 인자로 전달

 

navigator.geolocation.getCurrentPosition(
  function(position) {
    // 이 안에서 position을 사용할 수 있음
  }
);

즉, 이 구조는 자바스크립트의 콜백 함수 문법이고,

function success(position) { ... }

는 그냥 일반 함수인데, 브라우저가 위치 정보를 담은 객체를 함수의 인자로 넣어주는 것

---

조금 더 설명하자면:

function sayHi(name) {
  console.log("Hello, " + name);
}

sayHi("Jane");  // => Hello, Jane

여기서 name은 매개변수고, "Jane"은 전달한 값(인자)이죠.

이거랑 같은 구조로,

function success(position) {
  console.log(position);
}

이렇게 하면, 브라우저가 position에 자동으로 위치 정보를 넣어주는 거예요.

---

🐰 필요하면 이런 콜백 구조를 화살표 함수로도 쓸 수 있어요:

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log(position.coords.latitude);
  }
);

 

🐰 기본형 함수와 비교

navigator.geolocation.getCurrentPosition(
    function success(position){
       console.log(position)
        }
       );

---

 

현재 위치를 알아 냈으니, 그 다음 순서는 받아온 정보로써 현재 위치정보 기반의 날씨 가져오기.

다음 게시글에서 이어집니다.

 

 

 

 

 

 

 

 

---

공식 문서

W3Schools.com

참고한 블로그

[REACT] KAKAO MAPS API 사용해서 지도 그리기, 현재 위치 표시하기

 

[React] API로 날씨 앱 만들기 1(OpenWeather API 사용)

React로 날씨앱 만들기(OpenWeather API)