책 읽기
이것저것
- 책의 내용을 시작하기 전에 이것저것 설명이 나오는데 이 중에서
웹 퍼블리셔라는 용어가 나온다.
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페이지 두번째 단락에서는
뷰에서 이러한 방식을 권하는 이유는 이라고 설명이 적혀 있긴 하다.
뷰 프로젝트 구성 방법
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속성은 필수이다.
Vue.js 고급 개발자 되기
뷰 중.고급 레벨로 올라가기 위한 지식
뷰 개발을 위한 웹팩
뷰 개발을 위한 ES6
뷰 CLI에서 사용하는 NPM
지금 당장 실무에서 써 먹는 Vue.js
뷰와 제이쿼리를 같이 사용해도 되나요?
개발 기간이 너무 짧은데 기존 레거시 고드에 어떻게 뷰를 바로 적용하죠?
뷰에 UI 라이브러리와 차트를 어떻게 연동할까요?
뷰로 프로그레시브 웹 앱을 개발하려면 어떻게 시작해야 하죠?
