199 lines
5.7 KiB
Plaintext
199 lines
5.7 KiB
Plaintext
= 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를 제공해야 하고 모든 접근을 지원하지 않으면 잘못 설계/구현된 것이다.
|