개발자 꿈은 이루어진다.

목차 (공부 책 : Vue.js Quick Start ) 앞서 컴포넌트에 대한 내용을 살펴보았습니다. 하지만 이는 전역 컴포넌트로써 html파일 내부에 작성하는 방법이었습니다. 간단한 페이지 작성때는 적절하지만 대규모 웹어플리케이션을 구현할 때는 컴포넌트를 관리하기 힘들고 재사용성이 낮습니다. 그렇기에 Vue CLI 기반으로 단일 파일 컴포넌트를 작성해 개발해야 합니다. 단일 파일 컴포넌트 전역 컴포넌트의 문제점은 다음과 같습니다. · 빌드 단계가 없어 최신 자바스크립트 문법을 사용할 수 없습니다. · CSS를 지원하지 않습니다. 그렇기에 CSS 스타일을 빌드하고 모듈화하는 기능을 제공하지 않습니다. · 템플릿이 작성될 때 HTML파일 내 여러개의 태그가 작성되어 식별하기 어렵습니다. 또한 템플릿마다 고..

(공부 책 : Vue.js Quick Start ) Vue CLI Vue CLI는 Vue.js 애플리케이션을 빠르게 개발할 수 있는 관련된 기능을 모두 제공하는 Vue개발 도구이자 시스템입니다. Vue CLI 3 버전부터는 대화형 방식을 적용하여 스캐폴딩 코드뿐만 아니라 vue-cli-server의 내장된 기본 설정을 통해서 복잡한 웹팩 번들러의 설정을 하지않고도 애플리케이션 개발을 할 수 있습니다. 이번 장부터 작성되는 모든 예제들은 Vue CLI를 기반으로 프로젝트를 생성하고 예제 코드를 작성할 것 입니다. Vue CLI의 구성요소와 설치 Vue CLI는 크게 3가지 구성요소로 이루어졌습니다. CLI : @vue/cli 컴퓨터 내 어디서나 실행할 수 있도록 npm을 이용해 전역설치하여 터미널 창에서 ..

(공부 책 : Vue.js Quick Start ) props와 event 앞서 부모 컴포넌트와 자식 컴포넌트 사이에 속성(Props)와 이벤트(Event)를 이용해 상호작용한다 이야기한 적 있습니다. Vue 컴포넌트들이 부모-자식 관계로 형성되었을 때 컴포넌트 내부 데이터는 캡슐화되기 때문에 다른 컴포넌트 앱에서 접근할 수 없습니다. 이 때문에 부모는 자식 컴포넌트에 필요한 정보를 속성(Props)를 이용해 전달하고 자식 컴포넌트는 이벤트(Event)를 이용합니다. 1. props를 이용한 정보 전달 {{globalGreeting}} props를 이용한 정보전달 방법은 Vue 컴포넌트를 정의할 때 props라는 옵션을 작성하고 props명을 배열로 나열하면 됩니다. 위 예제는 list-component..

(공부 책 : Vue.js Quick Start ) 컴포넌트 조합 컴포넌트들은 부모 - 자식 관계로 트리 구조를 형성합니다. (부모가 자식을 포함) 속성(Props)을 통해서 주로 단방향으로 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달합니다. 양방향도 가능하나 코딩 복잡도가 높아지고 유지 보수에 어려움이 있어 권장하지 않습니다. 반면, 자식 컴포넌트는 부모 컴포넌트로 이벤트를 발신할 수 있습니다. 자식 컴포넌트에서 이벤트를 정의하고 이를 발생시키면 부모 컴포넌트에서 이벤트 핸들러 메소드가 호출토록 합니다. 즉, 부모-자식 컴포넌트 관계는 props는 아래로, events 위로 라고 요약 할 수 있습니다. 부모는 props를 통해 자식에게 데이터를 전달하고 자식은 events를 통해 부모에게 메시지를 보..

(공부 책 : Vue.js Quick Start ) 스타일 적용 각 요소마다 스타일을 일일이 지정하는 것은 무척 비효율적인 일입니다. 만약 스타일을 바꾸려 한다면 모든 요소의 스타일 특성을 변경해야하는 문제점이 발생합니다. 때문에 예전부터 개발자들은 style 클래스를 미리 지정하고 이를 HTML 요소에 바인딩하는 방법을 사용해왔습니다. 그렇게 한다면 style 클래스 정보만 변경하는 것으로 모든 HTML 요소에 동일한 스타일을 적용할 수 있습니다. 한 HTML 요소에 여러 개의 style 클래스를 지정할 수 있는 만큼 적용되는 순서는 꼭 알아두셔야 합니다. 실행 결과를 보면 style 태그에 작성된 순서대로 스타일이 적용된 후 HTML 요소에 적용된 인라인 스타일이 적용됩니다. 같은 스타일 속성이 주어..

(공부 책 : Vue.js Quick Start ) 1. 인라인 이벤트 처리 Vue.js에서 이벤트는 v-on 디렉티브를 이용해 처리 가능합니다. 입금 인출 계좌 잔고 : {{account}} v-model로 money 속성을 양방향 바인딩하고 money의 값에 따라 account의 양이 변하게 button에서 v-on 디렉티브를 이용하여 click 이벤트 처리로 값이 증, 차감 되도록 합니다. ( ※ v-on:click은 @click으로도 대체 가능합니다. ) 위 예제 코드의 경우 account의 값을 변화시키는 작업이 html 인라인에서 직접 이루어지고 있습니다. 만약 '계좌 금액은 마이너스로 갈 수 없다' 등과 같은 특수한 조건이 붙는다면 모든 조건을 인라인 이벤트 처리로 작성하기엔 현실적으로 어려..