어제, 오늘 그리고 내일

이번 포스팅은 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을 한다.