메로그

모바일 앱에서 웹뷰(WebView)를 사용할 때, 웹 페이지와 네이티브 앱 간의 데이터 교환이 필요할 수 있습니다. 이를 위해 JavaScript 브릿지를 활용하면 웹과 앱이 서로 데이터를 주고받을 수 있습니다. 이번 포스팅에서는 안드로이드 WebView에서 JavaScript 브릿지를 설정하고, 간단한 데이터 송수신 테스트를 수행하는 방법을 설명합니다.1. WebView에서 JavaScript 인터페이스 추가하기안드로이드에서 웹 페이지의 JavaScript와 통신하려면 JavascriptInterface를 이용해야 합니다. 아래는 WebView 설정과 브릿지 구현 코드입니다.MainActivity.ktpackage com.example.bridge_testimport android.annotation...

야무지게 Axios 사용하기클라이언트와 서버가 통신하기 위해 사용되는 대표적인 라이브러리 중 하나입니다.Axios 인스턴스를 사용하여 API 클라이언트 설정하기우선 야무지게 axios 를 사용할라면, 그냥 쓰지 말고 axios.create를 사용하여 axios 에 대한 커스텀 셋팅을 해줍시다.요청에 대한 baseURL 과 요청마다 자동으로 인증 코드를 추가하는 인터셉터, 타임 아웃 기능을 추가해줍시다.Axios 인스턴스 생성우선, axios.create를 사용하여 기본 설정을 가진 Axios 인스턴스를 생성합니다. 이 인스턴스는 기본 URL과 헤더를 설정하여 모든 요청에서 일관된 설정을 유지할 수 있게 해줍니다.import axios from 'axios'const apiClient = axios.cre..

ECMA2022 에서 Error Cause 메서드가 나왔는데 이를 이용하여 좀 더 구체적인 에러 메시지 추가가 가능해졌습니다. 예를 들어, api 를 try/catch 를 이용해서 에러 예외 처리한다고 하면 아래와 같이 "user.api 호출하다가 무슨 에러가 발생하였습니다"와 같이 throw 를 날려줍니다. try { const res = await user.api(); return res; } catch (err) { throw new Error("user.api error"); } 이를 cause 메서드를 이용하면 좀 더 구체적으로 에러 표시가 가능해집니다. try { const res = await user.api(); return res; } catch (err) { throw new Error..

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공하며, XMLHttpRequest보다 강력하고 유연한 대체제입니다. 우리가 흔히 사용하는 axios, ajax 와 마찬가지로 cors, header 설정을 할 수 있으며, promise 를 리턴한다. 기본적인 사용방법은 아래와 같다. // then fetch(url) .then((res)=>res.json()) .then((data)=>{ console.log(data) }) // async, await const res = await fetch(url) const data = await res.json() console.log(data) 헤더 설정 방법은 아래와 같다. fetch(url, { method: "POST" hea..

보통 서비스 / 데이터 가공 구간에서 저장하고 있는 파일을 base64로 파싱하여 프론트로 내려주게 된다. 그리고 이를 이용해 프론트는 base64 를 디코딩하여 blob 객체를 생성하고 이를 이용해 파일을 다운로드한다. 여기서 궁금한 점은 base64 로 왜 인코딩해서 내려주냐? 인데, 간단하게 바이너리 데이터를 텍스트 데이터로 변경해서 내려주기 때문에 성능, 보완에 장점이 있다고 한다. 예를 들어, JSON 을 텍스트로 변경해서 내려주는거를 상상하면 이해가 될 것이다. 코드 아래는 base 64 데이터를 받아왔다는 가정하에 아래에 base64 로 데이터를 넣으면 xlsx 를 다운받을 수 있을 것이다. /** * base64 를 받아 엑셀 다운로드 하는 함수 * @param {base64} base64..

Promise.all() Promise.all() 은 여러 개의 프로미스를 동시에 실행하고, 결과값을 배열로 반환합니다. 이 메소드는 모든 프로미스가 완료될 때까지 기다립니다. 그리고 모든 프로미스가 완료되면, 각각의 프로미스가 반환한 결과값들이 배열로 반환됩니다. 예를 들어, 아래와 같이 Promise.all() 을 사용하여 두 개의 API 요청을 동시에 수행하고 결과값을 받아올 수 있습니다. async function fetchUserData() { const [user, posts] = await Promise.all([ fetchUser(), fetchPosts() ]); console.log(user, posts); } function fetchUser() { return axios.get(''..