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

224_자바스크립트에서 JSON 변환에 들여쓰기 적용하기 [적용] 자바스크립트 객체를 JSON 문자열로 변환하고 싶을 때 가독성을 위해 JSON에 들여쓰기를 적용하고 싶을 때 [문법] 메소드 의미 반환 JSON.stringify(obj, null, ' ') 들여쓰기를 적용해 객체를 JSON 문자열로 변환 문자열 [내용] JSON.stringify()의 세 번째 인수는 JSON 문자열의 줄바꿈과 들여쓰기 삽입을 위해 사용한다. 들여쓰기 삽입을 위한 문자열을 지정하거나 숫자를 전달하면 숫자만큼의 공백이 삽입된다. 다음 예시를 확인해 보자. JavaScript main.js const data = {a: 1000, b: '여러분 안녕하세요.'}; const str = JSON.stringify(data, nu..

223_자바스크립트에서 객체를 JSON 변환하기 [적용] 자바스크립트의 객체를 JSON 문자열로 변환하고 싶을 때 [문법] 메소드 의미 반환 JSON.stringify(obj) 자바스크립트 객체를 JSON 문자열로 변환 문자열 [내용] JSON.stringify()를 사용해 자바스크립트의 객체를 JSON 문자열로 변환할 수 있으며, 인수에는 객체를 전달한다. JavaScript main.js const data = {a: 1000, b:'여러분 안녕하세요.'}; const str = JSON.stringify(data); console.log(str); // 결과: { "a": 1000, "b": "여러분 안녕하세요." } 참조 : 실무에 바로 적용하는 자바스크립트 코드레시피 278 아케다 야스노부, 카..

222_자바스크립트에서 JSON 문자열 객체로 변환하기 [적용] JSON의 문자열을 자바스크립트의 객체에서 사용하고 싶을 때 네트워크에서 받은 JSON 문자열을 사용하고 싶을 때 [문법] 메소드 의미 반환 JSON.parse(문자열) JSON 형식의 문자열을 JSON 객체로 변환 객체 [내용] JSON.parse()를 사용해 JSON 문자열을 해석하고 자바스크립트의 값과 객체로 변환한다. JSON.parse()로 변환한 문자열은 자바스크립트의 객체로 처리되므로 마침표(.)를 사용해 참조할 수 있다. JavaScript main.js // JSON 문자열 const jsonString = `{ "students": 40, "grade": 4, "name": "C반" }`; // 문자열을 자바스크립트의 객체..