📚금일 학습 내용

TS 마지막 강의, 모듈과 타입, 타입 export import, tsconfig.json, 내장 유틸리티
영웅님 특강세션

---

🏫데브코스

오늘 강의 역시 많은 지식들이 포함되어있었고 정리를 한다고 했는데.. 중간중간 끊긴 부분도 많고 오늘 뭔 전화랑 일정이 이렇게 생기는 지... 여러 이유로 내용 정리는 제대로 못해서 오늘 TIL 말고 내일 TIL에 올릴 예정이다.

일단 전체적인 TS 후기는 JS의 연장선이지만 TS에서 연장되는 부분이 JS 이상으로 중요하다는 것이다. 특히 주로 제네릭에 대한 개념이 굉장히 어려웠는데

// 단일 타입의 인자를 받고 반환하는 함수
function identity(arg: any): any {
    return arg;
}

// 제네릭 함수
function identityGeneric<T>(arg: T): T {
    return arg;
}

// 사용 예제
let output = identityGeneric<string>("Hello, Generics!");
console.log(output); // "Hello, Generics!"

이런식으로 간단한 인자 형태로 표현하는 것은 어렵지 않게 이해할 수 있었으나

// 단일 타입의 배열을 다루는 클래스
class ArrayHandler {
    private array: any[];

    constructor(initialArray: any[]) {
        this.array = initialArray;
    }

    getItem(index: number): any {
        return this.array[index];
    }
}

// 제네릭 클래스
class GenericArrayHandler<T> {
    private array: T[];

    constructor(initialArray: T[]) {
        this.array = initialArray;
    }

    getItem(index: number): T {
        return this.array[index];
    }
}

// 사용 예제
let stringArrayHandler = new GenericArrayHandler<string>(["a", "b", "c"]);
console.log(stringArrayHandler.getItem(1)); // "b"

복잡한 데이터 구문이나 클래스, 함수에서 사용하는 방식들은 어려웠다. 그리고 각각의 제네릭들이 복잡하게 얽히다보니 이해하지 못하고 넘어간 부분이 많은데 스타~디 에서 TS 복습을 하며 내용을 예제와 함께 다시 숙지해야겠다.

---

📺박영웅님의 특강세션

역시나 오늘도 정말 큰 도움이 되었던 영웅님의 세션, tsconfig에서 사용할 수 있는 수 많은 정보들부터 여러가지를 배울 수 있었다.

✨Vite

개발을 빠르게 도와주는 도구라는데 처음 알았다. 초기 세팅을 굉장히 빠르게 도와주는 도구이고 특히 웹팩에 비해서 모듈을 기반으로한 더 빠르고 효율적인 개발을 지원한다.
개인 프로젝트를 할 때 Vite, Webpack을 적용해 보아야겠다.

❔스타~디팀 질문

러닝 타입스크립트로 타입스크립트를 공부하는 스터디에서 나온 질문이였다. 우리의 의문을 요약하자면 왜 타입이 우리들이 생각하거나 의도한 방향대로 나오지 않는가에 대한 의문이였고 그에 대한 영웅님의 답변을 나의 이해대로 정리하자면 다음과 같다.

const poem = Math.random() > 0.5
  ? { name: "The Double Image", pages: 7 }
  : { name: "Her Kind", rhymes: true };
//이떄 poem의 타입은 아래와 같이 유니언으로 표기된다.
{
    name: string;
    pages: number;
    rhymes?: undefined;
} | {
    name: string;
    rhymes: boolean;
    pages? : undefined; 
}
//
poem.rhymes = false //이 조건이 에러가 나지 않아야 한다.

맨 위 코드에서 TS의 입장에서는 추론 할 수 있는 정보는 주어진 변수가 끝이다. 주어진 조건에서 호환성 있게 표기를 해줘야하기에 rhymes, pages를 optional으로 하고, 다른 값이 들어가는 것을 방지하기 위해서 undefined가 할당된다. 엄격하게 허용할 수는 없지만 호환이 가능한 구조를 주기 위해서 저렇게 지정한 것으로 추측된다. 라고 이해했다.

2번째 질문도 이와 비슷한 결론이였고 그래서 내가 생각한 것은 타입스크립트의 개발진이랑 이야기 하지 않는 이상 명확한 해답을 얻기가 힘들것 같고, 그렇기에 명확한 타입은 우리가 만들어서 쥐어주도록 코딩해야겠다. 이다.

다만 이 부분에서 TS의 내부 코드를 뜯어보고 어떻게 타입을 추론하여 결정하는가? 에 대해서는 알아볼 필요가 있을 것 같다.

---

🔗bitly 서비스

살다보면, 그리고 개발을 하다보면 URL을 줄여야 하는 경우가 종종 생긴다. 특히 몇몇 서비스들을 이용하다보면 URL이 화면을 뚫고 나갈 정도로 긴 경우가 발생하는데 이러면 URL을 재사용하거나 공유하기 힘들어지는 문제점이 생긴다.

그런 문제점을 해결할 수 있는 것이 bitly 서비스이다. 긴~~~URL을 엄청 짧게 만들어준다.
오늘 그런 문제가 발생했다. 질문을 공유하기 위해 특정 사이트 주소를 공유해야했는데 너무 URL이 길어서 제대로 입력되지 않는 현상이 있었다. 아래와 같이 길었다.

https://www.typescriptlang.org/play?#code/PTAEEYDoCgGMHsB2BnALqADvApgW1ALygCyAhqgBaQBOpiAJv[…]CUZUArX5PpABmm0Ao0AVDXAF2hlUykAAGbAB1V0BAA1xwAObsaGYgA

예전에도 이런 비슷한 상황이 있었는데 그때는 개발은 아니였고 이후 문서화 하는 과정에서 문서의 가독성이 심각하게 떨어지는 문제가 발생해서 bitly를 사용했던 경험이 있었다. 그때의 경험을 살려 URL을 줄였다.

https://bit.ly/3SFcK0P

비록 개발 내용 아니지만, 개발자의 근본은 문제를 해결하는 사람이다. 그런 측면에서 접근했을때는 소소하지만 뿌듯한 경험이다..ㅎㅎ

---

📖소회

내일부터 방학! 방학이라 쓰고 방에서 학습하는 날이라 읽는다. 그래도 데브코스에서 부여한 공식적인 휴일인 만큼 빌려놨던 책도 읽고 게임도 좀 하고 소회도 미리써서 다음 주 강의를 대비해야겠다.
내일도 달려보자고~🔥🔥

내일은... 분명 모각코였지만...갑자기 데이트가 잡혔다..

TIL 작성 소요 시간 약 25분