라이브러리 창고/데이터 · DB
wretch
Recstasy
2023. 1. 12. 06:03
2019년 이후,
severless가 유행하며, fetch사용이 늘어났다.
fetch는 꽤 편리하다.
ajax보다 간편하니깐.
하지만 wretch보다 불편하다.
2023년 1월 현재..
wretch보다 간편한 데이터 전달 방법은 없을 것이다.
위와 같이 공공데이터에서 특정 json파일을 가져오는,
fetch 코드는 대략 아래와 같다.
|
let btnBusan = document.getElementById('busanBtn');
let dataTable01 = document.getElementById('dataTable01');
btnBusan.addEventListener('click', () => {
.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', () => {
.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.
A tiny wrapper built around fetch with an intuitive syntax. :candy: - GitHub - elbywan/wretch: A tiny wrapper built around fetch with an intuitive syntax.
github.com
이외에도 auth보안, CORS, 에러처리가 간편해졌다.
빅데이터를 자주 처리해야 상황이 많다면,
wretch는 필수다.