Initial commit
This commit is contained in:
@@ -0,0 +1,79 @@
|
||||
= Backend 구성
|
||||
|
||||
== sdl-base
|
||||
|
||||
sdl-base은 시스템 개발을 위한 프로젝트로 sdl을 기반으로 시스템을 개발하기 위한 파일들로 구성되어 있다.
|
||||
|
||||
----
|
||||
sdl-base
|
||||
|- doc <1>
|
||||
|- frontend <2>
|
||||
|- src/main/java <3>
|
||||
|- src/main/resource <4>
|
||||
|- source <6>
|
||||
|- pom.xml
|
||||
----
|
||||
|
||||
. doc : SDL 개발자 문서 위치
|
||||
. frontend : SDL Frontend 프로젝트
|
||||
. src/main/java : Java file
|
||||
. resource : 프로젝트 실행을 위한 설정파일, xml 파일 등
|
||||
. source : SDL 모듈 jar파일과 source-jar파일
|
||||
. pom.xml
|
||||
|
||||
== src/main/java
|
||||
|
||||
java source가 위치한 폴더로 maven compile 대상 프로젝트이다. SDL에서 배포되는 소스코드 외에 프로젝트에서 개발한 java class도 이곳에 작성하면 된다. SDL 기능중 시스템별로 수정이 많이 발생하거나 샘플로 제공되는 기능들은 sdl-base 모듈에 있다.
|
||||
----
|
||||
com
|
||||
|- onelogin.saml2 <1>
|
||||
|- samsung
|
||||
|- aspect <2>
|
||||
|- batch <3>
|
||||
|- common <4>
|
||||
|- config <5>
|
||||
|- filter <6>
|
||||
|- interceptor <7>
|
||||
|- sample <8>
|
||||
|- user.controller <9>
|
||||
----
|
||||
1. onelogin.saml2 : AD 통합 인증 관련 Package
|
||||
2. aspect : Aspect Package
|
||||
3. batch : 사용자 동기화 배치 관련 Package
|
||||
4. common : 시스템 공통으로 사용하는 Util Package
|
||||
5. config : Spring config Package
|
||||
6. filter : Servlet Filter Package
|
||||
7. interceptor : HandlerInterceptor의 구현, 서비스 전,후처리 Package
|
||||
8. sample : Sample Package
|
||||
9. user.controller : 로그인 관련 Package
|
||||
|
||||
== src/main/resources
|
||||
resources는 어플리케이션이 실행될 때 필요한 설정파일, Mybatis Query Mapping 파일들을 포함하고 있다.
|
||||
resource-{profile} 형태로 되어 있어 빌드 시 knox.properties, log4j2.xml, log4jdbc.log4j2.properties, onelogin.saml.properties
|
||||
의 파일이 profile에 맞게 패키징된다.
|
||||
|
||||
* resources : 모든 profile에 공통적으로 적용되는 파일(예: SQL, Excel 다운로드 양식)
|
||||
|
||||
----
|
||||
resources
|
||||
|- excel : excel up/download mapping xml 파일
|
||||
|- message : spring message properties 파일
|
||||
|- sql.mybatis : mybatis query mapper xml 파일
|
||||
|- templates : 결재/메일 vm 파일
|
||||
|
||||
----
|
||||
* resources-local : 로컬 개발 환경에 필요한 설정 파일
|
||||
----
|
||||
resources-local
|
||||
|- application.properties : spring boot 설정 파일
|
||||
|- config.properties : sdl의 설정 파일
|
||||
|- knox.properties : knox 설정
|
||||
|- log4j2.xml : log4j2 설정
|
||||
|- onelogin.saml.properties : AD 통합 인증 설정 파일
|
||||
----
|
||||
|
||||
* resources-dev : 개발 환경에 필요한 설정 파일
|
||||
* resources-prod : 운영 환경에 필요한 설정 파일
|
||||
|
||||
|
||||
IMPORTANT: 설정파일들은 반드시 프로젝트에 맞게 수정해서 사용하도록 한다.
|
||||
@@ -0,0 +1,247 @@
|
||||
= Frontend 구성
|
||||
|
||||
== frontend 폴더 구조
|
||||
|
||||
sdl-base/frontend 폴더 아래 구성되어 있다.
|
||||
|
||||
----
|
||||
frontend
|
||||
|- public <1>
|
||||
|- src <2>
|
||||
|- static <3>
|
||||
|- .env <4>
|
||||
|- index.html <5>
|
||||
|- package.json <6>
|
||||
|- .prettierrc.json <7>
|
||||
|- eslint.config.js <8>
|
||||
|- vite.config.js <9>
|
||||
----
|
||||
|
||||
<1> build 시 파일명 hashing을 하지 않는 public 폴더
|
||||
<2> Vue Source 폴더
|
||||
<3> css, font 등 정적 자원을 포함한 폴더
|
||||
<4> 배포 대상에 따른 설정 파일(.env에 정의된 파일은 Vue에서 변수로 사용가능)
|
||||
<5> 프로젝트 index.html
|
||||
<6> npm 모듈 관리를 위한 파일
|
||||
<7> prettier 설정 json 파일
|
||||
<8> eslint 설정 파일
|
||||
<9> vite 설정 파일
|
||||
|
||||
== src
|
||||
|
||||
src 폴더는 Vue의 Source 폴더이다. UI 구성을 위한 컴포넌트, 디렉티드, 필더, 라우터, 서비스 등이 있다.
|
||||
|
||||
----
|
||||
src
|
||||
|- components <1>
|
||||
|- constants <2>
|
||||
|- directives <3>
|
||||
|- event <4>
|
||||
|- filters <5>
|
||||
|- i18n <6>
|
||||
|- mixin <7>
|
||||
|- router <8>
|
||||
|- service <9>
|
||||
|- utils <10>
|
||||
|- vuex <11>
|
||||
----
|
||||
|
||||
<1> 공통 및 화면단 컴포넌트 위치
|
||||
+
|
||||
** components/common/control : SDL에서 제공하는 공통 컴포넌트 위치
|
||||
+
|
||||
** components/common/popup : SDL에서 제공하는 공통 팝업 위치
|
||||
+
|
||||
** components/view : 하위에 업무별로 패키지명을 구분해 폴더 구성
|
||||
<2> Vue 에서 사용하는 전역 상수 정의
|
||||
<3> Vue 엘리먼트에서 사용되는 사용자 지정 속성을 정의
|
||||
<4> Vue3에서 deprecated 된 event bus 모듈 폴더
|
||||
<5> Vue 에서 텍스트 형식화를 적용할 수 있는 필터 정의
|
||||
<6> vue-i18n에서 사용하는 다국어관련 정의
|
||||
<7> Vue mixin 으로 사용하는 변수 및 메소드 정의
|
||||
<8> Vue를 이용한 단일페이지에서 컴포넌트별 path를 정의
|
||||
<9> Vue에서 사용하는 service를 정의
|
||||
<10> SDL에서 제공하는 공통Util 위치
|
||||
<11> Vue에서 제공하는 상태관리 + 패턴 라이브러리 위치
|
||||
|
||||
== components
|
||||
|
||||
components 폴더는 SDL에서 제공하는 공통 컴포넌트와 공통 팝업, 어드민 기능 화면을 포함한다.
|
||||
|
||||
----
|
||||
components
|
||||
|- common
|
||||
|- control <1>
|
||||
|- popup <2>
|
||||
|- view
|
||||
|- admin
|
||||
|- approval <3>
|
||||
|- approvalTemplate <4>
|
||||
|- batch <5>
|
||||
|- board <6>
|
||||
|- dept <7>
|
||||
|- etc <8>
|
||||
|- htmlTemplate <9>
|
||||
|- log <10>
|
||||
|- main <11>
|
||||
|- menu <12>
|
||||
|- role <13>
|
||||
|- sample <14>
|
||||
|- user <15>
|
||||
|- workgroup <16>
|
||||
|- sample <17>
|
||||
----
|
||||
|
||||
<1> SDL 공통컴포넌트
|
||||
<2> SDL 공통팝업
|
||||
<3> 결재관리
|
||||
<4> 결재문서 양식 관리
|
||||
<5> 배치관리
|
||||
<6> 게시판관리
|
||||
<7> 부서관리
|
||||
<8> 기타관리
|
||||
<9> HTML 양식 관리
|
||||
<10> 로그관리
|
||||
<11> 메인페이지
|
||||
<12> 메뉴관리
|
||||
<13> 역할관리
|
||||
<14> 결재샘플
|
||||
<15> 사용자관리
|
||||
<16> 업무그룹관리
|
||||
<17> 공통컴포넌트 사용 샘플
|
||||
|
||||
IMPORTANT: 프로젝트에서 개발한 Vue 화면은 components/view 폴더 아래 있어야 한다. +
|
||||
router 등록 시 디폴트 경로가 components/view 이다.
|
||||
|
||||
== css 위치 및 import 방법
|
||||
image::front_02_24.png[]
|
||||
사용하고자 하는 css 를 static/css 밑에 넣어놓고 src/main.js에 import 에서 사용한다.
|
||||
|
||||
== directive(사용자 지정속성)
|
||||
./directives/custom.js
|
||||
[source, javascript]
|
||||
----
|
||||
// v-directive 의 기본 구조
|
||||
export default {
|
||||
beforeMount(el, binding, vnode) {
|
||||
// console.log('bind');
|
||||
},
|
||||
mounted(el, binding, vndoe) {
|
||||
// console.log('inserted');
|
||||
},
|
||||
updated(el, binding, vnode, oldVnode) {
|
||||
// console.log('componentUpdated');
|
||||
},
|
||||
};
|
||||
----
|
||||
* Vue 엘리먼트에서 사용되는 사용자 지정 속성을 정의한다.
|
||||
* 디렉티브에서 제공하는 훅 함수는 아래와 같다.
|
||||
+
|
||||
** created : 이벤트 리스너가 적용되기 전에 호출된다.
|
||||
+
|
||||
** beforeMount : 엘리먼트가 DOM에 삽입되기 직전에 호출된다.
|
||||
+
|
||||
** mounted : 바인딩된 엘리먼트의 부모 컴포넌트 및 모든 자식 컴포넌트의 mounted 이후에 호출된다.
|
||||
+
|
||||
** beforeUpdate : 부모 컴포넌트의 updated 전에 호출된다.
|
||||
+
|
||||
** updated : 바인딩된 엘리먼트의 부모 컴포넌트 및 모든 자식 컴포넌트의 updated 이후에 호출됩니다.
|
||||
+
|
||||
** beforeUnmount : 부모 컴포넌트의 beforeUnmount 이후에 호출된다.
|
||||
+
|
||||
** unmounted : 부모 컴포넌트의 unmounted 전에 호출된다.
|
||||
* 참고 : https://v3-docs.vuejs-korea.org/guide/reusability/custom-directives.html#directive-hooks
|
||||
|
||||
|
||||
.directives/index.js
|
||||
[source, javascript]
|
||||
----
|
||||
// directive install 정의
|
||||
import custom from './custom';
|
||||
import clickOutSide from './clickOutside';
|
||||
import regex from './regex';
|
||||
import authorization from './authorization';
|
||||
import validation from './validation';
|
||||
|
||||
export default {
|
||||
install(Vue) {
|
||||
Vue.directive('custom', custom);
|
||||
Vue.directive('click-outside', clickOutSide);
|
||||
Vue.directive('regex', regex);
|
||||
Vue.directive('authorization', authorization);
|
||||
Vue.directive('validation', validation);
|
||||
},
|
||||
};
|
||||
----
|
||||
|
||||
.main.js
|
||||
[source, javascript]
|
||||
----
|
||||
// directive 사용
|
||||
// ... 생략 ...
|
||||
import SdlDirectives from './directives';
|
||||
|
||||
app.use(SdlDirectives);
|
||||
// ... 생략 ...
|
||||
};
|
||||
----
|
||||
|
||||
== filter
|
||||
* Vue 에서 텍스트 형식화를 적용할 수 있는 필터를 정의한다.
|
||||
|
||||
NOTE: Vue3에선 전역 method 방식으로 사용한다.
|
||||
|
||||
./filters/index.js
|
||||
[source, javascript]
|
||||
----
|
||||
// filter install 정의
|
||||
import dateFormat from './dateFormat';
|
||||
import numberFormat from './numberFormat';
|
||||
import reverse from './reverse';
|
||||
import nl2br from './nl2br';
|
||||
import cutString from './cutString';
|
||||
|
||||
export default {
|
||||
install(Vue) {
|
||||
Vue.config.globalProperties.$filters = {
|
||||
reverse: reverse,
|
||||
dateFormat: dateFormat,
|
||||
numberFormat: numberFormat,
|
||||
nl2br: nl2br,
|
||||
cutString: cutString,
|
||||
};
|
||||
},
|
||||
};
|
||||
----
|
||||
|
||||
.예시
|
||||
[source, html]
|
||||
----
|
||||
<span class="ui--text-total">
|
||||
<strong>Total</strong> {{ $filters.numberFormat(total) }}
|
||||
</span>
|
||||
----
|
||||
|
||||
|
||||
|
||||
== 다국어 세팅 위치 및 사용 방법
|
||||
image::front_02_27.png[]
|
||||
* vue-i18n을 통한 다국어 지원
|
||||
* 서버단의 모든 message.properties를 읽어 사용자 토큰이 없을 경우에는 브라우져의 언어셋을 사용자 토큰이 있을 경우에는 지정된 언어셋으로 지정된다.
|
||||
* vue-i18n에서 제공하는 $t를 이용하거나 SDL에서 제공하는 SDLUtil 유틸을 이용해서 다국어를 사용할 수 있다.
|
||||
|
||||
== 공통 component import 구조 및 사용 방법
|
||||
image::front_02_28.png[]
|
||||
SDL에서 제공하는 공통 컴포넌트를 src/components/common/control/index.js에 컴포넌트로 리스트업 후 src/main.js에서 최종 plugin 한다.
|
||||
|
||||
== 사용자 검색 팝업
|
||||
image::front_02_29.png[]
|
||||
사용자 조회 function으로 아래와 같은 param을 정의해 사용한다.
|
||||
[source,javascript]
|
||||
----
|
||||
{
|
||||
searchColumn : '검색할 컬럼'(name : '이름', knoxId :'knoxId 아이디')
|
||||
searchTxt : '검색할 text'('like로 검색됨')
|
||||
rtnFunc : '검색한 내용을 return받을 function'
|
||||
}
|
||||
----
|
||||
@@ -0,0 +1,22 @@
|
||||
= SDL 구성
|
||||
|
||||
== 모듈
|
||||
|
||||
SDL은 12개의 모듈로 구성되어 있다. base 프로젝트를 제외한 나머지 11개의 모듈은 패키징 되어 jar파일로 배포된다.
|
||||
|
||||
image::module_dependency_01.png[]
|
||||
|
||||
* core : SDL 모듈 가장 상위에 위치하고 SDL 에서 annotation, exception등이 포함되어 있다.
|
||||
* common : 다른 모듈에서 사용되는 entity, service 등이 포함되어 있다.
|
||||
* resource : 파일 업/다운로드 관련한 기능이 포함되어 있다.
|
||||
* knox : Knox에서 제공하는 REST서비스를 연계하기 위한 기능들이 포함되어 있다.
|
||||
* email : 메일, 메일 그룹 관리 기능이 포함되어 있다.
|
||||
* auth : 사용자, 권한, 메뉴, 역할 등 인증, 인가관련 기능이 포함되어 있다.
|
||||
* support: 배치관리, 메뉴사용이력, 번역 서비스 등이 포함되어 있다.
|
||||
* approval : 결재, 결재자관리, 결재문서 관리 등 결재에 관련된 기능이 포함되어 있다.
|
||||
* board : 게시판 기능이 포함되어 있다.
|
||||
* excel : 엑셀 업/다운로드 기능이 포함되어 있다.
|
||||
* history : 메뉴 활용도, 메뉴 사용 이력 등 이력관리 기능이 포함되어 있다.
|
||||
|
||||
IMPORTANT: sdl-base/source에 배포된 모든 모듈에 대한 원본 소스 파일이 함께 배포되니 분실하지 않도록 주의한다.
|
||||
|
||||
@@ -0,0 +1,198 @@
|
||||
= 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를 제공해야 하고 모든 접근을 지원하지 않으면 잘못 설계/구현된 것이다.
|
||||
@@ -0,0 +1,11 @@
|
||||
= 아키텍처
|
||||
|
||||
SDL은 Spring 6 기반의 Back-end, Vue.js 3 기반의 Front-end로 구성되어 있다. Back-end는 MVC 패턴을 기본으로 RESTful API 아키텍처 Front-end는 MVVM 패턴을 기본으로 SPA 아키텍처로 되어 있다.
|
||||
|
||||
include::SDL구성.adoc[leveloffset=+1]
|
||||
|
||||
include::Backend구성.adoc[leveloffset=+1]
|
||||
|
||||
include::Frontend구성.adoc[leveloffset=+1]
|
||||
|
||||
//include::SPA설계가이드.adoc[leveloffset=+1]
|
||||
Reference in New Issue
Block a user