Frontend/Javascript

비동기함수의 동기처리에 대한 오해 (forEach async await)

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

this 바인딩

그렇다. 내가 쓰는 this는 대부분 내가 생각하는 그것이 아니었다. js의 this는 함수 호출방식에 따라 결정된다. js의 함수는 호출될 때, 매개변수로 전달되는 인자값 외에 arguments 객체와 this를 암묵적으로 전달받는다. 실행중에는 할당으로 설정할 수 없고, 함수를 호출할 때마다 다를 수 있다. 아래 링크를 참고하여 글을 쓴다. https://poiemaweb.com/js-this this | PoiemaWeb 자바스크립트의 this keyword는 Java와 같은 익숙한 언어의 개념과 달라 개발자에게 혼란을 준다. Java에서의 this는 인스턴스 자신(self)을 가리키는 참조변수이다. this가 객체 자신에 대한 참조 값을 poiemaweb.com 그래서 ES5는 함수가 어떻게 호출..

try catch

try catch throw new Error를 통해 발생 시킨 예외는 catch를 통해서 처리될 수 있다. throw된 Error는 catch를 만날때 까지 함수 밖으로 던져진다. 만약 catch가 없다면 return되며 프로그램이 종료된다. 이걸 이해한다면, Error를 처리한 후의 동작도 조작할 수 있다. 아래와 같은 코드가 있다고하자. function getError(){ throw new Error("에러"); } function test(){ try{ getError(); }catch(err){ console.log(err); console.log("제대로 꺼짐요"); } } 이러면 Error가 throw된 후에 test함수에서 해당 Error를 잡아서 console로 찍은 후에 제대로 꺼짐요..

비동기와 동기, 프로미스

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

JS 동작원리

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