간단히 정리하면, 예전에 디자이너가 그림을 그리고, 개발자가 코딩을 해야 할 때 중간에 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페이지 두번째 단락에서는 뷰에서 이러한 방식을 권하는 이유는 이라고 설명이 적혀 있긴 하다.
뷰 프로젝트 구성 방법
Vue.js 실전 투입!
실전 애플리케이션 만들기
할 일 관리 앱 살펴보기
프로젝트 생성하고 구조 확인하기
컴포넌트 생성하고 등록하기
137 페이지의 중간 부분에 보면, components를 등록하는 부분이 있다.
그런데 그것만 코드를 넣으면 에러가 난다.
그 페이지 제일 마지막에 있는 import 관련 코드도 같이 적어야 한다.
이 책의 설명이 좋긴 한데, 한 개의 코드 덩어리에서 설명해야 하는 부분을, 두개 이상의 덩어리로 나눠서 설명하는 경우가 있다. 이런 부분이 책을 좀 읽기 어렵게 만드는 경향이 있다.
컴포넌트 내용 구현하기
151 페이지의 아래쪽 예제에서 <li v-for='todoItem in todoItems'>{{ todoItem }}</li> 부분
vue 2.2.0 이상에서는 v-bind:key가 필수로 있어야 한다.
그러므로 vue 2.2.0 이상을 쓰면 아래와 같이 코드를 바꿔야 한다.
<li v-for='todoItem in todoItems' v-bind:key='todoItem'>{{ todoItem }}</li>
기존 애플리케이션 구조의 문제점 해결하기
더 나은 사용자 경험을 위한 기능 추가하기
페이지 171의 중간에 있는 :key 속성은 v-for 디렉티브를 사용할 때 지정하는 게 좋습니다. 부분
이미 바로 위인 151 페이지의 내용에 대한 설명에 적어 두었다. vue 2.2.0 이상에서는 :key속성은 필수이다.
