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

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

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

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

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

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'); /..

226_자바스크립트에서 fetch()로 텍스트 데이터 읽어오기 [적용] 데이터를 가져오고 싶을 때 [문법] 메소드 의미 반환 fetch(URL) URL로 데이터 가져오기 Promise [내용] fetch()를 사용하면 간단하게 외부 파일을 가져올 수 있다. 프로그램에서는 데이터 다운로드의 시간 예측이 불가능하므로 Promise의 then()을 사용해 비동기로 처리한다. fetch()로 데이터를 가져온 뒤 then()을 호출한다. 이것이 데이터를 읽어 오는 첫 번째 단계로, 샘플코드의 (1)과 같다. 네트워크에서 가져온 데이터는 다양한 형식이 있으므로 데이터를 프로그램의 목적에 맞게 해석해야 한다. 샘플에서는 텍스트 형식의 데이터를 사용하므로 (1)에서 가져온 데이터를 text()를 사용해 해석하고 이 결..

225_자바스크립트에서 JSON 변환 기능 커스터마이징 [적용] 일부 데이터만 JSON 변환 작업을 하고 싶을 때 [문법] 메소드 의미 반환 JSON.stringify(obj, replacer, space*) 일부 데이터를 JSON 문자열로 변환 문자열 [내용] JSON.stringify()의 두 번째 인수는 replacer 함수를 호출하며, 이 함수는 JSON 데이터 변환 룰을 설정할 수 있다. 예를 들어, 숫자인 경우 작업을 무효화하고 문자열인 경우에만 변환 작업을 실행하록 지정할 수 있다. JavaScript main.js const replacer = (key, value) => { // 숫자 형식을 처리 예외 if (typeof value === 'number') { return undefine..