불타는 코딩🔥

fetch API는 XMLHTTPRequest에 대한 편의성을 증대하기 위해 ES6+에 추가되었습니다. 기존 XMLHTTPRequest은 사용성이 까다로워 jQuery.ajax 혹은 axios 라이브러리를 많이 사용해왔는데요.  이제는 라이브러리나 플러그인을 설치하는 번거로움없이 브라우저 네이티브로 제공되는 fetch API의 강력하고 유연한 사용성으로 네트워크 통신을 할 수 있습니다. 

주의점

• 브라우저 호환성: Chrome 이외는 브라우저는 버전이 낮을 경우 polyfill을 적용하여  fetchAPI를 사용하여야합니다. 
• fetch()로 부터 반환되는 Promise 객체는 HTTP error 상태를 reject하지 않습니다. HTTP Statue Code가 404나 500을 반환하더라도요. 대신 ok 상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환됩니다.
• 보통 fetch는 쿠키를 보내거나 받지 않습니다.  사이트에서 사용자 세션을 유지 관리해야하는 경우 인증되지 않는 요청이 발생합니다. 쿠키를 전송하기 위해서는 자격증명(credentials) 옵션을 반드시 설정해야 합니다.
  2017년 8월 25일 이후. 기본 자격증명(credentials) 정책이 same-origin 으로 변경되었습니다. 파이어폭스는 61.0b13 이후 변경되었습니다.

주의점을 살펴보았으니 각설하고, fetch API의 사용을 위해 간단한 방법을 알아보겠습니다. 

// url은 필수, options는 선택사항
fetch(url, options)

너무 간단했나요? 아래는 fetch API의 디테일한 사용방법입니다.

fetch(url, {
  method: 'GET' // *GET, POST, PUT, DELETE, etc.
  mode: 'cors', // no-cors, cors, *same-origin
  cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
  credentials: 'same-origin', // include, *same-origin, omit
  headers: {
  'Content-Type': 'application/json',
  // 'Content-Type': 'application/x-www-form-urlencoded',
  },
  redirect: 'follow', // manual, *follow, error
  referrer: 'no-referrer', // no-referrer, *client
  body: JSON.stringify(data), // body data type must match "Content-Type" header
})
.then(response => response.json());
// 응답받은 JS오브젝트를 JSON객체로 변환합니다.
// JSON 구조의 데이터를 사용하기위해 변환작업을 하는 것입니다.

.then(response => response.html()); 
// 응답받은 JS오브젝트를 html객체로 변환합니다.
// html 구조의 데이터를 사용하기위해 변환작업을 하는 것입니다.

읽기 싫어지시죠? 글자가 많으면 읽기 싫어지는 법입니다. 하지만 메뉴얼을 잘 읽어야 제대로 사용할 수 있습니다. 메뉴얼을 잘 읽어보는 습관이 중요합니다. 그럼 테스트로 fetchAPI를 사용해보겠습니다. 일단 Chrome 브라우저를 열어서 F12(macOS 사용자의 경우 cmd + alt + i)를 눌러 개발자도구를 엽니다. console 을 찾아 아래의 코드를 입력합니다.  아래는 fetch API로 요청하고, 응답을 확인하는 코드입니다.

const response = fetch("https://jsonplaceholder.typicode.com/todos/1");
console.log(response)

콘솔에 입력후 엔터를 치자마자 응답이 올겁니다. 응답된 객체는 역시 Promise객체입니다.

► Promise {<pending>}

이 Promise객체의 상태를 가볍게 뜯어보면 아래의 형태로 되어있습니다.

▼Promise {<pending>}
  ►__proto__: Promise
   [[PromiseStatus]]: "resolved"
  ►[[PromiseValue]]: Response

잠시 설명을 드리자면 __proto__에는 Promise의 내부함수들이 들어가있습니다. [[PromiseStatus]]에는 기다린 데이터가 왔다는 의미의 'resolved' 그리고 [[PromiseValue]]에는 Response에 대한 Header정보들이 들어가있습니다. 더 자세히 설명하면 Promise에 대한 소개로 빠질 것 같으니 이만 줄이겠습니다.

Promise가 생소하신 분들은 Promise가 왔는데 뭐 어쩌라고? 빨리 원하는 데이터를 보여줘!!! 라고 생각하실 수 있는데요. 그런 분들을 위해 지금 바로 console에 아래의 코드를 입력하여, 방금보낸 요청에 대한 응답을 확인해보겠습니다.

response
  .then(result => result.json())
  .then(json => {
  console.log(json);
});

풀어서 설명드리자면, 첫번째 then에서는 result를 json객체로 변환하여 리턴합니다. 두번째 then에서는 첫번째 then에서 리턴한 데이터를 json이라는 인자에 담아와서 console.log로 데이터를 보여줍니다. 참고로 then이 반환값을 있다면 직후 then이 직전 then반환값을 인자에 담아서 쓸 수 있는데요. 이러한 기술명칭을  Promise Chaining이라고합니다.  

또한 fetch API로 요청한 https://jsonplaceholder.typicode.com/todos/1 API는 요청시 반드시 JSON으로 반환(응답)되어야한다는 약속이 되어 있기때문에 json()을 쓴 것입니다. 만약 반환값이 HTML구조의 객체였다면 html()을 사용하여 변환(파싱)해야합니다. (예: result.html())

응답온 데이터 확인하기

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

fetch API에 대한 사용법을 간단하게 알아봤습니다. 추가로 http, https 등은 외부로부터 데이터를 내부로 가져오는 것이기때문에 보안이 중요한 사이트에서는 옵션설정을 꼼꼼하게 잘 해주어야합니다.

참고인용
fetch API의 대해서
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API
fetch API의 사용법https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Fetch%EC%9D%98_%EC%82%AC%EC%9A%A9%EB%B2%95

파일용량을 확인하는 방법을 두가지를 포스팅할 것이다.

사실 더 많을수도 있고, 알게 되면 더 포스팅 할 예정이다.

첫번째로 <input type="file"> 로 확인하는 방법

두번째로 AJAX 로 확인하는 방법

1. <input type="file"> 로 확인하는 방법

대부분 클라이언트에서 업로드할 파일의 용량을 제한하기 위해 사용된다.

ps. 본인은 img.src 를 통해 load된 이미지의 크기들을 DOM으로 가져오고 싶었다. 1번 방법아님.

1-1. html

<div>
	<input type="file" accept=".jpg, .jpeg, .png, .gif" id="inputFile" multiple>
	<div id="resultFile"></div>
</div>

1-2. javascript

const inputFile = document.querySelector('#inputFile');
const resultFile = document.querySelector('#resultFile');

inputFile.addEventListener('change', function(e) {
    return readURL(this)
}, false);

const readURL = input => {

    // 선택된 파일이 없으면 함수 종료
    if (!(input.files)) return
    
    // 결과창 초기화
    resultFile.innerHTML = "";
    
    // 선택된 파일만큼 반복
    for (let i = 0; i < input.files.length; i++) {
        
        //File정보를 읽을 수 있는 FileReader 호출
        const reader = new FileReader();
		
        //File 불러오기가 끝나면 실행될 함수
        reader.onload = function(e) {
            const img = new Image();
            
            // image파일의 blob 이 생성됨. blob -> 바이너리 오브젝트
            img.src = e.target.result
            
            // 생성된 데이터를 템플릿 문자열에 넣어준다.
            return resultFile.innerHTML +=
                `
                <dl>
                    <dt>${img.outerHTML}</dt>
                    <dd>${input.files[i].name}</dd>
                    <dd>${Math.round((input.files[i].size/1024)) + 'kb'}</dd>
                </dl>
                `;
        }
		
        // readAsDataURL은 Blob, File 을 읽을 수 있다.
        reader.readAsDataURL(input.files[i]);
    }
}

2. AJAX 로 확인하는 방법

AJAX로 이미지주소에 있는 이미지를 불러오면, ResponseHeader 객체가 생성되는데

여러 키값중 Content-Length 키, byte 값으로 이미지의 크기가 저장되어있다.

그러니 getResponseHeader()로 Content-Length를 가져오면 된다.

더 중요한 것은 

obj = URL.createObjectURL(Blob) 을 통해 생성된 URL객체는 

window.URL.revokeObjectURL(obj)를 통해 해제해주어야 가비지콜렉터가

폐기된 정보를 수거해간다.

ps. 본인은 img.src 를 통해 load된 이미지의 크기들을 DOM으로 가져오고 싶었다.  2번도 아님.

2-1. html

<div>
    <input type="button" value="ajax 조회" id="callRequest">
    <div id="resultRequest"></div>
</div>

2-2. javascript

const resultRequest = () => {
		// 배열로 되어 있는 이미지의 주소
        const arrImages = [
            './images/image01.jpg',
            './images/image02.jpg',
            './images/image03.jpg'
        ]
        
        // selector
        const resultRequest = document.querySelector('#resultRequest');
        
        // 결과값 초기화
        resultRequest.innerHTML = "";
		
        // request 함수 시작
        const request = url => {
        
        	// XMLHttpRequest 호출
            const xhr = new XMLHttpRequest();
            
         	// 어떻게 가져올건지? 어디서 가져올건지? 비동기로 가져올건지?
            xhr.open('get', url, true);
            
            // responseType은 Blob 으로 가져온다. Blob === 바이너리 오브젝트
            xhr.responseType = "blob"
            
            // xhr의 상태값이 변했을 때
            xhr.onreadystatechange = () => {
                // 연결실패시 함수종료
                if (xhr.readyState !== 4) return;
                
                // 연결성공시 
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const blob = xhr.response
                    
                    // URL.createObjectURL 은 blob 정보를 읽는다.
                    const objectURL = URL.createObjectURL(blob);
                    
                    // image에 Image객체를 호출
                    const image = new Image()
                    
                    // image의 src에 objectURL 할당
                    image.src = objectURL

                    resultRequest.innerHTML += '<p>' + image.outerHTML + '<br/>' +
                    	// getResponseHeader는 response 정보를 가져온다.
                        // Content-Length는 response header에 있으며, 
                        // FileSize가 byte단위로 담겨져있다.
                        Math.round(xhr.getResponseHeader('Content-Length') / 1024) + 
                        'kb </p>';
					
                    // 생성된 URL.createObjectURL을 해제하면 가비지컬렉터에서 수거해간다.
                    // setTimeout을 안할 경우 오류를 일으키는데 코드가 아래에 있어도
                    // 브라우저의 렌더링 과정에서 우선순위인 것 같다. 자세히 알아봐야함
                    const revoke = setTimeout(function() {
                        window.URL.revokeObjectURL(objectURL)
                        console.log('revoke')
                    }, 1000)
                }
            }
            xhr.send();
        }
		
        //이미지 갯수만큼 request 반복실행
        for (let i = 0; i < arrImages.length; i++) {
            request(arrImages[i])
        }
    }

    document.querySelector('#callRequest').addEventListener('click', resultRequest, false);

생각해본 것

3. cookie 나 cache에 접근하여 저장되어 있는 img의 size를 알 수있지않을까?(현재 이미지 이름만 출력가능한 상태)

4. 로드된 이미지들은 파일 생성자를 상속받는 인스턴스를 만들어 파일객체로 만들어본다?

5. 잠온다... 일단 자야지...

function chain( _x ){
  return new Promise( (resolve, reject) => {
    return resolve( _x ); 
  }) 
} 

chain("hello")
.then( res => { 
    console.log( '1', res );  //  console >>> '1', 'hello'
    return res; 
})
.then( res => { 
    console.log( '2', res );  //  console >>> '2', 'hello'
    return res; 
})
. then( res => {
    console.log( '3', res );  //  console >>> '3', 'hello' 
    return res; 
});

// return 값을 주면 이후 체이닝되는 then 에게 상속된다.