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는 필수다.
'라이브러리 창고 > 데이터 · DB' 카테고리의 다른 글
『Dexie.js』비관계형 web storage라이브러리 (0) | 2021.01.07 |
---|---|
『알고리즘 검색&활용 -by.trekhleb-』 (0) | 2021.01.06 |
『sql.js』 가상DB 라이브러리 (0) | 2021.01.05 |
『LUCIA』경량 가상DOM (0) | 2021.01.02 |
『List.js』데이터 검색 JS라이브러리 (0) | 2020.12.31 |
댓글