Vue 3와 타입스크립트로 배우는 프런트엔드 개발

Vue 3와 타입스크립트로 배우는 프런트엔드 개발 - 블록 코딩과 최신 Vue 기술로 견고한 모던 프런트엔드 구축하기
WINGS 프로젝트.사이토 신조 지음, 손민옹 옮김, 야마다 요시히로 감수 / 한빛미디어 / 2025년 1월

이 책은 Vue의 3버전을 토대로 타입스크립트로 코드를 작성하는 방법을 배울 수 있다.

도입편, 기본편, 응용편으로 내용 구성이 되어 있다.

먼저 도입편에서는 본격적인 코딩을 배우기에 앞서 자바스크립트의 역사를 시작으로 이 책의 주 내용인 Vue가 등장하게 된 이유와 특징을 소개한다.

또한 Vue 3버전이 출시됨에 따라 어떤 부분이 좋아졌는지, 어떤 부분이 변경되었는지도 알 수 있어 이전 버전을 사용한 분들은 특히나 간략히 소개된 이부분을 알아두면 좋을 것 같다.

이후 Vue를 사용하기 위한 도구 설치와 프로젝트를 생성하고 실행하는 방법을 다루고 무엇보다 Vue를 이루는 요소들과 문법 구조 및 코드를 작성하는 방법도 다룬다.

개인적으로 Vue를 처음 사용해보는 개발자분들이라면 이 내용은 확실히 익혀 이후 내용을 공부하는게 도움이 되기 때문에 이 챕터는 소홀히 하지 않았으면 한다.

기본편은 Vue로 데이터를 다루는 기법들을 다룬다.

디렉티브라는 속성을 통해 자바스크립트와 타입스크립트 코드와 연동을 하는 방법과 함께 연동한 이후 이를 통해 양방향으로 데이터를 바인딩하고 출력하는 기본 기능을 앞서 다룬다.

이후에는 실제로 프로그래밍 과정에서 사용하는 여러 문법들을 다루는데 자바를 처음배울 때와 마찬가지로 기본적인 조건문과 반복문 처리 방식도 소개한다.

이후에는 여러 컴포넌트와 결합하는 방법을 다루는데 특히 이 결합 방식에서 부모와 자식의 컴포넌트를 어떻게 조합하는지 이러한 관계에서 데이터를 어떻게 바인딩처리하는지를 알 수 있다.

무엇보다 Vue에서 화면과 경로를 연결하고 이 경로에 대응하는 표시를 하는 라우팅 기능도 소개하는데, 이 부분은 화면 전환에 대한 처리 흐름을 통해 이해하는 것을 추천하고 예제 코드를 통해 라우터의 기능을 다루기 위한 디렉토리 구성과 코드 작성법을 따라해보는 것을 추천한다.

또한 Vue 3부터 기본으로 제공하는 데이터를 일관되게 처리하는 상태 관리 기능인 Pinia라는 모듈도 처리 흐름과 예제 코드를 통해 내용을 이해하여 실제로 실무에서도 이를 적용해보는 것을 추천한다.

응용편은 심화 내용을 다룬다.

비동기 처리 방식과 함께 Vue에서 단위 테스트 코드를 작성하고 테스트를 하는데 사용하는 모듈인 Vites와 Vue Test Utils의 내용도 다룬다.

따라서 도입편과 기본편을 이해했다면 응용편의 내용도 반드시 실습하여 좀 더 심화된 기능을 사용해볼 수 있었으면 한다.

이 책은 나와 같이 Vue를 사용하는데 익숙하지 않는 분들이 내용을 예제코드를 통해 이해하여 기초를 다질 수 있는 입문서라고 생각한다.

실무에서 알아야 하는 내용들만 다루고 있어 핵심 내용 또한 공부해볼 수 있다.

특히 코드를 작성하는 방법과 함께 이를 이루는 구조와 모듈들도 소개하고 있어 더더욱 도움이 되었다.

나와 같이 Vue를 공부해보고 싶은 분이라면 입문서로 추천한다.