2021.07.07 데일리 회고

.d.ts

이미 구현된 코드에 대한 타입을 정의하기 위해 사용되는 파일이다.
.d.ts파일에는 declare namespace, declare module, declare const 등이 들어갈 수 있다.
예를 들어 js로 구현되어 있는 라이브러리의 경우 타입스크립트에서 사용한다면 타입 체크가 되지 않지만 .d.ts파일에서 해당 라이브러리를 불러와서 declare module을 통해 타입을 정의해 줄 수 있다.
해당 파일은 타입스크립트에서 타입을 검사하는 용도로만 사용되기 때문에 js로 컴파일되지 않는다.

난 오늘 emotion에서 global하게 사용될 theme에 대한 타입을 정의했다. 공식 문서에 따르면 props.theme은 기본 값이 빈 객체라고 한다. 그렇기 때문에 추가적으로 타입을 추가하기 위해서는

import '@emotion/react'

declare module '@emotion/react' {
  export interface Theme {
    color: {
      primary: string
      positive: string
      negative: string
    }
  }
}

위와 같은 방법을 통해 해결할 수 있다고 나와 있다. 이 방법으로 emotion/react의 Theme을 추가로 덮어씌워서 타입을 재정의해줄 수 있었다.

declare

타입스크립트 컴파일러에게 변수, 상수, 함수 또는 클래스가 어딘가에는 선언되어 있을 것이라고 알려주는 힌트이다. declare는 js코드로 컴파일되지 않고, 정말 힌트의 기능만 하게 된다. 예를 들어 declare const hint가 선언되어 있다면 hint가 있다고 컴파일러는 생각하게 되고, 이때 타입은 any로 추론되어진다.
declare const hint:string을 하게 되면 hint가 있다고 생각하게 되고, 타입은 string이다.

file-loader

file-loader를 통해 이미지를 웹팩이 빌드할 때 추가시켜 준다. 이미지를 사용하고 싶을 때, 로컬의 경로를 src에 적었더니 웹팩 빌드 과정에서 해당 src의 참조 경로가 사라지게 되면서 이미지를 불러올 수 없는 경우가 생겼다. 예를 들면 src="../assets/xxx.png"가 있었을 때, 빌드 과정에서 assets 폴더가 사라지고, 이미지도 따로 로드되지 않아서 해당 이미지를 불러올 수 없던 것이었다.
그래서 file-loader를 통해 해결했고, 살짝 문제가 되었던 부분이면서 해결하고 싶은 부분은 import를 하지 않으면 이미지를 추가해주지 않는다는 것이다. 이 부분은 조금 더 알아봐야 할 것 같다.

rem, em

rem, em이 왜 반응형일 때 사용되는지 이유를 몰랐었다. 왜냐하면 rem, em도 결국 font-size를 따라가기 때문에 16px로 고정이 되어 있다면 px과 다를 바가 없다고 생각했기 때문이다. 하지만 이유가 궁금해서 알아보니 내 생각과 다르게 font-size를 사용자가 키워서 보는 경우도 있고, 기기마다 다른 경우도 있고 여러가지 경우에서 font-size가 다를 수 있다고 한다. 이 경우 px로 했으면 깨져 보일 수 있지만 rem, em을 사용하게 되면 깨지지 않게 보여줄 수 있다고 한다. 경험으로 체득하는 것이 가장 좋은 방법일 것 같다.

참고

[TypeScript] module, import, export, declare 개념 정리