wretch

 

2019년 이후,

severless가 유행하며, fetch사용이 늘어났다.

 

fetch는 꽤 편리하다.

ajax보다 간편하니깐.

 

하지만 wretch보다 불편하다.

 

2023년 1월 현재..

wretch보다 간편한 데이터 전달 방법은 없을 것이다.

 

 

 

 

 

 

 

 

위와 같이 공공데이터에서 특정 json파일을 가져오는,

fetch 코드는 대략 아래와 같다.

 

let btnBusan = document.getElementById('busanBtn');    let dataTable01 = document.getElementById('dataTable01');         btnBusan.addEventListener('click', () => {                 fetch("https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/busandb.json?alt=media&token=c67cacb0-da42-4877-8817-1c32feeaa305")               .then( res => res.json() )               .then( json => {                   for( let key in json){                       let arr1 = json[key].item;                            arr1.forEach( arr => {                               dataTable01.innerHTML += `<hr></hr><p style="text-align:center;">주소: ${ arr.adres } </p>`                            })                     }               });           })

[fetch 활용한 코드]

 

 

위의 코드를 wretch로 바꿔보자.

 

let btnBusan = document.getElementById('busanBtn');     let dataTable01 = document.getElementById('dataTable01');          btnBusan.addEventListener('click', () => {              wretch("https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/busandb.json?alt=media&token=c67cacb0-da42-4877-8817-1c32feeaa305")             .get()             .json(json => {                       for( let key in json){                       let arr1 = json[key].item;                            arr1.forEach( arr => {                                dataTable01.innerHTML += `<hr></hr><p style="text-align:center;">주소: ${ arr.adres } </p>`                            })                       }             });     }

[wretch 활용한 코드]

 

뭐가 바뀐걸까 싶지만

.get()부분이 변했다.

 

wretch를 사용하면, 더이상 then()을 사용할 필요가 없다.

POST, GET 역시

미들웨어 사용하듯 자연스럽다.

 

GitHub - elbywan/wretch: A tiny wrapper built around fetch with an intuitive syntax.

 

이외에도 auth보안, CORS, 에러처리가 간편해졌다.

빅데이터를 자주 처리해야 상황이 많다면,

wretch는 필수다.