우아한 타입스크립트 with 리액트, 배달의민족 개발 사례로 살펴보는 우아한형제들의 타입스크립트와 리액트 활용법 도서 리뷰

Ryan Kim
4 min readNov 25, 2023

배달의 민족에서 사용하는 React + Typescript 리뷰

“한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.”

최근 우아한 형제들 DevRel 팀에서 제공하는 우아한 스터디라는 프로그램에 지원해서 “데이터 중심 애플리케이션 설계"라는 책을 팀원들과 함께 읽고 있다.

우아한 형제들에서 개발 세션이나 스터디 등 개발자 커뮤니티 모임 등을 많이 전파하면서 국내 개발 생태계에 많은 기여를 하고 있고, 이번 도서 리뷰에 프론트엔드 관련 도서가 나와서 한 번 읽어보면 좋겠다는 생각에 신청하게 되었다.

이미 React에 Typescript를 적용해서 개발하는 사례는 널리 보급되고 있고, Javascript의 동적인 타입 할당 방식에 안정적인 타입 체크 및 Javascript 의 호환성 때문에 프론트엔드 개발자들에게 많이 사랑 받고 있다.

특히, 이미 2018 ~ 19년 때부터 타입스크립트 기반으로 프론트엔드 framework 구성을 시도하는 것을 먼저 취업한 개발자 선배들에게 얘기 들었기 때문에 되려 우아한 형제들에서 Typescript를 적용한 것에 관한 책을 배포한 것이 조금 늦게 된 것이 아닌가 싶기도 하다.

(또는 충분히 검증해보고, 어느 정도 노하우가 쌓인 상태에서 개발자 취준생들에게 전달해주려는 의도가 더 있다고 봐도 될 것 같다.)

원래 덕 타이핑(Duck Typing)이 강점이었던 파이썬, 자바스크립트와 같은 언어들에 점점 타입 검사 기능 또는 호환 스크립트를 배포하는 경우가 잦아지는데, 오히려 코드를 작성하는 방식만 놓고 보면 점점 자바를 따라가는 형국이 되는 것 같다.

반대로 생각해보면 개발하는 일에 있어서 타입 검사와 예기치 못한 버그 (특히 잘못된 값이 들어오면 안되는 페이먼트나 비용과 관련한 부분들) 들을 컴파일러가 미리 잡아주면 개발자의 관리 포인트가 줄어드는 것이 장점이기 때문에 처음부터 Typescript를 사용하면 개발하면서 불필요하게 신경 쓸 부분들을 충분히 없앨 수 있을 것이다.

요즘 개발하면서 많이 느끼지만, 개발자라는 직업의 궁극적인 지향점은 사람에 의해 관리되는 많은 프로세스를 전부 시스템화, 자동화 시켜야하는 부분들을 지원하는 것이라 생각하는데 개발을 하면서 굳이 자동화 시킬 수 없는 부분들은 굳이 개발할 필요가 있나 싶다.

예를 들어, 온프레미스로 서버를 사서 관리하면 사내 인프라 엔지니어들이 비즈니스 외적으로도 상당히 신경써야하는 부분들 (하드웨어 고장, 전력 공급, 서버 최적화 등…)이 많아져서 고생하는데, 이걸 클라우드에 올림으로써 문제가 생겼을 때 책임 소재를 따질 수 있는 업체들에게 관련 사항을 전달하는 방법 등이 있을 것이다.

마찬가지로 Typescript를 사용하면 책에서는 React에 대해서만 얘기하지만, Node.js로 서버를 구성할 때도 사용하면서 서버 안정성에도 기여할 수 있을 뿐더러 자바스크립트에서 불필요하게 발생하는 타입 에러들을 신경쓸 필요가 완전히 사라진다.

간단한 토이 프로젝트에선 이런 문제가 크게 대두되지 않지만, 엔터프라이즈 규모에서 크게 장애 터지면 타입 안정성이 가져다 주는 가장 기초적인 버그 예방 방법이 얼마나 개발자의 실수를 원천 차단해주는지 알 수 있을 것이다.

마지막으로 이 책에서 “우아한” 이라는 명칭을 붙인 만큼, 우아한 형제들의 프론트 팀에서 주로 사용하는 예약어나 문법들의 사용 상황 등을 친절하게 설명해주는데 국내에 개발팀이 이렇게 직접 설명해주는 책은 이 책이 처음이라, 무척 신뢰감을 주는 것 같다.

다만, 개발 트렌드가 워낙 빠르게 바뀌는 세상이니, 책에서 작성자의 내용을 100% 받아들이기 보다 Stack Overflow나 다른 회사에서 사용하는 예시도 함께 보면서 문법을 받아들이는 게 학습 효과를 더 증진시킬 것으로 보인다.

개발하면서 하고 싶은 일만 하고 싶은 경우는 거의 없으므로, 프론트도 배워두면 프론트 엔지니어만큼은 아니어도 필요할 때 활용은 할 수 있을 것 같다.

Ryan

--

--