title : 1일 학습 영상
캐모마일 1일 학습 영상
캐모마일 소개
이번 과정에서는 캐모마일에 대해 알아보는 시간을 가지도록 하겠습니다.
캐모마일이란?
롯데정보통신 개발표준 프레임워크 Chamomile은 오픈 소스 기반의 Java EE 경량 플랫폼으로서 다양한 산업군에 확장성 있고, 고객 레거시 환경에 유연하게 적용 가능한 맞춤형 엔터프라이즈 서비스(웹
, 부트
, 모바일
, 배치
)를 제공합니다.
특장점
주요 특장점은 아래와 같습니다.
- 표준 개발 환경 (개발 생산성 제고)
- 클라우드 환경 및 MSA 대응
- 상용 솔루션 연계
- 그룹 보안성 심의 준수
- 시스템 공통 컴포넌트 / 어드민
- 모바일 앱 실행 및 운영 환경
- 배치 어플리케이션 개발 및 관리
- 설치 / 교육 / 운영 전문 지원 서비스
아키텍처 (구성도)
캐모마일은 Spring 기반으로 구성되어져 있으며, Java 1.8, Spring 5.2.8, Spring Boot 2.3.2, Spring Batch 4.2.4로 구성됩니다.
캐모마일의 버전에 따라 Spring의 일부 버전이 상이할 수 있습니다.
적용 사례
2021년
⊙ 롯데칠성음료 차량 및 판매장비시스템 구축
⊙ 인재개발원 통합 LMS 시스템 구축
⊙ 코리아세븐 기간계 업무 시스템 구축
⊙ 롯데정보통신 반려동물 (NANA) 커뮤니티 플랫폼 구축
⊙ 롯데정보통신 라이선스 플랫폼 구축
⊙ 롯데정보통신 블록체인(DID) 모바일 사원증 구축
⊙ 롯데정보통신 DT LAB 매장 실시간 모니터링 시스템 구축
2020년
⊙ 롯데칠성음료 경영정보시스템 구축
⊙ 롯데마트 세미다크스토어
⊙ 롯데정보통신 설비제어플랫폼(WCS) 구축
⊙ 롯데정보통신 L.Platform 구축
⊙ 롯데정보통신 블록체인플랫폼 (LALP)
2019년
⊙ 롯데정보통신 PMS
⊙ 롯데글로벌로지스 물류 BPO 플랫폼 구축
⊙ 롯데정보통신 서비스데스크 솔루션
2018년
⊙ 롯데쇼핑 스마트 리테일 옴니 매장
⊙ 롯데정보통신 RNDMS
오픈소스와 비교
오픈소스의 경우 개발자 역량에 의존적이며, 프로젝트 진행 외 향후 유지보수 관점에서도 문제 발생 시 대처가 어렵다는 단점이 있습니다.
캐모마일의 경우 Spring의 장점을 포함하여 그룹사 환경에 적합한, 기술지원이 가능한 전담인력, 지속가능한 프레임워크입니다.
주요 기능
이번 과정에서는 캐모마일에서 제공하는 주요 기능에 대해 알아보도록 하겠습니다.
글로벌 환경 다국어 지원 강화
- 다양한 형태의 다국어 저장소 [DB,FILE] 지원
- 서버 및 클라이언트 레이어 다국어 지원
- 다국어 관리 기능 및 엑셀 export/import 기능 지원
UI 상용 솔루션 연계 모듈
백엔드 개발 시 UI 상용 솔루션 제품군과의 의존성을 제거하기 위해 추상화 된 형태로 기능을 제공 (UI 상용 솔루션을 사용하는 경우와 사용하지 않는 경우 모두 동일한 코드 사용)
- nexacro17, nexacro14, websquare, xplatform 어댑터 제공
오픈소스 컴포넌트
UI 개발을 위한 오픈소스 컴포넌트 제공
- 그리드 : SlickGrid
- 차트 : Chart.js
- 트리 : jstree.js
- Input Masking : Jquery.input.mask
- 파일 업로드 : find uploader
위 명시된 오픈소스의 경우 MIT 라이선스
자체 개발 UI 컴포넌트
- 공통코드 데이터 UI 컴포넌트 : checkbox, radiobox, selectbox
- 화면 권한제어 UI 컴포넌트 : 권한에 따라 UI 렌더링
태그라이브러리 및 Java script 라이브러리 제공
클라우드 환경 및 MSA 대응 기능 제공 (캐모마일 부트)
캐모마일 부트
① 독립형 캐모마일 어플리케이션
② Tomcat (Jetty 또는 Undertow)를 내장
③ 빌드 및 의존성을 손쉽게 구성하기 위한 Starter 모듈 제공
④ 관례에 따른 환경 자동 구성 (Auto-Configure)
멀티인스턴스 관리
① 클라우드 환경에서 Auto-Scaling 서버 자동 감지
② 어플리케이션 상태의 이상 감지 (Health Check)
③ 어플리케이션 관리 기능 제공 (로그 변경, 서비스 테스트, 사용자 별 로그수준 변경)
모바일 환경 지원 (캐모마일 모바일)
모바일 프레임워크는 오픈소스(Cordova) 기반으로 구성되어져 있으며, 하이브리드 앱(iOS, Android) 개발을 위한 서버/클라이언트 실행, 운영 환경을 제공합니다.
향후 업데이트 시 플랫폼 독립적인 SDK 제공 예정
- 모바일 앱을 위한 서버/클라이언트 실행,운영 환경 제공 (앱/기기 통제, 앱/웹 자동 업데이트 등)
- 일반 웹과 모바일 앱의 단일 웹 개발 및 서버 개발 지원 (웹/모바일 통합 제공)
- 모바일 앱/웹 파일 버전 관리를 통한 앱/웹 배포 및 자동 업데이트 (앱스토어 제공)
배치 어플리케이션 개발 및 관리 (캐모마일 배치)
배치 프레임워크는 배치 응용 프로그램을 개발하기 위한 개발환경과 개발 된 배치 응용프로그램을 실행하기 위한 실행 환경(배치 실행 어플리케이션)을 제공합니다.
- 독립 실행형 배치 실행 어플리케이션
- File/DB 유형 별 Reader/Writer 제공
- 내장 된 배치 컴포넌트 제공
- 워크플로우 관리(job 간 선후행, 스케줄링, 조건) 및 실행이력 제공
- Shell 및 CLI 런처 및 모니터링, 로그 관리
실행(운영) 환경은 개발 된 배치 응용프로그램을 스케줄링하여 실행이 가능하도록 해주는 어플리케이션으로 배치 실행 어플리케이션에서 각 개별 배치 응용 프로그램을 등록, 스케줄링하여 프로세스 fork 방식으로 실행하고 실행 이력을 저장하는 독립형(stand-alone) 어플리케이션입니다.
보안(Security) 서비스 강화
Spring Security를 활용한 인증/인가 체계, 권한 관리, 로그인, 암호화 기능 제공으로 그룹 보안성 심의 항목들에 대한 사전 대응 기능 제공
- 클라이언트 및 서버 접근제어 지원 [클라이언트 컴포넌트, 메뉴, 리소스(Resource) 접근제어]
- 그룹 OneID SSO 연동
- Multi-factor 인증 지원
- 암복호화 모듈 제공
- 로그 마스킹 지원 (패턴 및 객체 기반)
- 동시 사용자 제어
- CSRF 및 웹 취약점 방어 지원
- 사용자 별 실행 이력 관리 [거래추적]
그룹 보안성 심의 항목들에 대한 프레임워크 차원의 사전 대응 기능 제공
표준화된 개발환경
프로젝트 표준 개발환경을 제공
- 이클립스 기반 단순 업무를 위한 자동화된 개발도구 제공
- 프로젝트 개발 표준화 도구 제공 (템플릿 편집 도구를 활용한 소스코드 생성)
설치
캐모마일의 설치는 로컬 개발을 위한 로컬 개발환경 설치 파일
과 서버 설치
를 위한 파일로 구성된다.
이번 교육에서는 로컬 개발환경 설치 파일을 준비한다.
캐모마일 커뮤니티를 통해 설치 파일을 준비한다.
사전 작업
JAVA HOME 설정
실습 간 제어판의 시스템 환경 변수 편집을 이용하여 JAVA_HOME을 등록하여 사용한다.
시스템 속성 > 고급 탭의 환경 변수
를 선택하여 시스템 변수 JAVA_HOME을 추가한다.
JAVA_HOME은 C:\Chamomile\Java\jdk1.8.0_161
값을 입력한다.
등록 된 JAVA_HOME 변수를 Path
에 등록한다. Path
에 등록 시 %JAVA_HOME%/bin;
으로 등록하며, 제일 앞 혹은 제일 위에 등록한다.
DB설치 & 기본 데이터 설정
C:\Chamomile\Database 내에 mariadb설치 파일과 설치 매뉴얼을 참조해 설치를 진행한다.
캐모마일에서 제공하는 DDL과 DML을 실행한다.
대상 파일은
C:\Chamomile\query
폴더에 존재하며, DDL 실행 후 DML을 실행한다.
테스트 데이터 (실습 용)
테스트를 위한 데이터는 아래와 같다.
CREATE TABLE DEMO_BOARD (
`DOC_ID` INT(11) NOT NULL AUTO_INCREMENT,
`TITLE` VARCHAR(100) NULL DEFAULT NULL,
`CONTENTS` VARCHAR(200) NULL DEFAULT NULL,
`PHONE_NUMBER` VARCHAR(200) NULL DEFAULT NULL,
PRIMARY KEY (`DOC_ID`)
);
INSERT INTO DEMO_BOARD (DOC_ID, TITLE, CONTENTS, PHONE_NUMBER)
VALUES (1, '제목1', '본문1', '010-1111-1111');
INSERT INTO DEMO_BOARD (DOC_ID, TITLE, CONTENTS, PHONE_NUMBER)
VALUES (2, '제목2', '본문2', '010-2222-2222');
INSERT INTO DEMO_BOARD (DOC_ID, TITLE, CONTENTS, PHONE_NUMBER)
VALUES (3, '제목3', '본문3', '010-3333-3333');
INSERT INTO DEMO_BOARD (DOC_ID, TITLE, CONTENTS, PHONE_NUMBER)
VALUES (4, '제목4', '본문4', '010-4444-4444');
INSERT INTO DEMO_BOARD (DOC_ID, TITLE, CONTENTS, PHONE_NUMBER)
VALUES (5, '제목5', '본문5', '010-5555-5555');
캐모마일 설치
발급 받은 로컬 개발환경 Chamomile.zip[분할 압축]을 C 드라이브에 압축을 해제한다.
압축 해제 된 디렉토리 구성은 C:/Chamomile 폴더와 같이 구성된다.
어드민 소개
어드민 기능 소개
- 자원 관리 (사용자, 그룹, 메뉴, 버튼, 공통코드 등)
- 권한 (권한, 사용자 권한, 메뉴 권한, 리소스 권한 등)
- 시스템 설정 (환경, 개인이력, 예외처리, 파일이력 등)
- 통계 (리소스, SQL, 방문, 예외 통계 등)
- 테스트 관리 (서비스테스트, 성능테스트, 이력 등)
- 모바일 관리 (앱, 파일, 기기, 리소스 관리 등)
개발도구 소개 및 프로젝트 생성
개발환경 구성 설명
영상 참고하여 개발환경 구성 확인
캐모마일에서 제공하는 라이브러리는
C:\Chamomile\repository
디렉토리에 존재
캐모마일 레파지토리
개발도구 환경 설정
C:/Chamomile/eclipse 바로가기를 통해 실행한다.
Administrator
서비스 들을 관리하는 Admin application을 등록한다. 구동시 jetty를 이용해서 구동시키므로 jetty경로를 설정한 후 배포되는 admin application의 WAR파일을 Add
시킨다. 배포되는 개발도구에는 기본적으로 admin이 설정이 되어있다.
Datasource
admin구동, chamomile project 생성, 템플릿 코드 생성시 이곳에서 설정한 DB정보를 바탕으로 데이터가 입력된다. 사용하고자 할 DB를 설정한다. 캐모마일이 지원하는 DB인 SQL Server
, Oracle
, MariaDB
, MySql
, Tibero
의 연결을 지원한다.
MSA
MSA로 개발하기 위한 구성요소들을 정의하고, 해당 구성요소들의 관계에 대해 설정 가능하다.
Templates
코드 생성시 제공할 템플릿을 관리한다. 기본적으로 JSP기반의 샘플코드가 제공되며 프로젝트 상황에 맞게 신규생성 및 수정이 가능하다.
Add file
, Add folder
를 통해 정적파일을 등록할 수 있다. Add template
을 통해 FreeMarker
기반의 템플릿을 생성할 수 있다.
프로젝트 표준에 맞게 AA를 통해 템플릿을 편집하여 사용하기를 권장한다.
프로젝트 생성 및 실행
File
-> New
-> Project
를 선택한 후 Chamomile Framework
-> Create Chamomile Project
를 선택한 후 Next
를 클릭한다.
Project Name : chamomile.demo
Group ID : chamomile.demo
Artifact ID : chamomile.demo
Version : 1.0
Base package : net.lotte.sample
생성할 프로젝트는 chamomile boot project
를 선택하고 Next
버튼을 클릭한다.
SampleApplication.java
파일을 열고 ctrl + F11
을 입력해서 application을 실행한다. (Java Application
으로 실행한다.)
구동이 완료되면 웹브라우저에 http://127.0.0.1:8081 을 입력해 접속한다.
어드민을 실행할 때 localhost로 기본접속하도록 구성되므로, 127.0.0.1로 접속하여 브라우저에서 쿠키를 공유하지 않도록 구성한다.
어드민 실행
캐모마일 프레임워크는 자원 및 권한관리 기능을 웹화면에서 사용 할 수 있도록 admin환경을 제공한다. 개발도구 상단의 아이콘을 클릭하여 admin을 실행할 수 있다.(단축키
ctrl + alt + a
)
첫번째 항목을 선택하고
Start
버튼을 클릭한다. admin실행이 완료 되면Open
버튼을 클릭하여 admin에 접속한다.
소스코드 자동 생성
기본적인 수정, 조회, 삭제등의 기능을 수행하는 코드를 생성한다.
- 위자드 실행
- 생성된 프로젝트 -> 마우스 오른쪽 버튼 ->
Chamomile
->generate Template codes
- 생성된 프로젝트 -> 마우스 오른쪽 버튼 ->
- step 1
- chamomile web project -> Next
- step 2
- 콤보박스에서
root_maria
선택 -> Connection test.. -> Next
- 콤보박스에서
- step 3
- 스키마 : chamomile
- 테이블 : demo_board
- package name : net.lotte.sample
Finish
클릭
생성되는 코드들은 레이어드 아키텍처(Controller / Service / Dao)로 생성되며, 그와 관련 된 화면 코드들도 자동 생성 됩니다.
Tip. 테이블이 존재하는 경우 테이블을
다중 선택하여 코드를 일괄 생성
할 수 있습니다.
http://localhost:8081/demoBoard로 접속하여 생성된 코드들을 테스트 합니다.
기본적으로 8081 포트로 구성되며, 포트를 변경하고자 하는 경우
src/main/resources/application.properties
파일의server.port
를 변경한다.
페이징 처리(Pageable)
코드 생성 시 페이징 쿼리가 자동으로 생성됩니다.
페이징처리에 필요한 쿼리를 직접 만들지 않고 기본 조회 쿼리를 이용해서 자동으로 페이징 쿼리를 생성해준다. (DemoBoardController.java
파일 의 listData
메서드)
protected ModelAndView listData(DemoBoardVO demoBoardVO, ModelMap model) throws Exception {
//페이징 정보 객체 생성
Pageable pageRequest = new Pageable(demoBoardVO.getPageIndex(), demoBoardVO.getRecordCountPerPage());
//데이터 조회. Pageable 타입의 파라미터가 있을 경우 자동으로 페이징 쿼리를 생한 한 후 Page객체로 반환한다.
Page<DemoBoardVO> page = demoBoardService.listData(demoBoardVO, pageRequest);
model.addAttribute("resultList", page.getContent());
model.addAttribute("resultListCnt", page.getTotalElements());
return new ModelAndView(ajaxMainView, model);
}
페이징 쿼리는 myBatis의 plugin을 이용하여 페이징 쿼리를 동적으로 생성한다.
src/main/resources/sql/config/sqlMapConfig.xml 파일 내 plugin이 설정 된다.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
...
<plugins>
...
<plugin interceptor="net.lotte.chamomile.commons.pageable.MybatisPageableInterceptor"/>
</plugins>
</configuration>
Mapper에 Pageable
정보를 전달하게 되면 페이징 쿼리가 동적으로 생성 된다.
@Repository("demoBoardDAO")
@Mapper
public interface DemoBoardDAO {
/** 조회(list) **/
Page<DemoBoardVO> listData(DemoBoardVO DemoBoardVO, Pageable pageRequest) throws Exception;
...
}
성능을 요하는 서비스의 경우 자동 생성 되는 페이징 쿼리를 사용하지 않으며, 별도로 쿼리를 작성하기를 권장한다.
공통코드와 다국어
공통코드
application 전반적으로 사용할 항목/목록 들을 공통코드로 관리 할 수 있도록 공통코드 기능을 제공한다.
admin에 접속 한 후 자원관리
-> 공통코드관리
항목으로 이동하면 현재 설정된 공통 코드 항목을 확인할 수 있다.
<%@ taglib uri="https://www.ldcc.co.kr/chamomile/commonCode/tags" prefix="cmmCode" %>
<cmmCode:select
category="category00028"
code=""
onchange="changeRowCount"
className="form-control input-sm"
id="rowcount"
defaultItem="목록수"
selectedItem="10"
useRealValue="true"
/>
공통코드 등록 시 다국어 처리가 기본적으로 수행되기 때문에 다국어도 등록해 준다.
공통코드 옵션 항목
cmmCode:select
: 공통코드 태그라이브러리를 사용하여 select 컴포넌트를 생성한다.
category
: 대분류코드
code
: 중분류코드
onchange
: 컴포넌트에 onchange이벤트가 발생했을 때 수행할 javascript function
className
: 컴포넌트에 적용할 className
id
: 컴포넌트에 적용할 id값
defaultItem
: 컴포넌트 생성시 목록 최상단에 빈값으로 추가 할 항목
selectedItem
: 컴포넌트 생성시 선택된 상태로 표시할 항목의 값
useRealValue
: 컴포넌트의 value값 셋팅시 코드값이 아닌 실제값으로 셋팅
혹시나 코드가 적용되지 않는 경우 캐시를 초기화 하거나, 서버를 재시작 한다. (재시작 시 프로세스 내 내장 Redis가 존재하는 경우 종료 후 시작한다.)
다국어
여러국가를 대상으로 서비스하는 사이트에서의 원할한 다국어 지원을 위해 DB기반의 다국어 서비스를 제공한다.
admin에 접속 한 후 자원관리
-> 다국어관리
항목으로 이동하면 현재 설정된 다국어 목록을 확인할 수 있다.
다국어는 java, jsp, js등 여러대상에서 처리할 수 있도록 지원하고 있으며 jsp에서 태그라이브러리르 통해 다국어를 처리하는 방식을 실습한다.
파라매터를 통한 다국어 처리 실습
캐모마일에 기본 설정 된 LocaleResolver는 SessionLocaleResolver가 기본적으로 설정되며, 외부 입력값에 의해 locale을 변경하고자 하는 경우 LocaleChangeInterceptor를 등록하여 처리 한다.
아래와 같이 Application의 코드를 변경한다.
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
import org.springframework.boot.autoconfigure.security.servlet.SecurityAutoConfiguration;
import org.springframework.boot.autoconfigure.security.servlet.SecurityFilterAutoConfiguration;
import org.springframework.boot.autoconfigure.session.SessionAutoConfiguration;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.i18n.LocaleChangeInterceptor;
import net.lotte.chamomile.autoconfiguration.ChamomileApplication;
import net.lotte.chamomile.autoconfiguration.ChamomileBootApplication;
import net.lotte.chamomile.autoconfiguration.WebConfigAutoConfiguration;
@ChamomileBootApplication
public class SampleApplication {
public static void main(String[] args) {
ChamomileApplication.run(SampleApplication.class, args);
}
@Configuration
protected static class CustomizingWebMvc extends WebConfigConfiguration {
@Autowired
private LocaleChangeInterceptor localeChangeInterceptor;
@Override
public void addInterceptors(InterceptorRegistry registry) {
super.addInterceptors(registry);
registry.addInterceptor(localeChangeInterceptor).addPathPatterns("/**").excludePathPatterns("/resources/**");
}
}
}
이후 브라우저에서 language
파라매터를 이용하여 언어코드를 입력 후 정상적으로 다국어 처리가 되는것을 확인한다. http://127.0.0.1:8081/demoBoard?language=en_us
한글로 변경 시 ko_kr
코드를 이용한다.
http://127.0.0.1:8081/demoBoard?language=ko_kr
파일 업로드
캐모마일 FileUploadUtil
컴포넌트를 사용해 파일을 서버로 업로드한다.
- step 1 : 실습용으로 만들어논 파일 업로드를 위한 모달 화면 추가
fileupload.jsp
파일을src/main/webapp/WEB-INF/views/service
디렉토리에 추가demobord.jsp
파일에서 다음을 추가<%@ include file=”../fileupload.jsp” %>demobord.jsp
파일에서 업로드 버튼 추가<a href=”#” id=”buttonExcelInsert” onclick=”javascript:excelUploadInit();” class=”btn btn-primary”>
<i class=”fa fa-file-text-o”></i>엑셀업로드
</a>
fileupload.jsp 부분 설명
기본 제공 위치 :
C:\\chamomile\교육\edu
FineUploader
라이브러리를 사용하고 있음. (https://fineuploader.com/)
- step 2 : 컨트롤러에서 업로드 요청을 처리할 메서드를 추가 [
DemoBoardController.java
]FileUploadUtil
빈을 사용하기 위해 의존성 주입- 업로드 요청을 처리할 코드를 작성 (
/excelUpload
)public class DemoBoardController {
//…
//파일 업로드 컴포넌트 의존성 주입
@Autowired
private FileUploadUtil fileUploadUtil;
//…
//파일업로드 URL생성
@RequestMapping(value=”/excelUpload”, method=RequestMethod.POST)
public ModelAndView excelUpload(
ModelMap model,
HttpServletRequest req,
@RequestParam(“qqfile”) MultipartFile file,
@RequestParam(“qquuid”) String uuid,
@RequestParam(“qqfilename”) String filename,
@RequestParam(value = “qqtotalfilesize”, required=false, defaultValue=”-1″) int totalFileSize
) throws Exception {
//파일 업로드 실행
fileUploadUtil.fileUpload(new MultipartFile[] {file});
model.addAttribute(“count”, 1);
return new ModelAndView(ajaxMainView, model);
}
//…
}
- step 3 : 웹 어플리케이션에서 업로드를 수행 후 확인
- 기본 파일 경로에 생성된 파일을 확인 [
application.propertis
파일에chmm.file.dir
] - 기본
C:\\files
디렉토리에 파일이름은 난수 처리되어 저장됨 - 파일 내용은 변경되지 않으므로 OS에 따라 적당한 확장자를 지정해주면 파일을 확인할 수 있다.
- 기본 파일 경로에 생성된 파일을 확인 [
이클립스 사용법
Organize Imports (자동 Import) :
ctrl
+shift
+o
Format (자동 정렬) :
ctrl
+shift
+f
파일 다운로드
캐모마일 FileDownloadUtil
컴포넌트를 사용해 파일을 다운로드 요청을 구현한다.
- step 1 :
템플릿 다운로드
버튼의 기능을 추가fileupload.jsp
파일function excelTemplateDownload()
추가 요청 :/demoBoard/download
<script>
//…
function excelTemplateDownload(){
location.href=”${pageContext.request.contextPath}/demoBoard/download”;
}
//페이지 진입시 실행될 함수
$(function() {
//초기화 진행
slickconf.init();
});
</script>
- step 2 : 컨트롤러에서 다운로드 요청에 대한 메서드 작성
DemoBoardController.java
파일 [FileDownloadUtil
빈 주입,/demoBoard/download
]public class DemoBoardController {
//…
@Autowired
FileDownloadUtil fileDownloadUtil;
//…
@ResponseBody
@RequestMapping(value=”/download”, method=RequestMethod.GET)
public void download(HttpServletResponse res) throws Exception{
//파일 다운로드를 수행한다.
fileDownloadUtil.fileDownload(“sample_board.xlsx”, “게시판템플릿.xlsx”, res);
}
//…
}
- step 3 : 템플릿 파일이 경로에 존재하는지 확인 (없다면 추가)
- 기본 파일 경로에 파일을 확인 [기본 파일 경로 :
application.propertis
파일에chmm.file.dir
]- 파일 이름 :
sample_board.xlsx
- 파일 이름 :
- (없다면)
C:\\Chamomile\files
디렉토리에 있는sample_board.xlsx
파일을 복사 붙여넣기
- 기본 파일 경로에 파일을 확인 [기본 파일 경로 :
- step 4 : 웹 어플리케이션에서
템플릿 다운로드
버튼 확인
엑셀 Import (객체화)
캐모마일 ExcelCommonUtil
을 사용해 엑셀 파일을 객체화한다.
- step 1 : 서비스 (인터페이스) 단에서 엑셀 파일(경로)을 통해 데이터를 주입하는 추상 메서드를 작성
DemoBoardService.java
Map<String, String> importExcel(String path);
- step 2 : 서비스 구현으로 엑셀 파일을 객체화하는 부분을 구현
DemoBoardServiceImpl.java
@Override
public Map<String, String> importExcel(String path) throws Exception {
//업로드된 파일을 SpreadSheet객체로 추출
SpreadSheet ss = ImportExcel.importData(path);
//추출하고자 하는 sheet명을 적어 List형태로 반환.
List<DemoBoardVO> toInsertList = (List<DemoBoardVO>) ExcelCommonUtil.getListFromExcel(ss, “messageSource”, DemoBoardVO.class);
return null;
}
- step 3 : 컨트롤러에서 서비스 메서드를 사용해서 엑셀 파일(경로)을 전달
DemoBoardController.java
public class DemoBoardController {
//파일 업로드 컴포넌트 의존성 주입
@Autowired
private FileUploadUtil fileUploadUtil;
//업로드 디렉토리 관리 컴포넌트 의존성 주입
@Autowired
private FileDirectoryManagement fileDirectoryManagement;
//…
//파일업로드 URL생성
@RequestMapping(value=”/excelUpload”, method=Req uestMethod.POST)
public ModelAndView excelUpload(
//…생략…
){
//파일 업로드 실행
FileUploadVo[] fileVo = fileUploadUtil.fileUpload(new MultipartFile[] {file});
//파일이 업로드 되는 경로
String uploadRootPath = fileDirectoryManagement.getDirPath();
//업로드된 후 변경된 파일명을 얻어와 excel import
Map<String, String> returnMap = demoBoardService.importExcel(uploadRootPath + File.separator + fileVo[0].getUploadFileName());
model.addAttribute(“count”, 1);
return new ModelAndView(ajaxMainView, model);
}
}
- step 4 : 객체화 된 엑셀 정보를 로그를 통해 확인
- (옵션)
DemoBoardServiceImpl
에서 객체를 로그형태로 찍어서 확인
- (옵션)
엑셀 Import (대량)
캐모마일 Batchable Mybatis Plugin 을 활용해서 대량 insert 를 사용한다.
- step 1 : DAO 인터페이스에서
Batchable
을 인자로 사용하는 추상 메서드를 추가DemoBoardDAO.java
int insert(List<DemoBoardVO> DemoBoardVO, Batchable batchRequest) throws Exception;
- step 2 : 서비스 구현에서 원하는 Batch size 만큼 DAO 를 호출하도록 연결
DemoBoardServiceImpl.java
@Override
public Map<String, String> importExcel(String path) throw Exception {
//업로드된 파일을 SpreadSheet객체로 추출
SpreadSheet ss = ImportExcel.importData(path);
//추출하고자 하는 sheet명을 적어 List형태로 반환.
List<DemoBoardVO> toInsertList = (List<DemoBoardVO>) ExcelCommonUtil.getListFromExcel(ss, “messageSource”, DemoBoardVO.class);
int count = -1;
if (toInsertList.size() > 0) {
//500건씩 끊어 처리한다.
Batchable batchRequest = new BatchRequest(500);
count = demoBoardDAO.insert(toInsertList, batchRequest);
}
//성공 또는, 실패에 대한 결과를 return 한다.
Map<String, String> returnManp = new HashMap<>();
returnManp.put(“message”, count > 0 ? “성공” : “실패”);
returnManp.put(“count”, String.valueOf(count));
return returnManp;
}
- step 3 : 컨트롤러 단에서 insert 된 갯수를 반환하도록 코드를 작성
DemoBoardController.java
//업로드된 후 변경된 파일명을 얻어와 excel import
Map<String, String> returnMap = demoBoardService.importExcel(uploadRootPath + File.separator + fileVo[0].getUploadFileName());
//실제 insert된 결과를 반환한다.
model.addAttribute(“count”, returnMap.get(“count”));
return new ModelAndView(ajaxMainView, model);
- step 4 : 엑셀파일을 준비하고 데이터가 등록되는 것을 확인
엑셀 Export
DB에 있는 데이터를 엑셀 파일로 변환해서 내려준다. (ExcelViewer
컴포넌트)
- step 1 : 엑셀로 변환할 클래스에 엑셀 관련 어노테이션 추가
DemoBoardVO.java
@ExcelSheet(name=”게시판목록”)
public class DemoBoardVO implements Serializable{
//…
@ExcelColumn(name=”문서번호”, index=0)
private Integer docId;
@ExcelColumn(name=”제목”, index=1)
private String title;
@ExcelColumn(name=”내용”, index=2)
private String contents;
@ExcelColumn(name=”핸드폰번호”, index=3)
private String phoneNumber;
//…
}
- step 2 : 코드 상에 DB에서 데이터를 모두 가져오기 위한 연결 로직 작성
DemoBoardDAO.java
List<DemoBoardVO> listData(DemoBoardVO DemoBoardVO);DemoBoardService.java
List<DemoBoardVO> listData(DemoBoardVO demoBoardVO);DemoBaordServiceImpl.java
@Override
public List<DemoBoardVO> listData(DemoBoardVO demoBoardVO) {
return demoBoardDAO.listData(demoBoardVO);
}
- step 3 : 컨트롤러 단에서 엑셀 다운로드를 위한 요청 메서드와 응답 작성 [
ExcelViewer
빈 주입]DemoBoardController.java
[/demoBoard/excelExport
]public class DemoBoardController {
//…
@Resource(name=”multisheetSpreadSheetView”)
private ExcelViewer multisheetView;
//…
//엑셀 export URL생성
@RequestMapping(value=”/excelExport”, method=RequestMethod.GET)
public ModelAndView excelExport(DemoBoardVO demoBoardVO, HttpServletRequest request, HttpServletResponse response, ModelMap model) throws Exception {
//페이징 처리없이 전체 데이터 조회
List<DemoBoardVO> listResultSet = demoBoardService.listData(demoBoardVO);
//엑셀 파일명
String target = “게시판출력”;
String docName = URLEncoder.encode(target, “UTF-8”);
//엑셀 view 초기화
multisheetView.init();
//엑셀view 파일명 지정
multisheetView.setDocName(docName);
//엑셀 데이터 설정
multisheetView.addData(listResultSet);
ModelAndView view = new ModelAndView();
view.setView(multisheetView);
return view;
}
//…
}
- step 4 : 화면에서 엑셀을 다운로드 하기위한 버튼과 자바스크립트 코드 작성
demoBoard.jsp
<a href=”#” id=”buttonExcelInsert” onclick=”javascript:excelExport();” class=”btn btn-primary”>
<i class=”fa fa-file-text-o”></i>엑셀다운로드
</a>
…
<script type=”text/javascript”>
…
//엑셀을 다운로드하는 페이지로 이동
function excelExport(){
location.href=”${pageContext.request.contextPath}/demoBoard/excelExport”;
}
</script>
- step 5 : 웹 어플리케이션을 기동하여 엑셀파일이 다운로드 되는지 확인
Validation (서버)
JSR-303, JSR-380, 캐모마일 Constrain Annotaion 을 활용해서 서버 Validation을 사용한다.
- step 1 : 클래스에 Validation Annotation 추가 [
DemoBoardVO.java
]DemoBoardVO.java
public class DemoBoardVO implements Serializable{
//…
@ExcelColumn(name=”문서번호”, index=0)
private Integer docId;
@ExcelColumn(name=”제목”, index=1)
@NotNull @NotEmpty @Size(max=100)
private String title;
@ExcelColumn(name=”내용”, index=2)
@NotNull @NotEmpty @Size(max=200)
private String contents;
@ExcelColumn(name=”핸드폰번호”, index=3)
@NotNull @NotEmpty @Size(max=20) @PhoneNumber
private String phoneNumber;
//…
}@NotNull
,@NotEmpty
,@Size
,@PhoneNumber
어노테이션 삽입
- step 2 : 컨트롤러에 유효성 검사 적용 [
DemoBoardController.java
]DemoBoardController.java
클래스 파일insert
메서드@RequestMapping(value = “/insert”, method = RequestMethod.POST)
protected ModelAndView insert(@Valid DemoBoardVO demoBoardVO, ModelMap model) throws Exception {
//…
}@Valid
어노테이션 삽입
- step 3 : 어플리케이션을 구동해서 Validation 동작 확인 및 에러 메시지 확인
[참고] 화면에서의 Validation : WEB개발가이드 문서 內 WEB화면 라이브러리 – 공통 부분 참조
- 화면 Form Validation : http://shashani-humanth.github.io/Notebook-AdminPanel/form-validation.html
- jQuery Input Mask : https://robinherbots.github.io/Inputmask/
어드민 권한 – 사용자 메뉴
샘플 프로젝트에서 왼쪽 메뉴를 추가한다. (캐모마일 메뉴-권한 체계, chamomile.leftmenu.js
라이브러리 , MenuService
컴포넌트)
- step 1 : 메뉴를 추가한다.
- 왼쪽 메뉴
자원관리
->메뉴관리
이동 등록
버튼 클릭- 데이터 입력 (메뉴 1)
- 메뉴레벨 :
대메뉴
- 상위메뉴 ID :
root : 메뉴
- 메뉴명 :
실습용메뉴
- 메뉴순서 :
1
- 어드민 메뉴여부 :
미사용
- 좌측메뉴 여부 :
사용
- 사용여부 :
사용
- 메뉴레벨 :
저장
버튼 클릭- 트리 뷰에서
실습용메뉴
선택 후등록
버튼 클릭 - 데이터 입력 (메뉴 2 – 위에서 생성한 메뉴의 하위 메뉴)
- 메뉴레벨 :
레벨1
- 상위메뉴 ID :
menuXXXXXXXX :실습용 메뉴
- 메뉴명 :
등록
- 메뉴순서 :
1
- 메뉴URI :
/demoBoard/create
- 어드민 메뉴여부 :
미사용
- 좌측 메뉴여부 :
사용
- 사용여부 :
사용
- 메뉴레벨 :
- 왼쪽 메뉴
- step 2 : 메뉴에 권한을 부여한다.
- 왼쪽 메뉴
권한관리
->메뉴권한관리(권한->메뉴)
이동 - 권한
ROLE_ADMIN_ID
를 선택 - step 1 에서 등록한 권한을
사용
(오른쪽)으로 이동 저장
버튼 클릭
- 왼쪽 메뉴
- step 3 : 화면 코드 상에 메뉴를 표현하는 코드를 작성한다.
- 샘플 프로젝트
DemoBoard.jsp
파일을 오픈 - 상단에 캐모마일 기본 왼쪽 메뉴 라이브러리를 추가<script src=”<c:url value=’/resources/js/chamomile.leftmenu.js’/>”></script>
- 메뉴를 화면에 그려주는 코드를 추가<script type=”text/javascript”>
//…
//페이지 진입시 실행될 함수
$(function() {
//초기화 진행
slickconf.init();
cmml._ajaxAsync(httpUrl.root + “/leftMenu”, null, function(rstData, status){
if (status == “success”){
menuList = rstData.resultList;
leftmenu.create(“${pageContext.request.contextPath}”, “#leftmenu”, menuList);
}
});
});
//…
</script>
- 샘플 프로젝트
- step 4 : 서버 코드 상에 메뉴 정보를 응답하는 코드를 작성한다.
- 샘플 프로젝트
DemoBoardController.java
파일을 오픈 - 메뉴 서비스 (
MenuService
) bean(컴포넌트)을 사용할 수 있도록 추가 - 메뉴 정보 요청에 대한 컨트롤러 메서드를 작성public class DemoBoardController {
//…
@Autowired
MenuService menuService;
//…
@RequestMapping(value = “/leftMenu”, method = RequestMethod.POST)
protected ModelAndView leftMenu(ModelMap model) throws Exception {
//서비스 어플리케이션에서 사용할 메뉴 목록을 조회한다.
List<Map<String, Object>> resultMapList = menuService.findMyMenu(MenuService.SERVICE_MENU, null);
model.addAttribute(“resultListCnt”, resultMapList.size());
model.addAttribute(“resultList”, resultMapList);
return new ModelAndView(ajaxMainView, model);
}
// …
}
- 샘플 프로젝트
- step 5 : 샘플 프로젝트를 기동하고, 웹 브라우저로 샘플 프로젝트의 왼쪽 메뉴를 확인한다.
어드민 권한 – 리소스 접근 제어
리소스 접근제어
샘플 프로젝트에서 리소스(URL) 접근 제어를 사용한다. (캐모마일 리소스-권한 체계)
- step 1 : 권한을 생성(추가)한다.
- 왼쪽 메뉴
권한관리
->권한등록관리
이동 등록
버튼 클릭- 데이터 입력
- 권한ID :
ROLE_CUSTOM_ID
- 권한이름 :
사용자 권한
- 시작일자 : [[오늘의 하루 전]]
- 종료일자 : [[일주일 후]]
- 사용여부 :
사용
- 권한ID :
저장
버튼 클릭
- 왼쪽 메뉴
- step 2 : 사용자 계정을 생성한다.
- 왼쪽 메뉴
자원관리
->사용자관리
이동 등록
버튼 클릭- 데이터 입력
- 사용자아이디 :
customer
- 사용자이메일 :
test@lotte.net
- 패스워드/패스워드확인 :
1q2w3e4r
- 계정 시작날짜 : [[오늘의 하루 전]]
- 계정 종료날짜 : [[일주일 후]]
- 이름 :
테스트
- 패스워드만료일자 : [[일주일 후]]
- 사용여부 :
사용
- 사용자아이디 :
- 사용자 계정의 권한을 설정한다. [
ROLE_CUSTOME_ID
,ROLE_DEFAULT_ID
]- 권한 관리
ROLE_CUSTOME_ID
,ROLE_DEFAULT_ID
를사용
(오른쪽)으로 이동
- 권한 관리
저장
버튼 클릭
- 왼쪽 메뉴
- step 3 : 리소스 정보를 생성(추가)한다.
- 왼쪽 메뉴
자원관리
->리소스관리
이동 등록
버튼 클릭- 데이터 입력
- 리소스아이디 :
RESOURCE_USER_ID
- 리소스 URI :
/demoBoard/**
- Http Mothod :
모두 적용
체크 - 리소스명 :
유저리소스
- 리소스 순서 :
1
- 사용여부 :
사용
- 리소스아이디 :
- 왼쪽 메뉴
- step 4 : 리소스에 권한을 부여(할당)한다.
- 왼쪽 메뉴
권한관리
->리소스권한관리
이동 - 리소스
RESOURCE_USER_ID
선택 - 리소스 권한에
ROLE_CUSTOM_ID
를사용
(오른쪽)으로 이동 닫기
버튼 클릭
- 왼쪽 메뉴
- step 5: 웹 브라우저로 권한이 적용되었는지 확인한다.
- 일반 브라우저로
customer
로그인 - 다른(시크릿모드) 브라우저로
admin
로그인
- 일반 브라우저로
컴포넌트(화면 영역) 권한 제어
샘플 프로젝트에서 화면 영역(컴포넌트) 접근 제어를 사용한다. (캐모마일 리소스버튼-권한 체계, chamomile security tag 라이브러리)
- step 1 : 리소스 버튼(화면영역 코드)을 활성화 하고 리소스 버튼에 권한을 부여(할당)한다.
- 왼쪽 메뉴
권한관리
->리소스권한관리
이동 - 리소스
RESOURCE_USER_ID
선택 - 리소스 권한에
ROLE_ADMIN_ID
를사용
(오른쪽)으로 이동 - 버튼 권한에
BUTTON_INSERT_ID
를사용
(오른쪽)으로 이동 BUTTON_INSERT_ID
를 선택하고ROLE_ADMIN_ID
를사용
(오른쪽)으로 이동
- 왼쪽 메뉴
- step 2 : 코드상에 화면 영역에 대해 tag 라이브러리를 적용한다.
- 샘플 프로젝트
DemoBoard.jsp
파일을 오픈 - 상단에 tag 라이브러리 추가<%@ taglib uri=”https://www.ldcc.co.kr/chamomile/security/tags” prefix=”chamomile-sec” %>
- 등록버튼이 있는 화면영역을 security tag로 감싼다.<chamomile-sec:button code=”buttonInsert”>
<a href=”#” id=”buttonInsert” onclick=”javascript:formControl.insert();” class=”btn btn-primary”>
<i class=”fa fa-file-text-o”></i>등록
</a>
</chamomile-sec:button>
- 샘플 프로젝트
- step 3 : 웹 브라우저로 화면 영역(등록 버튼) 권한이 적용되었는지 확인한다.
- 일반 브라우저로
customer
로그인 - 다른(시크릿모드) 브라우저로
admin
로그인
- 일반 브라우저로
로그 마스킹
어드민에서 기본으로 등록된 마스킹 패턴을 활성화해서 로그마스킹 기능을 확인한다
- stap 1 : 어드민에서 로그마스킹 패턴을 실행하도록 수정
- 어드민 접속
- 왼쪽 메뉴
시스템설정
->로그관리
->로그마스킹패턴관리
이동 - 패턴 명칭
Email
항목을 선택 수정
버튼 클릭실행여부
항목을true
로 변경 후저장
버튼 클릭
- step 2 : 실습 프로젝트 코드상에 이메일 패턴이 포함된 로깅 코드를 추가
DemoBoardController.java
적당한 위치에logger.info("test@lotte.net");
입력
//…
//테스트를 위해 이메일을 로깅
logger.info(“test@lotte.net”);
return new ModelAndView(ajaxMainView, model);
} - step 3 : 브라우저 요청을 통해 로그 메시지가 마스킹되는지 확인
서비스(API) 제어
어드민에서 MVC 제어 기능을 확인한다.
- step 1 : 어드민에서 MVC 제어를 활성화
- 왼쪽 메뉴
시스템설정
->MVC 관리
->MVC 제어
이동 - 콤보 박스에서 샘플 프로젝트 선택 [ex.
sampleservice : http://127.0.0.1:8081
] - Path 에서 제어를 원하는 요청을 선택 [ex.
/demoBorad
] 수정
버튼 클릭활성
항목을비활성
으로 변경 후저장
버튼 클릭
- 왼쪽 메뉴
- stap 2 : 브라우저를 통해 해당 요청이 서비스 비활성화 되었는지 확인
단위/성능 테스트
단위 테스트
어드민에서 테스트를 작성하고 검증한다.
- step 1 : 시나리오 추가 및 테스트케이스 작성
- 왼쪽 메뉴
테스트관리
->서비스테스트
이동 - 왼쪽 트리 뷰에서 (마우스 오른쪽 버튼 클릭) 시나리오 및 테스트케이스 생성 [
scenario1
,listUserdata
] - 생성된 테스트케이스를 선택하고, 콤보박스에서 샘플 프로젝트를 선택 [
sampleservice : http://127.0.0.1:8081
] 서비스 전체보기
버튼을 클릭하고 테스트를 원하는 URL 요청을 선택 [/demoBoard/listData
]- 오른쪽
바디
섹션에 데이터를 입력 [ pageIndex :0
, recordCountPerPage :10
] - 오른쪽 상단
테스트
버튼을 클릭해서 요청에 대한 응답을 확인할 수 있다.
- 왼쪽 메뉴
- step 2 : Assertion[검증 요소] 추가
- 아래쪽
Assertion
섹션에서+
버튼을 클릭 - 콤보박스에서
jsonPath
$.demoBoardVO
EXIST
으로 수정한다.- 도움말 버튼 : 오른쪽에
?
버튼 - Path 목록 버튼 :
응답
/바디
섹션에서json
버튼을 클릭,Show All json Paths
버튼 클릭
- 도움말 버튼 : 오른쪽에
테스트
버튼을 클릭해서 응답에 대한 검증 여부를 확인 할 수 있다. [success
녹색,fail
적색]
- 아래쪽
- step 3 : 테스트케이스 저장
- 오른쪽 상단에
저장
버튼을 클릭
- 오른쪽 상단에
- step 4 : 테스트 시나리오 실행
- 왼쪽 메뉴
테스트관리
->시나리오테스트
이동 - 트리메뉴에서 시나리오 선택 후
run
버튼으로 전체 또는 특정 시나리오에 대한 테스트를 수행
- 왼쪽 메뉴
- step 5 : 시나리오 테스트 스케쥴 관리
스케쥴
버튼을 클릭- Cron Expression 으로 주기적으로 시나리오를 테스트 하도록 설정할 수 있다.
- step 6 : 시나리오 이력 확인
- 왼쪽 메뉴
테스트관리
->시나리오이력
이동 - 시나리오 테스트 수행 시간, 상세 테스트 결과, 요청/응답 내용을 확인 할 수 있다.
- 왼쪽 메뉴
- step 7 : 캐모마일 대시보드 확인
- 왼쪽 위 Chamomile 을 선택해서 메인 페이지로 이동
성능 테스트
어드민에서 시나리오 테스트에서 작성한 테스트를 기반으로 성능테스트를 작성하고 테스트한다.
- step 1 : 성능테스트 시나리오 불러오기
- 왼쪽 메뉴
테스트관리
->성능테스트플랜
이동 성능테스트 시나리오 목록
섹션에서 (마우스 오른쪽 버튼 클릭) 시나리오를 생성 [우클릭New -> Scenario
]- 생성한 시나리오를 선택한 후
불러오기
버튼 클릭 - 기존에 만들었던 테스트케이스를 선택하고
생성
버튼 클릭 [ROOT/scenario1/listUserData
]
- 왼쪽 메뉴
- step 2 : 부하 설정 및 저장
성능테스트 시나리오
섹션에서 부하 정보 입력- 사용자 수 :
10
- 부하 타입 :
횟수
- 부하 수치 :
10
- 기대 TPS :
10
(무시)
- 사용자 수 :
저장
버튼 클릭
- step 3 : 성능테스트 수행
- (
성능테스트 시나리오 목록
섹션에서 수행을 원하는 시라리오를 선택한 뒤) 수행
버튼 클릭
- (
- step 4 : 성능테스트 이력
- 왼쪽 메뉴
테스트관리
->성능테스트이력
- 어드민 메인 대시보드 상에서도 확인할 수 있다.
- 왼쪽 메뉴
메서드 추적 (개인 이력)
어드민에서 추적 기능을 활성화하고 메서드 추적 기능을 확인한다.
- 해당 기능을 활용하여 개인 이력을 추적할 수 있고
- 개인 정보 접근 이력을 확인할 수 있다.
- step 1 : 로그 수집을 활성화한다.
- 왼쪽 메뉴
시스템설정
->이력 및 로그 관리
->로그인 로그
이동 로그수집 켬
클릭해서 활성화
- 왼쪽 메뉴
- step 2 : 추적 정보를 남기기 위해 샘플 웹 어플리케이션 사용
- 간단하게
http://localhost:8081/demoBoard
로그인하고 접속해서 몇 가지 행위를 한다.
- 간단하게
- step 3 : 로그인 접속 로그 확인 및 행휘 상세 화면을 통해 추적 정보 확인
- 왼쪽 메뉴
시스템설정
->이력 및 로그 관리
->로그인 로그
이동- 신규 로그인 정보가 남는 것을 확인
- 특정 로그인 로그에 대해
상세보기
버튼 클릭- 사용자 행위 이력을 확인
- 특정 요청에 대해
상세보기
버튼 클릭- 요청에 연관된 클래스 및 메서드 정보를 확인
- 특정 클래스 항목 클릭
- 도식화된 정보 확인
- 왼쪽 메뉴
예외 정보 조회
어드민에서 Exception 이력을 조회하고 확인한다.
- step
- 왼쪽 메뉴
시스템설정
->예외처리관리
이동 - 목록 확인
- 왼쪽 메뉴