자바스크립트

자바스크립트

    [FeBase S3] SVG, Canvas, viewport와 viewbox

    이번 포스팅에서는 SVG와 Canvas, viewport 그리고 viewbox에 대한 개념을 간단하게 정리해 보려고 한다. 1. SVG란? 바로 찾아볼 수 있는 레퍼런스 중 가장 공신력 있다고 판단되는 Mozilla Developer Network(MDN)에서 SVG에 대해서 다음과 같이 설명하고 있다. SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어입니다. SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링되는 이미지를 서술하며 CSS, DOM, JavaScript, SMIL 등 다른 웹 표준과도 잘 동작하도록 설계되었습니다. SVG는 달리 말하면 HTML과 텍스트의 관계를 그래픽에 적용한 것입니다. SVG는..

    [이펙티브 타입스크립트] 2장 타입스크립트의 타입 시스템

    아이템 6. 편집기를 사용하여 타입 시스템 탐색하기 편집기를 사용하면 어떻게 타입 시스템이 동작하는지, 그리고 타입스크립트가 어떻게 타입을 추론하는지 개념을 잡을 수 있다. 아이템 7. 타입의 값들이 집합이라고 생각하기 런타입에 모든 변수는 자바스크립트 세상의 값으로부터 정해지는 각자의 고유의 값을 가진다. 코드가 실행되기 전, 타입스크립트가 오류를 체크하는 순간에는 타입을 가지고 있다. 가장 작은 집합은 아무 값도 포함하지 않는 공집합이며, 타입스크립트에서는 never 타입이다. never 타입으로 선언된 변수의 범위는 공집합이기 때문에 아무런 값도 할당할 수 없다. 그 다음으로 작은 집합은 한 가지 값만 포함하는 타입이다. 이들은 타입 스크립트에서 유닛(unit) 타입이라고도 불리는 리터럴(liter..

    [테스트] How To Test #1. Unit Test (feat. jest)

    이번 포스팅에서는 테스트에 대한 이야기를 해보려고 한다. 첫 번째 주제는 단위 테스트이다. Jest 설치하기 유닛 테스트를 할 수 있는 라이브러리는 여러 가지가 있지만, 나는 jest가 지금 시점에서는 가장 좋은 옵션이라고 생각을 한다. 자바스크립트를 사용하는 프론트엔드, 백엔드 모두 활발하게 쓰이고 있으며, test runner와 test matcher, test mock 등을 별도의 여러 개의 라이브러리를 설치해 주지 않고 이 jest 프레임워크 안에서 한꺼번에 할 수 있기 때문이다. 그러면 jest 를 프로젝트에 설치하는 과정부터 하나씩 살펴보도록 하자. 먼저 jest 라이브러리를 설치한다. yarn add --dev jest 설치 후에는 package.json 파일에 다음과 같이 스크립트를 추가해..

    [이펙티브 타입스크립트] 1장 타입스크립트 알아보기

    아이템 1. 타입스크립트와 자바스크립트 관계 이해하기 타입스크립트는 문법적으로 자바스크립트의 상위집합. → 자바스크립트 프로그램에 문법 오류가 없다면, 유효한 타입스크립트 프로그램이라고 할 수 있다. → 자바스크립트 프로그램에 어떤 이슈가 존재한다면 문법 오류가 아니라도 타입 체커에게 지적당할 가능성이 높다. → 문법의 유효성과 동작의 이슈는 독립적인 문제 타입 시스템의 목표 중 하나는 런타임에 오류를 발생시킬 코드를 미리 찾아내는 것이다. → 그러나 타입 체커가 모든 오류를 찾아내지는 않음 → 타입 체커를 통과하면서 런타임 오류를 발생시키는 코드는 충분히 존재. 타입스크립트 타입 시스템은 자바스크립트의 런타임 동작을 '모델링' 한다. const x = 2 + '3'; // 정상, string const..

    [패캠] 프론트엔드 Back to the Basics : 지속가능한 코드 작성과 성능 향상법 강의 내용 정리

    오늘은 패스트캠퍼스에서 최근에 수강했던 김태곤님의 강의를 듣고 학습했던 내용을 정리해 보려고 한다. 시작하기에 앞서서 이 강의는 패캠에서 어떠한 대가도 제공받지 않고 직접 수강하고 내용을 정리하는 것임을 밝힌다. 정리는 강의 목차 순서대로 정리했다. 1. 정체되지 않는 프론트엔드 개발자의 일하는 방식 프레임워크를 위주로 공부하다 보면.. 따라가기 급급해진다. 내부적인 원리를 이해하지 못하면 남는 것이 없다. React, Vue는 컴포넌트 기반 개발이라는 공통점 ⇒ 이를 잘 알고 있으면 새로운 기술도 어렵지 않게 배울 수 있다. Homebrew → 패키지 매니저 for Mac VirtualBox → IE 환경 테스트 Frontend Developer : 어플리케이션이 사용자와 맞닿은 접점을 책임지는 사람 ..

    [RxJS] Ch07. 반응형 스트림 적용하기 - 하

    지난 포스팅에 이어서 반응형 스트림의 중첩 옵저버블 처리 및 비동기 스트림에 대해 다루어 보려고 한다. 중첩 옵저버블 처리 우리는 지난 포스팅에서 스트림의 출력을 동시에 하나로 결합하는 방법을 배웠다. 조합하는 방법에 따라 옵저버블 자체에서 다른 옵저버블을 방출하기도 한다. 아래와 같은 상황을 중첩 옵저버블 구조라고 한다. 중첩 옵저버블은 특정 동작 때문에 결과를 소스 옵저버블로 반환해야 하는 후속 비동기 작업을 유발하거나 시작하는 경우에 유용하다. 지금까지는 스칼라 값을 반환하는 함수를 주로 매핑하였으나, 중첩 옵저버블은 매핑된 함수가 다른 옵저버블에 매핑된 옵저버블 또는 옵저버블의 옵저버블을 반환하는 상황을 나타낼 때 사용한다. 이러한 상황은 함수형 프로그래밍에서 빈번하게 발생하는데, 그 이유는 ma..

    [RxJS] Ch06. 반응형 스트림 적용하기 - 상

    이번 포스팅에서는 지금까지 배웠던 RxJS 옵저버블의 기본기를 바탕으로 중첩된 옵저버블 또는 스트림 안의 스트림과 이들의 비동기 제어를 하기 위한 기능을 살펴보려고 한다. 앞선 포스팅에서 옵저버블이 시간에 따른 이벤트 시퀀스라는 개념을 다졌고, 이 옵저버블은 이벤트가 전달되고 변형되는 오케스트레이터로 생각할 수가 있다. 지금까지는 옵저버블 시퀀스를 대부분 독립적으로 처리하는 방법을 이야기 했으며, 이벤트가 언제 방출되든 상관없이 배열과 같은 방식으로 옵저버블의 모든 이벤트에 연산자를 적용하였다. 그리고 combineLatest()와 같은 RxJS 연산자를 사용하면 한 스트림에서 이벤트가 전파되어 다른 곳에서 반응을 일으킬 수 있기 때문에 RxJS와 반응형 패러다임이 빛을 발함을 알 수가 있었다. 이번 포..

    [RxJS] Ch05. RxJS에서의 시간 - 하

    RxJS 목차 Ch01. 반응형으로 생각하기 Ch02. RxJS로 배우는 반응형 프로그래밍 Ch03. 핵심 연산자 Ch04. RxJS에서의 시간 - 상 이전 포스팅의 내용에 이어서 RxJS에서 다루는 시간에 대해서 다뤄 보고자 한다. 사용자 입력 처리하기 interval()과 timer() 정적 메서드는 모두 옵저버블을 만들고 설정된 오프셋 시간 후 작업을 시작하는데 사용된다. 이들은 delay()와 함께 설정된 간격 또는 설정된 시간 후에 한 번 실행되는 미래의 작업을 스케줄링 할 때 가장 많이 사용하는 조합이다. 이 연산자는 수행할 작업을 알고 있으며 이를 나중에 실행되도록 스케줄링하려는 명시적 이벤트에 사용하기 적합하다. 그런데 만약 마우스 움직임이나 키 입력처럼 동적 이벤트 이미터에 일련의 이벤트..