우리마의 웹 개발

[Eclipse]하나의 이클립스에서 같은 프로젝트 화면 두개 띄우기

우리마 — Wed, 4 Aug 2021 11:52:57 +0900

이클립스 프로젝트 작업을 할때 화면을 분할하려고 하면 CTRL+SHIFT+[ 또는 CTRL+SHIFT+- 로 창을 나눌수 있긴 하지만 면적이 쫍아서 코드가 잘안보인다거나 하는 불편함이 있어요.

아예 같은 프로젝트 이클립스를 하나 더띄워서 실행하면 이를 해결할 수 있어요.

window -> new window 를 클릭 하면 같은 프로젝트 이클립스창이 새로 열리는 마술!

[Eclipse]이클립스 Search 시에 기존 Search 창 닫히는거 새창으로 나오게 하기

우리마 — Wed, 28 Jul 2021 10:30:23 +0900

** Eclipse 에서 콘트롤 H 또는 R (CTRL + R , CTRL + H) 로 파일을 찾는데 File Search를 하고, 찾은 내용을 볼 때, 자꾸 한 탭으로만 나와서 불편했다.

처음 search.jsp 페이지의 내용을 찾았다가, 그 다음 research.jsp 페이지의 내용으로 가려고 더블클릭 했더니 기존 탭에 새로고침 되면서 나와버리는 현상!

** 해결 방법 : 메뉴에서 Window - Preferences > General > Search > "Reuse editors to show matches" 체크를 해제

갸꿀~

[Jquery] 비동기 프로그래밍을 위한 Promise와 Deferred Object

우리마 — Thu, 1 Jul 2021 14:39:10 +0900

웹 개발업무를 하면서 Javascript, Jquery를 사용하는 것은 반 필수적인 실정에서, 비동기 프로그래밍은 불가피한 요소다.

콜백함수를 사용한 비동기식 처리 모델은 JavaScript에서 빈번히 사용된다. 비동기식 처리 모델이란 처리가 종료하면 호출될 함수(콜백 함수)를 미리 parameter로 전달하고 처리가 종료하면 콜백 함수를 호출하는 것이다.

jQuery Deferred는 각각의 비동기식 처리에 Promise 객체를 연계하여 그 상태를 전파하는 것으로 promise를 구현한 jQuery 객체이다. 브라우저 호환성과 편의성을 고려하여 만든 Promise 모듈이라고 생각하면 무리가 없을 듯하다.

jQuery Deferred에서 각각의 비동기식 처리를 Deferred 객체로 wrapping한다. Deferred 객체는 상태를 가지고 있는데 이는 비동기식 처리의 상태가 변경되는 시점에 특정 함수(resolve(), reject())를 호출하여 Deferred 객체에 상태를 부여하기 때문이다. deferred.state()로 상태를 확인할 수 있다.

Deferred object state (Deferred.state()의 반환값)

pending : 처리 중
resolved : 처리 성공
rejected : 처리 실패

성공/실패시 함수 호출 구조

오른쪽 코드에서 try 구문이 정상적으로 끝난 후 deferred.resolve()는 성공적으로 함수가 끝난 것이므로 왼쪽 코드의. done funciton으로 가게 되고 try진행 중 에러가 발생해서 catch로 가게 되면 deferred.reject()가 호출되는데 이는. fail function으로 가게 된다.. always function은 try이든 catch든 항상 실행되는 구문이다.

사실callback_settingTimepicker(); 이 부분이. done function 안에 있어야 되는데 실수임..

내가 고민하게된 상황은 스크립트단 function에서 HTML 문자열을 append 한 이후에

해당 문자열 안에 있는 input 태그에 timepicker class를 적용해야 하는 일이었다. 따라서 append가 수행되는 function이 끝난 후에 timepicker class가 적용되어야 하므로 비동기 프로그래밍이 필요한 상황이었다.

위의 사진에서 주간, 야간 버튼을 누르면 왼쪽으로 체크된 tr이 이동하는 시스템인데, 이동하고 나서 아래 사진과 같이 timepicker가 적용되어야 한다.

그래서 아래와 같이 코딩했다!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<!-- HTML -->
<a href="javaScript:void(0);" id="tab_1_mov_ngt" class="btn_sm" param1="acdntTable" param2="wrkrTable" onclick="fn_wrkrSetting(this)"> < 주간 </a>
 
/* script */
 
//주간,야간 파라미터 값 셋팅
    function fn_wrkrSetting(obj){
        fn_rscuntWrkshtWrkr($(obj).attr('param1'),$(obj).attr('param2')).done(function(){
            callback_settingTimepicker();
        }).fail(function(error){
            errorFunction();
        }).always(function(){
            
        })
    }
 
 // 근무조 추가/제거
    function fn_rscuntWrkshtWrkr(nowTable,nxtTable) {
        const deferred = $.Deferred();
        try{
        /*
               HTML append 코드
        */
 
            deferred.resolve();
        }
        catch{
            deferred.reject();
        }
        return deferred.promise();
    }
    //야간,주간 근무자 추가후 timepicker 셋팅
    function callback_settingTimepicker(){
        $('.timepicker').timepicker({
            timeFormat: 'H:i',
            step:1
        });
    }
    //콜백 에러 function
    function errorFunction(){
        alert('error')
    }
Colored by Color Scripter

cs

중요한 점은 deferred 객체를 함수 내에서 선언 후 promise를 사용하려면 deferred.promise()를 return 해줘야 된다는 점이다. (30 Line)

~~즐거운 코딩하세여~~

[Spring]게시글 상세보기에서 댓글(대댓글) 출력 로직 정리

우리마 — Tue, 4 May 2021 16:39:28 +0900

Spring환경에서 게시판으로 개발 연습을 하면서 댓글 출력에 대한 개인적인 로직을 정리하고자 합니다.

지극히 주관적인 로직과 코딩이라서 상당히 하드 할 수 있어요.

댓글에 대한 등록, 수정, 삭제에 대한 기능은 생략하고 출력에 대한 부분만 다루도록 할게요

지적사항, 더 좋은 방법 등 댓글 환영합니다.

개발 환경
Spring Framework	5.2.3
Tomcat	8.0
DB	MySql8 , MyBatis3.5
Browser	Chrome
IDE	STS 3.9.11

결과 화면

DB 댓글 관리 테이블 구조

댓글 테이블 구조

게시글 테이블과의 관계

댓글을 작성할 때 어느 게시글에서 등록된 댓글인지 알기 위해 게시글 테이블(training_bbs)에서의 PK(idx) 값을 댓글 테이블(training_bbs_cmt)에서 FK(bbscmtidx)로 사용하였습니다.

게시글 상세보기 페이지 접속 시 댓글출력에 대한 프로세스

일단 저는 상세보기 최초 접속시 그 게시글에 해당하는 댓글을 최대 4개까지만(대댓글 포함) 출력하도록 하였습니다. 이후에 '댓글 더보기' 버튼 클릭 시 이미 div에append는 되어있지만(str2에 저장된 댓글 목록) display가 none인 div를 display : block으로 해서 출력해주는 방식 입니다.

HTML , JavaScript - 게시판 상세보기 페이지

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224

<!-- 댓글작성 영역 -->
<div class="board_cmt">
    <div class="tit" style="margin-left: 6px;"><em id="totalCmt" class="bico_comment"></em>Comments</div>
     <div class="board_cmt_write">
         <div class="bx"> 
             <textarea id="cmtContent" placeholder="소중한 댓글을 작성해주세요^^" maxlength="150"></textarea>
         </div>
        <button id="btn_insert_cmt">등록</button>
     </div>
</div>
<!-- 댓글 목록 영역 -->
<div class="board_cmt_list" id="board_cmt_list" style="margin-left:6px;"></div>
<div style="text-align: center; margin: 20px 0px;" id="div_cmt_more">
 <!-- 더보기 글자 hover 띄우기 -->
    <span class="cmt_more_guide" id="cmt_more_guide" style="display: none; position: absolute;"></span>
    <a href='javascript:void(0);' id='btn_cmt_more' style='position: relative;'>
        <img src="/home/img/ico_cmt_more_before.png" id="imgMore" style="cursor:pointer; width: 20px;">
    </a>
</div>
<!-- 더보기 눌렀을때 추가 되는 댓글 영역 -->
<div class="board_cmt_list" id="cmtMore" style="display:none;"></div>
<div style="text-align: center; display:none; margin: 20px 0px;" id="div_cmt_back">
    <span class="cmt_back_guide" id="cmt_back_guide" style="display: none; position: absolute;"></span>
    <a href='javascript:void(0);' id='btn_cmt_back' style='position: relative;'>
        <img src="/home/img/ico_cmt_back_before.png" id="imgBack" style="cursor:pointer; width: 20px;">
    </a>
</div>
 
<script type="text/javascript">
/* 버튼 세팅 */
 var btn_insert_cmt = document.getElementById("btn_insert_cmt");
 btn_insert_cmt.onclick = function(){insertCmt();}
 /* Model 값 세팅 */
 var idx = ${bbsidx};
 var userid = `${userid}`;
 $(function(){
    //댓글 목록 출력
    selectBBScmt();
     /* 댓글 더보기 화살표 hover */
     $("#btn_cmt_more").hover(function(){
         $("#imgMore").attr("src","/home/img/ico_cmt_more_after.png");
         $("#cmt_more_guide").css("display","");
     }, function(){
         $("#imgMore").attr("src","/home/img/ico_cmt_more_before.png");
         $("#cmt_more_guide").css("display","none");
     });
     /* 댓글 접기 화살표 hover*/
     $("#btn_cmt_back").hover(function(){
         $("#imgBack").attr("src","/home/img/ico_cmt_back_after.png");
         $("#cmt_back_guide").css("display","");
     }, function(){
         $("#imgBack").attr("src","/home/img/ico_cmt_back_before.png");
         $("#cmt_back_guide").css("display","none");
     });
});
//댓글 목록 출력 ajax
  function selectBBScmt(){
     var str1 = ""; //최초 댓글 4개를 append할 변수
     var str2 = ""; //댓글이 5개이상일때 추가 append할 변수
     var strDelAndMod = "";//댓글 수정, 삭제 html string을 담는 변수
     var replyImg = "";//대댓글 이미지 html string을 담는 변수
     var inputWidthClass = "";//대댓글이 달릴때 대댓글의 width값을 담는 변수
     var mlpClass=""; //대댓글이 달릴때 replyImg가 그려질 위치를 정하는 변수
     
      $.ajax({
            type : "POST",  
            url : "/selectBBScmt",       
            dataType : "json",   
            data : "bbscmtidx="+idx,
            error : function(){
                Rnd.alert("통신 에러","error","확인",function(){});
            },
            success : function(jdata) {
                if(jdata.length < 4){ // 댓글이 4개 이하 일때 처음에는 댓글을 최대 4개까지만 보여줌
                    for(var i=0; i<jdata.length; i++){
                        if(userid == jdata[i].userid){
                            //수정 삭제 답글 버튼 본인이 적은거
                            strDelAndMod = "<em onclick=\"cmtModify("+jdata[i].idx+")\" style='cursor:pointer;'>&nbsp;&nbsp;수정</em>&nbsp;<em onclick=\"cmtDelete("+jdata[i].idx+")\" style='cursor:pointer;'>삭제</em>&nbsp;<em onclick=\"cmtReply('"+jdata[i].userid+"_"+jdata[i].idx+"','I')\"style='cursor:pointer;'>답글</em>";
                        }
                        else {
                            strDelAndMod = "&nbsp;<em onclick=\"cmtReply('"+jdata[i].userid+"_"+jdata[i].idx+"','I')\"style='cursor:pointer;'>답글</em>";
                        }
                        if(jdata[i].level > 1){
                            //대댓글 이미지 , input width class 
                            replyImg = "<img src='/home/img/comment_reply.png' class='commentReply'>";
                            inputWidthClass = "class='width96'";
                            if(jdata[i].level == 2){mlpClass = "";}
                            else if(jdata[i].level == 3){mlpClass = "class='mlp30'";}
                            else if(jdata[i].level >= 4){mlpClass = "class='mlp60'";}
                        }
                        else{
                            replyImg = "";
                            inputWidthClass = "class='width100'";
                            mlpClass="";
                        }
                        str1 += "<ul><li><div class='desc'style='border-top: 2px solid black;'>작성날짜&nbsp;<strong>"+jdata[i].regdate+"</strong>&nbsp;&nbsp;작성자&nbsp;<strong>"+jdata[i].userid+"</strong>"
                            +strDelAndMod
                            +"</div></li>"
                            +"<li style='line-height:37px;' "+mlpClass+">"+replyImg
                            +"<input type='text' "+inputWidthClass+"name=\""+jdata[i].idx+"\" value=\""+jdata[i].content+"\" disabled=''style='font-size:15px;font-weight:bold;background-color: #f6f6f6;border: 1px solid #f6f6f6;'></li>"
                            +"<li id=\""+jdata[i].idx+"\" style='display:none;'>"
                            +"<a href='javascript:void(0);' onclick='cmtModCancel(this)' orgcmt=\""+jdata[i].content+"\" class='btn_d btn_red'>취소</a>&nbsp;"
                            +"<a href='javascript:void(0);' onclick=\"cmtModAri("+jdata[i].idx+")\" class='btn_d btn_build'>완료</a></li>"
                            +"<li id=\""+jdata[i].userid+"_"+jdata[i].idx+"\" style='display:none;'>"
                            +"<img src='/home/img/comment_reply.png' class='commentReply'>"
                            +"<textarea class='replyTextarea' id='"+jdata[i].upidx+"_"+jdata[i].idx+"'></textarea>"
                            +"<div class='replySubmitDiv'>"
                            +"<a href='javascript:void(0);' onclick=\"cmtReply('"+jdata[i].userid+"_"+jdata[i].idx+"','C')\" class='btn_d btn_red'>취소</a>&nbsp;"
                            +"<a href='javascript:void(0);' onclick=\"insertReplyCmt('"+jdata[i].upidx+"_"+jdata[i].idx+"','"+jdata[i].bbscmtidx+"')\" class='btn_d btn_build'>등록</a></div></li></ul>";
                        }
                    //댓글 목록 출력
                    $("#board_cmt_list").empty();
                    $("#board_cmt_list").append(str1);
                }
                else{ //댓글이 5개 이상일때 
                    for(var i=0; i<4; i++){//기존 4개 먼저 보여짐
                        if(userid == jdata[i].userid){
                            strDelAndMod = "<em onclick=\"cmtModify("+jdata[i].idx+")\" style='cursor:pointer;'>&nbsp;&nbsp;수정</em>&nbsp;<em onclick=\"cmtDelete("+jdata[i].idx+")\" style='cursor:pointer;'>삭제</em>&nbsp;<em onclick=\"cmtReply('"+jdata[i].userid+"_"+jdata[i].idx+"','I')\"style='cursor:pointer;'>답글</em>";
                        }
                        else {
                            strDelAndMod = "&nbsp;<em onclick=\"cmtReply('"+jdata[i].userid+"_"+jdata[i].idx+"','I')\"style='cursor:pointer;'>답글</em>";
                        }
                        if(jdata[i].level > 1){
                            replyImg = "<img src='/home/img/comment_reply.png' class='commentReply'>";
                            inputWidthClass = "class='width96'";
                            if(jdata[i].level == 2){mlpClass = "";}
                            else if(jdata[i].level == 3){mlpClass = "class='mlp30'";}
                            else if(jdata[i].level >= 4){mlpClass = "class='mlp60'";}
                        }
                        else{
                            replyImg = "";
                            inputWidthClass = "class='width100'";
                            mlpClass="";
                        }
                        str1+= "<ul><li><div class='desc'style='border-top: 2px solid black;'>작성날짜&nbsp;<strong>"+jdata[i].regdate+"</strong>&nbsp;&nbsp;작성자&nbsp;<strong>"+jdata[i].userid+"</strong>"
                            +strDelAndMod
                            +"</div></li>"
                            +"<li style='line-height:37px;' "+mlpClass+">"+replyImg
                            +"<input type='text' "+inputWidthClass+"name=\""+jdata[i].idx+"\" value=\""+jdata[i].content+"\" disabled=''style='font-size:15px;font-weight:bold;background-color: #f6f6f6;border: 1px solid #f6f6f6;'></li>"
                            +"<li id=\""+jdata[i].idx+"\" style='display:none;'>"
                            +"<a href='javascript:void(0);' onclick='cmtModCancel(this)' orgcmt=\""+jdata[i].content+"\" class='btn_d btn_red'>취소</a>&nbsp;"
                            +"<a href='javascript:void(0);' onclick=\"cmtModAri("+jdata[i].idx+")\" class='btn_d btn_build'>완료</a></li>"
                            +"<li id=\""+jdata[i].userid+"_"+jdata[i].idx+"\" style='display:none;'>"
                            +"<img src='/home/img/comment_reply.png' class='commentReply'>"
                            +"<textarea class='replyTextarea' id='"+jdata[i].upidx+"_"+jdata[i].idx+"'></textarea>"
                            +"<div class='replySubmitDiv'>"
                            +"<a href='javascript:void(0);' onclick=\"cmtReply('"+jdata[i].userid+"_"+jdata[i].idx+"','C')\" class='btn_d btn_red'>취소</a>&nbsp;"
                            +"<a href='javascript:void(0);' onclick=\"insertReplyCmt('"+jdata[i].upidx+"_"+jdata[i].idx+"','"+jdata[i].bbscmtidx+"')\" class='btn_d btn_build'>등록</a></div></li></ul>";
                        }
                    for(var i=4; i<jdata.length; i++){ // 더보기 누르면 이미 그려노은거 추가하는거
                        if(userid == jdata[i].userid){
                            strDelAndMod = "<em onclick=\"cmtModify("+jdata[i].idx+")\" style='cursor:pointer;'>&nbsp;&nbsp;수정</em>&nbsp;<em onclick=\"cmtDelete("+jdata[i].idx+")\" style='cursor:pointer;'>삭제</em>&nbsp;<em onclick=\"cmtReply('"+jdata[i].userid+"_"+jdata[i].idx+"','I')\"style='cursor:pointer;'>답글</em>";
                        }
                        else {
                            strDelAndMod = "&nbsp;<em onclick=\"cmtReply('"+jdata[i].userid+"_"+jdata[i].idx+"','I')\"style='cursor:pointer;'>답글</em>";
                        }
                        if(jdata[i].level > 1){
                            replyImg = "<img src='/home/img/comment_reply.png' class='commentReply'>";
                            inputWidthClass = "class='width96'";
                            if(jdata[i].level == 2){mlpClass = "";}
                            else if(jdata[i].level == 3){mlpClass = "class='mlp30'";}
                            else if(jdata[i].level >= 4){mlpClass = "class='mlp60'";}
                        }
                        else{
                            replyImg = "";
                            inputWidthClass = "class='width100'";
                            mlpClass="";
                        }
                        str2 += "<ul style='margin-left:6px;'><li><div class='desc'style='border-top: 2px solid black;'>작성날짜&nbsp;<strong>"+jdata[i].regdate+"</strong>&nbsp;&nbsp;작성자&nbsp;<strong>"+jdata[i].userid+"</strong>"
                            +strDelAndMod
                            +"</div></li>"
                            +"<li style='line-height:37px;' "+mlpClass+">"+replyImg
                            +"<input type='text' "+inputWidthClass+"name=\""+jdata[i].idx+"\" value=\""+jdata[i].content+"\" disabled=''style='font-size:15px;font-weight:bold;background-color: #f6f6f6;border: 1px solid #f6f6f6;'></li>"
                            +"<li id=\""+jdata[i].idx+"\" style='display:none;'>"
                            +"<a href='javascript:void(0);' onclick='cmtModCancel(this)' orgcmt=\""+jdata[i].content+"\" class='btn_d btn_red'>취소</a>&nbsp;"
                            +"<a href='javascript:void(0);' onclick=\"cmtModAri("+jdata[i].idx+")\" class='btn_d btn_build'>완료</a></li>"
                            +"<li id=\""+jdata[i].userid+"_"+jdata[i].idx+"\" style='display:none;'>"
                            +"<img src='/home/img/comment_reply.png' class='commentReply'>"
                            +"<textarea class='replyTextarea' id='"+jdata[i].upidx+"_"+jdata[i].idx+"'></textarea>"
                            +"<div class='replySubmitDiv'>"
                            +"<a href='javascript:void(0);' onclick=\"cmtReply('"+jdata[i].userid+"_"+jdata[i].idx+"','C')\" class='btn_d btn_red'>취소</a>&nbsp;"
                            +"<a href='javascript:void(0);' onclick=\"insertReplyCmt('"+jdata[i].upidx+"_"+jdata[i].idx+"','"+jdata[i].bbscmtidx+"')\" class='btn_d btn_build'>등록</a></div></li></ul>";
                        }
                    
                    //처음 댓글 목록 
                    $("#board_cmt_list").empty();
                    $("#board_cmt_list").append(str1);
                    
                    //펼치기 했을때 댓글 목록
                    $("#cmtMore").empty();
                    $("#cmtMore").append(str2);
                    // 더보기 버튼 눌렀을때
                    $("#btn_cmt_more").on("click",function(){
                        $("#div_cmt_more").css("display","none");
                        $("#cmtMore").slideDown();
                        $("#div_cmt_back").css("display","");
                        $("#wrap").animate({ // 스크롤 제일 아래로 애니메이션
                            scrollTop : 10000
                        }, 800);
                    });
                    //접기 버튼 눌렀을때
                    $("#btn_cmt_back").on("click",function(){
                        $("#cmtMore").slideUp(function(){
                            $("#div_cmt_back").css("display","none");
                            $("#div_cmt_more").css("display","");
                        });
                    });
                }
                $("#totalCmt").empty();
                if(jdata.length == 0){
                    totalCmt = 0;
                    $("#imgMore").css("display","none");
                }
                else {
                    $("#imgMore").css("display","");
                    var totalCmt = jdata[0].totalCmt;
                    }
                $("#totalCmt").append(" "+totalCmt+" ");
            }
        });
     }
</script>
 
 
Colored by Color Scripter

cs

굉장히 난잡한데 HTML에서 중요한 점은 최초에 접속했을 때 보이는 댓글 목록 영역 div와(<div class="board_cmt_list" id="board_cmt_list" style="margin-left:6px;">) 댓글 더보기를 눌렀을 때

나타나는 div 영역(<div class="board_cmt_list" id="cmtMore" style="display:none;">)을 따로 두었다는 것입니다.

Javascript 부분에서는 버튼 세팅, Model값 세팅 등을 하고 $(function(){});

안에 selectBBScmt() 함수를 호출해줍니다.

/selectBBScmt Controller를 호출해 해당 게시글에 대한 댓글들의 정보를 가져옵니다.

그리고 74번 Line부터 시작하는 댓글의 개수에 따라 if ~ else 문으로 나눠요.

76번 Line의 if else는 댓글이 자신이 적은 댓글만 수정/삭제 버튼이 있어야 하기 때문에 그 값을 세팅하는 부분입니다.

83번 Line의 if else는 대댓글의 이미지 세팅과 대댓글의 레벨에 따라서 들여 써져야 된다는 점을 고려해서 css에 정의된 class값을 다르게 주었습니다. 예를 들어 mlp30 은 margin-left : 30px입니다.

총댓글의 개수가 4개 이하라면 str1 만 append 됩니다.

댓글의 개수가 5개부터는 4번째 댓글까지의 string과 5번째부터의 string을 따로 변수에 저장합니다(각각 str1, str2)

그리고 str1, str2 둘 다 각각의 div아래에 append를 한 후 '더보기' 버튼과 '접기'버튼을 각각 눌렀을 때 css의 display 속성만 바꿔 줍니다. (=>185 Line부터 206 Line)

그 아래에는 총 댓글 개수의 값을 세팅하는 부분입니다.

Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//게시글 상세보기 - 댓글 목록 출력
    @RequestMapping("/selectBBScmt")
    @ResponseBody
    public List<Map<String,Object>> selectBBScmt(@RequestParam Map<String,Object> commandMap){
        logger.info("request: /selectBBScmt");
        List<Map<String,Object>> resultMap = null;
        int totalCmt = 0;
        try {
            int bbsidx = Integer.parseInt(commandMap.get("bbscmtidx").toString());
            
            resultMap = service.selectBBScmt(commandMap);
            totalCmt = service.getTotalCmt(bbsidx);//전체 댓글 개수
            resultMap.get(0).put("totalCmt", totalCmt);
        } catch (Exception e) {
            logger.debug(e.getMessage());
        }
        return resultMap;
    }
 

cs

9번 Line에서 bbsidx는 해당 게시글의 일련번호이고 Map안에 담긴 value는 string이나 integer가 아니므로. toString()한 값을. parseInt 해서 int형으로 만들어줍니다.

Service와 DAO는 생략하고 아래는 댓글 목록 출력 SQL문입니다.

SQL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

    <!-- 댓글 목록 출력 -->
    <select id="selectBBScmt" resultType="map">
 
select 
      list.level as level
    , list.idx as idx
    , ifnull(list.upidx,0) as upidx
    , list.bbscmtidx as bbscmtidx
    , list.content as content 
    , list.userid as userid 
    , date_format(list.regdate,'%Y-%m-%d') as regdate
from(
    with recursive cte as(
        select
              1 as level
            , cmt.idx
            , cmt.upidx
            , concat('',cmt.idx) as sort 
            , cmt.bbscmtidx
            , cmt.content
            , cmt.userid
            , cmt.regdate
        from training_bbs_cmt cmt
        where 1=1
        and cmt.upidx is null
        union all 
        select
              cte.level+1 as level
            , cmt.idx
            , cmt.upidx
            , concat('',cte.sort,cmt.idx) as sort 
            , cmt.bbscmtidx
            , cmt.content
            , cmt.userid
            , cmt.regdate
        from training_bbs_cmt cmt, cte
        where 1=1
        and cte.idx = cmt.upidx
    ) select * from cte
    where cte.bbscmtidx=#{bbscmtidx} 
    order by cte.sort, cte.idx
) list
    </select>
 

cs

with recursive를 이용한 계층 쿼리를 사용했습니다. level 값은 테이블 칼럼에 있는 값이 아닌 계층을 가리기 위한 임의의 값입니다. 이 level값을 이용해서 대댓글 작성 시 css 클래스 값이 결정됩니다.

Java Script부분에서 중복되는 내용 너무 많았는데 for문을 돌면서 DB에서 가져온 리스트들의 각각의 값을 세팅해야 되는 상황이 많아서 하드 한 코딩이 된 것 같아요..

질문, 더 좋은 방법 등 댓글 환영합니다.

~~즐겁지 않은~~ 즐거운 하세요.

[eGovFramework]하나의 프로젝트에서 2개의 DB 사용 하기(Postgresql, Tibero DB)

우리마 — Fri, 8 Jan 2021 14:57:57 +0900

안녕하세요. 이번 글에서는 eGovFramework3.8 환경에서 두 개의 DBMS를 붙이는 방법에 대해서 끄적이려고 해요. 필자는 기존에 Postgresql을 사용하다가 Tibero DB를 붙였어요. 해당 DB의 드라이버는 maven repository에서 가져와서 pom.xml에 추가해주시면 됩니다.

Maven Repository: Search/Browse/Explore

Integrations SDK Last Release on Dec 22, 2020

mvnrepository.com

context-datasource.xml 설정 - Datasource 추가 하기

먼저 datasource를 추가해줘야 합니다.

src/main/resource/egovframework/spring 아래에 context-datasource.xml 파일이 있습니다.

Package Presentaion

기존의 Postgresql에 대한 Datasource는 아래와 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<bean id="egov.propertyConfigurer" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
     <property name="locations">
         <list>
             <value>classpath:/egovframework/egovProps/globals.properties</value>
         </list>
     </property>
</bean>
 
<alias name="dataSource-postgresql" alias="dataSource"/>
<!-- JDBC-PostgreSQL -->
    <bean id="dataSource-postgresql" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="${Globals.DriverClassName}" />
        <property name="url" value="${Globals.Url}" />
        <property name="username" value="${Globals.UserName}" />
        <property name="password" value="${Globals.Password}" />
    </bean>
 

cs

여기서 이제 Tibero DB에 대한 Datasource를 아래와 같이 추가해 줍니다. 물론 globalglobals.properties파일에 추가하고자 하는 DB정보를 추가해줍니다. 저는 Tibero를 붙여서 사용했습니다.

1
2
3
4
5
6
7
8
9
10
11

<alias name="dataSource-tibero" alias="tibero.dataSource"/>
<!-- tibero -->
    <bean id="dataSource-tibero" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
        <property name="driverClassName" value="${Globals.Tibero.DriverClassName}"/>
        <property name="url" value="${Globals.Tibero.Url}" />
        <property name="username" value="${Globals.Tibero.UserName}"/>
        <property name="password" value="${Globals.Tibero.Password}"/>
        <property name="validationQuery" value="select 1 from dual" />
        <property name="testWhileIdle" value="true" />
        <property name="timeBetweenEvictionRunsMillis" value="60000" />
    </bean>
 

cs

context-mapper.xml 설정 - SqlSessionFactoryBean, SqlSessionTemplate 추가

파일의 위치는 위의 context-datasource.xml의 위치와 같습니다.

위의 Package Presentaion사진을 참고하세요.

기존의 postgresql의 sqlsession bean 설정은 아래와 같습니다.

postgresql을 사용하는 쿼리 문은 <property name="mapperLocations" value="classpath:/egovframework/sqlmap/mappers/**/*.xml" />

여기에 작성되어 있습니다.

1
2
3
4
5
6
7
8
9
10

<!-- SqlSession setup for MyBatis Database Layer -->
    <bean id="sqlSession" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource" />
        <property name="configLocation" value="classpath:/egovframework/sqlmap/config/sql-mapper-config.xml" />
        <property name="mapperLocations" value="classpath:/egovframework/sqlmap/mappers/**/*.xml" />
    </bean>
 
    <bean id="sqlSessionTemplate" class="org.mybatis.spring.SqlSessionTemplate">
        <constructor-arg index="0" ref="sqlSession"/>
    </bean>
 

cs

여기에 추가하고자 하는 DB(저는 Tibero DB)의 sqlsession id를 새로 하나 지정해서 bean등록을 아래와 같이 추가합니다.

저는 sqlSession2, sqlSessionTemplate2라고 지정했습니다.

Tibero DB를 사용하는 쿼리문을 작성할 디렉터리를 하나 새로 만들어서 mapperLocations의 value에 경로를 적습니다. (Package Presentaion사진을 참고) 와일드카드 문자는 원하시는 것을 사용해도 됩니다.

1
2
3
4
5
6
7
8
9

<!-- Tibero SqlSession -->
<bean id="sqlSession2" class="org.mybatis.spring.SqlSessionFactoryBean">
    <property name="dataSource" ref="tibero.dataSource" />
    <property name="mapperLocations" value="classpath:/egovframework/sqlmap/mappers/disaster/tibero/*.xml" />
</bean>
 
<bean id="sqlSessionTemplate2" class="org.mybatis.spring.SqlSessionTemplate">
    <constructor-arg index="0" ref="sqlSession2"/>
</bean>
 

cs

AbstractDAO class 추가

이전까지는 egovframework.com.cmm.service.impl 패키지의 EgovComAbstractDAO를 사용해서 쿼리문을 동작시켰을 겁니다. 추가할 DB에는 새로운 Abstract Calss를 추가하여 추가할 DB 전용 추상 클래스를 만들어줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258

/* TiberoAbstractDAO   */
package egovframework.wini.disaster.service.impl;
 
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import org.apache.ibatis.session.ResultHandler;
import org.apache.ibatis.session.RowBounds;
import org.apache.ibatis.session.SqlSessionFactory;
import org.mybatis.spring.support.SqlSessionDaoSupport;
 
public abstract class TiberoAbstractDAO extends SqlSessionDaoSupport{
 
    /**
     * Annotation 형식으로 sqlSession(SqlSessionFactoryBean)을 받아와
     * 이를 super(SqlSessionDaoSupport)의 setSqlSessionFactory 메서드를 호출하여 설정해 준다.
     * <p>
     * SqlSessionTemplate이 지정된 경우된 경우 이 SqlSessionFactory가 무시된다. (Batch 처리를 위해서는 SqlSessionTemplate가 필요)
     * </p>
     *
     * @param sqlSession SqlSessionFactory로 MyBatis와의 연계를 위한 기본 클래스
     */
    @Resource(name = "sqlSession2")
    public void setSqlSessionFactory(SqlSessionFactory sqlSession) {
        super.setSqlSessionFactory(sqlSession);
    }
 
    /**
     * 입력 처리 SQL mapping 을 실행한다.
     *
     * @param queryId -  입력 처리 SQL mapping 쿼리 ID
     *
     * @return DBMS가 지원하는 경우 insert 적용 결과 count
     */
    public int insert(String queryId) {
        return getSqlSession().insert(queryId);
    }
 
    /**
     * 입력 처리 SQL mapping 을 실행한다.
     *
     * @param queryId -  입력 처리 SQL mapping 쿼리 ID
     * @param parameterObject - 입력 처리 SQL mapping 입력 데이터를 세팅한 파라메터 객체(보통 VO 또는 Map)
     *
     * @return DBMS가 지원하는 경우 insert 적용 결과 count
     */
    public int insert(String queryId, Object parameterObject) {
        return getSqlSession().insert(queryId, parameterObject);
    }
 
    /**
     * 수정 처리 SQL mapping 을 실행한다.
     *
     * @param queryId - 수정 처리 SQL mapping 쿼리 ID
     *
     * @return DBMS가 지원하는 경우 update 적용 결과 count
     */
    public int update(String queryId) {
        return getSqlSession().update(queryId);
    }
 
    /**
     * 수정 처리 SQL mapping 을 실행한다.
     *
     * @param queryId - 수정 처리 SQL mapping 쿼리 ID
     * @param parameterObject - 수정 처리 SQL mapping 입력 데이터(key 조건 및 변경 데이터)를 세팅한 파라메터 객체(보통 VO 또는 Map)
     *
     * @return DBMS가 지원하는 경우 update 적용 결과 count
     */
    public int update(String queryId, Object parameterObject) {
        return getSqlSession().update(queryId, parameterObject);
    }
 
    /**
     * 삭제 처리 SQL mapping 을 실행한다.
     *
     * @param queryId - 삭제 처리 SQL mapping 쿼리 ID
     *
     * @return DBMS가 지원하는 경우 delete 적용 결과 count
     */
    public int delete(String queryId) {
        return getSqlSession().delete(queryId);
    }
 
    /**
     * 삭제 처리 SQL mapping 을 실행한다.
     *
     * @param queryId - 삭제 처리 SQL mapping 쿼리 ID
     * @param parameterObject - 삭제 처리 SQL mapping 입력 데이터(일반적으로 key 조건)를  세팅한 파라메터 객체(보통 VO 또는 Map)
     *
     * @return DBMS가 지원하는 경우 delete 적용 결과 count
     */
    public int delete(String queryId, Object parameterObject) {
        return getSqlSession().delete(queryId, parameterObject);
    }
 
    //CHECKSTYLE:OFF
    /**
     * 명명규칙에 맞춰 selectOne()로 변경한다.
     * @deprecated select() 메소드로 대체
     *
     * @see EgovAbstractMapper.selectOne()
     */
    //CHECKSTYLE:ON
    @Deprecated
    public Object selectByPk(String queryId, Object parameterObject) {
        return getSqlSession().selectOne(queryId, parameterObject);
    }
 
    /**
     * 단건조회 처리 SQL mapping 을 실행한다.
     *
     * @param queryId - 단건 조회 처리 SQL mapping 쿼리 ID
     *
     * @return 결과 객체 - SQL mapping 파일에서 지정한 resultType/resultMap 에 의한 단일 결과 객체(보통 VO 또는 Map)
     */
    public <T> T selectOne(String queryId) {
        return getSqlSession().selectOne(queryId);
    }
 
    /**
     * 단건조회 처리 SQL mapping 을 실행한다.
     *
     * @param queryId - 단건 조회 처리 SQL mapping 쿼리 ID
     * @param parameterObject - 단건 조회 처리 SQL mapping 입력 데이터(key)를 세팅한 파라메터 객체(보통 VO 또는 Map)
     *
     * @return 결과 객체 - SQL mapping 파일에서 지정한 resultType/resultMap 에 의한 단일 결과 객체(보통 VO 또는 Map)
     */
    public <T> T selectOne(String queryId, Object parameterObject) {
        return getSqlSession().selectOne(queryId, parameterObject);
    }
 
    /**
     * 결과 목록을 Map 을 변환한다.
     * 모든 구문이 파라미터를 필요로 하지는 않기 때문에, 파라미터 객체를 요구하지 않는 형태로 오버로드되었다.
     *
     * @param queryId - 단건 조회 처리 SQL mapping 쿼리 ID
     * @param mapKey - 결과 객체의 프로퍼티 중 하나를 키로 사용
     *
     * @return 결과 객체 - SQL mapping 파일에서 지정한 resultType/resultMap 에 의한 단일 결과 객체(보통 VO 또는 Map)의 Map
     */
    public <K, V> Map<K, V> selectMap(String queryId, String mapKey) {
        return getSqlSession().selectMap(queryId, mapKey);
    }
 
    /**
     * 결과 목록을 Map 을 변환한다.
     * 모든 구문이 파라미터를 필요로 하지는 않기 때문에, 파라미터 객체를 요구하지 않는 형태로 오버로드되었다.
     *
     * @param queryId - 단건 조회 처리 SQL mapping 쿼리 ID
     * @param parameterObject - 맵 조회 처리 SQL mapping 입력 데이터(조회 조건)를 세팅한 파라메터 객체(보통 VO 또는 Map)
     * @param mapKey - 결과 객체의 프로퍼티 중 하나를 키로 사용
     *
     * @return 결과 객체 - SQL mapping 파일에서 지정한 resultType/resultMap 에 의한 단일 결과 객체(보통 VO 또는 Map)의 Map
     */
    public <K, V> Map<K, V> selectMap(String queryId, Object parameterObject, String mapKey) {
        return getSqlSession().selectMap(queryId, parameterObject, mapKey);
    }
 
    /**
     * 결과 목록을 Map 을 변환한다.
     * 모든 구문이 파라미터를 필요로 하지는 않기 때문에, 파라미터 객체를 요구하지 않는 형태로 오버로드되었다.
     *
     * @param queryId - 단건 조회 처리 SQL mapping 쿼리 ID
     * @param parameterObject - 맵 조회 처리 SQL mapping 입력 데이터(조회 조건)를 세팅한 파라메터 객체(보통 VO 또는 Map)
     * @param mapKey - 결과 객체의 프로퍼티 중 하나를 키로 사용
     * @param rowBounds - 특정 개수 만큼의 레코드를 건너띄게 함
     *
     * @return 결과 객체 - SQL mapping 파일에서 지정한 resultType/resultMap 에 의한 단일 결과 객체(보통 VO 또는 Map)의 Map
     */
    public <K, V> Map<K, V> selectMap(String queryId, Object parameterObject, String mapKey, RowBounds rowBounds) {
        return getSqlSession().selectMap(queryId, parameterObject, mapKey, rowBounds);
    }
 
    //CHECKSTYLE:OFF
    /**
     * 명명규칙에 맞춰 selectList()로 변경한다.
     *
     * @see EgovAbstractMapper.selectList()
     * @deprecated List<?> 메소드로 대체
     */
    //CHECKSTYLE:ON
    @Deprecated
    public List<?> list(String queryId, Object parameterObject) {
        return getSqlSession().selectList(queryId, parameterObject);
    }
 
    /**
     * 리스트 조회 처리 SQL mapping 을 실행한다.
     *
     * @param queryId - 리스트 조회 처리 SQL mapping 쿼리 ID
     *
     * @return 결과 List 객체 - SQL mapping 파일에서 지정한  resultType/resultMap 에 의한 결과 객체(보통 VO 또는 Map)의 List
     */
    public <E> List<E> selectList(String queryId) {
        return getSqlSession().selectList(queryId);
    }
 
    /**
     * 리스트 조회 처리 SQL mapping 을 실행한다.
     *
     * @param queryId - 리스트 조회 처리 SQL mapping 쿼리 ID
     * @param parameterObject - 리스트 조회 처리 SQL mapping 입력 데이터(조회 조건)를 세팅한 파라메터 객체(보통 VO 또는 Map)
     *
     * @return 결과 List 객체 - SQL mapping 파일에서 지정한  resultType/resultMap 에 의한 결과 객체(보통 VO 또는 Map)의 List
     */
    public <E> List<E> selectList(String queryId, Object parameterObject) {
        return getSqlSession().selectList(queryId, parameterObject);
    }
 
    /**
     * 리스트 조회 처리 SQL mapping 을 실행한다.
     *
     * @param queryId - 리스트 조회 처리 SQL mapping 쿼리 ID
     * @param parameterObject - 리스트 조회 처리 SQL mapping 입력 데이터(조회 조건)를 세팅한 파라메터 객체(보통 VO 또는 Map)
     * @param rowBounds - 특정 개수 만큼의 레코드를 건너띄게 함
     *
     * @return 결과 List 객체 - SQL mapping 파일에서 지정한  resultType/resultMap 에 의한 결과 객체(보통 VO 또는 Map)의 List
     */
    public <E> List<E> selectList(String queryId, Object parameterObject, RowBounds rowBounds) {
        return getSqlSession().selectList(queryId, parameterObject, rowBounds);
    }
 
    /**
     * 부분 범위 리스트 조회 처리 SQL mapping 을 실행한다.
     * (부분 범위 - pageIndex 와 pageSize 기반으로 현재 부분 범위 조회를 위한 skipResults, maxResults 를 계산하여 ibatis 호출)
     *
     * @param queryId - 리스트 조회 처리 SQL mapping 쿼리 ID
     * @param parameterObject - 리스트 조회 처리 SQL mapping 입력 데이터(조회 조건)를 세팅한 파라메터 객체(보통 VO 또는 Map)
     * @param pageIndex - 현재 페이지 번호
     * @param pageSize - 한 페이지 조회 수(pageSize)
     *
     * @return 부분 범위 결과 List 객체 - SQL mapping 파일에서 지정한 resultType/resultMap 에 의한 부분 범위 결과 객체(보통 VO 또는 Map) List
     */
    public List<?> listWithPaging(String queryId, Object parameterObject, int pageIndex, int pageSize) {
        int skipResults = pageIndex * pageSize;
        //int maxResults = (pageIndex * pageSize) + pageSize;
 
        RowBounds rowBounds = new RowBounds(skipResults, pageSize);
 
        return getSqlSession().selectList(queryId, parameterObject, rowBounds);
    }
 
    /**
     * SQL 조회 결과를 ResultHandler를 이용해서 출력한다.
     * ResultHandler를 상속해 구현한 커스텀 핸들러의 handleResult() 메서드에 따라 실행된다.
     *
     * @param queryId - 리스트 조회 처리 SQL mapping 쿼리 ID
     * @param handler - 조회 결과를 제어하기 위해 구현한 ResultHandler
     * @return
     *
     * @return 결과 List 객체 - SQL mapping 파일에서 지정한 resultType/resultMap 에 의한 결과 객체(보통 VO 또는 Map)의 List
     */
    public void listToOutUsingResultHandler(String queryId, ResultHandler handler) {
        getSqlSession().select(queryId, handler);
    }
}
 
 

cs

원하시는 패키지 아래에 TiberoAbstractDAO 추상클래스를 생성 하시고 SqlSessionDaoSupport를 상속받은 뒤에 그대로 복붙 하여 사용하셔도 무관 합니다.

단, 23번 라인의 @Resource(name = "sqlSession2")을 잊지 말고 꼭 context-mapper.xml에 설정했던 SqlSessionFactoryBean의 id와 동일하게 적어줘야 됩니다.

이제 DAO클래스 하나를 생성하고 Service단에서 DAO를 호출한 뒤 DAO에서 TiberoAbstractDAO를 상속받고 추상 클래스에 정의된 메서드들을 이용하여 쿼리를 타게 될 겁니다.

예시 Controller , Service, DAO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

/* Controller */
 
 
@Controller
public class NdmsRegisterController {
 
    /* NDMS Service */
    @Resource(name = "NdmsRegisterService")
    private NdmsRegisterService service;
 
    @RequestMapping("/ndms/ndmsRegisterDisaster.do")
     public String registerDisaster(HttpServletRequest request, Model model){
        List<Map<String,Object>> result = null;
        try {
            result = service.test();
            model.addAttribute("test",result);
        } catch (Exception e) {
            e.printStackTrace();
        }
 
        return "ndmsA/ndmsRegisterDisaster";
     }
    @RequestMapping("/ndms/test.do")
    public String test(){
 
        return "ndms/test";
     }
 
}
 
 
/* Service  */
 
@Service("NdmsRegisterService")
public class NdmsRegisterServiceImpl implements NdmsRegisterService{
 
    @Autowired
    private NdmsRegisterDAO dao;
 
    @Override
    public List<Map<String, Object>> test() {
        List<Map<String,Object>> result = null;
        try {
            result = dao.test();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }
 
}
 
 
/* DAO */
@Repository("NdmsDAO")
public class NdmsRegisterDAO extends TiberoAbstractDAO{
 
    public List<Map<String, Object>> test() {
        return selectList("NdmsDAO.test");
    }
}
 
 

cs

Controller에서 Service를 전역 변수로 설정해놓고 사용하는데

@Resource(name = "NdmsRegisterService") 이렇게 @Resource어노테이션을 사용하고 값을 Service명으로 꼭 입력해주어야 합니다.

이 예시는 말 그대로 예시 일분 그대로 복붙 하지 마시고 본인의 상황에 맡게 클래스를 생성한 후 사용하시면 됩니다. 물론 Service와 DAO는 interface가 있고, Implement class를 따로 만드는 게 좋습니다.

SQL.xml 에서는 mapper namespace명을 DAO클래스에 명시한 대로 하면 됩니다.

<mapper namespace="NdmsDAO"> 이런 식으로 요.

이상으로 하나의 프로젝트에 두 개의 DB를 붙이는 방법을 적어봤습니다.

다들 ~~즐겁지 않은~~ 즐거운 코딩 하세요

[Spring]파일 업로드의 구현(1개의 파일)

우리마 — Fri, 4 Dec 2020 14:31:36 +0900

안녕하세요. 이번 글에서는 Spring환경에서 파일 업로드에 대해서 이야기하려고 해요.

웹 프로젝트에 있어서 파일 데이터의 전송은 상당히 많은 부분을 차지한다고 생각합니다.

오늘은 게시글에 대해서 하나의 파일 첨부만 구현 한 저의 로직을 소개하겠습니다. 차후에 다중 파일 업로드와 파일 다운로드 기능까지 추가로 올리도록 하겠습니다.

개발 환경
Spring Framework	5.2.3
Tomcat	8.0
DB	MySql8 , MyBatis3.5
Browser	Chrome
IDE	STS 3.9.11

파일 관련 DB 테이블 구조

1. idx : 파일 첨부한 파일의 일련번호. (PK, 프라이머리 키) 파일을 관리하는 테이블에서 프라이머리 키는 매우 중요합니다. 프라이머리 키의 값을 가지고 첨부한 이미지의 썸 내일을 그리는 등 꼭 있어야 하는 요소입니다.

2. bbsidx : 파일 첨부판 게시글의 일련번호입니다.(FK, 게시글 테이블을 참조함) 어느 게시글에서 파일 첨부했는지를 나타내기 때문에 꼭 필요한 요소입니다.

의존성 추가 (pom.xml)

1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>
 
<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.4</version>
</dependency>
 

cs

 

MultipartResolver 설정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:beans="http://www.springframework.org/schema/beans"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">
 
    <!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
    
    <!-- Enables the Spring MVC @Controller programming model -->
    <annotation-driven />
 
    <!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
<!--     <resources mapping="/favicon.ico" location="/favicon.ico"/> -->
    <resources mapping="/home/**" location="/home/" />
 
    <!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
    <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <beans:property name="prefix" value="/WEB-INF/views/" />
        <beans:property name="suffix" value=".jsp" />
        <beans:property name="contentType" value="text/html; charset=UTF-8"/>
    </beans:bean>
 
    <beans:bean id="loginInterceptor"
        class="com.myProject.training.interceptor.WebDevLoginCheckInterceptor" />
        
<!--     <beans:bean id="excelDownloadView" class="com.myProject.training.webDev.util.ExcelDownloadView"/> -->
<!--     <beans:bean id="jsonView" class="org.springframework.web.servlet.view.json.MappingJackson2JsonView"/> -->
    <!-- MultipartResolver 설정 -->
    <beans:bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <beans:property name="maxUploadSize" value="100000000" />
        <beans:property name="maxInMemorySize" value="100000000" />
    </beans:bean>
    
    
    <context:component-scan base-package="com.myProject.training" />
    
    
    
</beans:beans>
 
Colored by Color Scripter

cs

저는 Spring Legacy프로젝트 내에 servlet-context.xml파일에 MultipartResolver를 설정해 줬습니다.

눈여겨봐야 할부분은 32번째 라인부터 입니다. CommonsMultipartResolver는 스프링에서 파일 업로드 기능을 구현해놓은 클래스입니다. maxUploadSize의 value를 100000000이라고 해놨는데 이는 서버에 업로드할 수 있는 첨부파일의 최대 크기를 의미합니다. 단위는 byte로 10MB로 설정해놨습니다. 이 Resolver덕분에 우리가 실제로 작성해야 할 부분이 많이 줄어듭니다.

여기까지 파일 업로드를 위해 설정하는 부분이 끝났습니다. 아래에는 JSP, Controller, SQL 등을 소개하겠습니다.

JSP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<form action="" id="communityInsert" name="communityInsert"onsubmit="return false;" method="post"enctype="multipart/form-data">
    <table>
        <thead>
            <tr>
                <th style="text-align: center; font-size: 18px;">제목
                    <em class="mlp20 mrp10" id="communitynoticeEm" style="font-size: 15px; color:#499bf0; ">공지사항</em>
                    <input type="checkbox" id="communitynotice" name="communitynotice">
                </th>
                <th>
                    <span class="title_guide" id="title_guide" style="display: none; position: absolute;"></span> 
                    <input type="text" name="title" id="title" placeholder="제목을 입력하세요." maxlength="80" style="width: 45%; height: 42px; font-size: 20px;">
                </th>
            </tr>
            <tr>
                <th style="text-align: center; font-size: 18px;">작성 날짜</th>
                <th>
                    <input type="text" name="regdate" id="regdate" value="${regDate}" style="width: 45%; height: 30px; font-size: 15px; background-color: #dedede;"disabled="true" />
                </th>
            </tr>
            <tr>
                <th style="text-align: center; font-size: 18px;">작성자</th>
                <th>
                    <input type="text" name="userid" id="userid" value="${userid}" style="width: 45%; height: 30px; font-size: 15px; background-color: #dedede; outline: none; cursor: default;"readOnly />
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">
                    <span class="content_guide" id="content_guide" style="display: none; position: absolute;"></span> 
                    <textarea name="content" id="content"></textarea>
                </td>
            </tr>
            <tr>
                <td style="text-align: center; font-size: 18px;">파일 첨부</td>
                <td>
                    <div class="attach">
                        <input type="file" id="file" name="file" class="filebox on">
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <input type="hidden" id="bbsidx" name="bbsidx" value="${bbsidx}">
</form>
 

cs

게시글 작성하는 페이지의 form태그 안 부분입니다. 다 볼 필요 없고 중요한 부분은 1번째 줄의 from 태그 안의 속성 값들과 38번째 줄의 파일 첨부 input 태그, 그리고 44번째에 input type="hidden"으로 해당 게시글의 일련번호(bbsidx) 값

1. form 태그 : enctype="multipart/form-data" 이 부분의 제일 중요합니다. form태그의 enctype 이란 form 태그 안의 데이터 가 서버로 제출될 때 해당 데이터가 인코딩 되는 방법을 명시합니다. 이 속성은 method="post" 속성과 꼭 같이 사용해야 합니다 (post 방식인 경우에만 사용할 수 있습니다.)

enctype의 값에는 여러 가지가 있지만 multipart/form-data는 모든 문자를 인코딩하지 않음을 명시합니다. 이 방식은 파일이나 이미지 등을 서버로 전송할 때 주로 사용합니다.

또한 저는 submit버튼을 사용하지 않았고, a태그로 ajax를 이용해 서버로 데이터를 전송하는 방식을 사용하였기 때문에 onsubmit="return false;" 속성을 같이 사용하였습니다.

2. bbsidx : 해당 게시글의 일련번호는 게시글 작성 페이지로 들어올 때 Controller에서 model로 값을 넘겨줍니다. 업로드한 파일을 DB에 저장할 때 bbsidx값이 필요하기 때문에 같이 form 안에 담아줍니다.

글 작성 function , ajax -> javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

var btn_communityInsert = document.getElementById("btn_communityInsert");
btn_communityInsert.onclick = function(){ insertCommunity(); }
 
//글작성 ajax
function insertCommunity() {
    var title = $("#title").val();
    var content = $("#content").val();
    var isnotice = 1;
    if($("#communitynotice").is(':checked')){
        isnotice = 1;
    }
    else{
        isnotice = 0;
    }
 
    if (title == '' || title == null || content == ''
            || content == null) {
        Rnd.alert("필수항목을 입력하세요.", "warning", "확인", function() {
        });
    } else {
        $("#communityInsert").ajaxSubmit({
            type : "POST",
            url : "<c:url value='/insert'/>",
            data : {notice:isnotice, content:content},
            error : function(e) {
                Rnd.alert("통신 오류", "error", "확인", function() {
                });
            },
            success : function(resultCode) {
                if (resultCode == "0") {
                    Rnd.alert("파일 업로드 오류", "error", "확인", function() {
                    });
                } else if (resultCode == "1") {
                    Rnd.alert("등록 완료", "success", "확인", function() {
                        location.href = "/community"
                    });
 
                } else {
                    Rnd.alert("뜨면 안되는 오류", "error", "확인", function() {
                    });
                }
            }
        });
    }
}
 

cs

1.
var btn_communityInsert = document.getElementById("btn_communityInsert");
btn_communityInsert.onclick = function(){ insertCommunity(); }
이 부분은 '등록' 버튼 이벤트를 세팅하는 부분입니다.
버튼의 아이디가 btn_communityInsert입니다.
 
2. ajax로 /insert를 호출합니다. 이후 success 부분에서 resultCode는 Controller에서 sql오류, catch오류 정상 등록 등에 따라서 int형으로 return해준 값입니다.

Controller ( /insert )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//게시글 작성 insert
@RequestMapping("/insert")
@ResponseBody
public int insertBoard(@RequestParam Map<String,Object> commandMap
                    , MultipartHttpServletRequest multiRequest){
    logger.info("request: /insert");
    int resultCode = 0;
    int fileSuccess;
    int idx =0;
    String realContent = "";
    Map<String,Object> map = new HashMap<>();
    try {
        
        /* 생략 */
        fileSuccess = service.uploadFile(multiRequest, idx);
        /* 생략 */
        
    } catch (Exception e) {
        logger.debug(e.getMessage());
        resultCode = -1;
    }
    return resultCode;
}
 

cs

중요한 부분이 메서드의 파라미터로 MultipartHttpServletRequest multiRequest를 받아야 합니다. 일반 form안의 데이터는 @RequestParam으로 commandMap안에 담기지만 업로드한 파일은 MultipartHttpServletRequest객체로 받아야 합니다.
idx는 commandMap안에 있는 해당 게시글의 일련번호입니다. JSP에서 input type="hidden"으로 보낸 값입니다.
 
uploadFile 서비스는 fileSuccess라는 변수에 담는데 이는 파일 첨부가 있으면 1 없거나 에러가 나면 0을 return 합니다. uploadFile 서비스에 게시글 일련번호 값과 MultipartHttpServletRequest객체를 파라미터로 보내줍니다.
 
FileVO

1
2
3
4
5
6
7
8
9

public class FileVO {
    private int idx;
    private int bbsidx;
    private String filename;
    private String filepath;
    private String fileformat;
    private long filesize;
    private String regDate;
}

cs

FileVO라는 class를 하나 생성해줍니다. FileVO 인스턴스를 생성해서 getter/setter를 통해 값을 넣고 이 값을 DB에 저장할 겁니다. ( getter/setter , 생성자는 생략했습니다.) filesize는 단위가 byte로 입력되기 때문에 데이터 타입을 long으로 했습니다.

uploadFile (Service)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

//파일 업로드
@Override
public int uploadFile(MultipartHttpServletRequest multiRequest, int idx) throws Exception {
    MultipartHttpServletRequest mptRequest = (MultipartHttpServletRequest) multiRequest;
    Iterator<String> fileIter = mptRequest.getFileNames();
    List<FileVO> fileList = new ArrayList<FileVO>();
    int fileSuccess = 0;
    try {
        int bbsidx = Integer.parseInt(multiRequest.getParameter("bbsidx").toString());
 
        String path = "/lsunguk/tomcat/webDev/file"; // 본인이 upload한 파일을 저장하고 싶은
        
        while(fileIter.hasNext()) {
            
            MultipartFile mFile = mptRequest.getFile((String)fileIter.next());
            
            // 파일이 존재한다면
            if(mFile.getSize() > 0) {
                FileVO fileVO = new FileVO();
                
                String filename = mFile.getOriginalFilename();
                String fileformat = mFile.getContentType();
                long filesize = mFile.getSize();
                
                String filepath = path + "/" + bbsidx;
                
                FileUtil.uploadFile(mFile, filename, filepath);
                
                // VO에 파일 정보를 셋팅
                fileVO.setIdx(idx);
                fileVO.setBbsidx(bbsidx);
                fileVO.setFileformat(fileformat);
                fileVO.setFilename(filename);
                fileVO.setFilepath(filepath);
                fileVO.setFilesize(filesize);
 
                // fileList ArrayList 배열에 셋팅한 VO를 삽입
                fileList.add(fileVO);
                
                // map에 VO로 부터 파일 정보를 get해서 담아줌
                Map<String,Object> commandMap = new HashMap<String, Object>();
                commandMap.put("idx",fileVO.getIdx());
                commandMap.put("bbsidx", fileVO.getBbsidx());
                commandMap.put("fileformat",fileVO.getFileformat());
                commandMap.put("filename", fileVO.getFilename());
                commandMap.put("filepath",fileVO.getFilepath());
                commandMap.put("filesize",fileVO.getFilesize());
                try {
                    dao.uploadFile(commandMap);
                    File savefilePath = new File(filepath + "/" + filename);
                    if (savefilePath.exists()) {
                        fileSuccess = 1;
                    }
                    else {
                        fileSuccess = 0;
                    }
                }catch(Exception e) {
                    logger.info(e.getMessage());
                }
            }
        }
    }catch(Exception e) {
        logger.info(e.getMessage());
        if(fileList != null){
            for(int i=0; i<fileList.size(); i++){
                String delete_filename = (String) fileList.get(i).getFilename();    // 저장파일명
                String stordFilePath = (String) fileList.get(i).getFilepath();    // 저장경로
                File savefilePath = new File(stordFilePath + delete_filename);
                if (savefilePath.exists()) {
                    savefilePath.delete();
                }
            }
        }
        fileSuccess = 0;
    }
    return fileSuccess;
}
 

cs

드디어 파일 업로드 기능의 실질적인 부분입니다.

11번 라인의 path 변수에 본인이 원하는 file이 서버에 저장되는 위치를 적으면 됩니다. '/'로 시작하면 윈도에서는 C:\로 인십합니다. 쭉쭉쭉하다가 49번 라인에 dao를 타고 파일 정보를 DB에 저장합니다.

이 로직에서 본인이 필요한 정보만 가져다 쓰시면 될꺼같습니다. 중요한 부분은

filename, filesize, filepath, fileformat 등 파일의 정보를 multiRequest에서 가져와서 27번 라인의

FileUtil.uploadFile(mFile, filename, filepath); 이 부분으로 정확한 정보를 보내는 게 핵심입니다.

vo에 담은 정보는 다시 map에 담아서 DB에 저장합니다.

아래는 FileUtil.java 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223

package com.myProject.training.webDev.util;
 
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.Closeable;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.sql.Timestamp;
import java.text.SimpleDateFormat;
import java.util.Locale;
import java.util.Map;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.multipart.MultipartFile;
 
public class FileUtil {
    
    private static final Logger logger = LoggerFactory.getLogger(FileUtil.class);
    
    public static final int BUFF_SIZE = 2048;
    
    /**
     * 파일을 실제 물리적인 경로에 생성한다. 
     *
     * @param file
     * @param newName
     * @param stordFilePath
     * @throws Exception
     */
    public static void uploadFile(MultipartFile file, String storedFileName, String storedFilePath) throws Exception {
        InputStream inputStream = null;
        OutputStream outputStream = null;
 
        try {
            inputStream = file.getInputStream();
            File cFile = new File(filePathBlackList(storedFilePath));
 
            if (!cFile.isDirectory()){
                //2017.03.03     조성원     시큐어코딩(ES)-부적절한 예외 처리[CWE-253, CWE-440, CWE-754]
                if (cFile.mkdirs()){
                    logger.debug("[file.mkdirs] saveFolder : Creation Success ");
                    /*
                     * if(EgovProperties.getProperty("Globals.OsType").equals("UNIX")) {
                     * Runtime.getRuntime().exec("chown -R msitweb:msit " + stordFilePath);
                     * Runtime.getRuntime().exec("chmod -R 775 " + stordFilePath);
                     * logger.debug("명렁어 실행됨 : chown -R msitweb:msit " + stordFilePath); }
                     */
                }else{
                    logger.error("[file.mkdirs] saveFolder : Creation Fail ");
                }
            }
 
            outputStream = new FileOutputStream(filePathBlackList(storedFilePath + File.separator + storedFileName));
 
            int bytesRead = 0;
            byte[] buffer = new byte[BUFF_SIZE];
 
            while ((bytesRead = inputStream.read(buffer, 0, BUFF_SIZE)) != -1) {
                outputStream.write(buffer, 0, bytesRead);
            }
        } finally {
            close(outputStream, inputStream);
        }
//        if(EgovProperties.getProperty("Globals.OsType").equals("UNIX")) {
//            Runtime.getRuntime().exec("chown -R msitweb:msit " + stordFilePath + "/" + newName);
//            Runtime.getRuntime().exec("chmod -R 775 " +stordFilePath + "/" + newName);
//            logger.debug("명렁어 실행됨 : chown -R msitweb:msit " + stordFilePath + "/" + newName);
//        }
    }
 
    /**
     * 서버의 파일을 다운로드한다.
     *
     * @param request
     * @param response
     * @throws Exception
     */
    public static void downFile(HttpServletRequest request, HttpServletResponse response) throws Exception {
 
        String downFileName = "";
        String fileName = (String) request.getAttribute("filename");
 
        // 저장파일명을 추출하여 null 체크 및 값 변수에 할당
        if ((String) request.getAttribute("downFile") == null) {
            downFileName = "";
        } else {
            downFileName = (String) request.getAttribute("downFile");
        }
 
        // 저장파일명을 기반으로 파일 객체 생성
        File file = new File(filePathBlackList(downFileName));
 
        // 파일이 존재하는지 여부 체크
        if (!file.exists()) {
            throw new FileNotFoundException(downFileName);
        }
 
        // 파일 타입인지 체크
        if (!file.isFile()) {
            throw new FileNotFoundException(downFileName);
        }
 
        // 파일 bytes 크기 추출
        int fSize = (int) file.length();
 
        // 파일이 존재한다면
        if (fSize > 0) {
            BufferedInputStream in = new BufferedInputStream(
                    new FileInputStream(file));
            // String mimetype = servletContext.getMimeType(requestedFile);
            String mimetype = "application/octet-stream";
 
            response.setBufferSize(fSize);
            response.setContentType(mimetype);
            response.setHeader("Content-Disposition", "attachment; filename=\""
                    + fileName + "\"");
            response.setContentLength(fSize);
 
            FileCopyUtils.copy(in, response.getOutputStream());    // copy 함수는 write()를 하기 위해 만들어놓은 함수이다.
            in.close();
 
            response.getOutputStream().flush();
            response.getOutputStream().close();
        } else {
            //setContentType을 프로젝트 환경에 맞추어 변경
            response.setContentType("application/x-msdownload");
            PrintWriter printwriter = response.getWriter();
            printwriter.println("<html>");
            printwriter.println("<br><br><br><h2>Could not get file name:<br>"
                    + fileName + "</h2>");
            printwriter
                    .println("<br><br><br><center><h3><a href='javascript: history.go(-1)'>Back</a></h3></center>");
            printwriter.println("<br><br><br>&copy; webAccess");
            printwriter.println("</html>");
            printwriter.flush();
            printwriter.close();
        }
 
    }
 
    
    public static String filePathBlackList(String value) {
        String returnValue = value;
        if (returnValue == null || returnValue.trim().equals("")) {
            return "";
        }
 
        returnValue = returnValue.replaceAll("\\.\\.", "");
 
        return returnValue;
    }
    
    /**
     * Resource close 처리. 
     * @param resources
     */
    public static void close(Closeable  ... resources) {
        for (Closeable resource : resources) {
            if (resource != null) {
                try {
                    resource.close();
                } catch (IOException ignore) {
                    logger.error("[IOException] : Connection Close");
                } catch (Exception ignore) {
                    logger.error("["+ ignore.getClass() +"] Connection Close : " + ignore.getMessage());
                }
            }
        }
    }
    
    /**
     * 공통 컴포넌트 utl.fcc 패키지와 Dependency제거를 위해 내부 메서드로 추가 정의함
     * 응용어플리케이션에서 고유값을 사용하기 위해 시스템에서17자리의TIMESTAMP값을 구하는 기능 
     *
     * @param
     * @return Timestamp 값
     * @see
     */
    public static String getTimeStamp(String pattern) {
 
        String rtnStr = null;
        // 문자열로 변환하기 위한 패턴 설정(년도-월-일 시:분:초:초(자정이후 초))
 
        SimpleDateFormat sdfCurrent = new SimpleDateFormat(pattern, Locale.KOREA);
        Timestamp ts = new Timestamp(System.currentTimeMillis());
 
        rtnStr = sdfCurrent.format(ts.getTime());
 
        return rtnStr;
    }
    
    /**
     * 객체가 null인지 확인하고 null인 경우 "" 로 바꾸는 메서드
     * @param object 원본 객체
     * @return resultVal 문자열
     */
    public static String isNullToString(Object object) {
        String string = "";
 
        if (object != null) {
            string = object.toString().trim();
        }
 
        return string;
    }
 
    public static String removeCRLF(String parameter) {
         return parameter.replaceAll("\r", "").replaceAll("\n", "");
    }
}
 
 
Colored by Color Scripter

cs

이렇게 까지 하면 JSP로 1을 return 하여 ajax의 success함수에서 정상적으로 글이 등록되었다는 문구가 뜰 것입니다.

다음에 다중 파일 첨부와 파일 다운로드 부분을 기재하겠습니다.

~~즐겁지 않은~~즐거운 코딩 하세요

[Spring]게시판 글 상세보기에서 '좋아요' 처리 로직 정리

우리마 — Mon, 14 Sep 2020 16:37:47 +0900

Spring환경에서 게시판으로 개발 연습을 하면서 게시글에 대해서 해당 글의 '좋아요' 처리에 대한 개인적인 로직을 정리하고자 한다. 지극히 주관적인 로직과 코딩이라서 상당히 하드 할 수 있다.

지적사항, 더좋은 방법 등 댓글 환영

개발 환경
Spring Framework	5.2.3
Tomcat	8.0
DB	MySql8 , MyBatis3.5
Browser	Chrome
IDE	STS 3.9.11

DB '좋아요' 테이블 구조

bbsidx와 useridx는 각각 게시글 테이블과 사용자 테이블의 일련번호를 외래 키로 사용하고 있다.

게시글을 본 사용자에 대해서 '좋아요'를 처리하기 위함이다.

게시글 상세보기 페이지 최초 접속시 처리 프로세스

'좋아요'버튼 (하트) 눌렀을때 처리 프로세스

게시글 상세보기 페이지 접속 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

 
/* Controller */
//게시글 상세보기 detail
@RequestMapping("/communityDetail")
public String communityDetail(@RequestParam int idx, Model model,HttpServletRequest request,HttpServletResponse response, HttpSession session){
    logger.info("request: /communityDetail");
    Map<String,Object> resultMap = null;
    Map<String,Object> idxMap = new HashMap<>();
    int bbsidx = idx;
    int useridx = 0;
            /* 생략 */
 
    try {
        Map<String,Object> userInfo = (Map<String, Object>) session.getAttribute("userInfo");
        useridx = Integer.parseInt(userInfo.get("idx").toString());
        
            /* 생략 */
        resultMap = service.communityDetail(bbsidx); // 게시판 상세정보 가져옴
        idxMap.put("bbsidx", bbsidx);
        idxMap.put("useridx", useridx);
 
        Map<String,Object> likecheckMap = service.likecheck(idxMap);
        //like 테이블 에서 사용자가 해당 게시글에 대해서 좋아요를 눌렀는지 확인
        if(likecheckMap == null) {
//사용자가 좋아요를 한번도 누른적이 없으면 
//like테이블에 데이터가 없으므로 null반환
            model.addAttribute("likecheck",0);
        }
        else {
            model.addAttribute("likecheck",likecheckMap.get("likecheck"));
        }
 
        model.addAttribute("likecnt",resultMap.get("likecnt"));
model.addAttribute("bbsidx",bbsidx);
 model.addAttribute("useridx",useridx);
                /* 생략 */
    } catch (Exception e) {
        logger.debug(e.getMessage());
    }
    return "communityDetail";
}
 
/* SQL.xml */
<select id="communityDetail" resultType="map">
    SELECT 
        //생략
       , bbs.likecnt as likecnt
        //생략
    from 
        training_bbs bbs
    where 1=1 
    and bbs.idx = #{idx}
</select>
 
<!-- 좋아요 눌렀는지 여부 확인 -->
<select id="likecheck" resultType="map">
    select likecheck 
    from training_like 
    where bbsidx=#{bbsidx} 
      and useridx=#{useridx}
</select>
 
/* communityDetail.jsp */
<c:choose>
    <c:when test="${likecheck eq '0' or empty likecheck}"> <!-- likecheck가0이면 빈하트-->
        <img src="/home/img/ico_like_before.png" 
             id="btn_like" align="left" style="cursor:pointer; width: 20px;">
    </c:when>
    <c:otherwise> <!-- likecheck가1이면 빨간 하트-->
        <img src="/home/img/ico_like_after.png" 
              id="btn_like" align="left" style="cursor:pointer; width: 20px;">
    </c:otherwise>
</c:choose>
<dd id="likecnt" style="margin-left:5px;">${likecnt}</dd>
Colored by Color Scripter

cs

 

 

 

communityDetail이 호출되었을 때 먼저 Controller에서 접속 중인 사용자에 대한 정보를 session에 등록된 정보 즉, userInfo에 있는 정보에서 사용자의 일련번호 (useridx)를 가져오고 communityDetail에 호출될때 파라미터로 해당 게시글의 일련번호(bbsidx)를 받는다. 이 두가지 값을 이용해서 해당 게시글에 사용자가 '좋아요'를 누른적있는지 없는지 확인한다.( 21번줄) 한번도 누른 적이 없으면 like테이블 조회 결과가 없으므로 null값이 들어갈 것이기 때문에 model로 jsp에 넘길 때 0을 담고(jsp에서 빈 하트 출력) 한 번이라도 누른 적이 있으면 like테이블의 likecheck 칼럼 값을 model에 담아 jsp로 넘긴다.

게시글의 좋아요 개수(likecnt) 값은 게시글 테이블에 값이 있다.

'좋아요'버튼(하트) 눌렀을때 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

/* JSP SCRIPT */
var bbsidx = ${bbsidx};
var useridx = ${useridx};
 
var btn_like = document.getElementById("btn_like");
 btn_like.onclick = function(){ changeHeart(); }
 
/* 좋아요 버튼 눌렀을떄 */
 function changeHeart(){ 
     $.ajax({
            type : "POST",  
            url : "/clickLike",       
            dataType : "json",   
            data : "bbsidx="+bbsidx+"&useridx="+useridx,
            error : function(){
                Rnd.alert("통신 에러","error","확인",function(){});
            },
            success : function(jdata) {
                if(jdata.resultCode == -1){
                    Rnd.alert("좋아요 오류","error","확인",function(){});
                }
                else{
                    if(jdata.likecheck == 1){
                        $("#btn_like").attr("src","/home/img/ico_like_after.png");
                        $("#likecnt").empty();
                        $("#likecnt").append(jdata.likecnt);
                    }
                    else if (jdata.likecheck == 0){
                        $("#btn_like").attr("src","/home/img/ico_like_before.png");
                        $("#likecnt").empty();
                        $("#likecnt").append(jdata.likecnt);
                        
                    }
                }
            }
        });
 }
 
/* Controller */
    //좋아요 눌렀을때
    @RequestMapping("/clickLike")
    @ResponseBody
    public Map<String,Object> clickLike(@RequestParam Map<String,Object> commandMap){
        logger.info("request: /clickLike");
        int resultCode = 1;
        int likecheck = 1;
        Map<String,Object> map = new HashMap<>();
        Map<String,Object> likecntMap = new HashMap<>();
        Map<String,Object> resultMap = new HashMap<>();
        try {
            map = service.likecheck(commandMap);
            if(map == null) {
                //처음 좋아요 누른것 likecheck=1, 좋아요 빨간색이 되야됨
                service.insertLikeBtn(commandMap); //좋아요 테이블 인서트
                service.updateLikeCntPlus(commandMap); //bbs 테이블 업데이트 +1
                resultCode = 1;
            }
            else if(Integer.parseInt(map.get("likecheck").toString()) == 0) {
                //좋아요 처음은 아니고 취소했다가 다시 눌렀을때 likecheck=1, 좋아요 빨간색 되야됨
                commandMap.put("likecheck",likecheck);
                service.updateLikeCheck(commandMap); //좋아요 테이블 업데이트
                service.updateLikeCntPlus(commandMap); // bbs테이블 +1
                resultCode = 1;
            }
            else {
                //좋아요 취소한거 likecheck=0, 빈하트 되야됨
                likecheck = 0;
                commandMap.put("likecheck", likecheck);
                service.updateLikeCheck(commandMap);
                service.updateLikeCntMinus(commandMap);
                resultCode = 0;
            }
            resultMap = service.getLikeCnt(commandMap); 
            // 해당 게시글 테이블의 likecnt칼럼  update가 끝난후 likecnt값 가져옴
            resultMap.put("likecheck", likecheck);
        } catch (Exception e) {
            logger.debug(e.getMessage());
            resultCode = -1;
        }
        
        resultMap.put("resultCode", resultCode);
        //resultCode가 1이면 빨간하트 0이면 빈하트
        return resultMap;
    }
Colored by Color Scripter

cs

communityDetail.jsp 에서 script로 하트 버튼 이벤트를 등록하고 ajax를 통해 Controller로 bbsidx와 useridx를 파라미터로 넘겨준다. 이에 따라서 resultCode 값을 통해 '좋아요'를 눌렀는지 '좋아요 취소'를 했는지 확인할 수 있고, 빈 하트 또는 빨간 하트를 출력한다.

Controller에서 각각의 경우에 따라서 Service를 태우고 resultCode 값을 정한다 위에 있는 FlowChart와 주석 설명을 참조 바란다.

화면

최초 접속 또는 '좋아요' 취소한 모습

'좋아요 ' 누른 모습

처음에 로직을 생각할때 사용자가 해당 글에 대해서 '좋아요'를 누른 적 있는지 없는지, '좋아요'를 누른 적은 있는데 취소를 한 것인지 '좋아요'누른 상태 인지 등등 이런 경우들을 어떻게 구별하는지 고민을 많이 했는데 필자가 좀 어렵게 생각한 면도 있는 거 같고 지금 와서 봐도 상당히 하드코딩 느낌이 난다...

댓글로 더좋은 방법, 지적 환영합니다..

~~즐겁지 않은~~ 즐거운 코딩 하세요.

[Graph Lib] High Chart 라이브러리 사용법 및 Spring 적용

우리마 — Thu, 3 Sep 2020 15:52:51 +0900

통계 페이지나 내역 페이지 등을 개발할 때 그래프를 통해 월별 현황, 브라우저별 접속 현황 등 한눈에 볼 수 있는 UI를 사용하고 싶을 때 사용할 수 있는 그래프 라이브러리 HighChart를 소개 한다.

High Chart 라이브러리 다운로드

High Chart 공식 홈페이지 접속

Interactive JavaScript charts for your webpage | Highcharts

"I absolutely LOVE Highcharts & maps, very cool! We use it for a web metrics dashboard, which is shared with internal marketing stakeholders. The tool is brilliant and the API documentation is super-helpful. I set up some basic, manual reports using Highch

www.highcharts.com

DEMO : High Chart에서 제공하는 차트 및 그래프 종류와 예제를 확인하고 JSFiddle에서 테스트할 수 있다.

DOCS : JS에서 그래프의 색깔 등 커스터마이징 할 수 있는 문서 제공

SUPPORT : JS파일 다운로드

먼저 JS파일을 가져와야 되는데 두 가지 방법이 있다.

첫 번째

DEMO 메뉴에서 원하는 그래프를 선택 후 "Edit In JSFiiddle " 버튼을 클릭하면 JSFiddle사이트에서 그래프를 확인해볼 수 있다.

여기서 HTML부분에서

js파일을 추가해준 부분의 주소를 각각 url에 입력하면 js 소스를 웹에서 볼 수 있다.

그것을 각각 전부 복사해서 자신의 프로젝트에 파일을 만들고 사용하면 된다.

두 번째

SUPPORT 메뉴에서 (글 쓴 시점 버전) HighCharts8.2.0를 클릭해서 다운로드한다.

그리고 압축을 풀고 index.htm을 들어가 보면 DEMO메뉴에 있는 예제와 마찬가지로 그래프 종류들이 쭉 나오는데 거기서 원하는 그래프가 있는 페이지의 소스를 보고 필요한 js파일을 압축을 푼 폴더에서 찾아서 자신의 프로젝트로 가져오면 된다.

Highcharts-8.2.0 압축 푼 폴더

index.html

Example 소스

필자는 첫 번째 방법을 사용하였는데 이유는 JSFiddle에서 속성 같은 것을 바로바로 커스텀해서 확인해볼 수 있기 때문이었다..

jquery는 당연히 있어야 된다.

프로젝트 적용

HighCharts를 사용하기 위해 필요한 공통 js파일도 있지만 자신이 사용하고 싶은 그래프마다 필요한 js가 조금씩 다르기 때문에 위 사진하고 파일은 다를 수 있다.

아무튼 js파일을 저렇게 가져왔으면 이제 <script> 태그 안에 JSFiddle에서 테스트한 js코드를 가져오면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

//통계 브라우저 그래프
Highcharts.chart('browser_graph', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: ''
    },
    tooltip: {
        pointFormat: '<b>{point.percentage:.1f}%</b>'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            },
            size:220
        }
    },
    series: [{
        colorByPoint: true,
        colors:['#7cb5ec', '#e5ec7c','#90ed7d','#f15c80','#8085e9','#ff8d00'],
        data: [
            {
                name: 'Chrome',
                y: ${chrome.chrome},
                sliced: false,
                selected: false
            }, {
                name: 'Whale',
                y: ${whale.whale}
            }, {
                name: 'Firefox',
                y: ${firefox.firefox}
            }, {
                name: 'Edge',
                y: ${edge.edge}
            }, {
                name: 'Opera',
                y: ${opera.opera}
            }, {
                name: '기타',
                y: ${other.other}
            }
        ]
    }]
});


/* HTML */
<h3>접속 브라우저</h3> 
<div id="browser_graph"></div>

 

cs

Spring Controller에서 Model 또는 ModelAndView에 담은 값들을 그래프의 속성 값에 EL 식으로 사용 가능하다. 몇몇 프로젝트나 이클립스에서는 EL 식에서 빨간 줄이 뜨는데 에러 도안 뜨고 아무 상관없다.
결과

색깔도 마음대로 정할 수 있고 웹페이지 최초 접속 시 애니메이션도 부드럽고 이쁘다.

상당히 많은 그래프, 차트가 있어서 유용하게 쓸 수 있는 그래프 API HighCharts!!

~~즐겁지 않은~~ 즐거운 코딩 하시길....

[DB] MySQL8.x 외부 접속 허용 하는 방법

우리마 — Wed, 2 Sep 2020 15:11:51 +0900

백앤드 개발을 하다보면 DB서버를 외부에서 접속해서 데이터 조작 및 조회를 해야 하는 경우가 있다. 물론 SSH로 서버에 원격으로 접속해서 mysql 프롬포트에서 sql문을 입력해도 되지만 자동완성도 안될뿐더러 상당히 불편한 점이 많다.

따라서 로컬에서 DBeaver, SQLyog등 DB툴을 이용해 접속 해서 SQL문을 조작 해야겠다는 생각이들 것이다.

이때 본인의 로컬IP가 DB서버로 접근하는 것을 허용하지 않았을때 본인 로컬IP의 접근을 허용 해주는 방법을 소개한다.

조건

1. 서버의 root권한 또는 sudo 명령어 권한이 있어야 된다.

2. DB의 root 계정 접속이 가능하거나 DB에 접속할 수 있는 사용자에게 mysql 스키마 조작 권한이 있어야된다.

본인 로컬IP 추가, 권한 부여

1. 서버DB에 서버의 root권한으로 접속한다

$ sudo mysql -uroot -p

2. mysql 스키마 접속 후 user테이블 확인

mysql> use mysql;

mysql> select host, user from user;

사람마다 다를 수도 있겠지만 보통 서버입장에서 로컬(서버 자신)에 대해서만 허용이 되어 있다.

3. 본인 IP 추가

본인의 로컬에서 원격으로 접속할 계정를 따로 생성해서 IP를 추가 해도되고 root 계정을 사용한다면 root계정에 IP를 추가 해도 된다. 필자는 계정을 새로 만들었다.

mysql> create user 'root또는 원하는계정'@'본인IP' identified by '비밀번호';

여기서 본인IP를 공유기또는 스위치 와 같이 할당된 IP를 적는 것이 아니라 본인 컴퓨터의 진짜IP 즉, 공인IP를 입력해야된다. 공인IP는 네이버에 검색하면 바로 나온다.

* 주의 CMD에서 ipconfig/all 해서 나오는 IP아닙니다!

4. IP 접근 권한 허용

mysql> grant all privileges on *.* to 'root또는 원하는계정'@'본인IP';

5. 변경 사항 적용

mysql> flush privileges;

이렇게 하고 나서 DB 툴에서 접속을 시도 하면

Unable to load authentication plugin 'caching_sha2_password'.

이런 오류가 뜰수도 있다.

계정을 root로 추가 헀을때는 잘 모르겠는데 필자는 원격으로 접속할 계정을 추가해서 그럴지도 모르곘다.

저 오류는 패스워드 설정을 평문으로 입력해서 그런것이다 즉, 암호화가 되지 않았다는 것이다.

따라서 DB서버 mysql 스키마에 접속해서 아래와 같이 입력해주면 된다.

mysql > ALTER USER 계정명@본인IP IDENTIFIED WITH mysql_native_password BY '비밀번호';

[Spring]페이징 처리 EgovFramework Paginationinfo 사용하기( JSP, Controller)

우리마 — Tue, 21 Jul 2020 16:30:23 +0900

안녕하세요. 지난 글에 이어서 egovFramework에서 PaginationInfo를 사용한 게시판 페이징 처리를 이어갈게요.

필요한 파일, bean등록 등은 지난 글을 참고해주세요.

https://onecutwook.tistory.com/19

[Spring]페이징 처리 EgovFramework Paginationinfo 사용하기( 설정)

안녕하세요. Spring 환경에서 전자정부 프레임워크에서 제공하는 PaginationInfo를 사용해서 게시판 페이징 처리를 해볼 거예요. 먼저 전자정부 프레임워크의 라이브러리(패키지)를 추가해 줘야 됩니

onecutwook.tistory.com

Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

/* 게시글 조회,페이징 */
    @RequestMapping("/community")
    public String webDevCommunity(@RequestParam Map<String,Object> commandMap, Model model, HttpSession session, HttpServletRequest request) {
        PaginationInfo paginationInfo = new PaginationInfo();
        int pageNo = 1; //현재 페이지 번호
        int listScale = 10; // 한 페이지에 나올 글 수
        int pageScale = 5; // 페이지 개수
        try {
            if(commandMap.size() > 0) {
                pageNo = Integer.parseInt((String)commandMap.get("pageNo"));//현재 페이지 번호
            }
 
            paginationInfo.setCurrentPageNo(pageNo);
            paginationInfo.setRecordCountPerPage(listScale); 
            paginationInfo.setPageSize(pageScale); 
            
            int startPage = paginationInfo.getFirstRecordIndex(); //시작 페이지
            int lastPage = paginationInfo.getRecordCountPerPage(); //마지막 페이지
            
            commandMap.put("startPage", startPage);
            commandMap.put("lastPage", lastPage);
            
            int totalList = service.getCommunityTotal(commandMap); //전체 글 개수
            paginationInfo.setTotalRecordCount(totalList);
 
            
            List<Map<String,Object>> boardList = service.selectBoardList(commandMap); //커뮤니티 글 목록
 
            model.addAttribute("pageNo",pageNo);
            model.addAttribute("boardList",boardList);
            model.addAttribute("totalList",totalList);
            model.addAttribute("paginationInfo",paginationInfo);
        } catch (Exception e) {
            logger.debug(e.getMessage());
        }
        return "community";
    }
 

cs

무조건 필요한 변수 : 현재 페이지 번호(pageNo), 한 페이지에 나올 아이템 개수(listScale), 처음과 끝 사이 페이지의 개수(pageScale), 총 아이템 개수(totalList), 시작 페이지(startPage), 마지막 페이지(lastPage)

이 값들을 최초 접속 시에 JSP단에서 Controller로 넘겨줘야 됩니다. 그래서 Line15의 if문 안에서 commandMap으로 받은 값들을 가져오고 있습니다. if문은 저의 로직에 맞게 작성되어있으므로 본인의 로직에 맞게 코딩하시면 됩니다. 중요한 건 위 변수들을 paginationInfo객체의 메서드의 파라미터 값으로 넘겨줘야 된다는 겁니다.

시작 페이지와 마지막 페이지는 Line 22,23 에서 구할 수 있습니다. 이 값들을 commandMap에 담아서 SQL을 실행할 때 LIMIT 키워드에 써줘야 됩니다.

-- SQL

limit #{startPage},#{lastPage}

Line29에서 전체 글 개수를 가져와서 PaginationInfo에 넘겨줍니다. 이렇게 페이징 할 값을 만들고 Line 33에서 와 같이 Service를 타면서 아이템 목록을 가져옵니다. 그리고 접속한 현재 페이지에서 현재 페이지 값을 알고 다른 페이지로 갈 때 Controller로 넘겨줘야 되므로 model 객체를 사용해서 JSP단에서 EL 식으로 쓸 수 있도록 합니다.

JSP - community.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div class="paging">
  <ui:pagination paginationInfo="${paginationInfo}" type="image" jsFunction="linkPage"/>
</div>
 
<script type="text/javascript">
/* 페이징과 글 목록 조회  */
var currentPageNo = ${pageNo};
 
function linkPage(pageNo){
    location.href = "/community?pageNo=" + pageNo;
}
</script>
 

cs

Line 4: Controller에서 넘겨준 paginationInfo 객체를 paginationInfo속성에 EL식으로 적어 줍니다. jsFunction은 페이징을 실행할 javascript함수명을 적 주시면 됩니다.

Line 9 : 현재 페이지 번호를 전역 변수로 받습니다.

Line 12 : 저는 간단하게 location.href로 Controller를 호출해서 파라미터를 GET방식으로 넘깁니다. 또한 linkPage 함수에 파라미터로 pageNo를 받아야 합니다. 이것은 <ui:pagination paginationInfo="${paginationInfo}" type="image" jsFunction="linkPage"/> 여기서 페이지가 호출 되면서 해당 페이지의 값이 파라미터로 들어가게 됩니다. 그리고 호출 url 파라미터로 검색 조건, 한 페이지에 나올 아이템 개수 조절 등 다양한 파라미터를 함께 Controller에 넘겨서 처리하셔도 좋습니다.

이렇게 해서 Spring환경에서 EgovFramwork의 PaginationInfo객체를 사용한 페이징 처리의 기본을 알아 보았습니다. Service단과 SQL 등은 각자의 로직에 맞게 코딩하면 되기 때문에 따로 언급은 하지 않았습니다. div의 class 또한 저의 css이기 때문에 각자의 프로젝트에 맞게 디자인하시길 바랍니다. 중요한 건 현재 페이지 번호를 Controller와 JSP에서 알아야 된다는 거고, 시작 페이지와 마지막 페이지를 SQL에서 Limit키워드에 사용해야 된다는 겁니다.

~~즐겁지않은~~ 즐거운 코딩 하세요~

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72	/* Controller / //게시글 상세보기 detail @RequestMapping("/communityDetail") public String communityDetail(@RequestParam int idx, Model model,HttpServletRequest request,HttpServletResponse response, HttpSession session){ logger.info("request: /communityDetail"); Map<String,Object> resultMap = null; Map<String,Object> idxMap = new HashMap<>(); int bbsidx = idx; int useridx = 0; / 생략 / try { Map<String,Object> userInfo = (Map<String, Object>) session.getAttribute("userInfo"); useridx = Integer.parseInt(userInfo.get("idx").toString()); / 생략 / resultMap = service.communityDetail(bbsidx); // 게시판 상세정보 가져옴 idxMap.put("bbsidx", bbsidx); idxMap.put("useridx", useridx); Map<String,Object> likecheckMap = service.likecheck(idxMap); //like 테이블 에서 사용자가 해당 게시글에 대해서 좋아요를 눌렀는지 확인 if(likecheckMap == null) { //사용자가 좋아요를 한번도 누른적이 없으면 //like테이블에 데이터가 없으므로 null반환 model.addAttribute("likecheck",0); } else { model.addAttribute("likecheck",likecheckMap.get("likecheck")); } model.addAttribute("likecnt",resultMap.get("likecnt")); model.addAttribute("bbsidx",bbsidx); model.addAttribute("useridx",useridx); / 생략 / } catch (Exception e) { logger.debug(e.getMessage()); } return "communityDetail"; } / SQL.xml / <select id="communityDetail" resultType="map"> SELECT //생략 , bbs.likecnt as likecnt //생략 from training_bbs bbs where 1=1 and bbs.idx = #{idx} </select> <!-- 좋아요 눌렀는지 여부 확인 --> <select id="likecheck" resultType="map"> select likecheck from training_like where bbsidx=#{bbsidx} and useridx=#{useridx} </select> / communityDetail.jsp */ <c:choose> <c:when test="${likecheck eq '0' or empty likecheck}"> <!-- likecheck가0이면 빈하트--> <img src="/home/img/ico_like_before.png" id="btn_like" align="left" style="cursor:pointer; width: 20px;"> </c:when> <c:otherwise> <!-- likecheck가1이면 빨간 하트--> <img src="/home/img/ico_like_after.png" id="btn_like" align="left" style="cursor:pointer; width: 20px;"> </c:otherwise> </c:choose> <dd id="likecnt" style="margin-left:5px;">${likecnt}</dd> Colored by Color Scripter	cs