TypeScript6 [React] i18n으로 다국어 지원하기 (i18next, react-i18next) 프로젝트에서 다국어 지원 기능을 적용하게 되었다. 나는 다른 분이 만들어 놓은 것을 적용만 했지만 해당 라이브러리를 어떻게 사용하는지 궁금해서 알아보기로 했다. 처음에는 브라우저에서 지원하는 한영변환인줄 알았는데, 그냥 서비스 안에서 따로 구현된 것이었음,, 그래서 제공될 다국어도 json으로 직접 작성해야 한다! 프로젝트에서는 라이브러리 i18n 을 사용했다. Introduction - react-i18next documentation Hello {{name}} , you have {{count}} unread message(s). Go to messages. react.i18next.com i18next 라는 라이브러리와 이를 react에서 아주 쉽게 사용하도록 만들어진 react-i18next를 설.. 2023. 10. 22. [TypeScript] Utility Type 타입스크립트에서는 타입을 변환하는 것이 가능하다. - 한 타입의 일부분을 새로운 타입으로 이용 가능 - 한 타입을 기본으로 하여 다른 타입으로 이용 가능 Index Type : 특정 타입의 Index에 기반한 타입 객체의 value는 다음과 같이 접근 가능하다. const obj = { name: "yuna", }; obj.name; // yuna obj["name"]; // yuna Animal이라는 타입을 선언한 뒤, 타입의 인덱스에 기반한 타입을 새로운 타입으로 사용할 수 있다. type Animal = { name: string; age: number; gender: "male" | "female"; }; type Name = Animal["name"]; //string const text: Na.. 2023. 3. 5. [TypeScript] Composition 상속의 문제점 ? => 여러개의 클래스를 상속받아 사용하는 경우, 그 규모가 커질 수록 클래스간의 관계가 복잡해질 수 있음 순양은 이제 장자상속 없다 Composition : 각각의 기능별로 클래스를 분리해 만들어 둠으로써 필요할때마다 가져다가 쓰는 것 아래의 예제에서는 우유를 추가하는 클래스, 설탕을 추가하는 클래스를 따로 분리해보자 { /** * Composition */ type CoffeeCup = { shots: number; hasMilk?: boolean; // Optional hasSugar?: boolean; // Optional }; interface CoffeeMaker { makeCoffee(shots: number): CoffeeCup; } class CoffeeMachine im.. 2023. 2. 25. [TypeScript] 객체지향 (OOP) 절차 지향 : 정의된 순서대로(절차적으로) 함수가 하나씩 호출됨 하나를 수정하기 위해서 전체적인 어플리케이션을 이해해야함 수정했을때 side Effect가 발생할 수 있음 한눈에 이해하기 어렵다 Coffee Maker 예제) { /** * 절차지향적 프로그래밍 */ type CoffeeCup = { shots: number; hasMilk: boolean; }; const BEANS_GRAMM_PER_SHOT: number = 7; let coffeebeans: number = 0; function makeCoffee(shots: number): CoffeeCup { // 커피 콩이 부족하다면 if (coffeebeans < shots * BEANS_GRAMM_PER_SHOT) { throw new Er.. 2023. 2. 24. [TypeScript] 기본 타입 #2 Type Alias (타입 별칭) : 타입의 새로운 이름을 만들어 직접 타입을 정의할 수 있음 /** * Type Aliases * 새로운 타입을 내가 정의할 수 있음 */ // 원시타입 type Text = string; const name: Text = "yuna"; const address: Text = "korea"; type Num = number; // Object 타입 type Student = { name: string; age: number; }; const yuna: Student = { name: "유나", age: 24, }; String Literal Types : 타입을 값 자체로 지정할 수 있음 해당 타입으로 선언된 변수는 지정된 문자열의 값만 할당 가능 /** * String.. 2023. 2. 22. [TypeScript] 기본 타입 #1 기본 타입 { /** * JavaScript * Primitive : number, string, boolean, biginy, symbol, null, undefined * Object: function, array... */ // number const num: number = -3.0; // string const str: string = "hello"; // boolean const bool: boolean = true; // undefined - 아직 알지 못하는 값 let name: undefined; // ❌ 이렇게 하면 undefined만 할당 가능 let age: number | undefined; // 숫자 또는 undefined age = undefined; age = 12; func.. 2023. 2. 21. 이전 1 다음
