KEEP CODING

SOLID - 1. SRP 단일 책임의 법칙 SRP(Single Responsibility Principle) 단일 책임의 법칙은 아래의 내용을 이야기하는 것이다. 클래스는 단 한 개의 책임을 가져야 한다. 클래스를 변경하는 이유는 단 하나여야 한다(단 한개의 책임만을 가지기 때문). 한 책임의 변경에 의해 다른 책임과 관련된 코드에 영향을 미치지 않도록 한다(유지보수 용이). react 를 사용하면서 class 를 만드는 것이 아니기 때문에 완벽하게 SRP를 지키는 class를 만들지는 못했다. 하지만 기존의 코드에서 어떻게하면 SRP를 지키도록 만들 수 있을지 고민해보았다. AS-IS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25..

목록에서 중복된 값 제거하기 객체로 이루어진 배열을 다루는 경우가 많다. 특정 key 를 기준으로 중복된 값을 제거하는 방법을 정리한다. 1 2 3 4 5 const userList = [ { age: 25, name: 'alpha', birthday: '01-01' }, { age: 25, name: 'beta', birthday: '02-02' }, { age: 35, name: 'gamma', birthday: '03-03' } ]; Colored by Color Scripter cs filter + findIndex findIndex는 조건에 맞는 첫 번째 index를 return 하는 특성을 이용해 index와 findIndex의 값이 같은 데이터만 걸러내는 방법이다. 1 2 3 4 5 6 7 ..

일하면서 다양한 방법으로 array 에서 원하는 값을 찾게 되어 여러가지 방법에 대해 정리해보았다. 1. 단순한 array 의 경우 number, string 등 단순한 데이터로 이루어진 array를 단순한 array 라고 지칭했다. 원시타입의 데이터를 가진 array 라고 생각하면 된다. 1 2 const oddNumList = [1, 3, 5, 7]; const cityList = ['seoul', 'suwon', 'pusan']; cs 1-1. includes includes() 는 파라미터로 전달한 특정 값이 배열 안에 있는지 boolean 으로 return 한다. 1 2 const specialNumber = 2; console.log(oddNumList.includes(specialNumber..

타입 호환 타입 호환이란 타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미한다. 내부 구조와 타입을 확인한다. 인터페이스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // 타입 호환 - 인터페이스 interface Developer { name: string; skill: string; } interface Person { name: string; } let developer: Developer = { name: "dev", skill: "typescript" } let person: Person = { name: "person" } // developer = person; // 에러 생성 구조적으로 작은 타입을 큰 타입에 할당할 수 없다. pers..

타입 가드 타입 가드는 조건문을 이용해 타입을 좁혀나가는 것을 말한다. 타입 가드를 사용하는 이유는 타입이 좁혀지면, 해당 타입에서 사용가능한 메소드를 사용할 수 있기 때문이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 interface Developer { name: string; skill: string; } interface Person { name: string; age: number; } function introduce(): Developer | Person { return { name: 'Tony', age: 33, skill: 'Iron Making' }; } var tony = introduce(); // console.log(tony.skill); // er..

타입 단언 타입스크립트에서는 자체적으로 타입을 추론한다. 그런데 처음 변수를 만들 때 타입을 명시하지 않으면 타입을 추론하기 어렵다. 1 2 3 4 var a; // any 타입(특별한 타입 명시하지 않음) a = 20; a = 'a'; // 복잡한 코드들을 거침 var b = a; // 코드들을 추적할 수 없어 b의 타입도 any로 추측 cs 그런데 개발자가 코드를 작성하다가 타입을 잘 알 수 있을 때 타입 단언을 사용할 수 있다. 1 var c = a as string; // c의 타입은 string으로 지정됨 cs as (타입) 을 사용하면 타입을 지정할 수 있다. a를 string으로 간주한다는 의미로, c는 자연스럽게 string이 된다. 타입 단언의 예시 -DOM API 조작 DOM API란 ..

타입스크립트에서는 타입을 명시해줘야 하지만, 스스로 타입을 추론할 수 있다. 1. 변수를 선언할 때의 타입 추론 변수를 선언할 때 타입 추론이 일어난다. 1 2 3 4 5 6 7 8 9 10 // 변수를 선언할 때 타입 추론이 일어난다. var a = 'abc'; // string function getB(b = 10) { var c = 'hi'; // string return b + c; } getB(); // string console.log(getB()); // 10hi cs getB함수에서 b나 c의 타입을 정해주지 않았지만 처음 선언될 때 타입 추론이 일어난다. number + string = string 이므로 getB()는 string타입이 되고, 10hi를 출력한다. 2. 인터페이스와 제네..

Promise Promise는 대기/완료/거부 상태를 가진다. 그러므로 생성되었을 때는 완료 후에 어떤 값을 가지게 될지 알 수 없다. 그러므로 제너릭을 통해 어떤 형태의 반환값을 가질지 미리 명시해줘야 한다. 1 2 3 4 5 6 7 8 9 10 // Promise function fetchItems(): Promise { let items: string[] = ['a', 'b', 'c']; return new Promise(function (resolve) { resolve(items); }); } fetchItems().then((value) => console.log(value.length)); cs 위의 fetchItems 는 제너릭을 통해 string[]을 반환할 것이라고 명시해뒀다. 그래서 ..

제네릭을 사용하면 여러 타입의 입력값을 처리할 수 있다. 하지만 타입이 명시되지 않아서 API를 사용할 수 없는 단점도 존재한다. 이런 상황에서 제네릭으로 입력받을 타입에 대한 힌트를 줄 수 있다. 제네릭의 타입 제한 1 2 3 4 5 6 7 8 9 10 // 제네릭의 타입 제한 // T[] : T타입 요소들이 들어간 array임을 명시 // 타입에 대한 힌트를 제공 function logTextLength(text: T[]): T[] { // 타입제한으로 .length가 가능해진다 console.log(text.length); return text; } logTextLength(['h', 'i']); cs 함수를 호출할 떼 제네릭으로 string을 전달하면, string[]타입을 입력받을 것이라는 힌트..

제네릭이란? TS코드에서 타입을 함수의 파라미터처럼 사용하는 방법이다. 함수의 재사용성을 위해 타입별로 여러 함수를 만들지 않고 하나의 함수로 여러 타입의 입력값을 처리할 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 // 타입을 명시하지 않을 때(any타입) function logText(text) { console.log(text); return text; } // 반환값은 logText(100); // 숫자 10 logText('hi'); // 문자열 hi logText(true); // 진위값 true // 제네릭을 사용할 때 function logText2(text: T): T { console.log(text); return text; }..