'분류 전체보기' 카테고리의 글 목록 (4 Page)

Web 을 개발하다보면 웹페이지 Loading 이 느린 경우가 있습니다.

특히 무거운 Plugin 이 있다거나 로직이 복잡한 부분에서 프로세스가 오래 걸리는 경우가 있는죠.

HttpWatch 프로그램으로 어느 부분에서 지연이 되는지 확인이 가능합니다.

https://www.httpwatch.com/

사이트에서 Basic Edition (Free) 버전을 받아서 설치하면 간단하게 Http 모니터링은 준비 끝.

설치가 끝났으면 Internet Explorer 를 실행해 봅니다.

그리고 [ 도구 ] 메뉴에 들어가면 HttpWatch Basic 이라고 메뉴가 추가된 것을 실행합니다.

실행하면 F12 키를 눌렀을 때 나오는 개발자 도구와 같은 창이 뜹니다.

이 화면에서 웹페이지가 로딩될 때 걸리는 시간과 함께 요청된 http url 주소가 표시가 됩니다.

Record 버튼을 눌러서 웹페이지를 이동하거나 F5 키를 눌러주면 아래와 같은 화면을 볼 수 있을 것입니다.

'Develop > Tool' 카테고리의 다른 글

WinHTTrack Website Copier (웹페이지 전체 저장하기) (1)	2016.03.07
[Github 연동] Github(깃허브) 와 이클립스 연동하기 (0)	2016.01.02
[Github 연동] Github(깃허브) 가입하기 (0)	2016.01.01

이번에 소개하는 jQuery Plugin 은 Dynatree.js 입니다.

트리 구조로 표현할 때 직접 구현하기 보다는 데이터만 트리구조로 해놓은 뒤 Plugin 을 이용하여 데이터 트리를 표현하는게 일반적입니다.

오픈 소스가 정말 많아서 이런저런 Tree Plugin 을 사용해봤지만 가장 좋았던 것은 Dynatree.js plugin 였습니다.

대부분의 트리 구조는 비슷하다. Json 데이터 또는 html 의 <li> 태그 등을 이용하여 트리 구조를 그리는게 대부분의 방식입니다.

Dynatree 도 마찬가지로 다양한 방법을 제공합니다.

Sample 들은 아래의 사이트에서 확인 가능합니다.

http://wwwendt.de/tech/dynatree/doc/samples.html

Dynatree 가 좋았던 점은 다양한 방법으로 Tree 를 그리기가 쉽습니다.

Sample 중 몇 개의 소스를 소개하도록 하겠습니다.

1. <li> 태그를 이용하여 트리구조 그리기

<div id="tree">
    <ul id="treeData" style="display: none;">
      <li id="id1" title="Look, a tool tip!">item1 with key and tooltip
      <li id="id2">item2
      <li id="id3" class="folder">Folder with some children
        <ul>
          <li id="id3.1">Sub-item 3.1
            <ul>
              <li id="id3.1.1">Sub-item 3.1.1
              <li id="id3.1.2">Sub-item 3.1.2
            </ul>
          <li id="id3.2">Sub-item 3.2
            <ul>
              <li id="id3.2.1">Sub-item 3.2.1
              <li id="id3.2.2">Sub-item 3.2.2
            </ul>
        </ul>
      <li id="id4" class="expanded">Document with some children (expanded on init)
        <ul>
          <li id="id4.1"  class="active focused">Sub-item 4.1 (active and focus on init)
            <ul>
              <li id="id4.1.1">Sub-item 4.1.1
              <li id="id4.1.2">Sub-item 4.1.2
            </ul>
          <li id="id4.2">Sub-item 4.2
            <ul>
              <li id="id4.2.1">Sub-item 4.2.1
              <li id="id4.2.2">Sub-item 4.2.2
            </ul>
        </ul>
    </ul>
  </div>

이런 방법으로 <li> 태그를 이용하여 화면에서 직접 컨트롤하여 Tree 구조를 그려도 됩니다.

하지만 이 방법으로 하게되면 화면이 많이 복잡해 질 수가 있어 추천하지 않습니다.

트리구조가 바뀌지 않는 데이터라면 간단하게 하드코딩으로 이렇게 해서 써도 괜찮을 것입니다.

2. javascript 에서 ajax 로 Json 데이터를 받아 그리기

아래와 같이 Server Side 에서 Json 데이터를 구현만 해주면됩니다.

처음 Tree 가 호출되었을 때 Ajax 로 호출하여 그리는 방식입니다.

Server Side 에서 트리구조 Json 데이터 리스트를 가져올 수 있도록 구현을 하면 됩니다.

보통 이런 경우 Server Side 에서 쿼리로 재귀쿼리로 Tree 구조를 가져온뒤 Dynatree Json 타입에 맞게 만들어 넘기면 됩니다.

3. lazy loading 방식으로 그리기

$(function(){

// --- Initialize sample trees
    $("#tree").dynatree({
      title: "Lazy loading sample",
      fx: { height: "toggle", duration: 200 },
      autoFocus: false, // Set focus to first child, when expanding or lazy-loading.
      // In real life we would call a URL on the server like this:
//          initAjax: {
//              url: "/getTopLevelNodesAsJson",
//              data: { mode: "funnyMode" }
//              },
      // .. but here we use a local file instead:
      initAjax: {
        url: "sample-data3.json"
        },

onActivate: function(node) {
        $("#echoActive").text("" + node + " (" + node.getKeyPath()+ ")");
      },

onLazyRead: function(node){
        // In real life we would call something like this:
//              node.appendAjax({
//                  url: "/getChildrenAsJson",
//                data: {key: node.data.key,
//                       mode: "funnyMode"
//                         }
//              });
        // .. but here we use a local file instead:
        node.appendAjax({
          url: "sample-data2.json",
          // We don't want the next line in production code:
          debugLazyDelay: 750
        });
      }
    });
    $("#btnReloadActive").click(function(){
      var node = $("#tree").dynatree("getActiveNode");
      if( node && node.isLazy() ){
        node.reloadChildren(function(node, isOk){
        });
      }else{
        alert("Please activate a lazy node first.");
      }
     });
    $("#btnLoadKeyPath").click(function(){
      var tree = $("#tree").dynatree("getTree");
      // Make sure that node #_27 is loaded, by traversing the parents.
      // The callback is executed for every node as we go:
      tree.loadKeyPath("/folder4/_23/_26/_27", function(node, status){
        if(status == "loaded") {
          // 'node' is a parent that was just traversed.
          // If we call expand() here, then all nodes will be expanded
          // as we go
          node.expand();
        }else if(status == "ok") {
          // 'node' is the end node of our path.
          // If we call activate() or makeVisible() here, then the
          // whole branch will be exoanded now
          node.activate();
        }
      });
     });
    
  });

lazy loading 방식은 간단히 모든 Tree 구조데이터를 한번에 가져오는게 아니라 Tree 의 Children 을 실시간으로 가져오는 방식입니다.

2번째 방식인 ajax로 json 데이터를 가져오는 것은 같지만 처음에 전체 데이터가 아닌 큰 구조의 데이터라던지 부모 데이터만 가져온 뒤에 살을 붙입니다.

Ajax 로 실시간으로 해당 Node 의 Children 만가져오도록 구현을 하면 되기 때문에

재귀쿼리로 Tree 전체를 만들어야되는 복잡도가 줄어들기때문에 괜찮은 방법입니다.

이번 프로젝트에서도 2번째 방법으로 개발을 하다가 3번째 방법인 lazy Loading 방식으로 변경하였더니 소스가 간결해 져서 좋았습니다.

실제로 부모 Node를 가져온 뒤 클릭할때마다 Node 의 Children 만 가져와서 붙이기때문에 쿼리도 더 간단해졌습니다.

3번째 방법이 가장 좋은 것은 아니다. 상황에 따라 필요한 방식으로 개발을 하는게 제일 좋습니다.

'Develop > jQuery' 카테고리의 다른 글

jQuery DataTables Plugin (0)	2015.11.24
jQuery Validation Plugin (0)	2015.11.23

Spring Tools Suite 를 받아서 설치하여 기본적인 Spring Project 를 생성하여 Tomcat 으로 구동하기의 과정을 살펴보겠습니다.

전에는 이클립스에서 Spring을 받는 방식으로 사용을 했지만 요즘은 Spring Tools Suite (STS) 라고 아예 Import 되어 나옵니다.

아래의 사이트에서 직접 다운로드를 받으면 됩니다.

https://spring.io/tools

다운로드를 받고 압축을 풉니다.

zip 파일안에는 내가 압축을 푼 폴더 외에 다른 폴더가 있지만 필요가 없어 아래의 STS 폴더만 압축을 해제하였습니다.

STS 파일을 실행합니다.

그 후 원하는 위치에 workspace 를 잡아주고 확인을 눌러줍니다.

신규 프로젝트 생성하기 위하여 상단 메뉴의 File -> New -> Spring Project 를 선택 해줍니다.

Spring project 의 여러 타입 중 기본 MVC Project 로 생성을 해줍니다.

MVC Project 에서 top level Package 설정 부분이다. 설정에 의해서 1단계, 2단계, 3단계 등을 설정이 가능하며 기본으로는 최소 3단계로 되어있습니다.

원하는 package 명으로 입력합니다.

Spring 관련 Lib 를 온라인으로 다운받느라 시간이 조금 걸리니 조금만 기다려주면 아래와 같이 기본 틀로 Spring project 가 생성이 됩니다.

MVC 모델로 기본 세팅되어 생성이 되며 log4j.xml 과 servlet-context.xml 등 바로 웹이 구동 될 수 있도록 세팅이 됩니다.

그럼 바로 웹을 구동합니다.

웹을 구동하기 위하여 많이 사용하는 Apache Tomcat 을 다운로드 받습니다.

링크는 8버전으로 해두었으며 32bit 또는 64bit 로 개인 PC의 OS 에 맞는 버전으로 zip 파일을 받습니다.

http://tomcat.apache.org/download-80.cgi

그리고 다운받은 Tomcat을 압축해제하여 풀어줍니다.

STS로 돌아와 압축 푼 Tomcat 의 설정을 잡아준다. Window -> Preferences 로 이동합니다.

Server -> Runtime Environments 로 이동하여 새로 추가하기 위하여 Add 를 눌러줍니다.

우리가 다운받은 건 8버전이기 때문에 Tomcat 8버전을 선택해줍니다.

Browse 를 눌러서 설치했던 Tomcat 의 위치를 잡아줍니다.

그리고 마지막으로 저장을 해줍니다.

여기까지가 Tomcat 환경만 잡아 준 것이고 실제로 Server 를 추가해 주어야합니다.

Server 를 생성하기 위하여 탑메뉴의 File -> New -> Other 을 선택합니다.

그리고 Server 폴더의 Server 를 선택해줍니다.

우리가 환경을 잡아준 Tomcat 8 버전을 선택해줍니다.

그러면 자동으로 우리가 등록한 Tomcat 환경이 잡히는 것을 볼 수 있습니다.

마지막으로 저장하여 Server 를 등록합니다.

이렇게 서버가 정상적으로 환경 파일과 함께 등록된 것을 볼 수 있습니다.

등록된 Server 에 프로젝트를 등록하기 위하여 오른쪽 클릭하여 Add and Remove 를 선택합니다.

Spring Project 를 선택하여 Add 버튼 또는 더블클릭을 하여 서버에 Import 해줍니다.

Tomcat 서버를 시작을 해줍니다.

Windows 보안 경고창이 뜨며녀 확인을 눌러 방화벽에 액세스 허용을 해줍니다.

URL에 Tomcat 8080 포트와 함께 입력하여 들어가면 정상적으로 Hello world 가 출력되는 것을 볼수있습니다.

만약 Contextpath를 알 수 없어서 확인이 필요하다면 아래와 같은 방법으로 확인이 가능하며 수정도 가능합니다.

Tomcat Server 에 Spring Project 를 import 하게되면 보통 Project 명에 따라 자동으로 ContextPath가 생성이 됩니다.

ContextPath 의 경우 server.xml 에서 확인이 가능합니다.

해당 코드의 path 부분입니다.

또한 Spring Project 에 우클릭하여 Properties -> Web Project Settings 에 들어가면 현재 Context root 명을 알수 있습니다.

'Develop > Spring' 카테고리의 다른 글

aop 사용 방법 (0)	2023.02.22
[Mybatis] insert 하고 seq key 값 가져오기 (0)	2015.12.17
Spring File Download (0)	2015.11.23

이번에 소개 하는 jQuery Plugin 은 DataTables 라는 Grid 종류의 라이브러리입니다.

보통 개발할 때 데이터 리스트 출력 시 반복문으로 <tr><td>데이터</td><tr> 방법으로 출력을 많이 하게됩니다.

특별히 Grid 를 사용하지 않는 경우 html Tag 안에서 처리하는 경우가 많습니다.

이러한 방법으로 개발을 한다고해서 잘못된 코딩방법도 아니고 잘못 짜여진 소스도 아닙니다.

단지 리스트 출력 외에 여러 부가적인 기능들을 직접 코딩하여 개발을 하려면 시간도 많이 걸리고 디버깅도 쉽지가 않습니다.

에를 들어 Multi Sorting 이나 Paging 처리 라던지 직접 구현하려면 그만큼 시간도 듭니다.

하지만 괜찮은 Plugin 하나를 잘 알고 쉽게 다룰줄 안다면 쉽게 구현이 가능합니다.

그래서 이번에 사용해본 DataTables 같은 경우 많은 기능도 있고 특히 예제와 설명이 잘되어있어 사용하기 편리합니다.

https://www.datatables.net/

아래는 프로젝트에서 직접 개발했던 코드입니다.

코드를 간략하게 설명하자면 HTML 코드 부분은 단순하게 데이터 리스트의 컬럼과 위치만 잡는 역활을 하며

실제 데이터 출력은 javascript 부분의 ajax 함수에서 Json으로 가져와 리스트를 출력하게 됩니다.

Column 별로 rendering을 직접 구현도 가능하며 데이터 값에 따라 버튼의 유무 표현을 쉽게 할 수 있습니다.

1.Javascript 코드

dataTable = $('#dataTable').DataTable({
    "order": [[ 5, "desc" ]],
    "columns": 
        [
            {
                "searchable": false,
                "orderable": false,
                "data":null,
                "render":function(data,type,full,meta){
                    if(full.pds_event == "Stop" || full.pds_event == "Collect"){
                        return "";
                    }else{
                        return "<button class='btn btn-block btn-info btn-sm' id='pdsSelect'> 선택</button>";
                    }
                }
            },
            {data: "pds_key"},
            {
                data: "pds_event",
                render:function(data,type,full,meta){
                    var returnStr = "";
                    switch (data){
                        case "Start":
                            returnStr = "<span class=\"label label-success\">Start</span>";
                            break;
                        case "Stop":
                            returnStr = "<span class=\"label label-danger\">Stop</span>";
                            break;
                        case "Pause":
                            returnStr = "<span class=\"label label-default\">Pause</span>";
                            break;
                        case "UnPause":
                            returnStr = "<span class=\"label label-warning\">UnPause</span>";
                            break;
                        case "Collect":
                            returnStr = "<span class=\"label label-danger\">Collect</span>";
                            break;
                        case "Ready":
                            returnStr = "<span class=\"label label-info\">Ready</span>";
                            break;
                        default : 
                            returnStr = data;
                            break;
                    }
                    
                    return returnStr;
                }
            },
            {
                data: "pds_users_cnt",
                render:function(data,type,full,meta){
                    if(data == 0){
                        return "0 명";
                    }else{
                        return "<button class='btn btn-block btn-default btn-sm' id='pdsUsers'> "+data+" 명</button>";
                    }
                    
                }
            },
            {
                data: "pds_cid",
                "render":function(data,type,full,meta){
                    if(data == null){
                        return data;
                    }else{
                        return phone_format(data);
                    }
                    
                }
            },
            {data: "dt_frt"},
            {
                data: "totalCnt",
                render:function(data,type,full,meta){
                    if(data == 0){
                        return " 0 ";
                    }else{
                        return "<button class='btn btn-block btn-default btn-sm' id='pdsTarget'> "+data+" </button>";
                    }
                    
                }
            },
            {
                data: "processCnt",
                render:function(data,type,full,meta){
                    if(data == 0){
                        return " 0 ";
                    }else{
                        return "<button class='btn btn-block btn-default btn-sm' id='pdsProcess'> "+data+" </button>";
                    }
                    
                }
            },
            {
                "searchable": false,
                "orderable": false,
                "data":null,
                render:function(data,type,full,meta){
                    if(full.pds_event == "Stop" || full.pds_event == "Collect"){
                        return "";
                    }else{
                        return "<button type='button' class='btn btn-info btn-sm' id='pdsTargetCollect'> 고객회수</button>";
                    }
                    
                }
            },
        ],
    "ajax" : {
        url : "/pds/getPdsList",
        type : "POST",
        data : function(d){
            d.searchStartDate         = dateRangeFormat($("#searchDate").val()).getStartDate();
            d.searchEndDate         = dateRangeFormat($("#searchDate").val()).getEndDate();
        }
    }
});

2. HTML 코드

'Develop > jQuery' 카테고리의 다른 글

jQuery dynatree plugin (트리구조 라이브러리) (0)	2015.11.24
jQuery Validation Plugin (0)	2015.11.23

이번에 eBay에서 정말 저렴하게 고글을 하나 구매하게 됬습니다.

저는 이미 루디 변색 고글이 있지만 가격이... 안 살수가 없었습니다. ㅋㅋㅋ

보통 UVEX 104 변색 고글을 구매하려면 국내에서 아마 25~28 만원정도 되는 것으로 알고 있습니다.

그리고 Amazon 또는 eBay 에서 싸게 산다고 해도 15만원정도이구요.

그런데 독일 eBay에서 진짜 92.99 유료에 올라온게 있더군요!!!

달러로 하면 약 100달러 정도. 한화로는 한 12만원??? 그냥 사버렸습니다. ㅋㅋㅋ

제 생각에는 아마 재고정리지 않았을까 생각이 됩니다.

저는 이미 변색 고글 중에서 제일 좋다는 루디 변색 고글을 사용하고 있습니다.

그리고 고글은 루디밖에 없어서 비교 할 대상이 루디 밖에 없네요.

UVEX 104 고글을 처음에 딱 써봤을 때 느낌은 한가지입니다.

시야가 정말 넓다.

루디 고글을 약 1년정도 사용하면서 크게 불편한 느낌은 없었지만 이 고글을 쓰고 바로 느끼는 점은 정말 넓습니다.

아마도 루디 고글 보다 렌즈가 좀 더 크고 렌즈 자체가 하나로 되어있어 그런듯 싶습니다.

그리고 고글 안경테도 더 큰 줄 알았는데 그냥 루디랑 비슷하네요.

루디와 같이 사진을 찍어봤습니다.

두개를 비교한 사진을 보면 가로 길이는 큰 차이가 없지만 세로가 확실히 UVEX 104 가 조금 더 깁니다.

그리고 렌즈가 일체형과 분리형은 썼을 때 시야에 큰 차이가 느껴집니다.

그리고 흰색이 이쁩니다.

전에 타전 캐논데일 캐드8의 경우 노란색이라 루디를 노란색으로 구매를 했는데 생각보다 내 얼굴에는 잘 안어울렸던 것 같습니다.

그리고 고글의 안경테가 루디에 비해 좀 더 두꺼워서 그런지 머리가 큰 저에게 고글이 작다는 느낌은 들지 않습니다. ㅋㅋㅋ

가장 중요한 변색이 남았는데...

이게 사실 제가 막눈이다 보니까 큰 차이를 잘 못느끼겠습니다.

다만 좀 느껴지는건 변색 시 색이 짙어지는건 루디가 더 검게 변하는 것 같네요.

루디 변색이 최상급이라고는 하는데 제 눈에는 UVEX 104 가 좀 더 편하게 느껴집니다.

'Cycle > Item' 카테고리의 다른 글

dhb Short Sleeve Seamless Base Layer (이너 웨어) (0)	2015.11.28
dhb Classic Roubaix Bib Tights (기모 빕) (0)	2015.11.28
dhb Aeron Roubaix Long Sleeve Jersey (기모 저지) (0)	2015.11.28
위글(Wiggle) 블프 직구 (0)	2015.11.27
루디 프로젝트 라이돈 impact X2 변색 고글 (0)	2015.11.26

jQuery Plugin 중에 이름 그대로 validation 기능을 하는 plugin 입니다.

특히 사용자 등록, 수정 또는 검색 조건 입력 부분과 같이 사용자가 입력하는 부분에 validation 체크와 함께 메세지를 편리하게 사용 가능합니다.

장점은 역시 가독성이 좋고 정규화 되어있기 때문에 편리합니다.

특히 if else, for, switch 등등 소스가 정신없이 되어있지만 jQuery Validation Plugin 쓰면 깔끔해서 좋습니다.

사용법은 아래 링크에 들어가면 예제와 함께 금방 익힐 수 있습니다.

http://jqueryvalidation.org/

$("#formMemberAdd").validate({
    rules: {
        memId : {
            required : true,
            rangelength: [4, 12],
            remote : {
                url : "/config/getMemberValidate",
                type : "POST",
                data : {
                    memId : function(){
                        return $("#memId").val();
                    }
                }
            }
        },
        memName : {
            required : true
        },
        memInterphone : {
            required : true,
            digits : true
        },
        grpName : {
            required : true
        },
        memPasswd : {
            required : true,
            rangelength: [8, 32]
        },
        confirm_memPasswd: {
            required: true,
            equalTo: "#memPasswd"
        }
    },
    messages:{
        memId : {
            required : "아이디는 필수 항목 입니다.",
            rangelength: $.validator.format("아이디는 최소 {0}자 이상 {1}자 이하로 입력하세요."),
            remote : "이미 등록된 아이디입니다."
        },
        memName : {
            required : "이름은 필수 항목 입니다."
        },
        memInterphone : {
            required : "내선번호는 필수 항목 입니다.",
            digits : "숫자로 입력해주세요."
        },
        grpName : {
            required : "조직은 필수 항목 입니다."
        },
        memPasswd : {
            required : "비밀번호는 필수 항목입니다.",
            rangelength: $.validator.format("비밀번호는 최소 {0}자 이상 {1}자 이하로 입력하세요.")
        },
        confirm_memPasswd : {
            required : "비밀번호 확인은 필수 항목 입니다.",
            equalTo : "비밀번호가 맞지 않습니다."
        }
    },
    errorLabelContainer:$("#error_ul"),
    wrapper: 'li',
    highlight: function (element) {
        $(element).parent().addClass('has-error')
    },
    unhighlight: function (element) {
        $(element).parent().removeClass('has-error')
    }
});

'Develop > jQuery' 카테고리의 다른 글

jQuery dynatree plugin (트리구조 라이브러리) (0)	2015.11.24
jQuery DataTables Plugin (0)	2015.11.24

이클립스에서 Tomcat 을 구동하려고 하는데 에러가 날 경우가 있습니다.

"The specified JRE installation does not exist"

이런 오류가 나는 이유는 Tomcat 이 JRE 를 찾지 못해서 나는 경우입니다.

Tomcat Server 의 JRE만 재세팅해주면 됩니다.

보통 개발자는 CSS 또는, Image 를 만들거나, 수정하거나 할 일이 거의 없습니다.

특히 디자이너가 없을 경우 Web 개발 시 디자인을 수정하거나 추가할 경우 난감할 경우들이 있죠.

그래서 보통 jQuery UI 으로 많이 사용한다. jQuery UI도 좋지만 좀더 폭 넓게 다양한 UI 적 요소가 필요할 경우가 있습니다.

그래서 저같은 경우에는 UI Framework 를 주로 사용합니다.

UI Framework 같은경우 가장 큰 장점은 전체적인 UI 부분을 대부분 제공한다고 보면됩니다.

아이콘부터 시작해서 전체적인 화면의 틀을 제공합니다..

그래서 화면이 디자이너가 만든 것처럼 괜찮습니다.

저의 경우에는 이번 프로젝트에 예전에 써먹어봐야지 하던 Bootstrap을 사용했습니다.

Bootstrap 의 경우 대략적으로 샘플만 몇개봐도 디자인이 이쁩니다.

특히 개발자 입장에서 Bootstrap 사용하기가 참 편한게 Grid 라는 시스템이 너무 좋습니다.

Grid System 을 간략히 설명하자면 총 12개의 칸으로 나누어 class 로 칸을 나누어 쓰는 시스템입니다.

이게 편한 이유가 사용자 등록 화면이라던지 조회 화면의 입력 부분들을 나누기가 정말 편합니다.

Boostrap 에는 이러한 기능들 말고도 다양한 기능들이 많이 있습니다.

http://getbootstrap.com/ 직접 들어가서 한번 예제만 간단히 보면 쉽게 이해하실수 있습니다.

Bootstrap을 완벽히 잘 알지는 못하지만 이러한 Bootstrap을 가지고 만든 UI Framework 가 바로 AdminLTE 입니다.

Bootstrap + DataTables + DatePicker 등등 여러가지 플러그인을 조합해서 하나의 커다란 툴을 만들었습니다.

특히 이번에 소개하는 AdminLTE의 경우 이름처럼 관리자 화면에 맞게 그래프라던지 화면 구조가 참 잘되어 있습니다.

직접 들어가서 확인해 보시죠. https://almsaeedstudio.com/preview

처음에는 모르는 상태에서 이 툴을 사용하려고 하면 복잡하게 느껴질 것입니다.

하지만 조금만 건들여보고 테스트해보고 익혀둔다면 디자이너가 없는 프로젝트나 개인 프로젝트에서 충분히 좋은 UI Framework 가 될 것입니다.

로그인 화면부터 메뉴구성, 화면 구성 등 대부분이 다 구현되있어 정말 바로 개발해도 됩니다.

그리고 가장 중요한 오픈 소스이니 걱정하지 말고 쓰면 됩니다!!

'Develop > UI' 카테고리의 다른 글

[HTML] table 에 크로스 라인 넣기 (0)	2015.12.16
[Bootstrap] CSS - Button (버튼 디자인 하기) (0)	2015.11.30
[Bootstrap] CSS - Tables (테이블 디자인 하기) (0)	2015.11.30
[Bootstrap] CSS - Grid System (화면 나누기) (0)	2015.11.30
Bootstrap 소개 (0)	2015.11.27

Spring Framework 에서 File download 를 쉽게 구현이 가능합니다.

파일 다운로드를 구현하는 방법은 다양하지만 Spring 을 사용 중이라면 Servlet 세팅만으로 쉽게 가능합니다.

전체적인 로직은 파일 다운로드 URL 요청 시 해당 파일을 찾아 JSP 페이지가 아닌 Class 로 구현된 View 로 연결하여 Stream으로 요청한 Client 쪽으로 전달합니다.

해당 파일 다운로드 View만 구현해 놓으면 간단하게 파일 다운로드가 필요한 곳에서 호출만 해주면 됩니다.

1. dispatcher-servlet.xml 파일에 bean 등록

2. view 역활을 대신 할 class를 생성

public class FileDownloadView extends AbstractView{
    
    public FileDownloadView(){
        //content type을 지정. 
        setContentType("apllication/download; charset=utf-8");
    }
        
    @Override
    protected void renderMergedOutputModel(Map<String, Object> model,
            HttpServletRequest req, HttpServletResponse res) throws Exception {
        // TODO Auto-generated method stub
        
        
        File file = (File) model.get("downloadFile");
        
        res.setContentType(getContentType());
        res.setContentLength((int) file.length());
        res.setHeader("Content-Disposition", "attachment; filename=\"" + 
                java.net.URLEncoder.encode(file.getName(), "utf-8") + "\";");
        res.setHeader("Content-Transfer-Encoding", "binary");
        
        OutputStream out = res.getOutputStream();
        FileInputStream fis = null;
        
        try {
            
            fis = new FileInputStream(file);
            FileCopyUtils.copy(fis, out);
            
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if(fis != null) {
                try { 
                    fis.close(); 
                }catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        
        out.flush();
    }
}

3. 파일 다운로드 요청 URL에서 생성한 View로 전달

'Develop > Spring' 카테고리의 다른 글

aop 사용 방법 (0)	2023.02.22
[Mybatis] insert 하고 seq key 값 가져오기 (0)	2015.12.17
STS 설치 및 Spring Project 만들기 (0)	2015.11.24

Java에서 제공하는 HttpURLConnection 으로 Http 연결이 가능합니다.

http 연결이라고 하면 간단히 우리가 인터넷 익스플로러나 크롬과 같이 웹에서 요청하는 것과 같이 Java 에서 요청합니다.

기본적으로 GET 방식과 POST 방식 둘다 가능하며 예제 소스는 "GET" 방식만 넣어두었습니다.

우리가 javascript 또는 jQuery 에서 GET 방식 호출하듯이 동일하게 URL 뒤에 파라미터를 붙여서 전송하게 됩니다.

예) http://127.0.0.1:8080/send?key=데이터

'Develop > Java' 카테고리의 다른 글

LocalDateTime 사용하여 날짜 처리 (1)	2022.01.19
Java AES 128 암복호화 (0)	2015.11.23

계박사의 코딩교실