[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

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

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

2022.08.01