방송대 방통대 HTML5웹프로그래밍 15강 - HTML API: 웹 스토리지, 위치 정보 - 요약 노트 시험족보 예상문제 - 올에이클래스

HTML5웹프로그래밍 15강 - HTML API: 웹 스토리지, 위치 정보

브라우저에 데이터를 보관하는 웹 스토리지와 사용자의 현재 위치를 얻는 Geolocation API를 학습한다. 로컬·세션 스토리지의 수명과 탭 간 동기화, 위치 권한과 오류 처리, 연속 추적 및 지도 연동까지 HTML5 API의 실무 흐름을 정리한다.

제1장 웹 스토리지의 개념

1. 브라우저의 키-값 저장소

Web Storage는 클라이언트인 웹 브라우저에 데이터를 키와 값의 쌍으로 저장하는 API이다. 키를 이용해야 해당 값에 접근할 수 있으며, 한 저장소 안에서 키는 유일하다. 같은 키로 다시 저장하면 새 항목이 추가되는 것이 아니라 기존 값이 덮어써진다.

웹 스토리지의 키와 값은 오직 문자열로 저장된다. 숫자를 넣어도 문자열로 바뀌며, 객체나 배열을 그대로 저장하면 원래 구조를 보존할 수 없다. 따라서 객체와 배열은 JSON.stringify()로 JSON 문자열로 변환해 저장하고, 꺼낸 뒤에는 JSON.parse()로 원래 자료형을 복원하는 것이 표준적인 사용법이다.

const user = { name: '홍길동', grade: 2 };
localStorage.setItem('user', JSON.stringify(user));

const storedUser = JSON.parse(localStorage.getItem('user'));

보안 원칙: 비밀번호, 결제 정보, 인증 토큰과 같은 민감한 데이터는 로컬 스토리지에 저장하지 않는다. 자바스크립트에서 쉽게 접근할 수 있어 XSS 공격에 노출될 수 있기 때문이다.

2. 쿠키와의 차이

웹 스토리지는 쿠키의 제한을 보완하지만 쿠키를 완전히 대신하는 기술은 아니다. 목적과 전송 방식이 다르므로 저장할 정보의 성격에 맞게 선택해야 한다.

비교 항목	웹 스토리지	쿠키
서버 전송	클라이언트에만 있고 자동 전송되지 않음	HTTP 요청 헤더에 포함되어 자동 전송됨
저장 용량	도메인당 약 5MB 수준이며 정책에 따라 다름	개당 약 4KB로 제한적
수명	영구 보존 또는 탭 종료 시 삭제	expires, max-age로 세밀하게 지정
주요 용도	UI 설정, 클라이언트 캐시, 임시 상태	서버 세션 관리, 인증, 만료가 필요한 정보
접근 보안	자바스크립트에서 접근 가능	HttpOnly로 자바스크립트 접근 차단 가능

제2장 로컬 스토리지와 세션 스토리지

1. 데이터 수명과 공유 범위

localStorage는 사용자가 브라우저 데이터를 직접 지우거나 코드로 삭제하지 않는 한 값이 계속 유지되는 영구적 기억에 해당한다. 탭이나 창을 닫았다 다시 열어도 데이터가 남으며, 같은 출처의 여러 탭과 창이 저장소를 공유한다. 다크 모드, 글꼴 크기 같은 사용자 설정이나 비로그인 장바구니처럼 다음 방문에도 유지할 상태에 적합하다.

sessionStorage는 현재 탭이나 창이 열려 있는 동안만 데이터를 유지하는 일시적 기억이다. 탭을 닫으면 데이터가 삭제되고, 같은 사이트를 열었더라도 다른 탭과는 별도의 저장소를 사용한다. 여러 단계의 입력 폼에서 중간값을 보관하거나 현재 목록 페이지처럼 한 탭 안에서만 유지할 상태에 알맞다.

구분	localStorage	sessionStorage
수명	직접 삭제할 때까지 유지	현재 탭·창이 닫힐 때 삭제
공유 범위	같은 출처의 탭·창 사이에서 공유	탭 단위로 독립
적합한 상태	다음 방문에도 필요한 설정	현재 작업 중에만 필요한 임시 상태

2. 출처 단위 격리와 선택 기준

웹 스토리지는 출처 단위로 격리된다. 서로 다른 출처의 페이지는 같은 키 이름을 사용하더라도 저장 공간을 공유하지 않는다. 최근 브라우저는 대부분 웹 스토리지를 지원하며, 필요하다면 typeof window.localStorage !== 'undefined'와 같이 지원 여부를 확인할 수 있다.

영구 보존과 탭 간 공유가 필요하면 로컬 스토리지, 일회성 정보와 탭 단위 독립성이 필요하면 세션 스토리지를 선택한다. 수십 MB 이상의 크고 복잡한 데이터를 구조적으로 관리해야 한다면 웹 스토리지보다 IndexedDB가 적합하다.

제3장 Storage API 조작

1. 주요 메서드와 속성

localStorage와 sessionStorage는 같은 Storage 인터페이스를 사용하므로 객체 이름을 제외한 조작법이 같다. 저장에는 setItem(), 읽기에는 getItem(), 특정 항목 삭제에는 removeItem()을 사용한다. clear()는 해당 저장소의 모든 항목을 삭제하고, length는 항목 수를 알려준다. key(index)는 지정한 순서에 있는 키 이름을 반환한다.

메서드·속성	기능	주의점
setItem(key, value)	값 저장 또는 기존 값 덮어쓰기	문자열로 저장됨
getItem(key)	키에 연결된 값 읽기	키가 없으면 null
removeItem(key)	특정 항목 삭제	다른 항목은 유지
clear()	저장소 전체 초기화	모든 항목이 삭제되므로 주의
key(index)	인덱스 위치의 키 이름 반환	전체 항목 순회에 활용
length	저장된 항목 수 반환	메서드가 아닌 속성

점 표기법이나 대괄호 표기법으로도 값을 다룰 수 있지만 스토리지 객체가 가진 메서드나 속성과 키 이름이 충돌할 수 있다. 실무에서는 setItem(), getItem(), removeItem() 같은 정식 메서드를 일관되게 사용한다.

2. 화면과 스토리지 상태 연결

저장소 관리 화면을 만들 때는 localStorage.length만큼 반복하면서 key(i)로 키를 얻고 getItem(key)로 값을 읽어 표에 출력할 수 있다. 저장, 조회, 삭제, 전체 삭제 후에는 화면을 다시 그리는 공통 함수를 호출하여 실제 저장 상태와 UI가 어긋나지 않게 한다.

조회할 키가 존재하지 않으면 getItem()이 null을 반환하므로 성공값과 구분해야 한다. 숫자 카운터를 저장했다면 꺼낸 문자열을 parseInt(value, 10)으로 숫자로 변환한 뒤 계산하고 다시 저장한다. 브라우저 개발자 도구의 Application 탭에서 Local Storage와 Session Storage의 키-값 변화를 직접 확인할 수 있다.

제4장 저장 오류와 안전한 처리

1. QuotaExceededError

브라우저가 허용한 저장 용량을 넘어서 값을 저장하려 하면 QuotaExceededError가 발생한다. 이미지나 거대한 JSON을 무분별하게 저장하거나, 오래된 데이터를 지우지 않고 계속 쌓아 두면 이 오류를 만날 수 있다. 일부 브라우저의 과거 비공개 모드에서는 할당량이 매우 작거나 0으로 설정되는 문제도 있었다.

스토리지 저장은 실패할 수 있으므로 try-catch로 감싸야 한다. 오류 이름이 QuotaExceededError 또는 브라우저별 호환 이름인지 확인해 오래된 데이터 삭제나 용량 정리를 안내하고, 그 밖의 오류는 별도로 기록한다.

function safeSetItem(key, value) {
  try {
    localStorage.setItem(key, value);
  } catch (error) {
    if (error.name === 'QuotaExceededError' ||
        error.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
      console.warn('스토리지 용량이 가득 찼습니다.');
    } else {
      console.error('저장 중 오류가 발생했습니다.', error);
    }
  }
}

스토리지는 편리하지만 무한한 데이터베이스가 아니다. 필요한 최소 상태만 저장하고, 오래된 항목을 삭제하며, 큰 데이터는 목적에 맞는 저장 기술로 옮겨야 한다.

제5장 storage 이벤트와 탭 간 동기화

1. 다른 탭의 변경 감지

storage 이벤트는 로컬 또는 세션 스토리지의 데이터가 추가, 수정, 삭제될 때 window에서 발생한다. 핵심은 값을 변경한 현재 탭에서는 발생하지 않고, 같은 스토리지 영역을 공유하는 다른 탭이나 창에서 발생한다는 점이다. 따라서 로컬 스토리지를 공유하는 탭들 사이에서 변경 사실을 전달하는 통신 수단으로 활용할 수 있다.

세션 스토리지는 탭 단위로 분리되므로 다른 탭과 같은 영역을 공유하지 않아 이 동작을 일반적으로 관찰하기 어렵다. 한 탭에서 로컬 카운터가 바뀌었을 때 다른 탭의 화면을 즉시 갱신하려면 window.addEventListener('storage', handler)를 등록한다.

시험 핵심: storage 이벤트는 데이터를 변경한 탭이 아니라 같은 저장 영역을 공유하는 다른 문서에서 발생한다.

2. 이벤트 객체의 정보와 활용

이벤트 객체의 key는 변경된 키, oldValue는 변경 전 값, newValue는 변경 후 값을 나타낸다. 새 항목이면 oldValue가 null이고 삭제라면 newValue가 null이다. url은 변경을 일으킨 문서의 주소이며, storageArea는 변경된 저장소가 localStorage인지 sessionStorage인지 알려준다.

window.addEventListener('storage', event => {
  if (event.key === 'theme') {
    updateTheme(event.newValue);
  }
});

여러 탭에서 한 탭의 로그아웃을 즉시 반영하거나, 장바구니 수량과 테마를 새로고침 없이 동기화하는 것이 대표적인 활용이다. 이벤트를 받을 때는 관심 있는 키인지 먼저 검사하여 불필요한 화면 갱신을 피한다.

제6장 Geolocation API의 기본

1. 위치 정보와 활용

Geolocation API는 GPS, Wi-Fi 등의 정보를 바탕으로 사용자의 현재 지리적 위치를 웹 애플리케이션에 제공하는 HTML5 표준 API이다. 지도 서비스의 중심과 마커를 현재 좌표로 이동하거나, 배달 주소 설정, 동네 인증, 주변 시설 검색과 같은 위치 기반 서비스에 활용한다. 특정 반경 진입 여부를 판단하는 지오펜싱에도 사용할 수 있다.

2. 개인정보, 권한과 보안 컨텍스트

위치 정보는 민감한 개인정보이므로 브라우저가 사용자에게 명시적인 권한 허용을 요청한다. 사용자가 거부할 가능성을 정상적인 흐름으로 보고 실패 콜백과 안내 UI를 반드시 준비해야 한다. Geolocation API는 보안상의 이유로 HTTPS 환경 또는 개발용 localhost에서만 동작하고 일반 HTTP 페이지에서는 차단된다.

Geolocation 실무의 세 조건: HTTPS 또는 localhost, 사용자의 명시적 권한, 실패를 포함한 오류 처리이다.

3. 핵심 객체와 메서드

위치 기능은 navigator.geolocation 객체를 통해 사용한다. getCurrentPosition()은 현재 위치를 한 번 가져오고, watchPosition()은 위치가 바뀔 때마다 연속적으로 전달한다. watchPosition()이 반환한 식별자를 clearWatch()에 넘기면 추적을 중지할 수 있다.

메서드	동작	활용
getCurrentPosition()	현재 위치를 한 번 요청	주변 식당, 현재 날씨
watchPosition()	위치 변화를 연속 추적	배달·러닝·내비게이션
clearWatch()	연속 위치 추적 중지	목적지 도착, 화면 종료, 배터리 절약

제7장 현재 위치 요청과 오류 처리

1. 콜백 호출 구조

getCurrentPosition(successCallback, errorCallback, options)는 성공 함수, 실패 함수, 옵션 객체를 차례로 받는다. 실행 전에 navigator.geolocation의 존재 여부를 확인하고, 권한을 기다리는 동안에는 ‘위치 정보 요청 중’ 같은 로딩 상태를 화면에 표시하는 것이 좋다.

성공 콜백이 받는 position 객체에서 coords.latitude는 위도, coords.longitude는 경도, coords.accuracy는 미터 단위의 오차 범위를 나타낸다. timestamp는 위치가 파악된 시간을 1970년 1월 1일부터의 밀리초로 제공한다.

navigator.geolocation.getCurrentPosition(
  position => {
    const lat = position.coords.latitude;
    const lng = position.coords.longitude;
    const accuracy = position.coords.accuracy;
  },
  error => handleLocationError(error),
  { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
);

2. 오류 코드

실패 콜백의 오류 코드는 원인을 구분한다. PERMISSION_DENIED는 권한 거부, POSITION_UNAVAILABLE은 GPS나 네트워크 문제로 위치를 확인할 수 없는 상태, TIMEOUT은 제한 시간 안에 결과를 얻지 못한 상태이다. 오류별로 사용자가 다음 행동을 알 수 있는 메시지를 제공해야 한다.

3. 옵션 객체

enableHighAccuracy를 true로 설정하면 더 정확한 위치를 요청하지만 응답이 느려지고 배터리 사용량이 늘 수 있다. 내비게이션처럼 정밀도가 필요한 상황에서만 선택한다. timeout은 응답 대기 제한 시간을 밀리초로 지정하고, maximumAge는 캐시된 위치를 허용할 최대 시간을 지정한다. 0이면 항상 새로운 위치를 요청한다.

위치의 정확도는 기기와 GPS·Wi-Fi·네트워크 환경에 따라 달라진다. 좌표와 함께 accuracy를 확인해야 사용자가 기대하는 정밀도를 판단할 수 있다.

제8장 비동기 처리와 연속 추적

1. Promise와 async/await

위치를 얻은 뒤 날씨 API를 호출하고 그 결과를 화면에 출력하는 것처럼 비동기 작업이 이어지면 중첩된 콜백 때문에 코드 깊이가 커질 수 있다. 콜백 기반인 Geolocation API를 Promise로 감싸면 async/await로 위에서 아래로 읽히는 흐름을 만들 수 있다.

const getPositionAsync = (options = {}) =>
  new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(resolve, reject, options);
  });

async function loadPosition() {
  try {
    const position = await getPositionAsync({ timeout: 10000 });
    return position.coords;
  } catch (error) {
    handleLocationError(error);
  }
}

resolve에는 성공한 위치 객체, reject에는 오류 객체를 넘긴다. 호출부는 try-catch로 성공과 실패를 구분하며, 위치를 기다린 다음 좌표를 이용한 다른 비동기 작업을 자연스럽게 연결할 수 있다.

2. watchPosition()과 clearWatch()

watchPosition()은 브라우저가 위치 변화를 감지할 때마다 성공 콜백을 반복 실행하는 실시간 구독 방식이다. 호출 결과로 반환되는 정수형 추적 ID를 반드시 저장해야 한다. 목적지에 도착하거나 화면이 백그라운드로 전환되는 등 추적이 필요 없어진 순간 clearWatch(watchId)를 호출하여 센서 사용과 배터리 소모를 멈춘다.

let watchId = navigator.geolocation.watchPosition(
  successCallback,
  errorCallback,
  { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
);

navigator.geolocation.clearWatch(watchId);
watchId = null;

추적 UI에서는 시작 후 시작 버튼을 비활성화하고 중지 버튼을 활성화하여 중복 구독을 방지한다. 중지한 뒤에는 버튼과 상태 문구를 원래대로 돌리고 ID를 null로 초기화한다. 이동이 없는 데스크톱에서는 좌표 갱신이 드물 수 있으므로 실제 연속 추적은 모바일 환경에서 확인하기 쉽다.

제9장 지도 서비스 연동

1. 좌표와 지도 API의 결합

Geolocation API가 위도와 경도를 제공하면 지도 서비스의 중심점을 해당 좌표로 이동하고 마커를 표시할 수 있다. 유료 키나 카드 등록이 필요한 지도 서비스 대신 학습 예제에서는 별도 API 키 없이 사용할 수 있는 Leaflet.js와 OpenStreetMap 타일을 결합할 수 있다.

먼저 위치 권한을 받아 latitude와 longitude를 얻는다. 지도 객체가 이미 있으면 새로 만들지 않고 setView([lat, lng], zoom)으로 중심만 이동한다. 최초 실행이라면 지도를 초기화하고 OpenStreetMap 타일 레이어를 추가한 뒤 현재 좌표에 마커와 팝업을 배치한다.

연동 순서: Geolocation 지원 확인 → 권한 요청 → 좌표 수신 → 지도 최초 생성 또는 중심 이동 → 타일과 마커 표시 → 실패 시 오류 안내의 순서로 처리한다.

지도 컨테이너에는 화면에 나타날 수 있도록 명시적인 높이가 필요하다. 외부 라이브러리를 사용할 때는 해당 서비스의 사용 조건과 저작자 표시도 지켜야 한다.

핵심 개념 정리

• 웹 스토리지는 브라우저에 키-값 데이터를 저장하며 키와 값은 문자열이다.
• 객체와 배열은 JSON.stringify()로 저장하고 JSON.parse()로 복원한다.
• 로컬 스토리지는 같은 출처의 탭과 창이 공유하며 직접 삭제할 때까지 유지되고, 세션 스토리지는 탭 단위로 독립하며 탭 종료 시 삭제된다.
• Storage API는 setItem(), getItem(), removeItem(), key(), clear(), length를 제공한다.
• 저장 용량 초과 가능성을 고려해 저장 코드를 try-catch로 보호하고 민감한 정보는 저장하지 않는다.
• storage 이벤트는 변경을 일으킨 현재 탭이 아니라 같은 저장 영역을 공유하는 다른 탭에서 발생한다.
• Geolocation API는 HTTPS 또는 localhost, 사용자의 권한 허용, 성공·실패 처리가 필요하다.
• getCurrentPosition()은 한 번의 위치, watchPosition()은 연속 위치를 제공하며 추적은 clearWatch()로 종료한다.
• 현재 좌표는 지도 서비스와 결합하여 중심 이동, 마커, 위치 기반 기능에 활용할 수 있다.

웹 스토리지와 위치 정보는 브라우저 기능을 풍부하게 만들지만 사용자의 데이터와 개인정보를 다룬다는 공통점이 있다. 저장 데이터의 수명·공유 범위·용량을 명확히 하고, 위치 권한 거부와 센서 오류를 정상 흐름으로 처리해야 한다. 편리한 API 호출만큼 민감 정보 배제, HTTPS, 예외 처리, 불필요한 위치 추적 종료가 중요한 설계 원칙이다.

예상문제 20선

1. 웹 스토리지와 쿠키의 차이에 대한 설명으로 옳은 것은?

① 웹 스토리지는 모든 HTTP 요청에 자동 포함된다.② 쿠키는 자바스크립트에서 절대 접근할 수 없다.③ 웹 스토리지는 개별 항목마다 초 단위 만료 시점을 기본 제공한다.④ 웹 스토리지 데이터는 HTTP 요청마다 서버로 자동 전송되지 않는다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
웹 스토리지는 클라이언트에 남으며 쿠키처럼 모든 HTTP 요청 헤더에 자동으로 포함되지 않는다.

2. 객체를 웹 스토리지에 저장하고 다시 복원하는 올바른 조합은?

① 저장할 때 JSON.parse(), 읽을 때 JSON.stringify()② 저장할 때 JSON.stringify(), 읽을 때 JSON.parse()③ 저장할 때 parseInt(), 읽을 때 toString()④ 객체는 변환 없이 구조 그대로 저장한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
스토리지는 문자열만 보관하므로 객체를 JSON 문자열로 직렬화하고 읽은 문자열을 다시 객체로 파싱한다.

3. localStorage에 저장해서는 안 되는 정보는?

① 비밀번호와 결제 정보② 다크 모드 사용 여부③ 사용자가 선택한 글꼴 크기④ 비로그인 장바구니의 일반 상품 식별자

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
로컬 스토리지는 자바스크립트로 접근 가능하므로 XSS에 노출될 수 있는 민감 정보는 저장하지 않는다.

4. sessionStorage의 특징은?

① 모든 출처에서 같은 값을 공유한다.② 브라우저를 다시 열어도 영구 유지된다.③ 탭 단위로 독립하며 해당 탭을 닫으면 데이터가 삭제된다.④ 저장값을 서버로 자동 전송한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
세션 스토리지는 현재 탭이나 창의 수명 동안만 유지되고 다른 탭의 세션 저장소와 분리된다.

5. 존재하지 않는 키를 getItem()으로 읽은 결과는?

① undefined② null③ 빈 배열④ false

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
getItem()은 해당 키가 없으면 null을 반환하므로 조회 성공 여부를 구분해야 한다.

6. 특정 키 하나만 삭제하는 Storage 메서드는?

① clear()② key()③ getItem()④ removeItem()

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
removeItem(key)는 지정한 항목만 지우며 clear()는 저장소 전체를 비운다.

7. QuotaExceededError에 대한 설명으로 옳은 것은?

① 저장소에 키가 하나도 없을 때 발생한다.② 위치 권한을 거부할 때 발생한다.③ 스토리지 저장 용량 한도를 넘어서 저장을 시도할 때 발생할 수 있다.④ JSON 문자열을 객체로 변환할 때만 발생한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
크거나 오래된 데이터가 쌓여 브라우저 할당량을 넘으면 발생할 수 있으므로 저장 로직을 try-catch로 보호한다.

8. storage 이벤트가 일반적으로 발생하는 곳은?

① 변경한 탭이 아니라 같은 스토리지 영역을 공유하는 다른 탭이나 창② 오직 데이터를 변경한 현재 탭③ 다른 출처의 모든 브라우저 창④ 서버의 데이터베이스 안

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
현재 탭의 변경을 같은 저장 영역을 공유하는 다른 문서에 알리는 것이 storage 이벤트의 핵심이다.

9. storage 이벤트에서 항목이 삭제되었음을 알 수 있는 상태는?

① e.key가 항상 null이다.② e.oldValue가 반드시 null이다.③ e.newValue가 null이다.④ e.url이 빈 배열이다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
기존 항목이 삭제되면 새 값이 없으므로 newValue가 null이 된다.

10. Geolocation API를 사용할 수 있는 환경은?

① 일반 HTTP 사이트만 가능하다.② HTTPS 보안 환경 또는 localhost에서 가능하다.③ 파일 크기가 5MB 이상일 때만 가능하다.④ 사용자의 권한과 무관하게 모든 환경에서 가능하다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
민감한 위치 정보를 보호하기 위해 HTTPS 또는 개발용 localhost에서만 API가 허용된다.

11. 사용자의 위치를 한 번만 가져오는 메서드는?

① watchPosition()② clearWatch()③ getItem()④ getCurrentPosition()

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
getCurrentPosition()은 한 번의 현재 위치를 요청하며 연속 추적은 watchPosition()을 사용한다.

12. 위치 요청 성공 시 위도를 얻는 속성은?

① position.coords.latitude② position.coords.accuracyX③ position.location.width④ position.storageArea

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
성공 콜백의 position 객체에서 위도는 coords.latitude, 경도는 coords.longitude로 읽는다.

13. 사용자가 위치 정보 제공을 거부했을 때의 오류는?

① POSITION_UNAVAILABLE② PERMISSION_DENIED③ QuotaExceededError④ storageArea

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
PERMISSION_DENIED는 사용자가 권한을 거부한 상태이며 실패 콜백에서 안내해야 한다.

14. Geolocation 옵션 maximumAge: 0의 의미는?

① 캐시된 위치를 사용하지 않고 새로운 위치를 요청한다.② 위치 요청 대기 시간을 무제한으로 만든다.③ 정확도를 0미터로 보장한다.④ 위치 권한 창을 표시하지 않는다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
maximumAge는 허용할 캐시 위치의 나이를 뜻하며 0이면 새 정보를 요청한다.

15. enableHighAccuracy: true에 대한 설명으로 옳은 것은?

① 항상 더 빠르고 배터리를 덜 사용한다.② 오류 콜백을 사용하지 않게 한다.③ 사용자의 권한 거부를 무시한다.④ 높은 정확도를 요청하지만 응답 지연과 배터리 소모가 커질 수 있다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
정밀한 GPS 측정은 자원을 더 사용할 수 있으므로 내비게이션처럼 필요한 경우에만 선택한다.

16. 콜백 기반 Geolocation API를 async/await로 사용하기 위한 방법은?

① localStorage에 콜백을 저장한다.② 콜백 이름에 await를 붙인다.③ getCurrentPosition()을 Promise로 감싸 resolve와 reject에 연결한다.④ storage 이벤트를 캡처링한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
성공 콜백을 resolve, 실패 콜백을 reject에 연결한 Promise 래퍼를 만들면 await할 수 있다.

17. watchPosition()의 반환값을 저장해야 하는 이유는?

① 반환된 ID를 clearWatch()에 전달하여 추적을 중지해야 하기 때문이다.② 반환값이 항상 현재 위도이기 때문이다.③ 스토리지 용량을 늘리는 값이기 때문이다.④ HTTPS를 HTTP로 바꾸기 위해서이다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
연속 추적 구독을 해제하려면 시작 시 발급된 식별자를 clearWatch()에 넘겨야 한다.

18. 연속 위치 추적을 종료해야 하는 이유로 가장 적절한 것은?

① 종료하면 위치 권한이 영구 삭제되기 때문이다.② clearWatch()가 지도를 자동 저장하기 때문이다.③ 추적 ID는 한 번만 사용할 수 없기 때문이다.④ 불필요한 센서 사용과 배터리 소모를 막고 개인정보 노출을 줄이기 위해서이다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
위치가 더 필요하지 않은 상태에서 계속 추적하면 자원과 개인정보를 불필요하게 사용하게 된다.

19. 지도 객체가 이미 생성된 뒤 새 현재 위치를 표시하는 효율적인 방법은?

① 매번 지도 라이브러리를 다시 내려받는다.② 기존 지도 객체의 setView()로 중심 좌표를 이동한다.③ localStorage.clear()로 지도를 초기화한다.④ accuracy 값을 HTML 높이로 사용한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
이미 만든 지도를 재생성하지 않고 setView([lat, lng], zoom)으로 중심을 옮기는 편이 효율적이다.

20. 웹 스토리지와 Geolocation API를 사용할 때의 공통 실무 원칙은?

① 모든 실패를 무시하고 성공 결과만 처리한다.② 사용자 데이터를 가능한 한 많이 영구 저장한다.③ 개인정보와 자원 사용을 고려하고 실패·예외 상황을 반드시 처리한다.④ 일반 HTTP에서만 실행한다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
두 API 모두 사용자 데이터와 브라우저 자원을 다루므로 민감 정보 배제, 권한 존중, 오류와 종료 처리가 중요하다.