TypeScript 지금 배워도 될까요?

송요창
8 min readSep 18, 2023

--

Turbo에서 TypeScript 지원을 제거하면서 사용자들이 크게 반발했다. 2023년 9월 7일 DHH(David Heinmeier Hansson)가 자신의 블로그에 이에 관한 글을 올렸다. 소셜 미디어에서도 갑론 을박이 있었지만 재미있는 점은 이를 보고 TypeScript를 학습하던 분들이 이걸 계속 배워도 될지 묻고 있다는 점이다.

Photo by Siora Photography on Unsplash

TypeScript이 주는 혜택

JavaScript로 제품을 만들 수 있다. 이미 수많은 제품이 JavaScript로 만들어졌고, 지금도 유지보수하고 있다. 그런데 그럼에도 불구하고 요즘 많은 회사들이 TypeScript를 사용한다. 왜 그럴까?

JavaScript로 여러 사람이 제품을 만들 때 여러 어려움이 있지만 그 중 으뜸이 이 코드를 내가 다시 써도될지 검증하기 어렵다는 점이다. 예를들어 더하기 함수가 있다고 치자.

function add(a, b) {
return a + b;
}

코드도 굉장히 짧고 이름도 잘 읽혀서 크게 문제 없어보인다. 그런데 보통 우리가 만들어내는 코드는 이처럼 짧지 않다. 다음에 코드를 보자.

function convertMarkdownLinksToJsx(text) {
const regex = /\[([^\]]+)\]\(([^)]+)\)/g;

const parts = text.split(regex);

const jsxParts = parts.reduce((acc: (string | JSX.Element)[], part, index) => {
if (index % 3 === 1) {
// 홀수 인덱스는 링크 텍스트
const linkUrl = parts[index + 1];
acc.push(
<a href={linkUrl} target="_blank" rel="noopener noreferrer" style={{ fontWeight: 'bold' }}>
{part}
</a>,
);
}
if (index % 3 === 0) {
acc.push(part);
}
return acc;
}, []);

return jsxParts;
}

비교적 짧은 코드지만 주석한 줄 덜렁 있어서 무슨 일을 파악하는지 오래 걸린다. 작성자가 본인임에도 시간이 지나니까 뭘 어떻게 했는지 모르겠다.

컨벤션을 깐깐하게 만들어서 JSDoc으로 매개변수가 어떤 값을 가지는지 상세하게 작성하고, 설명도 잘 적어두면 코드 전체를 읽지 않을 수 있다. 하지만 앞서 가정하기를 여러 사람이 제품을 만든다고 했다. 각 사람이 모두 같을 수 없다보니 코드가 일관되게 작성되기 어렵다. 특히나 사람이 많아지면 더 그렇다.

그러다보면 누군가는 실수해서 뭔가를 빼먹고 아무리 적으라고 해도 대강 적는 사람이 나온다. 빡빡한 테스트코드를 만들어도 그 틈을 기가막히게 통과하는 미꾸라지가 있다.

이럴 때 TypeScript는 분명 도움이 된다. 매개변수의 타입을 적고, 반환 값을 명시하기 때문이다.

function convertMarkdownLinksToJsx(text: string): (string | JSX.Element)[]

앞선 코드에 이렇게만 적혀있어도 매개변수에 어떤게 들어갈지 명확해진다. 그리고 반환값도 바로 유추할 수 있다. 또한 코드 작성중에 매개변수에 숫자가 들어간다면 오류를 반환한다.

이 별거 아닌 특성이 코드 작성하는 프로그래머를 조금이나마 안심시킨다. 물론 미꾸라지는 이 환경에서도 any를 남발해서 피해가려고 하겠지만 적발이 비교적 쉽다.

업계의 변화 속도

jQuery가 엄청난 파이를 차지했지만 어느순간 React.js가 프론트엔드 프로그래밍 영역을 장악하고 있다. 물론 아직도 jQuery가 쓰이고 있지만 업계의 채용공고를 보면 압도적으로 React.js가 많이 언급된다.

http://wanted.co.kr/

React.js가 2013년에 나왔고 많은 기업과 개인이 이 라이브러리를 사용중이다. jQuery가 자리를 내줄 때처럼 어떤 라이브리러나 프레임워크가 나와서 React.js를 분명 대체하겠지만 그 변화가 1~2년 안에 급속도로 확산되긴 어렵다.

이미 React.js로 개발하고 유지보수하는 제품이 다수이다보니 업계에서는 이를 다룰 수 있는 사람이 지속적으로 필요하다. 다른 라이브러리나 프레임워크가 이를 대체하려면 어느 정도 시간을 가지면서 넘어간다.

State of JavaScript는 2016년부터 매년 20,000명 이상의 개발자로부터 데이터를 수집하여 현재 및 향후 트랜드를 파악하고 있다. 여기서 React.js는 1위 자리를 내준적이 없다.

https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/

그렇다면 그만큼 많은 제품이 깔려있다고 볼 수 있다. 다시 말해 전환하려면 어느정도 시간이 소요된다.

물론 TypeScript가 React.js와 견줄 정도인가 하면 그정도는 아니라고 생각한다. 그럼에도 불구하고 TypeScript를 업계에서 많이 사용하고 있어서 이를 제거하는데에도 그만한 시간이 소요된다고 본다.

내가 처음 운영 환경에 배포되는 제품을 TypeScript로 만든게 2017년이다. 그리고 그뒤로 TypeScript를 안쓴 제품은 손에 꼽는다. 그 손에 꼽는 제품은 대부분 AWS Lambda에 올려서 쓰는 간단한 코드를 만들 때 정도다. 내 경험으로만 쳐도 대략 5년 정도 사용한 것이니 업계 전체로하면 이보다 더 깊이 뿌리박혀 있을거라고 본다.

그럼 언제 새로운 기술을 학습하면 될까?

정말 운좋게 업계 표준으로 자리 잡아서 한 20년 쓸 수 있으면 좋겠지만 보통 그렇지 못했으니 언젠가는 새로운 걸로 바뀔텐데 그럼 우리는 언제 그걸 배우면 될까?

얼리어답터라서 새로운 기술이 나오면 참지못하고 학습해야하만 한다면 지금처럼 계속 그렇게 학습하면 된다고 본다. 하지만 나처럼 굼뜬 성향이라면 채용공고에서 해당 키워드가 점차 보이기 시작한 때로 잡아도 충분하다.

사람마다 기준은 달라서 얼마나 언급될 때가 좋다고 정확하게 말하긴 어렵다. 그렇지만 채용공고를 가끔 구경하면서 요즘은 어떤 기술을 쓰는지 봐두는건 좋다. 혹은 컨퍼런스에서 자주 언급되는 키워드만이라도 봐두면 도움이 된다.

그러니 마음 편히 먹고 지금하는 일을 계속 이어가자.

(글쓴이가 직접 작성한 광고)

위 글에서 나오는 TypeScript, React.js와 Next.js를 사용하는 강의입니다.

리뷰 1

리뷰 2

스스로 탐색해가면서 학습하고 피드백을 통해 점검하고 싶다면 제 강의가 좋은 선택이 될거라고 생각합니다.

할인된 금액으로 시작해보세요(강의 작성 후기)

99,000원 -> 39,000원(60,000원 할인) 쿠폰코드

12750-dcb57bddbd0a

2023년 9월 말까지 유효하며, 선착순 100명에게만 유효합니다.

(글쓴이가 직접 작성한 광고22)

찐 문과생 2명과 피드백만 2개월 이상하며 만들어낸 정말 쉬운 업무 자동화 강의!
코드 편집기 필요없습니다.
그저 웹 브라우저와 구글 계정만 있다면 누구나 시작할 수 있습니다!

22,000원 -> 12,000원(10,000원 할인) 쿠폰코드

12751-1be79e3d48e8

2023년 9월 말까지 유효하며, 선착순 100명에게만 유효합니다.

--

--

송요창

👨‍👩‍👧‍👦, 우아한형제들의 잡스런 프로그래머, 강의 및 스터디 정보(쿠폰도!) 👉https://litt.ly/totuworld