프론트엔드 스터디/Javascript

[Javascript] window vs document

Window vs Document 현재 프론트엔드 개발을 하고 있지만, window와 document의 차이에 대해 알지 못하고 그냥 사용했다는게 생각이 나서 스터디를 한 후 포스팅한다. 보통 window/document 객체를 참조하는 작업들은 아래와 같다. 이벤트 리스너 등록 window.addEventListener('scroll', function(){}) document.addEventListener('click', function(){}) dom 객체 접근 document.body.style.backgroundColor = '#fcfcfc'; document.getElementById('input').focus(); 스크롤 위치 이동 window.scrollTo(pos); 창 닫기/열기 win..

[Javascript] HTMLVideoElement

HTMLVideoElement HTMLVideoElement 인터페이스는 video object를 조작하는데 필요한 프로퍼티와 메소드를 제공한다. HTMLMediaElement 와 HTMLElement 를 상속한다. 지원하는 미디어 포맷 목록은 브라우저마다 다르다. 그렇기 때문에 적절한 범위의 브라우저에서 지원하는 비디오 포맷을 제공하던가, 모든 브라우저를 위한 여러 종류의 미디어 포맷을 제공해야 한다. 속성(Properties) HTMLMediaElement 와 HTMLElement 의 속성들도 상속 받는다. HTMLVideoElement.height : 표시 영역의 높이를 나타내는 attribute height 값을 DOMString으로 반환. 단위는 px HTMLVideoElement.poster ..

[RxJS] Operator - iif()

iif iif는 조건문에 따라 결과값을 실행하는 함수입니다. iif(condtion: () => boolean, trueResult: SubscribablerOrPromise = Empty, falseResult: SubscribableOrPromise = Empty): Observable 예제 // RxJS v6+ import { iif, of, interval } from 'rxjs'; import { mergeMap } from 'rxjs/operators'; const r$ = of('R'); const x$ = of('X'); interval(1000) .pipe(mergeMap(v => iif(() => v % 4 === 0, r$, x..

[RxJS] Operator - pipe, zip

pipe pipe를 사용하여 여러 operator들을 조합하여 사용할 수 있습니다. 이 때 파이프는 함수 여러개를 함수 하나인 것처럼 변환하는 함수입니다. 그래서 pipe() 함수는 인자로 조합할 함수를 받아서 이 함수들을 조합한 새로운 함수를 생성하고, 옵저버블에서 데이터가 전달될 때 순서대로 실행합니다. 조합된 함수를 실행하려면 subscribe()를 실행해서 구독해야 합니다. pipe(operations: ...): Observable 예제 import { of, pipe } from 'rxjs'; import { filter, map } from 'rxjs/operators'; const nums = of(1, 2, 3, 4, 5); // 옵저버블을 처리하는 함수를 정..

RxJS 정리

RxJS 정리 RxJS란? RxJS는 Reactive Extensions For JavaScript 라이브러리입니다. Reactive Extensions는 ReactiveX 프로젝트에서 출발한 리액티브 프로그래밍을 지원하기 위해 확장했다는 뜻입니다. ReactiveX는 Observer 패턴, Iterator 패턴, 함수형 프로그래밍을 조합하여 제공합니다. Observer 패턴이란? 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴입니다. 위의 정의만 보면 이해하기 힘들수 있는데 간단히 말하자면, 어떤 객체의 상태가 변할 때 그와 연관된 객체들에게 알림을 보내는 디자인 패턴이..

프로미스(Promise)란?

자바스크립트는 비동기 처리를 위해 하나의 패턴으로 콜백 함수를 사용합니다. 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는데도 한계가 있습니다. “A promise is an object that may produce a single value some time in the future” ES6부터는 비동기 처리를 위한 또 다른 패턴으로 프로미스를 도입했습니다. 프로미스는 자바스크립트 비동기 처리에 사용되는 객체라고 정의하고 있습니다. 먼저 콜백 패턴이 어떠한 단점이 있어서 프로미스가 생겨나게 됐는지에 대해 알아보고 프로미스에 대해 계속 알아보도록 하겠습니다. 콜백 패턴의 단점 콜백 헬 동기식 처리와 비동기식 처리에 대해..

자바스크립트의 이벤트

Event 이벤트는 말 그대로 어떤 사건을 의미합니다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM요소와 관련이 있습니다. 이벤트가 발생하면 누군가 이를 감지할 수 있어야 하며 그에 대응하는 처리를 호출해 주어야 합니다. 이를 위해 이벤트는 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기전에는 실행되지 않다가 발생되면 실행됩니다. 이 함수를 이벤트 핸들러라고 하며 이벤트에 대응하는 처리를 기술합니다. 이벤트 루프와 동시성 브라우저는 단일 쓰레드에서 event-driven 방식으로 동작합니다. 단일 쓰레드는 쓰레드가 하나뿐이라는 의미이고 이말은 곧 하나의 작업만을 처리할 수 있다는 것입니다. 하지만 실제로 웹 애플리케이션은 많..

자바스크립트에서 객체지향 프로그래밍이란?

자바스크립트 객체지향 프로그래밍 프로토타입 기반 언어 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 언어입니다. 간혹 클래스가 없어서 객체지향이 아니라고 생각하는 사람들도 있으나 프로토타입 기반의 객체지향 언어입니다. 자바스크립트에는 클래스 개념이 없고 별도의 객체 생성 방법이 존재합니다. 객체 리터럴 Object() 생성자 함수 생성자 함수 // 객체 리터럴 var obj1 = {}; obj1.name = 'Lee'; // Object() 생성자 함수 var obj2 = new Object(); obj2.name = 'Lee'; // 생성자 함수 function F() {} var obj3 = new F(); obj3.name = 'Lee'; 자바스..