스프링 MVC + 스마트에디터 연동은 기존 JAVA/JSP 버전의 연동방식과 별차이가 없습니다.

물어보시는 분들이 종종 계셔서 포스팅 해보도록 하겠습니다.

STS 의 Spring Project 를 생성하여 기본 MVC 구조잡기/파일처리/리소스경로에 대한 설정이 필요합니다. 

해당 설정은 하단 포스팅을 참고해주세요.

기존 본인이 적용하고 계신 연동법이 존재한다면 

하단 포스팅을 참고하지 않으셔도 되겠습니다.

2014/11/06 - [개발에필요한연동법/스프링연동] - STS 이클립스를 이용하여 UTF-8 인코딩 설정 및 Spring3 MVC 연동해보기

2014/11/06 - [개발에필요한연동법/스프링연동] - Spring3 한글깨짐 방지를 위한 UTF-8 인코딩 설정하기

2014/11/07 - [개발에필요한연동법/스프링연동] - Spring3 파일전송을 위한 multipartResolver 설정하기

2014/11/07 - [개발에필요한연동법/스프링연동] - Spring3 RESTFUL 방식 리소스파일 및 favicon 인식할수 있게 설정하기

Spring MVC 설정이 완료되었다면 

스마트 에디터를 개발자센터에 가서 다운로드 받도록 합니다.

다운로드 관련 포스팅은 하단을 참고해주세요

2014/10/29 - [코드저장소/스마트에디터연동] - 네이버 스마트에디터 기본연동법 및 서버에 입력값 전송하기

에디터관련 파일다운로드까지 완료가 되었다면 

본인의 /루트디렉토리/resource/editor/ 디렉토리 생성후 

해당 파일들을 모두 INCLUDE 해놓도록 합니다.

디렉토리 경로 중 "/resource/" 부분은 Spring MVC 리소스경로 설정시 지정한 디렉토리명으로 지정해줍니다.

위처럼 include 작업이 완료되었다면 

html 페이지 혹은 jsp 페이지를 생성하여 다음 코드를 진행하도록 합니다.

jQuery + 에디터관련JS파일을 include

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/resource/editor/js/HuskyEZCreator.js" charset="utf-8"></script>

Body태그내에 작성할 샘플 HTML 코드

<!-- action : 에디터에 입력한 html 코드를 전달받을 Controller페이지 URL -->
<form action="/submit" method="post" id="frm">
	<textarea name="editor" id="editor" rows="10" cols="100" style="width:766px; height:412px;"></textarea>
	<input type="button" id="savebutton" value="서버전송" />
</form>

스마트에디터프레임 + 전송버튼클릭이벤트스크립트

$(function(){
	//전역변수
	var obj = [];				
	//스마트에디터 프레임생성
	nhn.husky.EZCreator.createInIFrame({
		oAppRef: obj,
		elPlaceHolder: "editor",
		sSkinURI: "/resource/editor/SmartEditor2Skin.html",	
		htParams : {
			// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
			bUseToolbar : true,				
			// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
			bUseVerticalResizer : true,		
			// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
			bUseModeChanger : true,	
		}
	});
	//전송버튼
	$("#savebutton").click(function(){
		//id가 smarteditor인 textarea에 에디터에서 대입
		obj.getById["editor"].exec("UPDATE_CONTENTS_FIELD", []);
		//폼 submit
		$("#frm").submit();
	})
})

에디터 컨텐츠내용을 받을 /submit Controller

@RequestMapping("/submit")
public void submit(HttpServletRequest request){
	System.out.println("에디터 컨텐츠값:"+request.getParameter("editor"));
}

간단하게 실행 후 에디터에 테스트 내용 작성후 

서버페이지에서 정상적으로 에디터 내용이 출력되는지 테스트를 해보도록 합니다.

위와같이 에디터가 출력되어 각각 입력 후 서버전송 버튼 클릭시 

이클립스 콘솔창에 정상적으로 HTML 태그 + 컨텐츠 내용이 출력된 것을 확인하실수가 있습니다.

404 오류가 나는데 이부분은 무시하셔도 됩니다 ^^ㅋ

이어서 에디터 우측상단 사진버튼을 클릭하여 

에디터내에 이미지 파일을 첨부해보도록 하겠습니다.

사진첨부기능은 싱글/멀티 파일업로드를 지원합니다.

단, IE9이하 버전에서는 싱글파일업로드만 지원하며 

그외브라우저 및 IE10 이상부터는 드래그를 이용하여 다중파일업로드기능을 지원합니다.

"/resource/editor/photo_uploader/popup/photo_uploader.html"

form 태그가 존재합니다.

action="FileUploader.php" 의미가 없으므로 삭제해주시던가 "FileUploader.php" 값을 지워주도록 합니다.

"/resource/editor/photo_uploader/popup/attach_photo.js"

479번째 줄의 callFileUploader () 함수(단일사진첨부함수)를 보면 

sUrl  : location.href.replace(/\/[^\/]*$/, '') + '/file_uploader.php',	//샘플 URL입니다.
sCallback : location.href.replace(/\/[^\/]*$/, '') + '/callback.html',	//업로드 이후에 iframe이 redirect될 콜백페이지의 주소

위코드를 다음처럼 재정의 해주도록 합니다.

sUrl  : '/photoUpload',	//파일업로드시 동작되는 컨트롤러 url
sCallback : '/resource/editor/photo_uploader/popup/callback.html',	//업로드 이후  redirect 페이지 url

이어서 333번째 줄의 html5Upload() 함수(다중사진첨부함수)를 보시면 

sUploadURL= 'file_uploader_html5.php'; 	//upload URL

위코드를 다음처럼 변경해주도록 합니다

sUploadURL= '/multiplePhotoUpload'; 	//다중파일업로드 URL

클라이언트 설정변경을 위와같이 모두 해주셨다면 

이어서 서버페이지 코드작성을 해보도록 하겠습니다.

첨부파일을 받기위한 파일관련 VO 정의

public class PhotoVo {
	//photo_uploader.html페이지의 form태그내에 존재하는 file 태그의 name명과 일치시켜줌
	private MultipartFile Filedata;
	//callback URL
	private String callback;
	//콜백함수??
	private String callback_func;

	public MultipartFile getFiledata() {
		return Filedata;
	}

	public void setFiledata(MultipartFile filedata) {
		Filedata = filedata;
	}

	public String getCallback() {
		return callback;
	}

	public void setCallback(String callback) {
		this.callback = callback;
	}

	public String getCallback_func() {
		return callback_func;
	}

	public void setCallback_func(String callback_func) {
		this.callback_func = callback_func;
	}
}

단일사진첨부 컨트롤러

//단일파일업로드
@RequestMapping("/photoUpload")
public String photoUpload(HttpServletRequest request, PhotoVo vo){
	String callback = vo.getCallback();
	String callback_func = vo.getCallback_func();
	String file_result = "";
	try {
		if(vo.getFiledata() != null && vo.getFiledata().getOriginalFilename() != null && !vo.getFiledata().getOriginalFilename().equals("")){
			//파일이 존재하면
			String original_name = vo.getFiledata().getOriginalFilename();
			String ext = original_name.substring(original_name.lastIndexOf(".")+1);
	   		//파일 기본경로
    		String defaultPath = request.getSession().getServletContext().getRealPath("/");
    		//파일 기본경로 _ 상세경로
    		String path = defaultPath + "resource" + File.separator + "photo_upload" + File.separator;	    		
    		File file = new File(path);
    		System.out.println("path:"+path);
    		//디렉토리 존재하지 않을경우 디렉토리 생성
    		if(!file.exists()) {
    			file.mkdirs();
    		}
    		//서버에 업로드 할 파일명(한글문제로 인해 원본파일은 올리지 않는것이 좋음)
    		String realname = UUID.randomUUID().toString() + "." + ext;
		///////////////// 서버에 파일쓰기 ///////////////// 
    		vo.getFiledata().transferTo(new File(path+realname));
    		file_result += "&bNewLine=true&sFileName="+original_name+"&sFileURL=/resource/photo_upload/"+realname;
		} else {
			file_result += "&errstr=error";
		}
	} catch (Exception e) {
		e.printStackTrace();
	}
	return "redirect:" + callback + "?callback_func="+callback_func+file_result;
}

IE를 실행하여 단일업로드를 확인해보도록 하겠습니다.

※ 만약 IE10 이상이며 다중파일업로드 화면이 출력이 된다 하시면 

attach_photo.js 파일의 38번째줄을 보시면 checkDragAndDropAPI() 함수내에 존재하는

bSupportDragAndDropAPI = true;

위처럼 true부분을 하단처럼 false로 변경해주도록 합니다.

bSupportDragAndDropAPI = false;

단일 사진첨부기능은 구현이 완료되었습니다.

이어서 HTML5 드래그앤드롭 기능을 이용한 스마트에디터 파일업로드 관련 컨트롤러를 작성해보도록 하겠습니다.

다중사진첨부 컨트롤러

//다중파일업로드
@RequestMapping("/multiplePhotoUpload")
public void multiplePhotoUpload(HttpServletRequest request, HttpServletResponse response){
	try {
		 //파일정보
		 String sFileInfo = "";
		 //파일명을 받는다 - 일반 원본파일명
		 String filename = request.getHeader("file-name");
		 //파일 확장자
		 String filename_ext = filename.substring(filename.lastIndexOf(".")+1);
		 //확장자를소문자로 변경
		 filename_ext = filename_ext.toLowerCase();
		 //파일 기본경로
		 String dftFilePath = request.getSession().getServletContext().getRealPath("/");
		 //파일 기본경로 _ 상세경로
		 String filePath = dftFilePath + "resource" + File.separator + "photo_upload" + File.separator;
		 File file = new File(filePath);
		 if(!file.exists()) {
		 	file.mkdirs();
		 }
		 String realFileNm = "";
		 SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");
		 String today= formatter.format(new java.util.Date());
		 realFileNm = today+UUID.randomUUID().toString() + filename.substring(filename.lastIndexOf("."));
		 String rlFileNm = filePath + realFileNm;
		 ///////////////// 서버에 파일쓰기 ///////////////// 
		 InputStream is = request.getInputStream();
		 OutputStream os=new FileOutputStream(rlFileNm);
		 int numRead;
		 byte b[] = new byte[Integer.parseInt(request.getHeader("file-size"))];
		 while((numRead = is.read(b,0,b.length)) != -1){
		 	os.write(b,0,numRead);
		 }
		 if(is != null) {
		 	is.close();
		 }
		 os.flush();
		 os.close();
		 ///////////////// 서버에 파일쓰기 /////////////////
		 // 정보 출력
		 sFileInfo += "&bNewLine=true";
		 // img 태그의 title 속성을 원본파일명으로 적용시켜주기 위함
		 sFileInfo += "&sFileName="+ filename;;
		 sFileInfo += "&sFileURL="+"/resource/photo_upload/"+realFileNm;
		 PrintWriter print = response.getWriter();
		 print.print(sFileInfo);
		 print.flush();
		 print.close();
	} catch (Exception e) {
		e.printStackTrace();
	}
}

HTML5 다중파일업로드에 대한 실행을 해보도록 하겠습니다.

IE10이상 혹은 크롬/사파리등 기타 브라우저에서 실행을 해주세요

위와같이 드래그앤드롭기능을 이용한 다중사진업로드 기능구현이 완료되었습니다.

by 개발로짜

 Sencha CMD를 사용하지 않아도 구조를 잡아서 진행을 할 수 있으나,

그냥 Sencha CMD라는 툴을 사용하여 ExtJS의 구조를 잡아보도록 하겠습니다.

SenchaCMD 설치전 ExtJS5 GPL 버전 다운로드부분은 하단 포스팅을 참고해주세요

2014/10/18 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편

※ Sencha CMD는 최소 JDK 1.6 (+) 이 설치되어 있어야 합니다.

http://www.sencha.com/products/sencha-cmd/download/

상단 url 접속 후 자신의 플랫폼에 맞는  "Download Now" 버튼을 클릭하여 SenchaCmd를 다운로드 받도록 합니다.

※ 윈도우 기준으로 포스팅하겠습니다.

압축해제 후 "SenchaCmd-x.x.x.xxx-windows.exe" 실행을 하여 Sencha CMD를 설치 합니다.

Next 클릭

약관동의 체크 후 Next 클릭

디렉토리 설정 후 Next 클릭

(기본디렉토리로 하여도 무관)

Snecha CMD 설치진행..

설치완료 Finish 클릭

설치가 정상적으로 완료되었는지 CMD 창을 띄운다음

 "sencha" 라는 명령어를 쳐보도록 합니다.

위처럼 어떤 메시지들이 읽힌다면 설치는 성공한 것입니다.

이어서 ExtJS의 구조를 생성해 보도록 하겠습니다.

명령어의 구조는 다음과 같습니다.

"sencha -sdk ExtJS부모디렉토리경로 generate app 앱명(ex:KitchenSink) 구조생성하고자하는디렉토리경로"

위처럼 명령어를 주면 되겠습니다.

ExtJS부모디렉토리 경로란 ?

위 파일들이 존재하는 위치의 부모디렉토리를 뜻하는 것입니다.

한번 CMD 창에 sencha 명령어를 이용하여  구조를 생성해보도록 하겠습니다.

E:\>sencha -sdk C:\Users\xxx\Downloads\ext-5.0.1-gpl\ext-5.0.1 generate app extjs_mvc e:\extjs_mvc

위와같이 출력되었다면 설치한 e:\extjs_mvc 디렉토리를 확인해보도록 하겠습니다.

해당 파일들을 통째로 자신의 프로젝트 ROOT 경로에 위치시켜 놓은 다음 실행을 해보도록 합니다.

샘플컴포넌트가 생성되었다면 정상적으로 Sencha CMD를 이용하여 구조생성이 완료된 것입니다.

다음 포스팅부터 ExtJS  구조에 대해서 하나씩 알아보도록 하겠습니다 .

by 개발로짜

기존에는 쿼츠 혹은 배치를 이용하여 실시간 스케줄러를 구현하였는데 

"spring-task"를 이용해보니 쿼츠를 사용할 필요도 없이 간편하게 개발이 가능하여 포스팅을 하게 되었습니다.

프로젝트생성부터 DB연동하여 실행하는 부분까지 한번에 진행하도록 하겠습니다.

Spring 프로젝트생성

1.New Spring Project -> Simple Spring Web Maven -> 프로젝트명 : "spring_task"

2.spring_task프로젝트 마우스 우클릭 -> Maven -> Update Project.. -> OK

/src/main/webapp/WEB-INF/mvc-config.xml 환경설정

1. beans 태그에 하단 속성 추가

xmlns:task="http://www.springframework.org/schema/task"

2. xsi:schemaLocation 내에 다음 코드 추가

http://www.springframework.org/schema/task 
http://www.springframework.org/schema/task/spring-task.xsd

3. beans 태그의 자식태그 추가 (Job Scheduler 연동)

<context:component-scan base-package="com.scheduler" />
<task:scheduler id="jobScheduler" pool-size="10" />
<task:annotation-driven scheduler="jobScheduler" />

/src/main/resources/spring/application-config.xml 환경설정

DB설정 부분에 대해서는 하단 링크를 참고해주세요

※ 본인은 MySQL을 이용하여 설명을 진행하겠습니다.

2014/11/14 - [개발에필요한연동법/스프링연동] - Spring3 Maven을 이용하여 pom.xml에 oracle,mysql,mssql jdbc 라이브러리 등록하기

2014/11/14 - [개발에필요한연동법/스프링연동] - Spring3 + MyBatis 기본설정 + 연동테스트 후 쿼리로그 확인해보기

2014/11/14 - [개발에필요한연동법/스프링연동] - Spring3 + Mybatis연동에 추가로 트랜잭션 설정 하여 실패시 Rollback 처리하기

2014/11/16 - [개발에필요한연동법/스프링연동] - Spring3 + Mybatis 여러개 Datasource 연동법(다중 트랜잭션 포함)

트랜잭션 및 다중DB 연동에 대해서는 생략하도록 하겠습니다.

스케줄러를 위한 패키지 생성 및 샘플코드작성

1. com.scheduler.Scheduler.java 코드 작성

@Component
public class Scheduler {

	@Autowired
	private SchedulerDao schedulerDao;
	
	@Scheduled(cron = "0 45 11 * * *")
	public void cronTest1(){
		try {
			String value = schedulerDao.test();
			System.out.println("value:"+value);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

2. com.scheduler.dao.SchedulerDao.java 코드 작성

public interface SchedulerDao {
	public String test() throws SQLException;
}

3. com.scheduler.dao.impl.SchedulerDaoImpl.java 코드 작성

@Repository
public class SchedulerDaoImpl implements SchedulerDao {	
	@Autowired
	private SqlSession query;

	public String test() throws SQLException {
		return query.selectOne("query.test");
	}
}

4. query.xml mybatis XML 쿼리 작성

<select id="test" resultType="String">
	SELECT 'test'
</select>

위처럼 코드 작성이 완료되었다면 Tomcat에 프로젝트 ADD 한다음 실행을 해보도록 하겠습니다.

※ @scheduled 어노테이션을 확인해보면 expression이 존재합니다.

바로 정의한 시간에 해당 메서드를 실행하겠다라는 선언을 해주는것인대

샘플코드를 기준으로 간단하게 설명하겠습니다.

"0 45 11 * * *"

"초 분 시 일 월 요일" 에 대한 설정을 의미하는것인대

"오전 11시 45분 00초"에 해당 메서드 실행을 의미합니다.

"*" 표시는 항상/모두 를 의미하는 expression입니다.

만약 서버를 계속 켜놓는다 가정한다면 

"항상 오전 11시45분00초에 메서드를 실행하라" 

라는 의미가 되는것입니다.

정상적으로 스케쥴러 실행이 완료 되었습니다.

만약 여러개의 스케쥴러를 구축하고 싶으시다면 method 추가 후

 @Scheduled 어노테이션으로 동일하게 정의해주시면 되겠습니다.

by 개발로짜