소소한 개발 블로그

[Vue.js] vue-i18n

vue-i18n 회사에 입사하고 코드를 분석하는데 위와 같은 라이브러리를 사용하는 걸 발견했습니다. 그동안 프로젝트나 공부를 진행하면서 본적이 없는 라이브러리라서 찾아보니 국제화를 위한 라이브러리 였습니다. i18n i18n의 사전적 정의는 국제화라고 합니다.(i와 n 사이 18개의 알파벳이 있다는 의미) 소프트웨어 맥락 안에서 국제화란 어떤 것이 있느냐하면 제일 먼저 국가 마다 다른 언어를 지원하는 것입니다. 예를 들어, 한국어를 사용하고 있지만 영어를 사용하는 사람들에게 어떤 서비스를 제공하고자 한다면 한국어를 모르기 때문에, 번역해서 서비스해야합니다. 언어뿐만 아니라, 어떤 국가에서는 왼쪽에서 오른쪽으로 글을 읽지 않을 수도 있고, 숫자, 화폐의 표기도 다를 수 있습니다. 물론 시간도 당연히 제각각..

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

[TypeScript] 타입 가드(Type Guard)

타입가드(Type Guard) 타입스크립트는 원시 타입과 클래스뿐만 아니라 섞어서 유니온 타입을 만들 수 있습니다. function doSomething(arg: string | number) 인자는 string일 수도 있고 number일 수도 있습니다. 이러한 유니온 타입의 인자를 처리할 때 정확히 어떤 타입인지 검사해야 하는 경우가 있는데 이를 타입 가드라고 합니다. 타입 가드는 특정 범위 안에서 런탕미 타입 검사를 수행하는 표현식입니다. 원시 타입에 식별하기 원시 타입은 typeof 연산자를 이용해 타입을 검사할 수 있습니다. 피연산자의 타입을 문자열로 반환하기 때문에 이걸 가지고 검사하는 방식입니다. const doSomething(id: string | number){ if(typeof id =..

[TypeScript] 기초 - 타입 앨리어스(Type Alias)

타입 앨리어스(Type Alias) 타입 앨리어스는 새로운 타입을 정의합니다. 타입으로 사용할 수 있다는 점에서 인터페이스와 유사합니다. interface Person { name: string, age?: number } // 빈 객체를 Person 타입으로 지정 const person = {} as Person; person.name = 'Lee'; person.age = 20; person.address = 'Seoul'; // Error // 타입 앨리어스 type Person = { name: string, age?: number } // 빈 객체를 Person 타입으로 지정 const person = {} as Person; person.name = 'Lee'; person.age = 20; ..

[TypeScript] 기초 - 타입 추론(Type Inference)

타입 추론(Type Inference) 타입 추론이란 타입스크립트가 코드를 해석해 나가는 동작을 의미합니다. 아래의 코드로 예시를 들어보겠습니다. let x = 3; 위와 같이 x에 대한 타입을 지정하지 않더라도 x는 number로 간주됩니다. 이렇게 변수를 선언하거나 초기화 할 때 타입이 추론됩니다. 이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어납니다. 가장 적절한 타입(Best Common Type) 타입은 보통 몇 개의 코드를 바탕으로 추론됩니다. 그 표현식을 이용하여 가장 근접한 타입을 추론하게 되는데 이를 Best Common Type이라고 합니다. let arr = [0,1,null]; 위 변수 arr의 타입을 추론하기 위해서는 배열의 각 아이템을 ..

[TypeScript] 기초 - 제네릭(Generic)

제네릭 (Generic) 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. 특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다. 타입스크립트는 정적 타입 언어이기 때문에 함수 또는 클래스를 정의하는 시점에 매개변수나 반환값의 타입을 선언하여야 합니다. 그런데 함수 또는 클래스를 정의하는 시점에 매개변수나 반환값의 타입을 선언하기 어려운 경우가 있습니다. class Queue { protected data: any[] = []; push(item: any) { this.data.push(item); } pop() { return this.data.shift(); } } const queue = new Queue(); que..

[TypeScript] 기초 - 교차 타입(Intersection Type)

교차 타입 (Intersection Type) 교차 타입은 유니언 타입과 밀접한 관련이 있지만, 사용방법은 다릅니다. 교차 타입은 여러 타입을 하나로 결합합니다. 기존 타입을 합쳐 필요한 기능을 모두 가진 단일 타입을 얻을 수 있습니다. 예를 들어, Person & Serializable & Loggable은 Person 과 Serializable그리고 Loggable입니다. 즉, 이 타입의 객체는 세 가지 타입의 모든 멤버를 갖게 됩니다. interface ErrorHandling { success: boolean; error?: { message: string }; } interface ArtworksData { artworks: { title: string }[]; } interface Artist..