241_자바스크립트에서 위치 정보 읽어오기 [적용] 지도에 현재 위치를 표시하고 싶을 때 [문법 1] 메소드 의미 반환 navigator.geolocation.getCurrentPosition(성공시함수, 실패시함수) 위치 정보 가져오기 없음 [문법 2] 속성 의미 타입 position.coords.latitude 위도 숫자 position.coords.longitude 경도 숫자 position.coords.accuracy 위도, 경도의 오차 숫자 [내용] GPS는 지도 앱과 SNS 앱 등에서 위치 정보를 확인할 때 사용하는 센서다. Geolocation API로 액세스 할 수 있으며, navigator.geolocation.getCurrentPosition()을 사용해 위치 정보를 가져올 수 있다. ..

240_자바스크립트에서 쿠키 데이터 읽어오기 [적용] 쿠키 값을 참조하고 싶을 때 [내용] document.cookie 값을 불러와도 키와 값이 각각 문자열로 결합되어 있어 자바스크립트에서의 사용이 어렵다. 이럴 때는 문자열을 연과 배열로 분해하면 편리하게 사용할 수 있다. document.cookie 문자열의 ;과 =을 분리하여 연관 배열의 객체로 변환하는 코드를 확인해보자. 쿠키의 값은 모두 문자열이므로 주의하자. JavaScript (부분) main.js // 불러오기 버튼 클릭 시 btnRead.addEventListener('click', () => { // 쿠키 불러오기 const obj = convertCookieToObject(document.cookie); console.log(obj);..

239_자바스크립트에서 쿠키로 로컬 데이터 사용하기 [적용] 쿠키에 데이터를 저장하고 싶을 때 [문법] 속성 의미 반환 document.cookie 쿠키 참조 문자열 [내용] 쿠키(Cookie)는 예전부터 웹 데이터를 저장하거나 세션 관리에 사용되어 왔다. localStorage는 다양한 데이터 저장이 가능한 것이 특징이지만, 쿠키는 1차원의 문자열만 저장할 수 있다. 쿠키의 값은 클라이언트 쪽에서도 사용하지만, 서버도 불러오기와 값 변경 등 데이터를 공유할 수 있다. 속성은 1차원 데이터만 저장이 가능하므로 복잡한 데이터의 저장은 주의해야 한다. 쿠키의 값은 '=' 나 ';' 등 특수 기호를 사용하며, 한글은 '%82%A0'와 같은 형식으로 인코딩되므로 쿠키 값을 불러오기 위해서는 디코딩이 필요하다. ..

238_자바스크립트에서 Storage API 데이터 삭제하기 [적용] Storage 데이터를 삭제하고 싶을 때 [문법] 메소드 의미 반환 localStorage.remioveItem(키) localStorage 해당 키 삭제 없음 localStorage.clear() localStorage 데이터 삭제 없음 [내용] localStorage와 sessionStorage에서 일부 데이터를 지정해서 삭제하는 경우 removeItem()을 사용하며,인수는 데이터의 키다. 해당 도메인의 Storage 객체 전체를 삭제하는 경에는 clear()를 사용한다. HTML index.html localStorage 저장하기

237_자바스크립트에서 localStorage 사용하기 [적용] 데이터를 브라우저에 영구 보존하고 싶을 때 [문법] 메소드 의미 반환 localStorage.setItem('myParam', data) localStorage에 저장 없음 localStorage.getItem('myParam') localStorage에서 불러오기 문자열 [내용] localStorage는 브라우저에 데이터를 간단하게 저장할 수 있다. window 객체에 localStorage 객체가 있으므로 위치에 상관없이 사용할 수 있으며, localStorage에 저장된 데이터는 기간 제한이 없다. setItem()을 사용해 데이터를 저장하며, 첫 번째 인수는 키, 두 번째 인수는 데이터를 전달한다. 문자열, 숫자, 진리값, 객체, 배..

236_자바스크립트에서 푸시 알림 [적용] 브라우저에서 OS 고유의 알림창을 사용해 알림을 표시하고 싶을 때 [문법1] 속성 의미 반환 Notification.permission 브라우저의 알림 허가 여부 문자열 [문법2] 메소드 의미 반환 Notification.requestPermission() 알림 허가 요청하기 없음 new Notification(알림타이틀) 알림 표시 Notification [내용] 웹 사이트에서 자바스크립트의 Notification API를 사용해 유저에게 푸시 알림을 표시할 수 있으며, OS 고유의 알림창을 사용한다. 브라우저 활성화 상태가 아니어도 푸시 알림이 도착하면 유저에게 알림을 띄우고 선택을 요구하는 기능으로 사용할 수 있다. JavaScript main.js con..

235_자바스크립트 백그라운드에서 작업 실행하기 [적용] 브라우저의 백그라운드에서 네트워크를 감시하고 싶을 때 [문법] 메소드 의미 반환 navigator.serviceWorker.register() serviceWorker 등록 Promise [내용] 서비스 워커(Service Wroker)는 열려 있는 웹 페이지의 백그라운드에서 항상 작동하는 스크립트다. 웹 워커는 페이지가 열려 있을 때만 실행되나, 서비스 워커는 브라우저를 닫아도 실행할 수 있는 것이 특징이다. 푸시 알림과 캐시 기능 사용에 유용하다. JavaScript main.js if ('seviceWorker' in navigator) { navigator.serviceWorker .register('serviceworker.js') .th..

234_자바스크립트 백그라운드에서 스크립트 작업하기 [적용] 부하가 큰 처리를 실행하고 싶을 때 [문법] 메소드 의미 반환 new Worker(파일주소) 웹 워커 인스턴스 생성 인스턴스 [내용] 자바스크립트는 메인 스레드로 동작하며, 부하가 큰 작업을 실행하면 처리 작업 중에는 조작이 불가능하다. 자바스크립트 처리가 UI를 담당하는 메인 스레드를 멈추게 하기 때문이다. 웹 워커(Web Worker)를 사용하면 이 문제를 해결할 수 있다. 웹 워커는 메인 스레드의 자바스크립트와 분리되어 실행되며, 부하가 큰 계산 작업 등을 처리할 때 유용하다. 웹 워커는 메인 스크립트와 스레드가 다르므로 DOM 조작이 불가능하며, 페이지가 열려 있을 때만 실행된다는점에 주의하자. 웹 워커와 메인 스레드는 postMessa..

233_자바스크립트에서 XMLHttpRequest로 작업 취소하기 [적용] 네트워크 통신 중인 작업을 취소하고 싶을 때 [문법] 메소드 의미 반환 abort() 데이터 전송 작업 취소 없음 [내용] abort()를 사용하면 XMLHttpRequest 객체 인스턴스가 진행 중인 데이터 송수신 작업을 중단할 수 있으며, 이때 발생하는 이벤트는 load가 아닌 abort 이벤트다. 다음 샘플은 50%의 확률로 작업이 실패하도록 의도한 코드다. 몇 번의 작업 후 실패가 발생하면 화면에 '불러오기를 실패하였습니다.'라는 메시지를 표시한다. JavaScript (부분) main.js // XHR 생성 const req = new XMLHttpRequest(); // 데이터 종류 설정 req.responseType ..

232_자바스크립트에서 XMLHttpRequest로 작업상황 확인하기 [적용] 외부 파일의 불러오기 진행 상황을 확인하고 싶을 때 진행 상태바를 표시하고 싶을 때 [문법] 속성 의미 타입 event.loaded 현재 로딩 진행상태 숫자 event.total 전체 데이터 크기 숫자 [내용] XMLHttpRequest 객체 인스턴스의 불러오기 진행 상황은 progress 이벤트로 감시하고, 이벤트 핸들러에서 total 속성(전체 데이터 크기)과 loaded 속성(현재 불러오기 진행 상황)을 사용해 확인할 수 있다. loaded와 total을 조합하면 진행 상황을 % 단위로 계산할 수도 있다. HTML index.html CSS style.css .progress { position: relative; wid..