PROMISE

이전 게시글에서 React Webview와 ReactNative의 통신을 시켜보았다. 이때의 방식은 WebView가 onLoad되었을때, React Webview에서 필요한 토큰을 주입하게 하는 형태였다. 하지만, 프로젝트가 커지고, 다양한 API요청이 많아짐에 따라 우리팀은 자연스럽게 비용문제가 발생할 수 있을거라는 걱정을 하게되었고, 이에 서버 API호출을 줄이고자 데이터를 받아오는 부분에서 네이티브 기기의 DB를 사용하기로 하였다. 문제상황 기기 DB에 저장된 데이터를 받아와서, 웹뷰에서 보여줘야했다. 이때의 DB테이블은 우리팀원이 이미 만들어 둔 상태였기에, 나는 이것을 조회해서 웹뷰에 넣어만 주면 됐다. 그런데 DB조회는 비동기적으로 일어난다. Promise를 resolve시켜야 실제 데이터를 ..

코드를 짜다보면 비동기함수를 동기처리하여 순차적으로 실행시켜야할 일이 생기기 마련이다. 내가 구현하려했던 동작은 이거였다. //timeout 완료 (1초뒤...) //timeout 완료 (1초뒤...) //timeout 완료 (1초뒤...) //하이 반복문으로 짤수도 있지만, 고차함수로 짜는것이 좀더 가독성이 좋다고 생각해서 처음에는 forEach문을 활용해서 비동기함수를 동기처리해주고자 했다. forEach내부에서 await의 문제 초기 코드를 비동기처리 함수를 기다렸다가 동기적으로 진행하기위해 이런식으로 짰다. const timeout = () => new Promise((resolve) => { setTimeout(() => resolve('timeout 완료'), 1000); }); Array.f..

이번에는 Worker를 썼을때와 쓰지않았을때의 성능을 직접 비교해보도록 하겠다. 단순 노가다 작업을 비교해볼 것이다. 1부터 100억까지 더하기 1부터 100억까지 더하면 js Number타입의 안전한 범위인 2^53-1(9007199254740991)을 넘어서므로, 값보다는 시간에 초점을 맞추고 보면된다. https://jinho.dev/posts/JS-Number/ 자바스크립트에서 숫자는 어떻게 동작할까요 - Blog by Jinho Hong Intro 자바스크립트에서 number 를 사용하는 것은 매우 익숙합니다. Javascript 개발자라면 하루에도 수십번, 아니 수백번씩 자연스럽게 number 연산을 사용할 것 입니다. 하지만 과연 number 연산의 내부 jinho.dev 그냥 반복문으로 더..

45 Promise 비동기 함수는 동기함수가 끝나야 테스크 큐에서 콜스택으로 푸쉬에서 실행되므로, 반환 결과를 외부에서 확인할 수 없고, 상위 스코프 변수에 할당할 수도 없다. 따라서 비동기 함수의 처리결과에 대한 후속처리는 비동기함수 내부에서 수행해야한다. 에러처리의 한계 콜백 패턴으로 비동기 처리를 하면, 에러처리가 곤란하다. try{ setTimeout(()=>{throw new Error()}, 2000); } catch(err){ console.log(err); } 에러가 잡히지 않는다. 에러는 호출자 방향으로 전파된다. 즉, 콜스택에 위에 있는 함수에서 아래에 있는 함수로 전파된다. 이때 비동기 함수는 콜스택에 없으므로 에러가 전파되지 않는것이다. 프로미스의 생성 const promise=ne..

비동기의 동기처리와 프로미스 프로미스를 통해 비동기메서드는 동기메서드처럼 값을 반환 할 수 있게 된다. 프로미스 생성 프로미스가 이행되거나 거부될때(fulfilled, rejected), 이벤트 큐에 처리된 처리기들이 호출된다. 프로미스는 아래와 같이 객체 형태로 생성할 수 있다. const promise=new Promise(); 프로미스의 상태와 조작 Promise의 인자들을 통해 Promise의 상태를 바꿀 수 있다. 프로미스는 pending, fulfilled, rejected의 세가지 상태를 가진다. 일단 프로미스가 호출되면 프로미스는 Pending상태이다. new Promise의 인자로 resolve와 reject가 있는데, 이 두 함수를 통해 resolve를 실행하면 fulfilled가 되고..