TypeScript와 조금 친해진 이야기(2)

집어 치우니 가끔 생각이 난다.. 자니?

타입스크립트를 강제로 쓰다보니 코드를 두번 세번 작성하는 일이 많아졌고 작성하자마자 코드가 잘 작동하면 다행인데 타입 오류 문제로 고생을 하다보면 자바스크립트로 10분이면 끝날 작업을 정말 최악의 경우 40-50분이 걸리곤 했다. 취업에 필요하다고는 하지만 당장 만들어야 할 사이드 프로젝트나 코드 연습 상황에서 굳이 없는 시간을 할애 해가면서까지 타입스크립트를 사용할 필요성을 느끼지 못했기에 바로 기억의 어딘가에 모셔두었다.
그렇게 타입스크립트를 잊고 지내다가 몇가지 사건을 만나면서 파편처럼 타입스크립트를 사용했던 기억이 상기되곤 했는데 그토록 귀찮고 싫었던 타입스크립트를 다시 떠올리게 만든 몇가지 케이스들에 대해 얘기해보고자 한다.

남이 만든 코드를 만나다 - 유지보수

일을 하다가 다른 사람이 작성한 코드를 만났고 코드 동작에 대해서 살펴보고 수정할 일이 생겼다.

function volumeFormat(fileSize, fixed) {
  let str
  //GB 단위 이상일때 GB 단위로 환산
  if (fileSize >= 1024 * 1024 * 1024) {
    fileSize = fileSize / (1024 * 1024 * 1024);
    fileSize = (fixed === undefined) ? fileSize : fileSize.toFixed(fixed);
    str = fileSize + ' GB';
  }
  //MB 단위 이상일때 MB 단위로 환산
  else if (fileSize >= 1024 * 1024) {
    fileSize = fileSize / (1024 * 1024);
    fileSize = (fixed === undefined) ? fileSize : fileSize.toFixed(fixed);
    str = fileSize + ' MB';
  }
  //KB 단위 이상일때 KB 단위로 환산
  else if (fileSize >= 1024) {
    fileSize = fileSize / 1024;
    fileSize = (fixed === undefined) ? fileSize : fileSize.toFixed(fixed);
    str = fileSize + ' KB';
  }
  //KB 단위보다 작을때 byte 단위로 환산
  else {
    fileSize = (fixed === undefined) ? fileSize : fileSize.toFixed(fixed);
    str = fileSize + ' byte';
  }
  return str;
}

export default volumeFormat;

위 코드는 서버에서 파일 크기를 받고 크기에 따라 KB, MB, GB 등의 단위와 소숫점을 설정해 반환해주는 코드이다

무슨 음식을 좋아하는거야? - argument 타입

function volumeFormat(fileSize, fixed) {
  ...
}

일단 파일 용량에 대한 포맷팅을 하는 함수라는 것은 함수명에서 알 수 있었고
fileSize 또한 파일 사이즈를 로우하게 입력해준다는 것 또한 추측이 되지만
fixed의 값은 무슨 역할을 하는 것인지 알 수가 없었다.

fileSize = (fixed === undefined) ? fileSize : fileSize.toFixed(fixed);

그러다가 위 코드가 계속 반복되고 있다는 사실을 발견하고
'아! 소수점 몇자리까지 표시할지를 정하는 인자구나!' 라고 깨닫게 된다.

fileSize가 숫자형태로 들어가긴 할텐데 string 인지 number인지 또한 Number객체에서 사용하는 toFixed를 보고 알 수 있었다.

결국 두 개의 인자가 어떤 타입이고 어떤 역할을 하는지는...
그 함수 내부를 살펴본 후에 알 수 있었다.

인자의 이름을 다르게 했다면... 예를 들자면 fileSize => fileSizeNumber 라든지 fixed => decimalPointPosition 이라든지...

하지만 fileSizeNumber의 경우 뭐랄까...
숫자인건 누구나 알겠는데 저 Number가 타입을 명시하는건지 string 타입의 숫자를 명시하는건지 다른 사람입장에선 또 다시 헷갈릴 수 있겠다는 생각이 들면서

"그 녀석이 떠올랐다"

function volumeFormat(fileSize, fixed) {
  ...
}

위 함수 형태를 그 녀석과 함께라면

function volumeFormat(fileSize: number, fixed: number): string {
  ...
}

위와 같이 작성할 수 있을텐데 fixed는 단어의미 혼동에 대한 부분이 크기 때문에 크게 도움을 받지 못해도 fileSize가 number로 입력이 되어야 한다는 것은 명확해진 부분이다.

타입스크립트 없이도 인자가 어떤 타입으로 들어갔는지 코드를 보고 파악했기 때문에 사용하는데 문제가 없겠지만.. 사람은 기억을 잊는 존재이기에 먼 훗날 이 순간과 같은 상황에 처했을때 또 헤매고 있을 가능성이 경험상으로 보자면 매우 높다

따라서 타입스크립트와 함께 타입을 명시해주면 단 1분이라도 시간을 아낄 수 있고 만약 나 뿐만 아니라 같은 팀원들이 이 함수를 사용하는 순간이 온다면 곱절 이상의 시간을 아낄 수 있겠다는 생각이 들었다.

부가적으로는 함수가 string 타입의 무언가를 리턴한다는 것 또한 얻을 수 있는 정보다.

무슨말을 하는거야? - return 타입

function sumFilesVolumeSize(files) {
  ...
}

함수 이름을 보고 있자니 파일들의 크기를 합치는 연산이 이뤄지는것 같다
하지만 이 결과가 number타입의 숫자로 리턴이 되는지 string인 숫자로 리턴이 되는지 알 수가 없다는 문제가 있었다.

이 연산을 통해 나온 값으로 추가 가공을 해야하는지 아니면 그대로 사용을 해도 되는지 알기 위해선 또 내부 코드를 들여다봐야 하는 상황이 발생한다
역시...

타입스크립트가 필요한 순간이었다.

function sumFilesVolumeSize(files: number[]): string {
  ...
}

타입스크립트는 이 함수의 리턴값이 어떤 타입을 가지는지 명시해준다
IDE와 함께라면 이 타입명시는 더 빛을 보는데 사용된 함수에 마우스를 올려만 놓아도 리턴 타입으 알 수 있기 때문에 불필요한 디버깅을 줄일 수 있다.

이 함수가 도대체 무슨말을 하는지 예측가능하다는 점에서 타입스크립트를 조금 달리 보게된 순간이었다.