어제, 오늘 그리고 내일

이번 포스팅은 뷰 컴포넌트의 통신에 대하여 알아보도록 하겠습니다.

#1. 컴포넌트 간 통신과 유효 범위

앵귤러1이나 백본(backbone.js)과 같은 초창기 자바스크립트 프레임워크에서는 한 화면을 1개의 뷰로 간주했습니다. 따라서 한 화면의 데이터를 해당 화면 영역 어디서든지 호출할 수 있었죠. 하지만 뷰(Vue.js)의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없습니다. 그 이유는 컴포넌트마다 자체적으로 고유한 유효 범위(Scope)를 갖기 때문입니다. 이는 뷰 프레임워크 내부적으로 정의된 특징입니다. 따라서 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수가 없습니다.

다음 예제를 보겠습니다.

이 예제는 2개의 지역 컴포넌트를 등록하고, 한 컴포넌트에서 다른 컴포넌트의 값을 직접 참조하는 예제입니다. my-component2 컴포넌트 내용에서  {{ cmp2Data }}는 my-component1컴포넌트의 data.cmp1Data를 참조하고 있습니다. 자바스크립트의 객체 참조 방식을 생각해 보면 참조값 100이 화면에 표시되어야 합니다. 하지만 {{ cmp2Data }}는 아무것도 표시하지 않습니다. 이 예제를 실행하면 다음과 같은 결과 화면이 나옵니다.

{{ cmp2Data }}에 아무 값도 출력되지 않은 이유는 my-component2에서 my-component1의 값을 직접 참조할 수 없기 때문입니다. 즉, 앞에서 언급했듯이 컴포넌트의 유효 범위로 인해 다른 컴포넌트의 값을 직접 접근하지 못하기 때문에 나타난 결과입니다. 이렇게 다른 컴포넌트의 값을 참조하지 못하기 때문에 생기는 특징도 있습니다. 뷰에서 미리 정의해 놓은 데이터 전달 방식에 따라 일관된 구조로 애플리케이션을 작성하게 됩니다. 그러므로 개발자 개개인의 스타일대로 구성되지 않고, 애플리케이션이 모두 동일한 데이터 흐름을 갖습니다. 이렇게 되면 다른 사람의 코드를 빠르게 파악할 수 있어 협업에도 좋습니다.

#2. 상.하위 컴포넌트 관계

앞에서 살펴본 것처럼 컴포넌트는 가각가 고유한 유효 범위를 갖고 있기 때문에 직접 다른 컴포넌트의 값을 참조할 수 없습니다. 따라서 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야 합니다. 가장 기본적인 데이터 전달 방법은 바로 상위(부모)-하위(자식) 컴포넌트 간의 데이터 전달 방법입니다.

상위-하위 컴포넌트란 트리 구조에서 부모 노드, 자식 노드처럼 컴포넌트 간의 관계가 부모, 자식으로 이루어진 컴포넌트를 의미합니다. 컴포넌트 등록 방법으로 지역 또는 전역 컴포넌트를 등록하면 등록된 컴포넌트는 자연스럽게 하위 컴포넌트(자식 컴포넌트)가 됩니다. 그리고 하위 컴포넌트를 등록한 인스턴스는 상위 컴포넌트(부모 컴포넌트)가 됩니다.

다음 그림은 뷰에서 상위-하위 컴포넌트 간에 데이터를 전달하는 기본적인 구조를 나타냅니다.

먼저 상위에서 하위로는 props라는 특별한 속성을 전달합니다. 그리고 하위에서 상위로는 기본적으로 이벤트만 전달할 수 있습니다. 그러면 각 전달 방법에 대해 살펴보겠습니다.

▶ 이벤트와 함께 데이터를 전달하고 싶은 경우에는 이벤트의 두 번재 인자 값으로 전달하거나 이벤트 버스(Event Bus)를 활용하는 방법이 있습니다.

#3. 상위에서 하위 컴포넌트로 데이터 전달하기

props 속성

props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성입니다. props 속성을 사용하려면 먼저 오른쪽처럼 하위 컴포넌트의 속성에 정의합니다.

그런 다음 상위 컴포넌트의 HTML코드에 등록된 child-component컴포넌트 태그에 v-bind 속성을 추가합니다.

v-bind 속성의 왼쪽 값으로 하위 컴포넌트에서 정의한 props 속성을 넣고, 오른쪽 값으로 하위 컴포넌트에 전달할 상위 컴포넌트의 data 속성을 지정합니다.

그러면 props 속성을 사용해서 데이터를 전달하는 예제를 살펴보겠습니다.

이 코드는 상위 컴포넌트의 message 속성을 하위 컴포넌트에 props로 전달하여 메시지를 출력하는 예제입니다. props 속성을 이해하기 위해 코드를 작성한 순서대로 살펴보겠습니다.

1) new Vue() 인스턴스를 하나 생성합니다.

2) Vue.component()를 이용하여 하위 컴포넌트인 child-component를 등록합니다.

3) child-component의 내용에 props속성으로 propsdata를 정의합니다.

4) HTML에 컴포넌트 태그를 추가합니다. <child-component> 태그의 v-bind 속성을 보면, v-bind:prosdata="message"는 상위 컴포넌트의 message 속성 값인 Hello Vue! passed from parent Component 텍스트를 하위 컴포넌트의 prosdata로 전달하였습니다.

5) child-component의 template 속성에 정의된 <p>{{ propsdata }}</p>는 Hello Vue! passed from Parent Component가 됩니다.

위 내용을 더 간단히 정리하면 뷰 인스턴스의 data 속성에 정의된 message 속성을 하위 컴포넌트에 props로 전달하여 화면에 나타냅니다.

브라우저로 실핸한 결과 화면은 다음과 같습니다.

여기서 한 가지 짚고 넘어가야 할 부분이 있습니다. 바로 컴포넌트 간의 관계입니다.

예제 코드에서는 child-component를 전역으로 등록한 것 이외에 딱히 상위 컴포넌트를 지정하지 않았습니다. 그럼에도 불구하고 뷰 인스턴스 안에 마치 상위 컴포넌트가 존재하는 것처럼 하위 컴포넌트로 props를 내려보냈습니다. 그 이유는 컴포넌트를 등록함과 동시에 뷰 인스턴스 자체가 상위 컴포넌트가 되기 때문입니다. 관계를 정확히 이해하기 위해 다음 그림을 살펴보겠습니다.

이렇게 인스턴스에 새로운 컴포넌트를 등록하면 기존에 있는 컴포넌트는 상위 컴포넌트(부모)가 되고, 새로 등록된 컴포넌트는 하위(자식) 컴포넌트가 됩니다. 그리고 이렇게 새 컴포넌트를 등록한 인스턴스를 최상위 컴포넌트(Root Component)라고도 부릅니다.

#4. 하위에서 상위 컴포넌트로 이벤트 전달하기

이벤트 발생과 수신

앞에서 배운 props는 상위에서 하위 컴포넌트로 데이터를 전달하는 방식입니다. 그럼 반대로 하위 컴포넌트에서 상위 컴포넌트로의 통신은 어떻게 할까요? 이벤트를 발생시켜(event emit) 상위 컴포넌트에 신호를 보내면 됩니다. 상위 컴포넌트에서 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리고 있다가 하위 컴포넌트에서 특정 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출하는 것입니다.

▶뷰 공식 사이트의 이벤트 발생 사용 방법에서는 하위에서 상위로 데이터를 전달하는 방법을 다루지 않습니다. 왜냐하면 이는 뷰의 단방향 데이터 흐름에 어긋나는 구현 방법이기 때문이죠. 하지만 향후에 복잡한 뷰 애플리케이션을 구축할 때 이벤트 버스(Event Bus)를 이용하여 데이터를 전달해야 할 경우가 있기 때문에 이벤트 인자로 데이터를 전달하는 방법에 대해서는 별도로 포스팅 하도록 하겠습니다.

이벤트 발생과 수신 형식

이벤트 발생과 수신은 $emit()과 v-on: 속성을 사용하여 구현합니다. 각각 형식은 아래와 같습니다.

$emit()을 호출하면 괄호 안에  정의된 이벤트가 발생합니다. 그리고 일반적으로 $emit()을 호출하는 위치는 하위 컴포넌트의 특정 메소드 내부입니다. 따라서 $emit()을 호출할 때 사용하는 this는 하위 컴포넌트를 가리킵니다.

호출한 이벤트는 하위 컴포넌트를 등록하는 태그(상위 컴포넌트의 template속성에 위치)에서 v-on:으로 받습니다. 하위 컴포넌트에서 발생한 이벤트명을 v-on: 속성에 지정하고, 속성의 값에 이벤트가 발생하였을 때 호출될 상위 컴포넌트의 메서드를 지정합니다.

Reference

1. 장기효 [예제로 이해하고 실전 프로젝트로 완성한다! Vue.js 입문]

이번 포스팅은 뷰 컴포넌트에 대하여 알아보도록 하겠습니다.

#1. 컴포넌트

컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미합니다. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있습니다. 이렇게 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 훨씬 편리합니다. 또한 모든 사람들이 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있습니다.

뷰에서는 웹 화면을 구성할 때 흔히 사용하는 내비게이션 바(Navigation bar), 테이블(Table), 리스트(List), 인풋 박스(Inout box) 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리합니다. 다음 그림에서 왼쪽은 웹 페이지 한 화면의 영역을 각각 역할별로 분할한 그림이고, 오른쪽은 각각 분할된 영역 간의 관계를 도식화한 그림입니다. 여기서 각각 분할된 영역은 컴포넌트를 의미합니다.

위의 왼쪽 그림은 화면 전체를 Header, Content, Footer로 분할하였고, Content 영역을 Aside, List 영역으로 분할하였습니다. 이는 화면 전체를 3개의 컴포넌트로 분할한 후 분할된 1개의 컴포넌트에서 다시 2개의 하위 컴포넌트로 분할한 것입니다. 그리고 오른쪽 그림은 각 컴포넌트 간의 관계를 나타냅니다. 이러한 컴포넌트 간의 관계는 뷰에서 화면을 구성하는 데 매우 중요한 역할을 하며, 웹 페이지 화면을 설계할 때도 이와 같은 골격을 유지하면서 설계를 해야 합니다. 참고로 컴포넌트 간의 관계는 자료구조의 트리(Tree) 모양과 유사합니다.

#2. 컴포넌트 등록하기

컴포넌트를 등록하는 방법은 전역과 지역의 두 가지가 있습니다. 지역(Local) 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역(Global) 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있습니다. 더 쉽게 말하자면 지역은 특정 범위 내에서만 사용할 수 있고, 전역은 뷰로 접근 가능한 모든 범위에서 사용할 수 있다는 거죠. 그럼 두 가지 방법에 대해 살펴보겠습니다.

전역(Global) 컴포넌트 등록하기

전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록합니다. 전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .component()를 호출하여 수행하면 됩니다. 형식은 아래와 같습니다.

전역 컴포넌트 등록 형식에는 컴포넌트 이름과 컴포넌트 내용이 있습니다. 컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그(custom tag) 이름을 의미합니다. 태그 이름의 명명 규칙은 HTML 사용자 정의 태그 스펙에서 강제하는 '모든 소문자'와 '케밥 기법'을 따르지 않아도 됩니다.

그리고 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 컴포넌트 내용에 작성합니다. 컴포넌트 내용에는 template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있습니다.

▶ 사용자 정의 태그 : HTML 표준 태그들 이외에도 웹 개발자가 직접 정의하여 사용할 수 있는 태그

▶ 케밥 기법 : 변수가 단어의 조합으로 이루어져 있을 때, 단어와 단어 사이를 -로 잇는 변수 명명 방식 ex) my-component, my- global-component 등

그럼 Vue.component()로 전역 컴포넌트를 1개 등록하고 화면에 그리는 예제를 살펴보겠습니다.

이 예제를 실행하면 아래와 같은 결과 화면이 나타납니다.

이 코드가 실행되어 화면에 나타나기까지의 과정을 살펴보면 다음과 같습니다. 앞에서 살펴본 인스턴스가 화면에 적용되는 과정의 그림에 컴포넌트 등록 부분과 변환 부분을 추가하였습니다.

이 그림을 보면 인스턴스가 생성되고, 인스턴스 내용이 화면 요소로 변환될 때 컴포넌트 태그도 함께 변환됩니다. 따라서 컴포넌트 태그에 정의한 컴포넌트 내용은 사용자가 볼 수 있는 형태의 화면 요소로 최종 변환됩니다.

전연 컴포넌트를 등록하려면 HTML에서 사용할 태그 이름을 컴포넌트 이름으로 작성하고, 중괄호 { } 안에는 HTML 태그가 실제로 화면에서 그려질 때 표시될 내용(컴포넌트 내용)을 작성해야 합니다. 이 예제에서는 컴포넌트의 이름을 my-component로 지정했고, 컴포넌트 내용으로는 template 속성을 정의하고 '전역 컴포넌트가 등록되었습니다.'라는 <div> 태그를 작성했습니다.

따라서 이 컴포넌트를 아래와 같이 HTML에 추가하면 최종적으로 컴포넌트가 등록됩니다.

그리고 등록된 my-component 컴포넌트는 실제로 화면에서 아래와 같이 그려집니다.

결론적으로 인스턴스가 생성된 후 화면에 그려질 때 실제 HTML 코드 모양은 다음과 같습니다.

지역 컴포넌트 등록

지역 컴포넌트 등록은 전역 컴포넌트 등록과는 다르게 인스턴스에 component속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의하면 됩니다. 지역 컴포넌트 등록 형식은 아래와 같습니다.

컴포넌트 이름은 전역 컴포넌트와 마찬가지로 HTML에 등록할 사용자 정의 태그를 의미하고, 컴포넌트 내용은 컴포넌트 태그가 실제 화면 요소로 변환될 때의 내용을 의미합니다.

그럼 지역 컴포넌트를 등록하는 방법을 다음 예제를 통해 살펴보겠습니다.

변수 cmp에는 홤ㄴ에 나타낼 컴포넌트의 내용을 정의했습니다. 컴포넌트의 내용에 template, data, methods 등 여러 가지 속성이 들어갈 수 있지만 여기서는 간단히 컴포넌트를 등록하는 코드만 보여주기 위해 template 속성만 사용하였습니다. 그리고 template 속성에 <div> 태그 1개만 설정합니다. 아래 뷰 인스턴스에 component 속성을 추가하고 컴포넌트 이름에는 my-local-component를, 컴포넌트 내용에는 앞에서 컴포넌트 내용을 정의한 변수 cmp를 지정합니다.

그리고 HTML에 <my-local-component> 태그를 추가하여 컴포넌트를 화면에 나타냅니다.

이 예제를 실행하면 아래와 같은 결과 화면이 나타납니다.

지금까지 지역 컴포넌트 등록과 전역 컴포넌트 등록에 대하여 알아보았습니다. 그런데 아직 웹 페이지 상에서 드러나는 결과만으로는 전역 컴포넌트와 지역 컴포넌트의 차이점을 찾기가 어렵습니다. 앞에서 배운 인스턴스 유효 범위를 이용해서 전역 컴포넌트, 지역 컴포넌트 간에는 어떤 차이점이 있는지 살펴보겠습니다.

#3. 지역 컴포넌트와 전역 컴포넌트의 차이

지역 컴포넌트와 전역 컴포넌트의 차이점을 이해하기 위해서는 앞에서 배운 인스턴스의 유효 범위를 이해해야 합니다. 인스턴스의 유효 범위란 HTML의 특정 범위 안에서만 인스턴스의 내용이 유효한 것이라고 했는데, 그럼 다음 코드를 살펴보겠습니다.

위 코드는 인스턴스를 하나 생성하여 my-global-component 전역 컴포넌트와 my-local-component 지역 컴포넌트를 등록하고 화면에 나타내는 예제입니다. 코드를 실행하면 아래와 같은 결과 화면이 나타납니다.

여기까지 앞에서 배운 내용으로 충분히 이해할 수 있을 겁니다. 그럼 이번에는 인스턴스를 하나 더 생성하고 해당 인스턴스에서 지역, 전역 컴포넌트를 모두 표시해 보겠습니다.

HTML에 <div id="app2"> 태그를 하나 더 추가하고, 인스턴스도 하나 더 추가하였습니다. 그리고 <div id="app2"> 태그에 전역, 지역 컴포넌트를 모두 등록하였습니다. 첫 번째 인스턴스 영역과 두 번째 인스턴스 영역을 구분하기 위해 구분선으로는 <hr> 태그를 사용하였습니다.

인스턴스 영역에는 전역, 지역 컴포넌트가 모두 정상적으로 나타났습니다. 하지만 구분선 밑에 두 번째 인스턴스 영역에는 전역 컴포넌트만 나타나고, 지역 컴포넌트는 나타나지 않았습니다. 왜 그럴까요? 전역 컴포넌트와 지역 컴포넌트의 유효 범위가 다르기 때문입니다.

전역 컴포넌트는 인스턴스를 새로 생성할 때마다 인스턴스에 component 속성으로 등록할 필요없이 한 번 등록하면 어느 인스턴스에서든지 사용할 수 있습니다. 반대로 지역 컴포넌트는 새 인스턴스를 생성할 때마다 등록해 줘야 합니다.

첫 번째 인스턴스의 유효 범위는 첫 번째 인스턴스 영역으로 제한되기 때문에 <div id="app">에 지역 컴포넌트를 등록했어도 두 번째 인스턴스 영역인 <div id="app2">의 범위 안에서는 지역 컴포넌트가 인식되지 않아 위와 같은 결과를 나타냅니다.

<my-local-component> 태그는 두 번째 인스턴스의 유효 범이 안에 있더라도 이 컴포넌트가 등록된 첫 번째 유효 범위를 벗어나기 때문에 브라우저에서는 HTML 사용자 정의 태그로 인식하고, 뷰에서는 해당 컴포넌트를 제대로 등록했는지 물어보는 오류를 표시합니다.

Reference

1. 장기효 [예제로 이해하고 실전 프로젝트로 완성한다! Vue.js 입문]

이번 포스팅은 뷰 인스턴스 라이프 사이클에 대하여 알아보도록 하겠습니다.

#1. 뷰 인스턴스 라이프 사이클

인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클(Life Cycle) 속성이라고 합니다. 그리고 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(hook)이라고 합니다.

▶라이프 사이클 : 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명 주기

라이프 사이클 속성에는 created, beforeCreate, beforemount, mounted 등 인스턴스의 생성, 변경, 소멸과 관련되어 총 8개가 있습니다.

이 그림은 인스턴스가 생성되고 나서 화면에 인스턴스가 부착된 후 소멸되기까지의 전체적인 흐름을 나타낸 뷰 인스턴스 라이프 사이클 다이어그램입니다.

라이프 사이클 단계를 크게 나누면 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스의 내용이 갱신, 인스턴스가 제거되는 소멸의 4단계로 이루어집니다. 위 그림에서 부착-> 갱신 구간은 데이터가 변경되는 경우에만 거치게 됩니다. 그리고 각 단계 사이에 라이프 사이클 속성 created, mounted, updated 등이 실행됩니다. 그럼 각 라이프 사이클 속성을 좀 더 자세히 살펴보겠습니다.

beforeCreate

인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계입니다. 이 단계에서는 data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, Dom과 같은 화면 요소에도 접근할 수 없습니다.

created

beforeCreate 라이프 사이클 단계 다음에 실행되는 단계입니다. data 속성과 methods속성이 정의되었기 때문에 this.data 또는 this.fetchData()와 같은 로직들을 이용하여 data 속성과 methods 속성에 정의된 값에 접근하여 로직을 실행할 수 있습니다. 다만, 아직 인스턴스가 화면 요소에 부착되기 전이기 때문에 template 속성에 정의된 Dom 요소로 접근할 수 없습니다.

그리고 data 속성과 methods 속성에 접근할 수 있는 가장 첫 라이프 사이클 단계이자 컴포넌트가 생성되고 나서 실행되는 단계이기 때문에 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋습니다.

beforeMount

created 단계 이후 template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소(Dom)에 인스턴스를 부착하기 전에 호출되는 단계입니다. render() 함수가 호출되기 직전의 로직을 추가하기 좋습니다.

▶render()는 자바스크립트로 화면의 Dom을 그리는 함수입니다.

mounted

el속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계로, template 속성에 정의한 화면 요소(Dom)에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계입니다. 다만, Dom에 인스턴스가 부착되자마자 바로 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있습니다.

▶변환되는 시점이 다를 경우 $next Tick() API를 활용하여 HTML코드로 최종 파싱(변환)될 때까지 기다린 후 Dom제어 로직을 추가합니다.

beforeUpdate

el속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환됩니다. 치환된 값은 뷰의 반응성(Reactivity)을 제공하기 위해 $watch 속성으로 감시합니다. 이를 데이터 관찰이라고 합니다.

또한 beforeUpdate는 관찰하고 있는 데이터가 변경되면 가상 Dom으로 화면을 다시 그리기 전에 호출되는 단계이며, 변경 예전인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있습니다. 만약 여기에 값을 변경하는 로직을 넣더라도 화면이 다시 그려지지는 않습니다.

updated

데이터가 변경되고 나서 가상 Dom으로 다시 화면을 그리고나면 실행되는 단계입니다. 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점이므로, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계입니다. 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에 값을 변경하려면 computed, watch와 같은 속성을 사용해야 합니다. 따라서 데이터 값을 갱신하는 로직은 가급적이면 beforeUpdate에 추가하고, updated에서는 변경 데이터의 화면 요소(Dom)와 관련된 로직을 추가하는 것이 좋습니다.

▶mounted 단계와 마찬가지로 하위 컴포넌트의 화면 요소와 외부 라이브러리에 의해 주입된 요소의 최종 변환 시점이 다를 수 있습니다. $nextTick() 을 사용하여 변환이 완료될 때까지 기다렸다가 로직을 추가합니다.

beforeDestory

뷰 인스턴스가 파괴되기 직전에 호출되는 단계입니다. 이 단계에서는 아직 인스턴스에 접근할 수 있습니다. 따라서 뷰 인스턴스의 데이터를 삭제하기 좋은 단계입니다.

destroyed

뷰 인스턴스가 파괴되고 나서 호출되는 단계입니다. 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴됩니다.

그럼 지금까지 설명한 라이프 사이클 훅이 실제로 어떻게 동작하는지 확인하기 위해 예제를 통해 실습해 보겠습니다.

위 코드는 뷰 시작하기 샘플 코드에서 라이프 사이클의 4개 속성인 beforeCreate, created, mounted, updated를 추가하고 각각 로그를 출력해 보는 예제입니다.

브라우저에서 코드를 실행하고 로그를 보면 뷰 라이프 사이클 도해의 흐름대로 "beforeCreate, created, mounted"가 표시되는 것을 확인할 수 있습니다. 다만, 한 가지 의아한 부분은 updated 속성 함수는 호출되지 않았다는 것입니다. 그 이유는 update 라이프 사이클 혹은 뷰 인스턴스에서 데이터 변경이 일어나 화면이 다시 그려졌을 때 호출되는 로직이기 때문입니다. 그럼 update 앞 단계인 mounted 단계에서 기존에 정의된 data속성의 message 값을 변경해 보겠습니다.

mounted 단계에서 데이터를 변경했기 때문에 beforeUpdate, updated 단계에 정의한 로직이 모두 동작합니다. 다만 여기서는 updated 단계에만 'updated'라는 로그를 출력하는 커스텀 로직을 정의했기 때문에 beforeUpdate 단계에서는 아무런 동작을 하지 않습니다. 

이 코드를 브라우저에서 실행하면 다음과 같은 로그를 확인할 수 있습니다.

"beforeCreate, created, mounted, updated"

아까는 보이지 않던 updated 로그가 출력이 되었습니다. 그 이유는 message의 값이 변경됨에 따라 화면에 표시되는 message 값이 갱신되었고, 이에 따라 update 속성에 정의한 로직이 실행되었기 때문입니다. 여기서 중요한 것은 인스턴스의 데이터가 갱신되면서 라이프 사이클 단계가 beforeUpdate, updated 단계로 진입했다는 점입니다. 이처럼 각 인스턴스 라이프 사이클에 맞춰 원하는 로직을 추가하여 원하는 시점에 실행할 수 있습니다.

Reference

1. 장기효 [예제로 이해하고 실전 프로젝트로 완성한다! Vue.js 입문]

이번 포스팅은 Vue.js에서 뷰 인스턴스에 대하여 알아보도록 하겠습니다.

#1. 뷰 인스턴스의 정의와 속성

뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위입니다. 인스턴스는 뷰로 화면을 개발하기 위해 빠트릴 수 없는 필수 조건입니다.

뷰 인스턴스 생성

뷰 인스턴스를 사용하기 위해 아래쪽과 같은 형식으로 뷰 인스턴스를 생성합니다. 

그럼 'Hello Vue.js' 샘플 코드에서 인스턴스와 관계된 부분을 다시 한번 살펴보도록 하겠습니다.

먼저 'Hello Vue.js' 텍스트를 화면에 표시하기 위해 new Vue()로 뷰 인스턴스를 생성하였습니다. 그리고 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점을 지정하고, data 속성에 message값을 정의하여 화면의 {{ message }}에 연결하였습니다. 그럼 각 요소에 대해 자세히 알아보도록 하겠습니다.

뷰 인스턴스 생성자

new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 합니다. Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있습니다. 생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서입니다.

※ 생성자 : 생성자는 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로 객체를 생성할 때 기존에 포함된 기능과 기존 기능을 쉽게 확장하여 사용하는 기법입니다. 일반적으로 객체 지향 프로그래밍에서 사용하는 객체 정의 방식으로 미리 정의된 속성과 메서드를 재활용하기 위해 사용합니다.

#2. 뷰 인스턴스 옵션 속성

뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미합니다. 예를 들어 Hello Vue.js! 예제에서는 data라는 미리 정의되어 있는 속성을 사용하였습니다. 우리는 그 안에 message라는 새로운 속성을 추가하고 Hello Vue.js! 값을  주었을 뿐입니다. el속성 역시 미리 정의되어 있으며 뷰로 만든 화면이 그려지는 시작점을 의미합니다. 뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 Dom 요소를 지정해 주어야 합니다.

여기서 #app값은 화면의 Dom요소 중 app 이라는 id를 가진 요소를 의미합니다. 여기서 사용한 # 선택자는 CSS 선택자 규칙과 같습니다

※ CSS 선택자 중 # 선택자는 해당 id를 가진 Dom 요소를 검색할 때 사용합니다. 그리고 .선택자는 해당 클래스를 가진 Dom 요소를 검색할 때 사용합니다.

이 외 에도 template, methods, created 등 미리 정의되어 있는 속성을 사용할 수 있습니다.

#3. 뷰 인스턴스의 유효 범위

인스턴스의 유효 범위

뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타납니다. 이를 인스턴스의 유효 범위라고 합니다. 인스턴스의 유효 범위는 el 속성과 밀접한 관계가 있습니다.

인스턴스의 유효 범위를 이해하려면 인스턴스가 생성된 후 화면에 어떻게 적용되는지 알아야 합니다. new Vue()로 인스턴스를 생성하고 나서 화면에 인스턴스 옵션 속성을 적용하는 과정은 다음과 같습니다.

이 과정을 이해하기 위해서 Hello Vue.js 샘플 코드의 인스턴스 정의 부분(노란색 음영 부분)을 자세히 살펴보겠습니다.

먼저 자바스크립트 코드 상에서 인스턴스 옵션 속성 el과 data를 인스턴스에 정의하고 new Vue()로 인스턴스를 생성합니다. 그리고 브라우저에서 위 샘플 코드를 실행하면 아래와 같이 el속성에 지정된 화면 요소(Dom)에 인스턴스가 부착됩니다.

el속성에 인스턴스가 부착되고 나면 인스턴스에 정의한 옵션 개체의 내용(data 속성)이 el속성에 지정한 화면 요소와 그 이하 레벨의 화면 요소에 적용되어 값이 치환됩니다.

data 속성의 message 값 Hello Vue.js가 {{ message }}와 치환됩니다.

인스턴스의 유효 범위 확인

그런데 만약 인스턴스의 유효 범위를 벗어나면 어떻게 될까요? 앞에서 살펴본 코드를 살짝 변경해 보겠습니다.

브라우저에 "{{ message }}" 라는 텍스트가 보이게 됩니다.

message 속성의 값이 Hello Vue.js!로 바뀌지 않고 그대로 출력되는 이유는 인스턴스의 유효 범위 때문입니다.

현재 코드에서 인스턴스의 유효 범위는 el속성으로 지정한 <div id="app"> 태그 아래에 오는 요소들로 제한됩니다. 따라서 <div> 태그 바깥에 있는 {{ message }}는 뷰에서 인식하지 못 하기 때문에 Hello Vue.js!로 바뀌지 않고 {{ message }} 그대로 출력이 됩니다.

Reference

1.장기효 [예제로 이해하고 실전 프로젝트로 완성한다! Vue.js 입문]

#1. 데이터 모델의 중요성 및 유의점

1) 중복(Duplication) : 같은 시간, 같은 데이터 제공

2) 비유연성(Inflexibility) 

    - 사소한 업무 변화에 데이터 모델이 수시로 변경이 되면 안됨. (유지보수의 어려움이 있음)

    - 데이터 정의를 사용 데이터 사용 프로세스와 분리

3) 비일관성(Insonsistency) : 데이터 간 상호 연관 관계에 대해 명확히 정의  

#2. 데이터 모델링

1) 개념적 데이터 모델링 : 추상화 수준이 높고 업무 중심적이고 포괄적인 수준의 모델링 진행, 전사적 데이터 모델링, EA 수립시 많이 사용

2) 논리적 데이터 모델링 : 시스템으로 구축하고자 하는 업무에 대해 Key, 속성, 관계 등을 정확하게 표현, 재 사용성이 높음

3) 물리적 데이터 모델링 : 실제로 데이터베시으에 이식할 수 있도록 성능, 저장 등 물리적인 성격을 고려하여 설계

#3. 데이터 스키마 구조 3단계

1) 외부 스키마 (External Scheme) : 개개 사용자가 보는 개인적인 DB 스키마

2) 개념 스키마 (Concept Scheme) : 모든 사용자 관점을 통합적 전체 DB

3) 내부 스키마 (Internal Scheme) : 물리적 장치에서 데이터가 실제적 저장

#4. ERD (Entity-Relationship Design) 작성 순서

1) 엔티티를 그린다.

2) 엔티티를 적절하게 배치한다.

3) 엔티티간 관계를 설정한다.

4) 관계명을 기술한다.

5) 관계의 참여도를 기술한다.

6) 관계의 필수여부를 기술한다.

#5. 엔티티(업무에 필요하고 유용한 정보를 저장하고 관리하기 위한 집합적인 것) 의 특징

1) 반드시 해당 업무에서 필요하고 관리하고 하는 정보이어야 한다. (예) 환자, 토익의 응시횟수 등

2) 유일한 식별자에 의해 식별이 가능해야 한다.

3) 영속적으로 존재하는 인스턴스의 집합이어야 한다. (두 개이상의 인스턴스 집합)

4) 엔티티는 업무 프로세스에 의해 이용되어야 한다.

5) 엔티티는 반드시 속성이 있어야 한다.

6) 엔티티는 다른 엔티티와 최소 한 개 이상의 관계가 있어야 한다. (통계성/코드성 엔티티는 관계 생략 가능)

#6. 발생 시점에 따른 엔티티 분류

1) 기본 엔티티(Key 엔티티) : 그 업무에 원래 존재하는 정보, 타 엔티티의 부모 역할, 자신의 고유한 주식별자를 가짐 ex) 사원, 부서

2) 중심 엔티티 : 기본 엔티티로부터 발생, 다른 엔티티와의 관계로 많은 행위 엔티티 생성 ex) 계약, 사고, 주문

3) 행위 엔티티 : 2개 이상의부모 엔티티로부터 발생, 자주 바뀌거나 양이 증가 ex) 주문목록, 사원변경이력

#7. 엔티티의 이름을 부여하는 방법

1) 현업 업무에서 사용하는 용어 사용 (약어 사용 금지)

2) 단수 명사 사용

3) 고유한 이름 사용

4) 생성 의미대로 부여

#8. 엔티티, 인스턴스 속성, 속성 값의 관계

1) 한 개의 엔티티는 두 개 이상의 인스턴스의 집합이어야 한다.

2) 한 개의 엔티니는 두 개 이상의 속성을 갖는다.

3) 한 개의 속성은 한 개의 속성값을 가진다.

#9. 속성(Attribute)

1)  업무에서 필요로 하는 인스턴스로 관리하고자 하는 의미상 분리되지 않는 최소의 데이터 단위

2) 엔티티에 대한 자세하고 구체적인 정보를 나타낸다.

3) 분류

   - 기본 속성(Basic Attribute) : 업무로부터 추출한 모든 일반적인 속성 (원래 가지고 있어야 하는 속성) ex) 원금, 이자율, 예치기간

   - 설계 속성(Designed Attribute) : 업무를 규칙화하기 위해 새로 만들거나 변형, 정의하는 속성 ex) 일련번호, 예금 분류

   - 파생 속성(Derived Attribute) : 다른 속성에 영향을 받아 발생하는 속성, 빠른 성능을 낼 수 있도록 원래 속성의 값을 계산, 적을 수록 좋음 ex) 합, 이자

#9.1 속성의 명칭 부여

1) 해당 업무에서 사용하는 이름을 부여한다.

2) 서술식 속성명은 사용하지 않는다.

3) 약어 사용은 가급적 제한한다.

4) 전체 데이터 모델에서 유일성 확보하는 것이 좋다. ex) 직원이름, 고객이름

#10. 도메인(Domain)

1) 각 속성은 가질 수 있는 값의 범위가 있는데 이를 그 속성의 도메인이라 함

2) 엔티티 내에서 속성에 대한 데이터 타입과 크기 그리고 제약사항을 지정하는 것

#11. 관계

1) 엔티티의 인스턴 사이의 논리적인 연관성으로서 존재의 형태로서나 행위로서 서로에게 연관성이 부여된 상태, 관계 페어링의 집합

2) 표기법

  - 관계명 : 관계의 이름

  - 관계 차수 : 1:1, 1:M, M:N

  - 관계 선택성(관계 선택사항) : 필수관계, 선택관계

3) 체크 사항

   - 2개의 엔티티 사이에 관심있는 연관 규칙이 있는가?

   - 2개의 엔티티 사이에 정보의 조합 발생 한가?

   - 업무기술서, 장표에 관계 연결에 대한 규칙 서술이 가능한가?

   - 업무기술서, 장표에 관계 연결을 가능케 하는 동사가 있는가?   

#16. GROUP BY, HAVING 절의 특징

1) GROUP BY 절을 통해 소그룹별 기준을 정한 후 SELECT 절에 집계 함수를 사용한다.

2) 집계 함수의 통계 정보는 NULL값을 가진 행을 제외하고 수행한다.

3) GROUP BY 절에서는 ALIAS 사용 불가

4) 집계 함수는 WHERE 절에 올 수 없다.

5) HAVING 절에는 집계 함수를 이용하여 조건 표시 가능

6) HAVING 절은 일반적으로 GROUP BY 뒤에 위치

#16-1. ORDER BY

1) Oracle에서는 NULL을 가장 큰 값으로 취급

2) SQL Server에서는 NULL을 가장 적은 값으로 취급

#17. 문장 실행 순서

SELECT ALIAS -> FROM -> WHERE -> GROUP BY -> HAVING -> SELECT -> ORDER BY

#18. JOIN

1) 정의 : 두 개 이상의 테이블들을 연결 또는 결합하여 데이터를 출력하는 것

#19. 집합 연산자

1) 두 개 이상의 테이블에서 JOIN을 사용하지 않고 연관된 데이터를 조회할 때 사용, SELECT 절의 컬럼 수가 동일하고 SELECT 절의 동일 우치에 존재하는 컬럼의 데이터 타입이 상호 호환할 때 사용 가능

2) 일반 집합 연산자

   - UNION : 합집합 (중복 행 1개) 정렬

   - UNION ALL : 합집합 (중복 행도 표시) 정렬 X

   - INTERSECT : 교집합 (중복 행 1개로)

   - MINUS : 차집합 (중복 행 1개로)

   - CROSS JOIN : 곱집합(PRODUCT)

3) 순수 관계 연산자 : 관계형 DB를 새롭게 구현

   - SELECT -> WHERE 절로 구현

   - PROJECT -> SELECT 절로 구현

  - NATRUAL JOIN -> 다양한 JOIN으로 구현

  - DIVIDE -> 사용 X

4) FROM절 JOIN 형태

   - INNER JOIN : JOIN 조건에서 동일한 값이 있는 행만 반환, USING 이나 ON 정을 필수적으로 사용

   - NATURAL JOIN : 두 테이블 간의 동일한 이름을 갖는 모든 컬럼들에 대해 EQUI JOIN 수행, NATURAL JOIN이 명시되면 추가로 USING, ON, WHERE 절에서 JOIN 조건을 정의할 수 없다, SQL Server에서 지원 X

   - USING 조건절 : 같은 이름을 가진 컬럼들 중에서 원하는 컬럼에 대해서만 선택적으로 EQUI JOIN을 할 수 있다, JOIN 컬럼에 대해서 ALIAS나 테이블 이름과 같은 접두사를 붙일 수 없음, SQL Server에서 지원 X

   - ON 조건절 : ON 조건절과 WHERE 조건절을 분리하여 이해가 쉬우며, 컬럼명이 다르더라도 JOIN 조건을 사용할 수 있는 장점이 있다, ALIAS나 테이블명 반드시 사용

   - CROSS JOIN : 카티시안 곱 (양쪽 집합의 M*N건의 데이터 조합이 발생한다.)

   - OUTER JOIN : JOIN 조건에서 동일한 값이 없는 행도 반환 가능, USING이나 ON 조건절 반드시 사용해야 함.

                              SQL 식에서 (+) 안 붙는 쪽으로 JOIN을 한다.