이직을 하게 되면서 Vue.js를 해야해서 망설임 없이 Do it! 시리즈로 구입했다. 이 책은 Vue.js의 기본적인 구성법 및 문법에 대해서 잘 설명해주고 있으며, 다양한 실습을 통해 배운 내용을 복습한다. 또한, 실전 어플리케이션을 제작함으로써 다양한 문법 및 기능들을 활용해볼 수 있다. 다만, 벌써 출시된지 3년이 다되가며, 다양한 실전 어플리케이션 개발(db 연결 등)에 대한 컨텐츠가 있으면 좋을 것 같다는 생각이 든다.

vue.js를 공부해보기로 정하고, Do it! 시리즈 책을 구매하게 되었다. 그동안 IT 책을 많이 샀는데 끝까지 읽은 책이 없어서 이번에는 꼭 완독을 목표로 정했다. 이 책으로 정한 가장 큰 이유는 페이지 수가 적어 완독하기에 부담이 적었다는 것이고, 두번째는 카페에 공부단 프로그램을 이용하여 또 다른 책을 받을 수 있다는 것이었다.

책 내용 자체는 간단한 앱 하나를 만드는데 필요한 기초 지식을 다뤘다. 이 책만으로 바로 실무에 투입하기에는 어렵겠지만 어떠한 공부가 더 필요한지 길잡이가 되었다. 

책 읽기

이것저것

• 책의 내용을 시작하기 전에 이것저것 설명이 나오는데 이 중에서 웹 퍼블리셔라는 용어가 나온다.
  • Q. 저는 웹 퍼플리셔로 일하고 있는데 프런트 엔드 개발자로 커리어를 전향하고 싶어요. 이 책이 도움이 될까요?
  • 프런트 엔드 개발자는 뭔 줄 알겠는데, 웹 퍼플리셔라는 용어를 처음 들어봐서 정리.
  • 웹 퍼블리셔에 대한 설명은 웹 퍼블리셔의 역할 - 프론트 앤드 개발자와 차이점를 방문해서 확인해 보면 쉽게 그림으로 되어 있다.
  • 간단히 정리하면, 예전에 디자이너가 그림을 그리고, 개발자가 코딩을 해야 할 때 중간에 HTML화(?) 시키는 영역이 발전했다고 보면 된다고 한다.
  • 최초에는 HTML화 시키는 일만 했겠지만, 지금은 웹 접근성등을 지켜야 하기 때문에 더 많은 고려를 해야 하는 영역이 되었다고 한다.
  • 하지만 웹퍼블리셔를 돌아보다라는 글을 확인해 보면, 웹 퍼블리셔가 프론트엔드 개발자와 비슷한 개념으로 혼용되고 있는듯 하기도 하다.
  • 뭐.. 암튼 그럼. ㅋ.

읽으면서 정리하기

Vue.js 필수 기술 살펴보기

Vue.js 소개

Vue.js란 무엇인가?

Vue.js의 특징

• 20페이지 아래쪽 화면 요소를 꾸미는 HTML, CSS 코드와 데이터베이스에서 데이터를 가져와 제어하는 Java 코드가 한 파일에 섞이면서 가독성이 현저하게 떨어졌습니다. 라는 말
  • 이 문장에서 Java는 꼭, Java만들 뜻하는게 아니라, 서버사이드의 코드를 뜻하는것이라고 생각하는게 맞는것 같다. Java나 PHP 등 웹 서버쪽 코드 라고 하는게 더 좋을듯 하다.

개발 환결 설정 및 첫 번째 프로젝트

뷰 학습을 위한 개발 환경 설정하기

Hello Vue.js! 프로젝트 만들기

• 37 페이지 중간, 뷰 개발자 도구쪽에서 아래와 같이 '파일 URL에 대한 엑세스 허용' 체크 박스에 체크합니다. 라는게 있는데, 요즘에 크롬이 업데이트 되어서 화면이 좀 다르다.
• 아래의 그림을 참고하여 켜 주면 된다.
• 
• 옵션을 키고나면 아래와 같이 Toolbar에 Vue 아이콘이 활성화 되고, 개발자 도구 영역에 Vue 라는게 생긴다. 그리고 Vue의 데이터 상태 같은 것도 확인할 수 있다.
• 

화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트

뷰 인스턴스

• 46 페이지 마지막 단락 부분에 만약 여기에 값을 변경하는 로직을 넣더라도 화면이 다시 그려지지는 않습니다. 라는 말
  • 이 말을 이해하는데 오래 걸렸다.
  • 여기서 설명하는 부분은 beforeUpdate 이벤트(?) 이다.
  • 원래 일반적인 동작에서는 값을 변경하면 화면을 새로 그려야 한다.
  • 이 시점은 아직 새로 그리기 직전이니, 원래 그릴려고 하는 값을 강제로 변경하는 코드를 넣는다고 하더라도, 바뀐 값을 이용해 1번만 그린다. 즉, 원래 값을 강제로 바꾸었다고 해도, 다시 그릴려고 시도하지는 않는다. 는 의미로 받아들이면 될 듯 하다.
  • 책을 읽을때도 좀 이해하기 어려웠는데, 이걸 글로 표현하려고 하니... 어렵네? ㅋ
  • 음... 좀 이상하다. 실제로 beforeUpdate에서 message 값을 변경해 보면, 무한루프 에러가 발생한다. ;; 음.. 아직 뭔 말인지 이해가 잘 되지 않는다. ;;;
  • 여기에서 설명하는 그려지지 않습니다.라는 말은, 가상 DOM에 node를 추가하는것인지, Real DOM에 node를 추가하는것인지 모르겠다. ;;; 암튼 그려준다라는 말의 용어가 좀 더 명확해야 할 듯 하다. 뒤의 내용을 차츰 읽어 가면서, 추후 이 내용에 대한 업데이트를 하겠다.

뷰 컴포넌트

뷰 컴포넌트 통신

상용 웹 앱을 개발하기 위한 필수 기술들 - 라우터 & HTTP 통신

뷰 라우터

뷰 HTTP 통신

화면을 개발하기 위한 기본 지식과 팁 - 템플릿 & 프로젝트 구성

뷰 템플릿

• 102 페이지 둘째, 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표시해야 합니다. 라는 부분.
  • 간단한 연산 결과만 표시하는것을 권장합니다.라고 읽는게 좋다.
  • 안되는게 아니고, 권장하는것이기 때문에 결과만 표시해야 합니다.라는 말이 정확하지 않다.
  • 물론 그 다음 페이지인 103페이지 두번째 단락에서는 뷰에서 이러한 방식을 권하는 이유는 이라고 설명이 적혀 있긴 하다.

뷰 프로젝트 구성 방법

프론트엔드 프레임워크 3대장 중에서도 나날이 인기를 더해가는 Vue.js에 대해 처음 접해본 책. 

다른 책이나 영상을 통해 알던 지식 하나도 없이 Vue.js에 대해서는 이 책을 통해서 접한게 처음이었는데요. 결론부터 말하자면 저에게는 너무 잘 맞는 책이었습니다.

기본적으로 책이 얇기 때문에 공부를 시작하는데 크게 부담이 없었고, 중요한 개념들을 꾹꾹 눌러담은 느낌이라서 쓸데없이 많은 시간을 투자하는게 아니라 정말 알차게 공부하는 기분이 들었습니다^^

핵심적인 내용들을 전부 완전히 상세하게 풀고 있지는 않지만, 반드시 알아야할 개념들은 충분히 익힐 수 있었다고 생각하고, 또한 앞으로 Vue.js를 더 공부하는데 필요한 개념들에 대한 가이드도 잡힌 것 같아서 만족스러웠습니다.

주변에 Vue.js를 시작하려는 사람이 있다면 추천하고 싶은 책입니다.

자바 10년차 개발자입니다. 

프런트앤드 개발자라면, 요새 가장 핫한 기술이 vue.js라고 생각합니다. 공부할 필요성이 생겨 먼저 종이책을 구매한후 출퇴근시에 시간이 아까워 ebook으로 구매하였습니다. 

vue.js에 관련된 책은 시중에 많이 없엇는데, Do it 시리즈로 vue.js가 출시되어 정말 반가웠습니다. 

이 책을 완독하면 vue.js가 익숙해 지겠죠!!

일단 AngularJs나 ReactJS를 했던 분들의 경우 짧으면 하루, 여유있게 읽으면 2~3일이면 충분한 만큼 간결하게 내용이 정리가 되어 있어서, Vue.js를 시작하려는 현업 개발자에게는 매우 유용한 책인 듯 싶다.

더불어서 기존 AngularJs나 React와 비교도 같이 해주면서 설명해주다보니, 더 쉬운 이해가 되기도 한다.

해당 책을 읽고 reference급 책을 사서 읽으면 아주 괜찮은 조합이 될 듯 싶다.

다만 내용 자체가 짧다 보니, 일부 아쉬운 부분이 있는데, 실무에서 가장 많이 사용되는 부분인 Remote Api 호출과 관련된 내용도 마찬가지로 짧게 다뤄졌다는 점이 아쉽다.

내용이 좀 길어지더라도 해당 부분에 대해서 좀 더 다뤄줬으면 하는 바램이다.

일부 아쉬운 점이 있더라도 빠른 시간내에 Vue.js를 업무에 적용하고 싶어 하는 개발자에게는 매무 추천하는 책이다.