목록(2019) 사이드 프로젝트 (49)
공부한것들을 정리하는 블로그 입니다.
기본적인 로그인 및 게시판 출력 기능은, 이전에 진행했던 BoardWeb ((2019) 사이드 프로젝트/BoardWeb(게시판-MVC1,MVC2,스프링MVC) (28)) 에서 다루었으며 https://drsggg.tistory.com/category/%282019%29%20%EC%82%AC%EC%9D%B4%EB%93%9C%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8/BoardWeb%28%EA%B2%8C%EC%8B%9C%ED%8C%90-MVC1%2CMVC2%2C%EC%8A%A4%ED%94%84%EB%A7%81MVC%29 '(2019) 사이드 프로젝트/BoardWeb(게시판-MVC1,MVC2,스프링MVC)' 카테고리의 글 목록 공부한것들을 정리하는 블로그 입니다. drsggg.tis..
1. 지금까지의 개념 복습. Spring MVC 기반으로 개발된 프로그램의 구조/실행순서 - 브라우저에서 버튼이나 하이퍼링크를 클릭하여 서버에 요청을 전송하면 - 모든 요청을 서블릿 컨테이너가 생성한 DispatcherServlet 이 받고, 스프링 컨테이너가 생성한 Controller 에서 요청을 전달한다. - Controller 는 매개변수를 통해 전달된 DAO 객체를 이용하여 사용자가 요청한 로직을 처리한다. (작성중) 프레젠테이션 레이어와 비즈니서 레이어 통합(~p408) : https://github.com/cyh789/BoardWeb2_2019

1. @SessionAttributes 사용하기 - @SessionAttributes 는 수정 작업을 처리할 때 유용하게 사용할 수 있는 어노테이션이다. - @SessionAttributes 를 이용하여 특정 컬럼값이 null로 업데이트되지 않도록 처리 할 수 있다. - 실행결과, 클라이언트가 요청할때 따로 넘겨주지 않은 파라미터들이 모두 넘어오는 것을 확인 할 수 있다. ( ex) 넘겨주도록 명시한 파라미터 : title, content, / 넘겨주도록 명시하지 않은 파라미터 : writer, regDate, cnt ) - 클래스명 상단에 입력한 @SessionAttributes("board") 설정으로 인하여, Model에 "board"라는 이름으로 저장되는 데이터가 자동으로 세션(HttpSessio..

1. @RequestParam 사용하기 - Command 객체(VO)를 이용하면 클라이언트에서 넘겨준 요청 파라미터 정보를 받아낼 수 있다 - 하지만 이를 위해서는 반드시 요청 파라미터와 매핑될 변수와 Setter 메소드가 Command 클래스에 선언되어 있어야 한다. - 하지만 Command 객체에는 없는 파라미터를 Controller 클래스에서 사용해야 할 경우가 있다. - Spring MVC에서는 HTTP 요청 파라미터 정보를 추출하기 위한 @RequestParam을 제공한다. 2. @ModelAttribute 사용하기 - 매개변수에 사용되는 @ModelAttribute는 Command 객체(VO)의 이르믕ㄹ 변경 할 목적으로 사용 할 수 있다. - 메소드에 사용되는 @ModelAttribute는,..

1. Controller 통합하기 - 기존 Controller들 전부 삭제 - BoardController 신규 생성 package com.springbook.view.board; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import com.springbook.biz.board.BoardVO; import com.springbook.biz.board.impl.BoardDAO; @Controller /*@SessionAttributes("board")*/ public class Bo..

게시판 구조 변경 이유 : (Spring MVC 구조) -> (어노테이션 기반 MVC) - 스프링은 어노테이션 기반 설정을 제공함으로써 과도한 XML 설정으로 인한 문제를 해결한다. - Spring MVC도 스프링 설정파일에 HandlerMapping, Controller, ViewResolver 같은 여러 클래스를 등록해야 하므로 어노테이션 설정을 최대한 활용하여 XML 설정을 최소화 할 수 있다. 1. 스프링 설정파일에서 어노테이션 관련 설정을 해준다. - 스프링 설정파일에 으로 스프링 컨테이너가 컨트롤러 객체들을 자동으로 생성해주도록 수정한다. 2. WEB-INF 하위에 위치한 JSP 파일들의 위치를 src/main/webapp 폴더 밑으로 수정한다 - WEB-INF 하위 폴더 및 파일은 웹서버로 ..

1. 브라우저에서 도메인주소 또는 ip주소 입력 ( http://localhost:8080/biz/login.do ) 2. web.xml에서 *.do에 대해 servlet-name 'action'으로 SpringSpring FrameworkServlet 'DispatcherServlet' 실행 3. web.xml에서 설정해놓은 presentation-layer.xml에 진입, '/login.do'에 매핑된 엘리먼트 실행. 4. 엘리먼트의 경로로 지정되어있던 LoginController 실행 5. login.jsp 실행 ( url : http://localhost:8080/biz/login.jsp ) ** 참고 최초 커밋 : DAY03 까지 완료된 상태 : https://github.com/cyh789/B..
서론. 이전에 진행했던 [ 토이 프로젝트/(완료)(2019) BoardWeb - MVC1,MVC2 ] 에서는 MVC1 패턴, MVC2 패턴, MVC 프레임워크로 예제를 진행하였습니다. 이번에 진행되는 [ 토이 프로젝트/(진행중)(2019) BoardWeb2 - SpringMVC ] 에서는 위와 동일한 비즈니스 로직을 Spring MVC로 진행 할 예정입니다. 기존에 진행했던 실습과의 차이점은 스프링 프레임워크에서 제공하는 Servlet을 사용한다는 것입니다. 또한 실습하는 과정에서 기능이 추가 될 것입니다. 환경설정. (작성중) 깃헙. https://github.com/cyh789/BoardWeb2_2019
1. 동기 비동기 처리 - ajax는 기본적으로 비동기이므로 동기로 사용하려면 async : false 를 주는 것을 잊으면 안됨 - ajax의 succecss() 내부에 로직을 구현하여 대체하려고 할때 if(data != null) 이런식으로 구현하는 것은 의미가 없음 2. JAVA instance variable JSP를 호출하는 경우에는 jsp 내부의 instance variable 문제를 조심해야함. - 예를들어 db conn를 호출하는 경우 Connection, PreparedStatement, ResultSet 생명주기를 고려할 것 3. 호이스팅 함수 선언식(function 함수명(){}) 과 함수 표현식(var 함수명 = function(){}) 을 구분하여 사용 할 경우 호이스팅을 고려할 ..

파일저장 기능 설명 - HTML관리 페이지에서 - 출력되어있는 html의 내용을 수정 후 (1번째 라인에 "수정사항을 새로 입력해보겠습니다." 추가) - 파일저장 버튼을 클릭한다 - 파일저장 버튼 클릭시 jsp를 호출하기 때문에 화면이 새로고침된다 - 출력된 화면에서 수정된 사항이 확인되지 않는다 - 그 이유는 서버에서 리로드가 되지 않았기 때문이다(따로 설정 필요) - 지정된 파일이 존재하는 경로로 가서 파일을 직접 리로드해주자. 이클립스에서는 더블클릭으로 열거나 새로고침 해주면 된다. - 다시 도메인으로 가서 새로고침 해보면 바뀐 것을 확인 가능하다 - 이때 방법2만 수정사항이 적용 된 이유는 캐싱때문이다. - 자세한 사항은 이전 글을 참고바란다. 참고 : https://drsggg.tistory.c..

내맘대로 급하게 만든 코드라서 좀 지저분하다. 아마 구글링해보면 더 깔끔한 코드가 있지않을까 싶다. // 캐싱처리(날짜 timestamp) function autoCache(){ var d = new Date(); var s = leadingZero(d.getFullYear(), 4) + '-' + leadingZero(d.getMonth()+1, 2) + '-' + leadingZero(d.getDate(), 2) + '_' + leadingZero(d.getHours(), 2) + ':' + leadingZero(d.getMinutes(), 2) + ':' + leadingZero(d.getSeconds(), 2); return "?v=" + s; } // 캐싱처리(timestamp format) f..

불러오기 전 불러 온 후 방법1. XMLHttpRequest를 이용하는 방법(ActiveX) $(document).ready(function() { drawImageContainer(); $("#btnPrintHTML").trigger("click"); }); function startRequest() { createXMLHttpRequest(); var queryString = "uploadFile/sample.html"; // http://localhost:8080/biz/700_FileMngSys/result.txt 404 xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", queryString, true); xmlHttp.sen..
ie에서는 ie라고 팝업되고 ie 이외에는 chrome이라고 출력된다

손쉽게 구현 가능한 엑셀 다운로드 기능은 크게 2가지가 있습니다. 1. Java 대용량 엑셀 다운로드 2. JavaScript 엑셀 다운로드 1. Java 대용량 엑셀 다운로드는 POI 라이브러리 또는 JXLS 라이브러리를 이용하는 방법입니다. 자바에서 제공해주는 템플릿을 토대로 원하는 데이터를 엑셀 속성에 담아 다운로드 받을 수 있습니다. 참고 : https://ddoriya.tistory.com/entry/JXLS-POI-JAVA%EC%97%90%EC%84%9C-Excel-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EA%B5%AC%ED%98%84-%EB%B0%A9%EB%B2%95-%EB%B0%8F-%EC%A2%85%EB%A5%98-%EB%B9%84%EA%B5%90 2. Jav..

1. 먼저 그림을 클릭하면 해당 이미지가 hide 되도록 구현해보겠습니다 fileMngSys_admin.js $(document).ready(function() { draw_html_view_page(); draw_image_container(); fn_control_mouse(); $("#button1").click(function() { alert("버튼1을 누르셨습니다."); }); }); // html을 읽어서 사용자페이지에 출력 function draw_html_view_page() { var html_view_page = ""; html_view_page = 'uploadFile/sample.html'; $('td[id="html_view_page"]').load(html_view_page);..

이번 실습에서는 마우스 우클릭을 차단하는 기능을 구현해 보도록 하겠습니다. 마우스 우클릭 및 드래그 방지를 하기위해서는 css, javascript 로 다양하게 막을 수 있습니다. body 태그에 속성을 변경해서 우클릭, 드래그의 방지하도록 구현해보도록 하겠습니다. 1. body 태그에 속성을 변경 contextmenu="return false" 우클릭 방지 ondragstart="return false" 드래그 방지 onselectstart="return false" 선택 방지 테스트결과 우클릭, 드래그가 차단된 것을 확인할 수 있습니다. 하지만 javascript로 작성할 시 알툴바 등 특정 어플리케이션을 이용하면 우클릭금지가 해제될 수 있습니다. 따라서 jQuery를 이용한 소스로 변경해주도록 하겠..

이번 실습에서는 특정경로에 있는 파일명을 읽어오는 기능을 구현해보도록 하겠습니다. fileMngSys_admin.js DispatcherServlet.java admin_WebSourcePage.jsp admin_WebSourcePage.jsp 에서 EL/JSTL을 이용하여, 세션에 담겨진채 넘겨받은 데이터를 for문으로 출력해주면 됩니다. 하지만 이번 실습에서는 Ajax를 이용하여 동적으로 이미지를 로딩하도록 바로 구현해보도록 하겠습니다. fileMngSys_admin.js DispatcherServlet.java DispatcherServlet를 경유하도록 작성할 수도 있지만 이번 실습에서는 javascript단에서 처리하도록 구현할 것이므로 주석처리하도록 하겠습니다. image.json admin_..

이번 실습에서는 파일 다운로드 기능을 구현해보도록 하겠습니다. 프로젝트 경로 file_download.jsp

이전 실습에서 업로드 한 파일을 사용자 페이지에 마크업하여 출력해주는 기능을 구현하도록 하겠습니다. fileMngSys_admin.js admin_WebSourcePage.jsp 출력화면 정상적으로 출력되는 모습을 확인 가능합니다.

이번 실습에서는 파일 업로드 기능을 구현해보도록 하겠습니다. 이전에 포스트한 1. 파일 업로드 기능 : 환경설정 (https://drsggg.tistory.com/279) 이 제대로 되었다는 전제하에 진행하도록 하겠습니다. 먼저 출력화면 캡처를 보고 기능을 이해하고 넘어가도록 하겠습니다. 출력화면 캡처 : 관리자용 페이지와 사용자용 페이지로 나뉩니다. 1. 관리자용 페이지 및 기능 - 파일업로드 버튼을 클릭 : 특정 경로에 로컬파일을 업로드 - 파일다운로드 버튼을 클릭 : 로컬폴더에 해당파일을 다운로드 2. 사용자 출력화면 - 업로드 된 HTML/CSS/IMAGE 파일이 하단의 HTML VIEW PAGE에서 마크업되어 사용자에게 보여짐 프로젝트 경로 admin_WebSourcePage.jsp Dispat..