Wesbos - 나침반과 속도계

---

처음으로 Xcode를 사용해봤다.
navigator.geolocation 을 활용한 지리적 정보를 통해 방향과 속도를 측정해볼 수 있었다.

---

로직

1. Xcode & 시뮬레이터 실행
2. 시뮬레이터를 통해 html파일 실행
3. 사용할 HTML요소 선언 (const)
4. 지리적 정보 API 불러오기 geolocation.watchPosition()
5. 방향 정보와 속도 정보 받아와서 append

---

Xcode와 시뮬레이터 세팅

💡 Xcode 설치 ⇒ 시뮬레이터 실행!

시뮬레이터 실행과 기종 선택

---

시뮬레이터를 통해 html파일 실행

💡 내장된 package.json파일을 terminal을 통해 실행시켜서
npm install → npm start를 입력해준다.

첫 번째 External URL을 시뮬레이터에 입력하여 접속

index-START.html 파일 실행

사파리에서 시뮬레이터 디버깅 하는 법 (f12)

사파리 환경설정에 들어가 ‘고급설정’에서 메뉴 막대에서 “개발자용 메뉴보기” 설정

---

const 선언

💡 나침반에 들어간 arrow와 속도값만 선언해주면 된다.

const arrow = document.querySelector('.arrow');
const speedValue = document.querySelector('.speed-value');

---

지리적 정보(geolocation) API

💡 navigator.geolocation.watchPosition() 을 사용한다.

geolocation

디바이스의 위치정보를 가져올 수 있도록 하는 인터페이스

watchPosition()

디바이스의 위치가 변경될 때마다 호출하는 콜백을 등록한다.

navigator.geolocation.watchPosition((data) => {
  console.log(data);
});

🔥주의사항!!!

💡 반드시 features에 들어가 위치설정을 해줘야한다.

그렇지 않으면 heading이나 speed값이 null값으로 나타나기 때문

---

방향 정보와 속도 정보 활용

💡 위에서 찍어본 data 내에서 필요한 정보를 활용하면 된다 !

heading , speed

navigator.geolocation.watchPosition(
  (data) => {
    console.log(data);
    speedValue.textContent = data.coords.speed;
    arrow.style.transform = `rotate(${data.coords.heading}deg)`;
  },
  (err) => {
    console.error(err);
    alert('위치정보 접근을 허용해주세요!');
  }
);

---

최종 완성 코드

const arrow = document.querySelector('.arrow');
const speedValue = document.querySelector('.speed-value');

navigator.geolocation.watchPosition(
  (data) => {
    console.log(data);
    speedValue.textContent = data.coords.speed;
    arrow.style.transform = `rotate(${data.coords.heading}deg)`;
  },
  (err) => {
    console.error(err);
    alert('위치정보 접근을 허용해주세요!');
  }
);

---