JS

JavaScript 이벤트 루프 동작방식: Microtask Queue, Macrotask Queue

console.log(1);setTimeout(() => console.log(2));Promise.resolve().then(() => console.log(3));Promise.resolve().then(() => setTimeout(() => console.log(4)));Promise.resolve().then(() => console.log(5));setTimeout(() => console.log(6));console.log(7);서론 JavaScript의 이벤트 루프는 비동기 작업을 관리하며 프로그램 실행의 중심 역할을 한다. JavaScript 코드가 실행되면 객체와 기본형 변수는 메모리의 힙과 메모리 스택에 로드된다. 이후 함수 호출과 비동기 작업은 콜 스택, 콜백 큐, 마이크로태스크 큐..

[JS] Promise와 Async/Await의 이해

서론 JavaScript에서 비동기 프로그래밍은 중요한 주제 중 하나이다. 비동기 작업은 코드의 흐름을 방해하지 않고, 동시에 여러 작업을 처리할 수 있게 해준다. 이러한 비동기 작업을 효율적으로 처리하기 위해 Promise와 Async/Await라는 두 가지 주요 도구가 있다. 이 글에서는 Promise가 무엇인지, 그리고 Async/Await와의 차이점이 무엇인지에 대해 좀 더 깊이 있게 다루고자 한다.PromiseJavaScript는 기본적으로 단일 스레드로 동작하기 때문에, 코드가 순차적으로 실행된다. 그러나 웹 애플리케이션에서는 네트워크 요청, 파일 입출력, 타이머 등 시간이 걸리는 작업을 처리해야 하는 경우가 많다. Promise는 비동기 작업이 완료되었을 때 결과를 사용할 수 있게 해주는 객..

[JS] Javascript에서 동기함수와 비동기함수의 차이

Introduce 자바스크립트에서 동기와 비동기를 이해하는 것은 다른 프로그래밍 언어보다 중요하다. 왜냐하면 자바스크립트는 메일 스레드 하나만을 사용하는 단일 스레드 방식으로 설계되어 있으며 메인 스레드에서 뷰가 렌더링되고 사용자와의 상호작용이 많기 때문이다. 브라우저에서 메인 스레드가 blocking되면 웹페이지가 멈추는 프리징 현상이 발생하기에 사용자 경험에 문제가 생길 수 있다. 따라서 이 글에서는 동기와 비동기의 차이를 알아보고, 브라우저에서 이 두 방식이 어떻게 동작하는지 살펴보고자 한다. PreliminariesCall stackCall stack은 자바스크립트 엔진이 현재 실행 중인 함수와 그 함수들이 호출한 다른 함수들을 추적하는 자료 구조다. 이는 LIFO(Last In, First Ou..

[JS] Javascript에서의 FP

서론 함수형 프로그래밍은 패러다임중의 하나이다. 프로그램이 어떻게 동작해야 할지 일일히 명시하는 명령형 프로그램과 다르게 프로그램의 결과만을 입력하는 선언적 프로그램을 만드는 패러다임이다.  자바스크립트는 세가지 특징때문에 함수형 프로그래밍을 쓰기 편하다. 첫째로 클로저를 통해 외부 변수를 쉽게 참조할 수 있으며, 둘째로 1급 객체로서 함수를 값처럼 사용할 수 있어 코드의 유연성과 재사용성을 높인다. 마지막으로 모나드의 일종인 Promise를 통해 비동기 작업을 체계적으로 처리할 수 있다. 이러한 특징들은 JavaScript를 함수형 패러다임에 매우 적합한 언어로 만든다. 이를 통해 순수 함수로 부작용을 방지하고 불변성을 유지할 수 있어 코드의 안정성과 예측 가능성을 높일 수 있다.함수형 프로그래밍의 주..

[JS] Javascript에서의 모듈 시스템

서론JavaScript는 웹 개발에서 널리 사용되는 언어로, 시간이 지나면서 점점 더 복잡한 애플리케이션을 개발하기 위해 다양한 기능들이 추가되었다. 이 과정에서 모듈 시스템은 코드의 재사용성과 유지보수성을 높이는 중요한 역할을 하게 되었다. 모듈 시스템은 개발자가 큰 프로젝트를 작은 단위로 나누어 작업할 수 있도록 도와주며, 각각의 모듈은 독립적으로 개발되고 테스트될 수 있다. 이번 글에서는 JavaScript의 주요 모듈 시스템에 대해 자세히 살펴보겠다.JavaScript의 모듈 관리CommonJS CommonJS는 서버사이드 JavaScript 환경인 Node.js에서 주로 사용되는 모듈 시스템이다. CommonJS의 기본 아이디어는 각 파일을 독립적인 모듈로 간주하고, 이러한 모듈을 module...

[JS] Javascript에서의 OOP

서론 함수형 프로그래밍은 JavaScript 개발에서 중요한 패러다임이다. JavaScript는 함수형 프로그래밍의 여러 중요한 특징들을 지원하여 개발자들이 더 효율적이고 오류가 적은 코드를 작성할 수 있게 한다. 특히, 클로저를 통해 외부 변수를 쉽게 참조할 수 있으며, 1급 객체로서 함수를 값처럼 사용할 수 있어 코드의 유연성과 재사용성을 높인다. 또한, 모나드의 일종인 Promise를 통해 비동기 작업을 체계적으로 처리할 수 있다. 이러한 특징들은 JavaScript를 함수형 패러다임에 매우 적합한 언어로 만든다. 이를 통해 순수 함수로 부작용을 방지하고 불변성을 유지할 수 있어 코드의 안정성과 예측 가능성을 높일 수 있다. React에서는 이러한 함수형 패러다임을 권장하여 상속보다는 합성을 권장한..

[JS] Javascript에서의 Memory Management

Introduce C와 같은 low-level 언어는 malloc()과 free()와 같은 함수로 수동 메모리 관리가 가능하다. 반면, JavaScript는 객체가 생성될 때 자동으로 메모리를 할당하고 더 이상 사용되지 않을 때 garbage collection를 통해 이를 해제한다. 이러한 자동화는 개발자에게 메모리 관리를 신경 쓰지 않아도 된다는 잘못된 인식을 줄 수 있어 혼란의 원인이 될 수 있다. 이 글에서는 JavaScript에서 메모리 관리가 어떻게 이루어지는지 알아보아 효율적인 메모리 관리를 가능하게 하는데 도움이 되고자 한다. PrelimiaresJavascript data type 자바스크립트에는 기본형, 참조형 자료형이 있다. 기본형과 참조형의 종류들은 아래 그림에 나타내었다. 기본형과..

[JS] Javascript의 프로토타입과 상속: 개념과 동작 이해

서론 Javascript에서 객체 상속은 prototype을 이용해 이루어진다. prototype은 엄밀히 말하면 전통적인 상속이 아닌 참조 메커니즘으로 작동한다. prototype 언어의 특성상, 대부분의 구성요소가 객체로 취급되며, 이는 함수, 배열, 심지어 기본 자료형까지 포함한다. ES6에서 도입된 클래스 문법은 prototype 기반의 동작을 더욱 쉽게 만드는 문법적인 설탕이다. 따라서, prototype을 이해하는 것은 자바스크립트를 효과적으로 다루는 데 중요하다. 본 글에서는 prototype과 prototype 체인의 개념 그리고 생성자 함수에 대해 설명하고자 한다. 이를 통해 자바스크립트의 객체 지향적 접근 방식을 더 깊이 이해할 수 있길 바란다.프로토타입과 프로토타입 체인 prototy..