책 읽기

이것저것

  • 책의 내용을 시작하기 전에 이것저것 설명이 나오는데 이 중에서 웹 퍼블리셔라는 용어가 나온다.
    • 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 라이브러리와 차트를 어떻게 연동할까요?

뷰로 프로그레시브 웹 앱을 개발하려면 어떻게 시작해야 하죠?

Vue.js

공부하기...

  • Vue.js 를 공부 해 보려고 책을 구매 했는데.. 아직 도착 안했다.
  • 그럴줄 알고, 온라인에 한글로 되어 있는 Vue.js 가이드 문서를 출력했다.
  • 링크 : https://kr.vuejs.org/v2/guide/installation.html

읽기

설치방법

시작하기

시작하기

  • <script src="https://cdn.jsdelivr.net/npm/vue"></script>를 보면, 주소의 끝이 vue로만 끝나고 'js' 확장자가 붙지 않는데, 실제로 다운로드 받아 보면 javascript 파일이 다운로드 된다.
    • 심지어 response header에서도 javascript가 전달 된다고 정보가 온다.
  • 영어 문서를 보면, 아래의 내용이 더 있다. 한국어 문서에는 빠져 있는 내용이다. 개발할때는 아래 코드를 쓰는것이 도움이 될 거란다.

    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    

선언적 렌더링

  • 텍스트 보간 이외에도 다음과 같은 엘리먼트 속성을 바인딩 할 수 있습니다.를 보면 보간이라는게 나온다.

    • 여기서 나오는 보간은 영어로는 interpolation이다. 텍스트 끼워넣어 교체하기 이외에도 다음과 같은 엘리먼트 속성을 바인딩 할 수 있습니다. 정도로 읽으면 될 거다.

컴포넌트를 사용한 작성방법

  • v-bind:key="item.id" 부분이 있다.

    • 그 직전의 코드는 v-bind:todo="item"인데, 이 코드의 뜻은 item의 값(속성)을 Component안에서 todo라는 이름으로 사용할 것이라는거다.
    • 그렇다면 v-bind:key="item.id"라는 코드는 item.id를 Component안에서 key라는 이름으로 사용할 것이라고 예상이 된다. 하지만 실제로 key를 출력해 보면 제대로 출력 되지 않는다.
    • v-bind:key는 특별한 의미를 가지고 있기 때문에 원하는대로 처리 되지 않는 듯 하다.
    • 자세한건 뒤에 내용을 보면서 추후 업데이트 하겠다.

Vue 인스턴스

속성과 메소드

  • 유념할 점은, data에 있는 속성들은 인스턴스가 생성될때 존재한 것들만 반응형이라는것입니다. 라는 부분
    • 말그대로 Vue 객체를 생성하는 시점에 mapping 된 sturcture에 존재하는 속성들만 연동된다는 말이다.
    • 추후에 data에 속성을 추가해도, 그 값은 연동되지 않는다.
    • 근데, 그 다음 내용을 보면 $data라는 특별한 속성에 대해서 이야기가 나온다.
    • 생각해 보면 Vue 컴포넌트 내부에서 $data의 값을 이용해 연동 시킨다고 생각할 수도 있다. 하지만 주의해야 한다.
    • Vue 객체를 생성할때 mapping된 structure가 $data로 매핑되는것이다. 그렇기 때문에 vm.$data.b = 3와 같이 값을 넣는다고 해도, 추후에 컴포넌트는 만든 이후에 설정된 속성이므로 "연동"되지 않는다.
    • 그러므로 책에서 설명하듯이, 나중에 사용하려고 하는 속성들은 미리 data 의 속성으로 추가해 두어야 한다.
    • 만약 뒤늦게 반응형 속성을 추가하고 싶다면 '객체 변경 감지에 관한 주의사항' 부분을 읽어 보면 Vue.set(...)를 사용할 수 있다는것을 알려 준다.

인스턴스 라이프사이클 훅

  • options 속성이나 콜백에 ... 와 같은 화살표 함수 사용을 지양하기 바랍니다. 부분
    • 화살표를 이용한 함수사용시 this 에 대해서 다르게 동작할 수 있다.
    • 일반적인 function() 정의 안에서 this를 사용하면, 해당 function이 호출되는 Context(부모객체?)의 this를 따라가게 된다.
    • 하지만 () => { } 형태 안에서 this를 사용하게 되면, 해당 function을 정의한 Context(부모객체?)의 this를 따라가게 된다.
    • 위 말이 뭔 말인지 잘 모르겠으면 화살표 함수의 링크를 방문하여 읽어보면 된다. 자바스크립트에 대해서 잘 모른다면, 꼭 읽어 보는것이 좋다.

템플릿 문법

보간법(Interpolation)

  • 위에서 이야기 했듯이, "끼워 넣어 바꾸기" 정도로 해석하면 된다.
  • v-once 디렉티브를 사용하여 데이터 변경시 업데이트 되지 않는 일회성 보간을 수행할 수 있지만, 같은 노드의 바인딩에도 영향을 미친다는 점을 유의해야 합니다. 부분
    • 말 그대로, "v-once"로 설정된 tag 하위들은, {{msg}} 의 부분도 업데이트 되지 않는다는 말이다.
    • 한번 출력(?)되고 나면 app.msg="ccc"와 같이 값을 바꾼다고 해도, 업데이트 되지 않는다.
  • 실제로 Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원합니다. 부분
    • 쉽게 말하면 {{ msg }} 부분이나 v-bind:disabled="isButtonDisabled" 부분이나, v-bind:id="'list-'+id" 부분이나, v-if='seen', v-bind:href='url' 등 부분에서 값을 넣어 주는 '' 부분의 코드가 실행 되거나, 그 값이 할당 된다고 보면 된다.
      • 예 1 : v-if='seen'라는 코드가 있을때, seen이라는 변수의 값이 false 면, 해당 tag가 실제로 렌더링 되지 않는다.
      • 예 2 : <a v-bind:href='url'>라는 코드가 있을때, url이라는 변수의 값이 href에 할당 되는것으로 생각하면 된다. 예를 들면 <a href="http://naver.com"> 과 같이 변경 될 것이다.

계산된 속성과 감시자

계산된 속성

  • 하지만 차이점은 계산된 속성은 종속성에 따라 캐시된다는 것 입니다. 부분
    • 캐시되는 정보는 return value 이다.
    • 즉 해당 함수에서 console.log(..)를 출력한 뒤, return 'aa'라고 정의를 하면, 최초 값을 사용할 때는 console.log(..)가 출력 되지만, 그 이후 다시 해당 값을 사용하면 log가 출력되지 않는다.
    • 하지만 return value를 만들때, 변수를 사용한다면, 현재의 변수 값을 이용해서 반환된다. 변수 값이 바뀌면, return value 역시 바뀐다는것을 주의해야 한다.

폼 입력 바인딩

기본 사용법

  • 체크박스 설명중에 <label for="checkbox" ...> 부분에 대한 설명

    • 해당 label이 어느 tag와 연관이 있는지 연결해 주는 것이라고 생각하면 된다.
    • 지금은 for="checkbox" 라고 했으므로, 지금 HTML에서 id가 checkbox인 아이와 연관 되는 label이라는 뜻이다. type이 아니라 id가 checkbox인것과 연동된다는거다.
    • 이렇게 해 두면, <input> 위치가 아니라, <label>위치를 클릭해도, <input>을 누른것 처럼 동작하게 연결 할 수 있다.

      수식어

  • .lazy 설명 중에 .lazy 수식어를 추가하여 change 이벤트 이후에 동기화 할 수 있습니다. 라는 말.

    • v-model은 input text의 값이 변경되면 실시간으로 model 의 값도 같이 변경되도록 되어 있다.
    • change 이벤트는 input text에 값을 입력하는 도중이 아닌, 입력후 다른 곳으로 focus를 옮긴 이후나, 엔터를 입력하는 등의 상황에 발생한다.
    • 그러므로 말 그대로 실시간으로 적용하고 싶지 않은 경우에만 사용하면 된다.

이후 내용들...

  • 가이드 문서만 읽기에는 너무 어렵다. 
  • 소스들이 등장하기는 하는데, 전체의 소스가 아니라 소스 일부만을 설명이 나오는경우가 있어, 명확하게 파악하기 어려운 경우가 있다. 이후 중요하거나 이해를 꼭 해야 하는 부분만 정리 하도록 한다.
  • 나머지는 Do It! Vue.js 입문 책을 구매 했으니, 그 책에서 다시 정리 하던지 하자.



+ Recent posts