244_자바스크립트에서 정보/에러/경고 출력하기 [적용] 자바스크립트의 실행 결과를 확인하고 싶을 때 상태에 따라 콘솔 사용을 분류하고 싶을 때 [문법] 메소드 의미 반환 console.log(값1, 값2, ...) 로그 표시 없음 console.info(값1, 값2, ...) 정보 표시 없음 console.warn(값1, 값2, ...) 경고 표시 없음 console.error(값1, 값2, ...) 에러 표시 없음 [내용] 콘솔은 동작 확인을 위한 경고, 에러를 표시하는 로그 등 상태에 따라 네 종류의 명령이 있다. 사용 분류를 통해 로그 종류를 콘솔 패널에서 쉽게 확인할 수 있으며, 종류에 따라 문자색으로 구분이 가능하다. JavaScript main.js console.log('로그 표시입니다.'..

243_자바스크립트에서 진동 모터 사용하기 [적용] 진동 피드백 기능을 설정하고 싶을 때 [문법] 속성 의미 타입 navigator.vibrate(진동시간(밀리초)) 디바이스 진동 처리 진리값 [내용] 진동은 주로 매너 모드의 알림 기능으로 사용되며, 기계 내부 모터의 회전으로 작동한다. Vibration API로 액세스가 가능하며, 자바스크립트는 'navigator.vibrate(진동시간(밀리초))'를 사용해 실행할 수 있다. 또한, 배열을 지정하면 진동 패턴을 설정할 수 있다. JavaScript // 진동 (1000밀리초) navigator.vibrate(1000); // 500밀리초 진동 후 100밀리초 정지, 다시 500밀리초 진동 navigator.vibrate([500, 100, 500]);..

242_자바스크립트에서 자이로(Gyro) 센서와 가속도 센서 사용하기 [적용] 기울기를 확인하고 싶을 때 방향을 확인하고 싶을 때 가속도를 확인하고 싶을 때 [문법 1] 속성 의미 타입 event.beta X 축 기울기 숫자 event.gamma Y 축 기울기 숫자 event.alpha Z 축 기울기 숫자 [문법 2] 속성 의미 타입 event.acceleration.x X 축 가속도 숫자 event.acceleration.y Y 축 가속도 숫자 event.acceleration.z Z 축 가속도 숫자 [내용] 자이로 센서(기울기) 자이로 센서는 기울기(회전)을 검출하는 센서다. 스마트폰을 가로 혹은 세로로 움직이면 센서가 인지하여 디스플레이를 가로 화면 혹은 세로 화면으로 전환하는 작업 등에 사용한다...

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..