비동기

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

https://nodejs.org/ko/docs/guides/dont-block-the-event-loop 이벤트 루프와 워커 풀을 막지 마세요! | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 이 글이 나오게 된 배경 Express서버를 짜던 중 파일 입출력을 할 일이 생겼는데, 나는 지금까지 그래왔듯 자연스럽게 fs모듈을 import해서 fs.readFileSync를 사용했다. 사실 readFile 메서드도 있지만 이 친구는 비동기로 작동하기 때문에 Promise로 Wrapping하여 사용해야했고, 그게 귀찮다는 이유에서 readFileSync를 지속적으로 남발해왔다. readFil..

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

43 Ajax AJAX WebAPI 중 XMLHttpRequest 객체를 기반으로 동작함 장점 변경할 부분 갱신하는데 필요한 데이터만 받아오기 때문에 불필요한 통신이 없음 화면 깜박임이 없음 블로킹 없이 동작함 JSON JavaScrtip Object Noation 클라이언트-서버간 HTTP통신을 위한 텍스트 데이터 포맷 JSON 표기방식 객체 리터럴과 유사하게 키-값으로 이뤄진 순수한 텍스트임 JSON의 키는 반드시 큰 따옴표로 묶어야함 JSON.stringify 객체를 JSON포맷의 문자열로 변환함 클라이언트가 서버로 객체를 보내려면 객체를 문자열화 해야하기때문임 이를 직렬화라함 JSON.parse JSON문자열을 객체로 변환함 서버→클라이언트로 도착한 데이터는 문자열임 이를 JSON으로 객체화해야 ..

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

Javascipt를 제대로 이해하기 위해 글을 쓴다. JS 엔진 가장 대중적인 JS엔진은 구글의 V8엔진이다. 크롬과 nodeJS의 엔진이다. JS엔진은 메모리힙과 호출스택으로 구성된다. 메모리힙 메모리힙에는 구조화되지 않는 메모리영역(C언어의 동적할당을 생각하면 될 것 같다.)이 할당된다. 변수와 객체에 대한 모든 메모리 할당이 발생한다. 호출스택 코드가 실행될 때 한줄씩 호출 스택이 쌓이게된다. call stack에는 anonymous(node에선 main)라는 전체 코드를 가지고 있는 것이 call stack에 담기게 된다. JS는 싱글스레드이다. 한번에 하나의 일 밖에 처리할 수 없다. 이말인 즉슨, call stack이 하나라는 것이다. 하나의 함수가 실행되는 중에 다른 일을 할 수 가 없고, ..