타입스크립트가 필요한 이유
그동안 글잉 프로젝트를 진행하면서 개발자 커리어로서의 정체성을 확립하기 위한 글을 작성하면서 회고하는 시간도 보냈고 앞으로 어떤 개발자가 될 것인지에 관해 청사진을 그려보기도 했다. 이번 포스팅에서는 조금 방향을 바꿔서 기술적인 이야기를 해보려 한다. 필자가 타입스크립트를 본격적으로 선택하고 공부하게 된 이유에 관해서 설명해 보는 시간이 될 것이다.
타입스크립트를 시작한 이유?
자바스크립트 언어 환경에서 코드를 확인했을 때의 일이었다.
function 함수(매개변수1, 매개변수2, 매개변수3) {
const 나도모르는상순데 = {
data: (매개변수2 * 매개변수3) / 어쩌고저쩌고 + 1 + Math.random(),
abc: 123,
};
/*
💬 사실 몇 백 줄의 코드가 더 있지만 생략
한글로 코딩한 느낌이 드는데 위화감이 없네;
그렇다고 실전에서 한글로 코딩하진 않는다;
*/
return 도대체_얘는_뭘_반환하는_걸까;
}어떤 구현해 놓은 라이브러리나 타인이 짠 코드를 확인할 때 혹은 내가 작성한 함수라고 하더라도 구현 부가 복잡해서 좀처럼 쉽게 파악이 되지 않을 때 내가 파악하는 작업이 있다. 여기서 다소 복잡한 예시를 들면 글이 읽기 힘들어지므로 쉬운 예제를 가지고 왔다.
1. 함수 이름 확인
함수의 이름에서 대부분 어떤 역할을 하는지 그림이 그려지기 마련이다. 예시 함수를 가지고 왔다.
function getRoomSize(isSquareMeter, roomSize) {
return isSquareMeter ? `${roomSize}㎡` : `${Math.round(roomSize / 3.3)}평`;
}함수 이름은 분명하게 getRoomSize라고 했다.
get으로 시작하기 때문에 무언가를 반환하는 것 같다.RoomSize라고 했으니까 뭔가 방 크기에 관한 계산을 구현한 함수인 것 같다.
정말 다행스럽게도 이러한 함수는 한두 줄에서 구현이 끝나기 때문에 어떠한 유형(String)으로 반환하는지를 쉽게 파악할 수 있다.
2. 매개변수 확인
함수에서는 방 면적의 크기를 구하는 작업을 끝냈으니 이제 무엇을 해야 할까? 다음으로는 아마 매개변수를 확인할 것 같다. 어떤 유형의 자료를 대입해야 하는지를 파악해야 원하는 결괏값이 나올 수 있기 때문이다.
isSquareMeter의 의미
위의 코드에서 isSquareMeter는 아마
is로 시작하는 것으로 보아 boolean 타입일 것 같다.- 제곱미터(㎡)를 반환할지 평형을 반환할지 알 수 있을 것 같다. (코드 내용을 살피지 않았을 때) 매개변수 이름만으로 추론했을 때
true면 제곱미터일 것이고false면 아마 평형이 나오지 않을까?
roomSize의 의미
위의 코드에서 roomSize는 아마
room이니까 방을 의미하는 것 같고Size가 조합되어 있는 것으로 보아방의 크기를 입력해야 하는 것 같다. 그러니까 결국Number를 입력하라는 말이구나?
3. 결괏값 확인
사실 매개변수를 확인하거나 결괏값을 확인하는 순서는 상황에 따라 바뀔 수도 있을 것이다. 이번 예시에서는 결괏값을 마지막으로 확인한다고 가정해 보자. 이제 매개변수에 무엇을 넣을지까지 파악했다면 내가 고민하는 것은 단 하나이다.
- 얘는 넣으면 도대체 무슨 유형의 값이 나올까?
getRoomSize라고 했으니까 아마Number가 나오지 않을까?- 아니야. 분명 roomSize이긴 한데
isSquareMeter라고 평방미터인지를 매개변수로 받았으니까 아마 단위까지 함께 나와서String이 아닐까?
코드가 짧기도 하고 바로 리터럴 문법이 보이기 때문에 이번 예제에서는 단번에 String을 파악할 수 있지만 구현 부가 복잡해질 수밖에 없는 예제에서는 어떻게 될까? 헷갈릴 수도 있을 것이다. 그런 의미에서 다음과 같이 타입스크립트 코드를 작성하면 좀 더 깔끔하게 함수를 확인할 수 있다.
function getRoomSize(isSquareMeter: boolean, roomSize: number): string {
return isSquareMeter ? `${roomSize}㎡` : `${Math.round(roomSize / 3.3)}평`;
}물론 타입스크립트가 도입되었지만, 우리는 여전히 타입스크립트의 함수의 이름을 가지고 어떤 역할을 하는지를 파악해야 한다. 그리고 매개변수를 파악할 때는 매개변수가 어떤 것인지 이름으로 추론하고 그 유형을 바로 확인할 수 있다. 분명하게 명시되어 있으므로 오해하지 않고 코드를 파악하지 않고 바로 알맞은 규격의 자료를 입력하면 된다. 반환형에 관해서도 string이라고 정확하게 명시되어 있으므로 number라고 오해하는 불상사를 막을 수도 있다.
현실에서도 우린 타입스크립트를 쓰고 있다?
🤔 그렇지만... 설명과 예시가 부족할 수도 있고 타입스크립트에 관한 전반적인 이해와 명확한 의도를 몸소 체험하지 않아 와닿지 않을 수 있을 것 같다. 그래서 필자는 예시를 몇 가지 생각해 보았다.
#1 일단 추론이 가능하게 결론 먼저 (두괄식)
우리는 현실에서도 타입스크립트가 필요한 상황과 비슷한 때가 있을 것이다. 혹시 그래서 결론이 뭔데~😅라는 이야기를 들어본 적이 있지 않을까? 일단 그 사람이 무슨 이야기를 하는지 요점부터 알고 과정은 그 후에 들어보고 싶은 경향이 강해질 때가 있을 것이다. 그것은 바로 시간이 부족할 때일 것 같다. 이와 같은 예시를 찾아보면 취업할 때 면접에서 면접관이 질문을 던진 뒤 면접관은 응시자가 어떤 결론을 내리고 근거를 나열하는지 순서대로 듣고 싶을 수도 있다. 주절주절 이야기는 하는데 도대체 이 응시자가 무슨 의도로 이런 이야기부터 시작하는지를 모르고 듣는다면 정확하게 의도를 파악하는 데 시간이 걸리거나 어려움이 있을 것이니까.
결론부터 제시하고 부연설명을 하는 것을 보통 두괄식이라고 정의하는데 타입스크립트가 이와 비슷한 부류가 아닐까 싶다. 왜냐하면, 어떠한 함수 반환하는지, 매개변수는 어떤 타입을 받는지를 함수 선언 부에 먼저 명시하니까.
function getRoomSize(isSquareMeter, roomSize) {
return isSquareMeter ? `${roomSize}㎡` : `${Math.round(roomSize / 3.3)}평`;
}#2 유연성에 제한을 걸어두자
이번 이야기를 하기 위해서는 희극인 김민경씨의 사연을 들고 와야 할 것 같다. "이 동작이 된다고?" 근력 + 유연성까지 좋은 김민경 (ft. 필라테스)의 기사를 티브이 매체로 접한 적이 있다. 영상 매체를 요약하자면 필라테스 강사는 김민경 회원에게 "몸에 통증이 있는 부분이 있는지"를 물었는데 김민경 씨는 왼쪽 어깨의 통증을 호소한다고 이야기하였다. 그런데 강사는 이 원인을 엄청나게 유연한 몸에서 비롯되었다고 진단을 내렸다. 김민경 씨가 평균 이상으로 유연성이 좋아서 몸의 가동범위가 지나치게 넓었고 그것이 통증으로 이어졌다는 것이다.
필자는 여기서 김민경 씨의 유연성을 자바스크립트가 가진 유연성과 비교를 해보게 되었다. 자바스크립트는 분명 다른 언어보다 비교적 유연한 언어임이 분명하다. 그래서 개발자는 이러한 유연성에 별다른 제약 없이 과하게 이용할 수 있고 그러다가 예상치 못한 버그나 오류를 마주할 수 있다는 것이다. 그렇다면 이 유연성에 제약을 거는 것이 무엇일까? 김민경 씨는 동작의 크기에 제한을 걸어 정상 가동범위 이상 벗어나지 못하도록 훈련하는 것이 필요할 것이고 자바스크립트에서도 마찬가지로 반환형에 관해 제한을 둬서 딱 정해진 유형으로만 반환하도록 하는 것이다. 이러한 발상에서 Typescript와 같은 타입 제약을 거는 발상이 시작되었다고 생각한다.
물론, 우리는 타입스크립트 이외에도 CoffeeScript나 Flow.js와 같이 비슷한 발상에서 시작된 언어가 많이 있을 것이다. 그렇지만 2021년 시점을 기준으로 Typescript는 대세로 떠오르는 언어가 되어가고 있다. 바로 이러한 이유에서 내가 타입스크립트를 필요한 이유라 결론을 짓게 되는 계기가 되었다.
그렇지만 모든 사람에게 혹은 모든 프로젝트에서 타입스크립트가 필요한 것은 아니라고 생각한다. 적어도 타입스크립트를 왜 사용해야 하는지에 관한 이유에 관해서는 알고 사용하는 것이 개발자로서 올바른 자세인 것 같아 좀 더 깊은 고민을 해보게 되었다.
function 최고다_타입스크립트(하트: number, 해요: string): unknown{
return 타입스크립트_중독돼;
}