🔍 프로그래머스 FE 데브코스 5기 TIL | TypeScript 모듈, tsconfig.json, 내장 유틸리티 타입

💻 Intro & TMI

방학 동안 조금 밀렸던 타입스크립트 강의 내용을 정리했다.
어제는 멘토님과의 개인 면담도 진행했었다.
구체적인 취준 방향성과 포트폴리오 준비 방법에 대해서 피드백을 받았다.
할 일이 무수하게 많지만 비동기적으로 하나씩 처리해나가다보면 자연스럽게 일류가 되어 갈 수 있다는 믿음을 유지해보려고 한다.
지식인사이드라는 유튜브 채널에서 박문호 박사님이 '일류의 조건'이라는 책을 추천하면서 이런 말을 했다.

일류인 사람들은 3가지 힘을 가지고 있어요. 훔치는 힘, 요약하는 힘, 이것을 추진하는 힘 이렇게 3가지입니다.

내가 TIL을 작성하는 것도 강의나 프로젝트를 통해 무수히 많은 지식을 훔치고 나의 프론트엔드 개발자로서의 커리어를 추진하려고 하는 것이다.
하지만 아직까지도 중요한 것을 일목요연하게 요약해서 작성하는 것이 부족한 것 같다.
따라서 많은 내용을 배우더라도 그 중에서 중요한 것을 뽑아 요약해서 훔치려고 노력해보려고 한다.

---

🧐 오늘 새롭게 배운 것

2023.11.14 강의

• Typescript에서의 모듈을 import, export 해오는 법을 JS와 구분하여 알 수 있었다.
• tsconfig.json 파일 내에서 설정 속성들의 종류와 권장 설정 방법을 알 수 있었다.
• 타입스크립트에서 기본적으로 내장되어 있는 유틸리티 타입들을 알아보았다. 유니온 타입이나 인터페이스를 자유자재로 다룰 때 함수처럼 사용 가능할 것 같다.

TypeScript에서 모듈

모듈화해서 가져올 때는 해당 모듈 내 타입을 지정해준 뒤에 가져올 수 있다.

기존에 있는 모듈을 npm으로 다운로드해서 가져올 때도 마찬가지로 타입을 지정해줘야 한다.
하지만 이것들을 모두 일일이 다 지정해주려면 시간이 오래 걸리므로 이전에 타입을 지정해놓은 타입 뭉치들을 확인할 수 있다.
모듈명 npm으로 구글에 검색해보면 해당 모듈에 대한 정보를 확인할 수 있는데
이 때 모듈명 옆에 TS 아이콘이 있다면 타입스크립트 기반으로 작성된 모듈이므로 그대로 사용할 수 있지만 그렇지 않고 DT(Definitely Typed) 아이콘이 있는 경우가 있다.
이는 자바스크립트 기반으로 작성된 모듈이지만 이전에 누군가 타입을 설정해 놓은 d.ts 파일이 존재하는 것이다. 이것을 그대로 사용하면 된다!

타입 가져오기 및 내보내기

기본적으로 JS에서 변수나 함수를 가져오거나 내보내기하는 것과 문법은 동일하다.

// myUtils.ts 내보내기
export interface Add {
  (a: number, b: number): number
}

export interface Subtract {
  (a: number, b: number): number
}

export const add: Add = (a, b) => a + b
export const subtract: Subtract = (a, b) => a - b

// ...
// 확장자 ts는 일반적으로 붙이지 않는다.
import { add, subtract, Add, Subtract } from './myUtils'

namespace

여러 인터페이스의 이름이 다른 함수의 이름과 겹쳐서 에러가 발생하는 것을 막기 위해 하나의 뭉치로 묶는 역할을 하는 것이 namespace이다.

export namespace Utils {
  // 각각의 interface에도 export를 앞에 붙여야 한다.
  export interface Add {
    (a: number, b: number): number
  }

  export interface Subtract {
    (a: number, b: number): number
  }
}

tsconfig.json 내의 다양한 옵션

크게 5가지의 옵션이 있다.

1. compilerOptions : TS를 JS로 컴파일할 때 적용하는 옵션
2. files : 변환하는 파일을 지정한다. 경로를 입력한다. 이건 파일 단위.
3. exclude : 제외하는 파일 경로를 설정한다.
4. include : 변환하는 파일을 폴더 단위로 지정한다.
5. extends : tsconfig.json 외에 다른 설정 파일을 확장해서 적용할 수 있다.
   단, 기존 tsconfig.json과 다른 설정 파일에서의 설정명이 겹칠 경우 기존 파일의 설정을 덮어쓴다.

• files, exclude, include 순으로 우선순위가 적용된다.
  예를 들어 include에 포함되어 있어도 exclude에 포함되어 있으면 제외된다.

compilerOptions

그 중 컴파일 옵션에 대해서 좀 더 자세히 알아보았다.
앞으로 타입스크립트로 프로젝트를 진행할 때를 대비해 잘 알아두어야겠다.

• strict : 엄격 문법 적용 여부, 기본값은 false

• target : 컴파일할 때 적용할 ES 버전 설정, "ES2015" 권장

• lib : 컴파일에서 사용할 라이브러리를 배열로 지정
  ["ESNext", "DOM", "DOM.Iterable"]를 권장한다.
  "DOM"과 "DOM.Iterable"은 타입스크립트에서 DOM 요소를 다루기 위해서는 거의 필수적이다.

• module : 사용할 모듈 방식을 지정한다.
  'CommonJS', 'ES6' / 'ES2015', 'ES2020', 'ESNext'를 설정 가능하다.
  'ESNext'를 지정하면 가장 최신 모듈 방식을 사용 가능하다.

• moduleResolution : 컴파일러 모듈 해석 방식을 지정한다.
  'node', 'bundler'(ts 버전 5.0 이상부터 가능)를 추천한다.

• paths : 경로 별칭을 지정한다. import 경로가 길 경우 축약할 수 있다.
  ~ 틸드 기호를 통해 폴더 경로도 축약 가능하다.
  ex) "~/*": ["./src/*"] 여기서는 ./src가 틸드 기호로 대체된다.

• jsx : 리액트에서 사용되는 jsx 출력 방식을 제어한다. 앞으로 리액트 프레임워크를 많이 사용할 것이므로 해당 설정을 잘 지정해야 한다.
  

내장 유틸리티 타입

타입스크립트에는 유용하게 쓸 수 있는 내장 유틸리티 타입이 있다. 무수한 내장 유틸리티 타입 중 자주 사용되는 것을 알아보았다.

• Partial : 인터페이스 필수 속성을 선택 가능한 속성으로 변환한 타입으로 만든다.
• Required : 선택 가능한 인터페이스 속성을 전부 필수 속성으로 변환한 타입으로 만든다.
• Readonly : 말 그대로 타입 내 속성을 바꾸지 못하도록 한다.
• Record : Record<유니온타입명, 타입>으로 유니온 리터럴 타입을 속성으로 각각 지정한 타입을 가지는 인터페이스를 생성한다.
• Pick : 주어진 객체 타입에서 원하는 속성만 뽑아서 새로운 객체 타입을 만든다.
• Omit : Pick과 반대, 제외할 속성을 설정하고 나머지 속성만 가지는 새로운 객체 타입을 만든다.
• Exclude : 유니온 타입에서 특정 타입을 제외할 수 있다.
• Extract : 두 인터페이스에서 교집합인 타입을 유니온 타입으로 추출한다.
• ReturnType : 함수 데이터 타입(typeof 키워드로 가져와야 함)에서 반환값 타입을 가져온다.
• Awaited : 비동기 promise에 대한 resolve를 통한 인스턴스의 타입을 구할 수 있다. await 대신 사용 가능하다. 프로젝트에서 비동기 통신으로 가져오는 데이터에 대해서는 Awaited를 사용하면 될 것 같다.

적어 놓고 보니 엄청 많다. 자주 사용하는 것을 추려도 이 정도라니.. 프로젝트를 진행하면서 숙달시켜야겠다.

---

🙄 더 공부해야 할 것

실제 프로젝트를 타입스크립트로 진행할 때 모듈 써보기

강사님이 예시로 보여준 것은 이해가 됐으나 막상 프로젝트에 돌입해서 모듈을 import, export하려고 하면 99.9% 에러를 겪을 거 같다. 이후 진행할 개인 포폴용 프로젝트에 타입스크립트를 적용해보고 모듈화도 진행해봐야겠다.

---

👀 느낀점

👍 Keep

방학이라 조금 해이해진 것도 있지만 그래도 코딩은 아예 손을 놓지 않고 있는 건 잘하는 것 같다. 한 번 놓아버리면 관성이 생겨 한동안 늘어질 것이 분명한 걸 난 알고 있기 때문...

😱 Problem

멘토님과의 개인 면담에서 개인 포폴 준비에 대해 아직 내가 거의 준비된 것이 없다는 것을 깨달았다. 이제부터라도 진짜 내 개인 프로젝트를 만들면서 개발자로서의 포트폴리오를 만들고 어디든 지원해봐야겠다.

😜 Try

타입스크립트로 타입을 다루는 것에 대한 이론 개념은 중요한 것을 거의 배운 것 같다. 이제 이것을 잘 써먹어보자.

---

😅 해당 내용은 공부하면서 정리한 글입니다. 틀린 부분이나 오해하고 있는 부분이 있다면 피드백 부탁드립니다.