jingug1***
2025-02-25

Composition API와 타입스크립트로 모던 Vue 마스터하기
한빛미디어 서평단 <나는리뷰어다> 활동을 위해서 책을 협찬 받아 작성된 서평입니다.
처음에는 프런트엔드 프로그래밍을 해야 한다는 게 조금 부담스러웠습니다. 하지만 시대가 변하면서 자연스럽게 웹 개발을 접하게 되었고, 그 과정에서 Vue라는 프레임워크를 알게 되었습니다. 그런데 Vue를 처음 배울 때는 솔직히 별로 마음에 들지 않았습니다. Vue 자체의 기능이나 구조가 싫었던 게 아니라, 그 기반이 되는 자바스크립트라는 언어와 그 코딩 방식이 익숙하지 않아서였습니다.
특히 Vue에서는 데이터를 다룰 때 객체 리터럴이라는 방식을 사용해야 하는데, 저는 클래스 기반 언어를 주로 사용해왔기 때문에 이 방식이 좀 불편하게 느껴졌습니다. 여러 가지 데이터와 처리 로직이 여기저기 흩어져 있는 것 같은 느낌이 들었고, 코드가 깔끔하게 정리되지 않는 것 같아 적응하기 어려웠습니다.
그러다가 타입스크립트를 활용한 클래스 스타일의 Vue 프로그래밍을 알게 되었는데, 그제야 비로소 편하게 코딩할 수 있겠다는 생각이 들었습니다. 익숙한 클래스 문법을 사용하면서도 타입스크립트 덕분에 코드의 안정성이 보장되었기 때문입니다. 자바스크립트는 실행을 해봐야 에러가 나는지 알 수 있지만, 타입스크립트는 코딩하는 과정에서 타입이 맞지 않으면 바로 오류를 알려주기 때문에 실수할 일이 줄어들었습니다. 덕분에 안심하고 개발할 수 있었죠.
그런데 아쉽게도 Vue 3에서는 클래스 스타일이 공식적으로 지원되지 않게 되었습니다. 대신 Vue 3에서는 새로운 방식인 컴포지션 API가 도입되었고, 이를 더 발전시켜 setup 속성을 활용한 방식이 등장했습니다. 처음에는 이게 과연 편리할까 싶었지만, 직접 사용해보니 오히려 기존 방식보다 훨씬 깔끔하고 논리적으로 정리된 코드가 가능하다는 걸 깨달았습니다. 예전에는 여기저기 흩어져 있던 데이터와 로직이 한곳에서 자연스럽게 연결되었고, 코드의 흐름이 더 명확해졌습니다.
게다가 setup 속성과 타입스크립트를 함께 사용하면, 타입 안정성을 유지하면서도 간결하고 이해하기 쉬운 코드를 작성할 수 있습니다. 이렇게 Vue를 제대로 활용하기 시작하면서, 어느 순간 저는 Vue의 팬이 되어 있었습니다.
이 책에서는 타입스크립트도 함께 사용하여 더 안전하고 유지보수하기 쉬운 코드를 작성하는 방법을 익힙니다. 처음에는 다소 생소할 수 있지만, 직접 코드를 입력하고 실행해보는 ‘핸즈온’ 방식으로 학습이 진행되기 때문에 자연스럽게 익힐 수 있습니다. 이 과정에서 Vue 3의 다양한 기능을 하나씩 실습하며 배우게 되고, 이를 통해 실제로 웹사이트를 제작하는 능력을 키울 수 있습니다.
Vue 3에서는 Composition API라는 새로운 방식이 도입되었는데, 이 책에서는 이를 활용하여 보다 구조적이고 효율적인 코드를 작성하는 방법을 배울 수 있습니다. 또한, 여러 페이지를 연결해 자연스럽게 화면을 이동할 수 있도록 돕는 Vue 라우터, 그리고 애플리케이션의 데이터를 효과적으로 관리할 수 있는 Pinia도 다룹니다. 이 모든 개념을 활용하여 하나의 웹 애플리케이션을 직접 만들어 보는 경험을 하게 됩니다.
빠르고 간편한 개발 환경을 만들기 위한 Vite 설정 방법
Vue 3의 핵심 기능인 Composition API와 setup 속성 활용
데이터가 변하면 화면도 자동으로 바뀌는 반응형 시스템
HTML과 Vue의 기능을 연결하는 디렉티브와 데이터 바인딩
여러 개의 Vue 컴포넌트를 효과적으로 연결하는 방법
Vue 라우터를 이용한 페이지 전환 기능
실제로 동작하는 싱글 페이지 애플리케이션(SPA) 제작
애플리케이션의 상태를 효율적으로 관리하는 Pinia 활용
서버와 데이터를 주고받는 비동기 처리와 데이터 통신
코드의 신뢰도를 높이기 위한 단위 테스트와 품질 관리
이 책에서는 Vue의 setup 속성과 타입스크립트의 타입 안전성을 최대한 활용하는 방법을 소개합니다. 이 두 가지를 잘 활용하면 보다 깔끔하고 오류 없이 Vue 애플리케이션을 만들 수 있습니다. Vue에 관심이 있거나, 더 좋은 방식으로 개발하고 싶은 분들에게 도움이 될 것입니다.
이 책은 Vue.js와 타입스크립트를 활용하여 프런트엔드 개발을 처음부터 차근차근 배울 수 있도록 돕는 실전 입문서입니다. 특히, Vue 3의 최신 기능을 중심으로, 현대적인 웹 애플리케이션을 만드는 과정을 쉽고 친절하게 설명하고 있습니다.