Web/JavaScript

자바스크립트의 Data Binding

Angular React Vue 단방향, 양방향 단방향 단방향, 양방향 프론트엔드 프레임워크 및 라이브러리 삼대장은 모두 데이터 바인딩을 지원한다. 그만큼 필요하다는 뜻이라고 생각한다. 이번 포스트에서 데이터 바인딩에 대해서 알아보겠다. 이 포스트는 데이터 바인딩 개념 자체를 알아보는 글이다. vue에서의 데이터 바인딩을 알아보고 싶다면 v-model, angular에서의 데이터 바인딩을 알아보고 싶다면 Binding syntax 을 참고하면 된다. 사전 지식 Observation pattern 클래스 Data Binding 컴퓨터 프로그래밍에서 데이터 바인딩은 제공자와 소비자로부터 데이터 원본을 결합시켜 이것들을 동기화하는 기법이다. (위키백과) 여기서 소비자와 제공자는 뷰와 데이터이다. 즉, 데이터와..

자바스크립트의 Promise 직접 구현하기

사용할 줄 안다는 것과 이해했다는 것은 차이가 있다. 이번 포스트에서 Promise 객체를 직접 구현해보며 이해하도록 하겠다. 📒 사전 지식 Promise Classes 🍽 요구사항 1. resolve, reject new Promise((resolve, reject) => { //... }) 2. then, catch, finally doSome() .then(() => {}) .catch(() => {}) .finally(() => {}) 3. state Promise는 다음 중 하나의 상태를 가진다. 대기(pending): 이행하거나 거부되지 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. 4. chaining doFirst() .th..

자바스크립트의 bind, call, apply

자바스크립트의 함수는 함수처럼, 객체처럼, 객체 지향의 생성자처럼 동작하며, 함수에 붙어있는 프로토타입 객체를 통해 공통되는 메소드를 공유한다. 즉, 함수에서 사용할 수 있는 메소드가 있다. 이번 포스팅은 그중 bind, call, apply에 관한 정리이다. 👆 this class Five { constructor() { this.number = 5; } printNumber() { console.log(this.number); } } 위와 같이 클래스가 정의되어있다. 아래 코드의 실행 결과는 눈에 훤히 보인다. const five = new Five(); five.printNumber(); // 5 그렇다면 다음과 같은 상황일 때도 같은 결과인지 한번 생각해보자. const five = new Fiv..