프론트엔드 스터디

[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 ..

[FrontEnd]프론트엔드 개발에 왜 Node.js를 사용하는가?

프론트엔드 개발을 시작하면 일단 첫 단계가 node.js를 설치하라고 한다. 근데 우리는 Node.js가 뭔지도 모르고 일단 설치를 한다. 그리고 프론트엔드를 개발하면서도 Node.js가 정확히 무엇인지 모르고 개발을 하는 경우가 있다. 나도 생각해보니 Node.js는 백엔드로 사용한다는데 "왜 프론트엔드를 하는데 Node.js를 설치하는 거지?" 라는 의문을 가지고 있었다. 그래서 이번 기회에 그 이유에 대해 공부를 하고 포스팅해보려고 한다. 일단 Node.js가 뭔지 이해하고 가려고 한다. Node.js란? Node 공식 사이트에는 다음과 같이 Node를 설명하고 있다. Node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임 입니다. 웹 애플리케이션을 개발할 ..

[Typescript]기초 - 비구조화(구조 분해) 할당

비구조화(구조분해)란? 어떤 시점에 구조화된 데이터에서 일부만 사용해야할 때가 있습니다. jack이라는 구조화된 데이터가 있다고 예를 들었을 때, 어느 시점에서 jack의 name과 age만 사용하려고 합니다. 그럴 때 name, age라는 변수를 선언해서 jack의 name, age를 저장해서 사용하는 것 처럼 구조화된 데이터를 분해하는 것을 비구조화라고 합니다. let name = jack.name, age = jack.age; 비구조화 할당이란? 비구조화 할당 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해 줄 수 있습니다. const jack = { name: string, age: number, etc?: any}; const { name, age } =..

[Typesciprt] tsconfig.json 살펴보기

프로젝트에서 typescript를 사용하려면 몇 가지 설정이 필요합니다. 그리고 typescript 프로젝트에서 볼 수 있는 파일 중 하나가 tsconfig.json 파일입니다. typescript는 브라우저에서 사용하려면 javascript로 변환하는 과정을 거쳐야하는데 컴파일 옵션을 정의한 파일이 tsconfig.json 파일입니다. tsconfig.json 파일을 보면 처음보는 설정들이 엄청 들어가 있는데 이 설정들에 대해 간단하게 살펴보고 정리해보려고 합니다. 기본 구성 { "compilerOptions": {}, "include": ["src/**/*"] } 기본 구성은 저렇게 구성되어있습니다. "compilerOptions"는 컴파일 옵션을 나타내고 "include" 는 src 하위 디렉터리에..

[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 패턴이란? 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴입니다. 위의 정의만 보면 이해하기 힘들수 있는데 간단히 말하자면, 어떤 객체의 상태가 변할 때 그와 연관된 객체들에게 알림을 보내는 디자인 패턴이..