= SPA 설계 가이드

== 명명규칙
JavaScript에 대한 명명규칙으로 UI 컴포넌트, Vue 화면 개발시 표준으로 활용한다.

=== 변수 명명 규칙
* 표준 용어사전(DD)에 있는 영문명 또는 영문약어를 사용하여 의미를 잘 파악할 수 있도록 작성한다. (권고사항)
* 한글 발음을 영어로 그대로 옮겨서 사용하거나 (예: GUBUN), 무의미한 변수명 (예: a, b, c 등)은 사용하지 않는다.
* 변수의 이름은 소문자로 시작하고, 복합어일 경우에는 두번째 시작하는 단어의 첫글자는 대문자로 표기한다.
+
예) firstName, zipCode
+
* 명사로 작성하면 각 단어의 첫글자는 대문자로 표기한다.
* Vue(JS)내 method 명명 규칙
* Vue 사용되는 메소드 명명 규칙(한글명, 영문규칙)은 다음과 같으며, 아래 내용을 준수하여 작성하도록 한다.
+
[cols=5*]
|===
|파일 유형
|Method 구분
|명명규칙
|사용 예
|비고

.14+<|Vue, JS
|등록
|insert + 오퍼레이션명
|insertXxx()
|

|수정
|update + 오퍼레이션명
|updateXxx()
|

|삭제
|delete + 오퍼레이션명
|deleteXxx()
|

|등록/수정/삭제 혼합
|save + 오퍼레이션명
|saveXxx()
|CUD동시 처리

|조회 (1건)
|get + 오퍼레이션명
|getXxx()
|

|다건 조회
|list(get) + 오퍼레이션명
|listXxx()
|

|기능 실행
|execute + 오퍼레이션명
|executeXxx()
|

|파일업로드
|upload + 오퍼레이션명
|uploadXxx()
|

|파일다운로드
|download + 오퍼레이션명
|downloadXxx()
|

|계산
|calc + 오퍼레이션명
|calcXxx()
|

|출력
|print + 오퍼레이션명
|printXxx()
|

|true/false
|is + 오퍼레이션명
|isXxx()
|

|확인
|check + 오퍼레이션명
|checkXxx()
|

|개수
|count + 오퍼레이션명
|countXxx()
|

.2+<|Getter, Setter
|getter
|get + 변수명
|
|

|setter
|set + 변수명
|setXxx()
|
|===

=== 패키지 명명 규칙
UI 개발 패키지 구조는 시스템 분류별로 구분되며 해당 패키지 아래로 UI 파일이 관리된다.

[cols=7*]
|===
|구분
|1
|2
|3
|4
|5
|비고

.2+<|패키지 구조
.2+<|components
|common
|system(대분류)
|sub system(중분류)
|sub-sub system(소분류가 있을 경우)
|모듈별 vue, js 파일

|view
|admin(대분류)
|user(중분류)
|popup(소분류가 있을 경우)
|모듈별 vue, js 파일
|===
=== 그 외 공통 명명 규칙
** 모든 파일은 UTF-8 포맷으로 작성한다.
** 모든 명명은 a-z, A-Z, 0-9의 영문 대소문자와 숫자의 조합으로 구성한다.
** 클래스(Class)명, 속성(Attribute)명 및 각종 오퍼레이션(Operation)명은 일관된 용어를 사용하도록 한다.
** 기본적으로 축약형을 사용하는 것을 원칙으로 하며, 풀 네임(Full Name) 사용은 지양하되 명시적으로 의미 식별이 필요한 경우 예외적으로 적용할 수 있다.
** 단어는 50자 이상 사용하는 것을 권장하지 않는다.
** 공통 naming 규칙 : 상수와 filename을 제외하고는 CamelCase를 표기법 사용한다.
** 유사한 이름을 사용함으로써 명명의 의미가 혼동되지 않도록 한다.
+
예) exampleName  vs exampleNames

== 설계방법
=== MVVM (Model - View - View Model) 중심설계
image::front_02_21.png[]
=== MVVM 패턴의 ViewModel 레이어에 해당하는 View단 라이브러리 사용
image::front_02_22.png[]
* 데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API를 지원하는데에 궁극적인 목적이 있음
* Angular 에서 지원하는 2 way data bindings 을 동일하게 제공
* 하지만 Component 간 통신의 기본 골격을 React의 1 Way Data Flow (부모 -> 자식) 와 유사
* 다른 Front-End FW (Angular, React) 와 비교했을 때 훨씬 가볍고 빠름
* 간단한 Vue 를 적용하는데 있어서도 러닝커브가 낮고, 쉽게 접근 가능

=== REST API 호출
* REST API 설계원칙에 따라 API를 호출한다.
* HTTP METHOD를 이용하여 행위를 선언한다.

예) HTTP METHOD : POST(삽입), GET(조회), PUT(수정), DELETE(삭제)

=== 데이터 바인딩
* Vue 가 DOM 기반 HTML Template에 Vue 데이터를 바인딩 하는 방법은 아래와 같이 크게 3가지가 있다.
* Interpolation - 값 대입 : Vue 의 가장 기본적인 데이터 바인딩 체계는 Mustache {{ }} 를 따른다.

[source, javascript]
----
ex) <span>Message: {{ msg }}</span>
----
* Binding Expressions - 값 연결 : "{{ }}" 를 이용한 데이터 바인딩을 할 떄 자바스크립트 표현식을 사용할 수 있다.

[source, javascript]
----
ex) <div>{{ message.split('').reverse().join('') }}</div>
----
* Directive : Vue 에서 제공하는 특별한 Attributes 이며 -v 의 prefix(접두사)를 갖는다.

[source, javascript]
----
ex) <a v-on:click="doSomething">
----
== 화면 랜더링
변경된 데이터를 중심으로 화면을 수정하는 방법으로 빠르게 화면을 갱신한다

=== 화면설계시 주의할 점
* this.$parent 피하기
+
Vue 컴포넌트는 다른 모든 컴포넌트와 마찬가지로 독립적으로 작동해야 한다.
+
컴포넌트가 부모에 접근하는 경우 다른 곳에서 재사용할 수 없다.
* this.$refs 주의하여 사용하기
+
Vue.js는 컴포넌트가 ref 어트리뷰트를 통해 다른 컴포넌트와 기본 HTML 엘리먼트에 접근 할 수 있도록 지원한다.
+
하지만 Vue 컴포넌트에 잘못된 접근은 주의해야 한다
+
Vue 컴포넌트는 많은 API를 제공해야 하고 모든 접근을 지원하지 않으면 잘못 설계/구현된 것이다.