JavaScript

Framework/Node.js

[Node.js] Event loop workflow & lifecycle in low level (번역)

(원문) https://www.voidcanvas.com/nodejs-event-loop Node.js event loop workflow & lifecycle in low level A year back while describing the differences between setImmediate & process.nextTick, I wrote a bit on the low level architecture of node’s event-loop. Surprisingly, the readers of that post became more www.voidcanvas.com 1년 전, setImmediate와 process.nextTick의 차이점을 설명하면서, Node의 이벤트 루프의 저수준 구조에 대..

Language/JavaScript

[JS] Async, Await 동작 원리

지난 Promise 동작 원리에 이어 Async, Await 키워드의 동작 원리에 대해 알아보자. [JS] Promise 동작 원리 Promise는 무엇인가? MDN에서는 다음과 같이 설명하고 있다. Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. --- Promise는 프로미스가 생성된 시점에는 알려지 isthislee.com Async / Await는 어떻게 동작하나? 비동기 프로그래밍과 Promise 작업을 쉽게 할 수 있도록 도와주는 async/await 함수는 어떻게 동작할까? 우선 async/await도 결국은 Promise 기반으로 동작한다. 아래 그림을 확인해보자. async 키워드로 함수를 선언하면 Promise를 반환하는 비동기함수가 되는 ..

Language/JavaScript

[JS] Promise 동작 원리

Promise는 무엇인가? MDN에서는 다음과 같이 설명하고 있다. Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. --- Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환합니다. 즉, Promise는 비동기 작업을 감싸고, 비동기 작업의 결과를 처리하는 코드를 깔끔하게 작성할 수 있도록 도와주는 객체이다. Promise객체는 다음 ..

Language/JavaScript

[JS] 모듈화와 스코프

모듈화란, 코드의 재사용성과 유지보수성을 높이기 위해 코드를 기능별로 분리하는 것을 말한다. 모듈화를 통해 스코프(scope)를 제한하고, 식별자(변수나 함수 등)의 이름이 충돌하는 문제를 해결할 수 있다. 모듈이란? 모듈은 코드의 일부분을 담고 있는 파일을 의미한다. 각 모듈은 파일 단위로 코드를 구분하며, 파일 내에 선언된 식별자는 해당 모듈(파일) 스코프에서만 유효하다. 모듈 내부에 선언된 식별자는 'export', 'import' 등의 키워드를 통해 다른 모듈에서 사용하거나, 가져와 사용할 수 있다. 모듈과 스코프 모듈은 자체적인 스코프를 가지고 있어서 모듈 내부에 선언된 식별자는 해당 모듈의 스코프 내에서만 유효하다. 이러한 특성 덕분에 모듈 내부에 선언된 식별자는 다른 스코프에 선언된 식별자와..

Language/JavaScript

[JS] 함수 선언문 vs 함수 표현식 (ft. 호이스팅)

* 해당 글은 코어자바스크립트 책을 공부하며 정리한 내용입니다. 함수 선언문 vs 함수 표현식 함수 선언문은 function 정의부만 존재하고 별도의 할당 명령이 없는 것 함수 표현식은 정의한 function을 별도의 변수에 할당하는 것 함수 선언문의 경우 반드시 함수명이 정의돼 있어야 하는 반면, 함수 표현식은 없어도 된다. 함수명을 정의한 함수 표현식을 ‘기명 함수 표현식', 정의하지 않은 것을 ‘익명 함수 표현식'이라고 부르기도 하는데, 일반적으로 함수 표현식은 익명 함수 표현식을 말한다. function a () { } // 함수 선언문. 함수명 a가 곧 변수명. a(); // 실행 OK. var b = function () { } // (익명) 함수 표현식. 변수명 b가 곧 함수명. b(); /..

Language/JavaScript

[JS] Execute context(실행 컨텍스트)와 scope 기초

(실행 컨텍스트와 Scope의 개념에 대한 내용이 부족한 글입니다. 추가 글 작성 예정입니다.) Execute context와 Scope JavasSript는 변수를 부르면 Scope라는 곳에서 찾게 된다. 💡 Execute context(실행 컨텍스트)란? 코드 실행에 필요한 정보들을 담고 있는 객체를 말한다. 실행 컨텍스트는 변수와 함수 등의 정보를 수집하여 구성되며, 스택 자료구조를 이용하여 동작한다. 이를 이해하면 자바스크립트의 변수 스코프, 호이스팅 등의 동작원리를 이해할 수 있으며, 디버깅에도 도움이 된다. 💡 Scope란? 변수(식별자)의 유효범위를 나타내는 용어 - Scope means area, space, or region. - Global scope means global space ..

Language/JavaScript

[JS] Promise all & race

Promise all & race 위 그림은 동기화(synchronous)와 비동기화(asynchronous)에 관한 내용이다. 동기화는 여러가지 일이 순서대로 진행되는 것이고, 비동기화는 일이 각각 따로 진행되는 것을 말한다.(현재 실행중인 코드의 완료 여부와 상관없이 즉시 다음 코드로 넘어가는 것) 동기적인 코드는 코드가 심플하고, 동작을 파악하기 간편하나 느리다는 단점이 있다. 비동기적으로 다양한 일을 처리한 후에 작업을 생성하기 위해 사용하는 것이 Promise all과 race이다. Promise.all은 비동기적으로 다양한 일을 처리 후 가장 마지막 작업이 처리된 이후에 작업을 수행하도록 하는 방식이다.(다음 작업이 수행될 때 이전에 처리된 모든 결과값을 배열로 받은 상태다.) Promise...

Language/JavaScript

[JS] new Promise

new Promise new Promise를 통해 Promise 객체를 생성할 수 있다. new Promise 생성 시, Promise를 이용해서 실행한 작업이 성공했는지, 실패했는지를 알려주는 콜백함수를 공급해줘야 한다. 위와 같이 Promise를 생성할 수 있다. 위 Promise는 2초 후에 작업이 완료되면 callback으로 전달된 함수의 첫 번째 파라미터에 담겨있는 resolve 함수를 호출한다. 그 후, then과 catch 등을 이용해 Promise 이후의 작업을 수행할 수 있다. 하지만, 위와 같은 방식은 잘 사용하지 않는다. 보통은 함수의 결과값으로 Promise를 반환하는 경우가 많다. 이렇게 사용하면 기존의 코드보다 재사용성이 높아진다. 이러한 Promise는 여러 개의 비동기적인 작..

Isthis
'JavaScript' 태그의 글 목록