[JavaScript] 자바스크립트에서 푸시 알림

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

2022.08.02

[JavaScript] 자바스크립트 백그라운드에서 작업 실행하기

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

2022.08.02

[JavaScript] 자바스크립트 백그라운드에서 스크립트 작업하기

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

2022.08.02

[JavaScript] 자바스크립트에서 XMLHttpRequest로 작업 취소하기

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

2022.08.02

[JavaScript] 자바스크립트에서 XMLHttpRequest로 작업상황 확인하기

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

2022.08.02

[JavaScript] 자바스크립트에서 XMLHttpRequest로 데이터 읽어오기

231_자바스크립트에서 XMLHttpRequest로 데이터 읽어오기 [적용] 구 버전의 브라우저에서 데이터를 전송하고 싶을 때 [문법] 메소드 의미 반환 new XMLHttpRequest() 인스턴스 생성 XMLHttpRequest open(메소드, url) 리퀘스트 초기화 없음 send() 리퀘스트 전송 없음 [내용] 자바스크립트에서 fetch()보다 오래된 기능인 XMLHttpRequest()를 사용하면 처리가 복잡하지만 저레벨 방식의 제어가 가능하고 구 버전의 브라우저에서도 사용할 수 있다. XMLHttpRequest 객체의 불러오기 완료 확인은 load 이벤트를 사용하며, 이벤트 핸들러에서 responseText 속성을 사용해 불러온 문자열 데이터를 참조할 수 있다. JavaScript (부분) ..

2022.08.02

[JavaScript] 자바스크립트에서 fetch()로 데이터 보내기

230_자바스크립트에서 fetch()로 데이터 보내기 [적용] 웹 서버에 데이터를 전달하고 싶을 때 웹 서버 연동 프로그램을 만들고 싶을 때 [내용] 웹 서버에 데이터를 전달할 때도 fetch()를 사용하며, 데이터 전달 방법은 GET과 POST가 있다. 웹에서 '?ket=value'와 같은 문자가 포함된 URL을 본 적이 있다면 이것이 URL에 인수를 전달하는 GET 방식이다. GET 방식은 URL로 페이지의 결과가 결정되는 방식에 적합하며, SEO(Search Engine Optimization-검색 엔진 최적화)와 궁합이 좋다. 하지만 GET 방식은 URL에 전달 데이터가 노출되므로 보안 문제가 생길 수 있다. URL은 액세스 분석 등 다양한 용도를 위해 로그에 기록으로 남을 가능성이 있으며, 이는..

2022.08.02

[JavaScript] 자바스크립트에서 fetch()로 바이너리 데이터 읽어오기

229_자바스크립트에서 fetch()로 바이너리 데이터 읽어오기 [적용] 바이너리 파일을 읽어오고 싶을 때 텍스트 파일이 아닌 형식을 다루고 싶을 때 [내용] 이미지와 3D 데이터의 대부분은 텍스트 파일이 아닌 포맷을 가지고 있으며, 이를 바이너리 형식이라고 한다. 바이너리 형식은 blob()을 사용해서 처리하며, 웹의 경우 3D 데이터와 이미지 해석 분야 등에 사용된다. Promise를 사용하는 방법 JavaScript const btn = document.querySelector('button'); btn.addEventListener('click', () => { fetch('./sample.jpg') .then((res) => res.blob()) .then((blob) => { const ima..

2022.08.02

[JavaScript] 자바스크립트에서 fetch()로 XML 데이터 읽어오기

228_자바스크립트에서 fetch()로 XML 데이터 읽어오기 [적용] XML 형식의 텍스트 파일을 가져오고 싶을 때 [내용] XML은 데이터를 표현하는 마크업 언어의 하나로, 주로 서버 간의 데이터 통신에 사용되며,알기 쉬운 표기 형식이 특징이다.HTML과 같이 시작 태그와 종료 태그로 값을 정의하고 속성값으로 추가 정보를 부여한다.복잡한 정보를 표현할 수 있으므로 다양한 목적으로 사용된다. XML은 데이터를 가져오고 참조하는 것이 약간 복잡한 반면,JSON은 데이터를 가져오는 시점에서 자바스크립트 데이터 타입으로 변환되므로 필요한 코드의 양이 적다는 장점이 있다. XML 1 2 Promise를 사용하는 방법 JavaScript fetch('sample.xml') .then((response) => r..

2022.08.02

[JavaScript] 자바스크립트에서 fetch()로 JSON 데이터 읽어오기

227_자바스크립트에서 fetch()로 JSON 데이터 읽어오기 [적용] JSON 형식의 텍스트 파일을 불러오고 싶을 때 [내용] JSON 을 다루기 위해서는 데이터를 가져오는 fetch()와 JSON 포맷으로 해석하는 json()의 2단계 작업이 필요하며, 이렇게 하면 JSON 객체를 다룰 수 있다. Promise를 사용하는 방법 JavaScript fetch('sample.json') .then((data) => data.json()) .then((obj) => { console.log(obj); }); await와 async를 사용하는 방법 JavaScript async function load() { // 파일 읽어 오기 const data = await fetch('sample.json'); /..

2022.08.01