ECharts의 Bar 차트에서 모든 데이터의 X축 라벨이 출력되어야 하는 경우 아래와 같이 라벨이 겹치는 문제가 발생한다. 기본적으로 ECharts의 X축에는 HideOverlap 속성이 true로 되어 있어 라벨이 겹치면 자동으로 라벨이 숨겨지는데, 때로는 모든 라벨이 출력되어야 하는 경우가 있다. 이 경우, 개발자가 X축 라벨의 너비를 자동으로 계산해서 겹치지 않도록 말 줄임표 (ellipsis) 처리를 하거나 라벨을 회전하여 더 많은 글자수가 출력되도록 동적으로 X축 옵션을 조절하는 것이 좋다. 나는 아래와 같은 순서대로 속성을 동적으로 변경하도록 기능을 구현하였다. 1. 기능 설계 X축 라벨의 최대 너비 (axisTick 한 칸의 최대 너비)를 구하기 위해 아래와 같이 계산식을 구상하였다. 1)..

이번 글에서는 타입스크립트의 제네릭에 대해 알아보자. 제네릭은 많은 사람들이 가장 헷갈려하고 어려워하는 문법으로 정적 타입 언어에서 코드의 다양성을 구현하기 위해 필요한 필수 문법이다. 지금부터 가장 어려운 문법인 제네릭에 대해 살펴보자. 1. 제네릭이란? 제네릭이란 컴포넌트 모듈을 만들 때 가장 많이 사용하는 문법으로 여러 가지 타입을 대응하기 위한 일종의 템플릿 문법이다. 이미 다른 객체 지향 언어에서는 많이 사용되고 있지만, 동적 타입 언어인 자바스크립트에서는 템플릿 문법이 필요하지 않아 제네릭이 지원되지 않았다. (타입이 동적으로 결정되는 자바스크립트 특성상 전혀 필요 없는 문법이기도 하다.) 하지만 정적 타입 언어를 지향하는 타입스크립트의 경우에는 함수, 클래스, 인터페이스에서 여러 타입을 대응..

이번 글에서는 타입스크립트의 클래스에 대해 알아보자. 타입스크립트의 클래스는 ES6의 클래스와 문법이 같으며, 캡슐화에 대한 접근 제한자와 멤버에게 타입을 정의하는 정도의 차이를 가지고 있다. 아래에서 타입스크립트의 클래스에 대해 알아보자. 1. 접근 제한자 접근 제한자는 객체 지향 언어에서 제공하는 기능으로 클래스 멤버의 접근 유무를 설정하는 기능이다. 이 기능을 통해 클래스 내부를 안전하게 보호하는 캡슐화를 구현한다. 접근 제한자는 public, private, protected, readonly가 있다. 접근 제한자에 대한 설명은 아래와 같다. Public : Default 설정으로 클래스로 생성한 객체의 내 / 외부에서 접근할 수 있다. Private : 대상 클래스 내부에서만 접근할 수 있다. ..

이번 글에서는 ES6에서 추가된 핵심 기능인 클래스에 대해 알아보자. 1. 자바스크립트에는 클래스가 없었다? 프로토타입 지향 언어인 자바스크립트는 객체는 있지만 클래스라는 개념은 없는 특이한 언어였다. "붕어빵을 만들기 위한 틀이 클래스" 라고 배웠는데, 붕어빵 틀은 없는데 붕어빵은 있다니 대체 붕어빵은 무엇으로 만들어진 것인가... 라며 멘붕하기 딱 좋은 언어가 자바스크립트였던 것이다. 그러다가 2015년 ES6가 발표되면서 공식적으로 자바스크립트에도 클래스 문법이 추가되었다. 엄밀히 말하면 ES6에 추가된 클래스도 다른 언어에서 말하는 클래스와는 개념이 다르긴 하지만, 어쨋든 다른 객체 지향 언어에서 익숙하게 사용해 온 클래스를 자바스크립트에서도 적용할 수 있다는 것은 큰 행운이었다. 클래스가 추가되..

이번 글에서는 열거형 타입에 대해 알아보자. 열거형 (Enums) 열거형 타입은 특정 값들의 집합으로 타입스크립트에서는 문자열과 숫자 타입을 제공한다. 열거형의 사용 방법은 아래와 같다. // 1. 숫자형 열거형 타입 enum 열거형 이름 { 숫자1, 상수2 = 초기화 값, 상수3 = 초기화 값 + 1, ... } // 2. 문자열 열거형 타입 (문자열의 경우 반드시 초기화 필요) enum 열거형 이름 { 문자열1 = '문자열 값', 문자열2 = '문자열 값 2', ... } 숫자 열거형 타입은 값을 초기화하지 않으면 0부터 아래 방향으로 +1 씩 값이 증가한다. enum NumberEnums { A, B, C, D } console.log('Numbers > ', NumberEnums.A, Number..

이번 글에서는 타입 정의에 대한 기타 문법에 대해 알아보자. 1. 유니온 앞에서 알아본 타입스크립트의 타입들은 변수 하나에 하나의 타입만 표기할 수 있었다. 하지만 코딩을 하다 보면 특정 변수에 여러 가지 타입이 들어오는 경우가 많다. 타입스크립트에서는 이러한 경우를 대비하여 유니온 타입이라는 문법을 제공한다. 유니온 타입을 사용하는 방법은 아래와 같다. OR 연산자를 이용하여 대상 변수에 여러 개의 타입이 올 수 있다는 것을 타입스크립트의 컴파일러에게 알려줄 수 있다. const unionType = string | number | boolean 유니온 타입을 사용하면 타입스크립트 컴파일러가 타입 추론을 할 수 있기 때문에 IDE에서 자동 완성 기능을 사용할 수 있다는 장점이 있다. 아래와 같이 유니온..

이번 글에서는 인터페이스 확장과 기타 옵션, 타입 별칭과의 차이에 대해 알아보자. 인터페이스의 기본 개념 및 사용 예제는 아래의 링크에서 확인할 수 있다. https://kim1124.tistory.com/130 6. 인터페이스 (1) 이번 글에서는 타입스크립트의 인터페이스에 대해 알아보자. 인터페이스란, 두 개 이상의 시스템 사이에서 상호 작용을 할 수 있도록 하는 조건 또는 규약을 말한다. 즉, 타입스크립트의 변수, kim1124.tistory.com 1. 인터페이스 확장 인터페이스의 확장이란 말 그대로 인터페이스의 기능을 확장하는 것으로 extends 키워드를 사용하여 1개 이상의 인터페이스를 상속받아 기능을 확장할 수 있다. 아래의 예제 코드를 살펴보자. 기본이 되는 DclassSedan 인터페이..

이번 글에서는 타입스크립트의 인터페이스에 대해 알아보자. 인터페이스란, 두 개 이상의 시스템 사이에서 상호 작용을 할 수 있도록 하는 조건 또는 규약을 말한다. 즉, 타입스크립트의 변수, 함수, 클래스 등이 지켜야 할 최소 구조를 정의하는 것이다. 따라서 인터페이스를 사용한다는 것은 새로운 타입을 만드는 것과 같다. 타입스크립트에서 가장 중요한 것은 타입을 생성하고 적용하는 것이기 때문에 인터페이스는 타입스크립트에서 높은 비중을 차지한다. 아마 많은 타입스크립트 코드에서 인터페이스를 아주 쉽게 찾아볼 수 있을 것이다. 타입스크립트는 아래와 같은 경우에 정의할 수 있다. 객체 또는 배열 함수 클래스 1. 인터페이스의 선언 인터페이스는 아래와 같은 방법으로 선언한다. 위에서 알아본 것과 같이 변수에 할당되는..