출처: https://bumcrush.tistory.com/182 [맑음때때로 여름]

회사에서 소소하게 프로젝트를 시작했는데
기존에 원래 되어있던게 스프링도 아닌 정말 기본 자바 프로젝트;;였다
로그인할땐 특정 uuid를 생성해서 인증key같은 걸로 사용하다가
세션이 종료 되었을때 사라지게 해달라고 요청받음..
방법을 찾다보니 HttpSessionListener를 쓰면 된다고..

 

1. web.xml에 추가하기

 

    <listener>
        <listener-class>egovframework.dev3.common.web.SessionListener</listener-class>
    </listener>

ㅎ.. sessiontimeout은 그냥 테스트하느라 1로 했음

    <session-config>
    		<session-timeout>1</session-timeout>
	</session-config>

 

2. 맨들기

public class SessionListener implements HttpSessionListener {

	@Override
    public void sessionCreated(final HttpSessionEvent event) {

		LocalTime now = LocalTime.now();
	    HttpSession session = event.getSession();
	    System.out.println(session.getId());
	    System.out.println("세션 IN   :   " + now);

    }


	@Override
	public void sessionDestroyed(HttpSessionEvent event) {
		LocalTime now = LocalTime.now();
	    HttpSession session = event.getSession();
	    System.out.println("세션 OUT   :   " + now);
	  }
}

 

 

3. 결과

 

그렇다고 한다.

 

https://stackoverflow.com/questions/47166425/how-to-force-javamailsenderimpl-to-use-tls1-2

 

How to force JavaMailSenderImpl to use TLS1.2?

Have a JDK7 app running on Tomcat and it does have the following env settings: -Dhttps.protocols=TLSv1.1,TLSv1.2 The above setting ensures that we don't use TLS 1.0 when connecting over HTTPS wh...

stackoverflow.com

<dependency>
        <groupId>javax.mail</groupId>
        <artifactId>mail</artifactId>
        <version>1.5.0-b01</version>
</dependency>
Properties prop = new Properties();
prop.setProperty("mail.smtp.auth", "true");
prop.setProperty("mail.smtp.starttls.enable", "true");
prop.setProperty("mail.smtp.ssl.protocols", "TLSv1.2"); // Added this line
prop.setProperty("mail.smtp.ssl.trust", mailUri.getHost());
mailSender.setJavaMailProperties(prop);
        List<Output> rst = new ArrayList<>();

        Gson gson = new GsonBuilder()
                .serializeNulls()
                .create();
        String json = gson.toJson(rst);
        System.out.println(json);

 

 

null값이 전송되지 않고 값이 있는 파라미터만 전송될때..?

사실 null값을 전송하지 말자! 하는

@JsonInclude(value = Include.NON.NULL)

어노테이션을 더 많이 사용하고 있어서

새롭게 찾았는데 안까먹으려고 메모~~~~

https://developers.facebook.com/tools/debug/

 

공유 디버거 - Facebook for Developers

공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요.

developers.facebook.com

 

 

https://developers.kakao.com/tool/clear/og

 

카카오계정 로그인

여기를 눌러 링크를 확인하세요.

accounts.kakao.com

 

여기 들어가서 주소쓰고 삭제해줘야됌

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=cab618&logNo=221056317474 

 

Chart.js - 차트

오픈 소스로 많이 쓰이는 Chart.js 입니다. 상용 차트가 많은 기능과 UI를 지원하고 있지만 여건상 쓰지...

blog.naver.com

<script type="text/javascript" src="chart.bundle.js"></script>
<div id="container" style="border: solid 1px black; width: 100%; 
height: 300px; margin-bottom: 10px;">
        <canvas id="canvas" style="margin-left: 5px;"></canvas>
    </div>

    <script type="text/javascript">
        var ChartHelper = {
            chartColors: {
                red: 'rgb(255, 99, 132)'
                , orange: 'rgb(255, 159, 64)'
                , yellow: 'rgb(255, 205, 86)'
                , green: 'rgb(75, 192, 192)'
                , blue: 'rgb(54, 162, 235)'
                , purple: 'rgb(153, 102, 255)'
                , grey: 'rgb(201, 203, 207)'
            }
        };

        var color = Chart.helpers.color;

        var data1 = null;
        var data2 = null;
        var barChartData = null;

        // todo: data setting
        data1 = ['10', '20', '30', '40', '50', '60', '70', '80'
, '90', '100', '110', '120'];
        data2 = ['120', '110', '100', '90', '80', '70', '60', '50'
, '40', '30', '20', '10'];

        barChartData = {
            labels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월'
, '9월', '10월', '11월', '12월']
            , datasets: [
                {
                    label: 'DataSet1'
                    , backgroundColor: 
color(ChartHelper.chartColors.blue).alpha(0.5).rgbString()
                    , borderColor: ChartHelper.chartColors.blue
                    , borderWidth: 1
                    , data: data2
                }
                , {
                    label: 'DataSet2'
                    , backgroundColor: 
color(ChartHelper.chartColors.red).alpha(0.5).rgbString()
                    , borderColor: ChartHelper.chartColors.red
                    , borderWidth: 1
                    , data: data1
                }
            ]
        };

        var ctx = document.getElementById('canvas').getContext('2d');

        window.BarChart = new Chart(ctx, {
            type: 'bar'
// 옆으로 누운 bar 차트를 쓰실 경우 바꾸시면 됩니다.
            //type: 'horizontalBar'
            , data: barChartData
            , options: {
// responsive, maintainAspectRatio의 설정이 아래와 같이 해야
// 브라우저의 크기를 변경해도 canvas를 감싸고 있는
// div의 크기에 따라 차트가 깨지지 않고 이쁘게 출력 됩니다. 
                responsive: true   //auto size : true
                , maintainAspectRatio: false
                , legend: {
                    position: 'top'
                }
                , title: {
                    display: true
                    , text: 'Chart Title'
                }
// Bar 하나에 데이터 모두 보여줄 경우 사용
// 주석 처리 할 경우 이 예제에서는 data1, data2 각각 bar가 2개씩 나옵니다.
                //, scales: {
                //    xAxes: [
                //        { stacked: true }
                //    ]
                //    , yAxes: [
                //        { stacked: true }
                //    ]
                //}

// or bar chart 하나씩 보여줄 경우
                  , scales: {
                        yAxes: [{
                            ticks: {
// Y 축 0부터 시작
                                beginAtZero:true
// Y 축 정수로 보여주기 
// 숫자가 작거나 또는 0인 경우 등 자동으로 보여주므로 소숫점으로 나타난다
                                , callback: function (value) {
                                    if (0 === value % 1) {
                                        return value;
                                    }
                                }
                            }
                        }]
                    }
// 아래 주석 처리하여도 포인터를 바에 가져가면 수치가 나옵니다.
// 그러나 min 버젼을 link할 경우 영역에다 가져가면 나오질 않아요
// 또한 툴팁에 해당 데이터의 색도 나오지 않습니다.
// 직접 코딩 후 min 버젼으로 교체하여 테스트 해보시면 차이를 알 수 있습니다.
                // Tooltip 
                //, tooltips: {
                //    mode: 'index',
                //    intersect: false,
                //},
                //hover: {
                //    mode: 'nearest',
                //    intersect: true
                //}
            }
        });

        var colorNames = Object.keys(ChartHelper.chartColors);
    </script>

 

 

 

chartjs - ticks 데이터 없을시 1-0으로나오게하기..

 public String newsExecute(HttpServletRequest request, @Valid Table1 table1, BindingResult error) throws BindException {

        if(table1.getThumbnailFile().getSize()==0){
            error.addError(new ObjectError("thumnailPhoto","썸네일 사진이 없습니다."));
            throw new BindException(error);
            // ValidationUtils.rejectIfEmpty(error,"thumanailPhoto","MSG00001");
        }

 

윗대가리 부분만 잘라옴..

회사 코드라 조금 수정....

exception e안에 BindingResult가 원하는 형식으로 안들어가서(??) 이리저리.. 암튼메모..

 

 

 

https://csslab.tistory.com/67

 

JAVA SPRING에서 TILES 사용하기

Spring에서 Tiles 사용하기 0. 웹 페이지 레이아웃 문제점 지금까지 여러 부분으로 구성된 화면을 구현 시 Header, Menu, Footer 부분을 별도의 jsp 페이지로 구현하고 jsp incude를 이용하여 한 화면으로 구

csslab.tistory.com

 

function nodeToString ( node ) {
   var tmpNode = document.createElement( "div" );
   tmpNode.appendChild( node.cloneNode( true ) );
   var str = tmpNode.innerHTML;
   tmpNode = node = null; // prevent memory leaks in IE
   return str;
}

 

 

 

.idea 의 workspace.xml안에 propertiesComponent를 찾아서 추가

 <property name="dynamic.classpath" value="true" />

 

 

(-_-) 별안간 에러

 

 

javax.mail.MessagingException: Could not convert socket to TLS;
  nested exception is:
   javax.net.ssl.SSLHandshakeException: No appropriate protocol (protocol is disabled or cipher suites are inappropriate)
   at com.sun.mail.smtp.SMTPTransport.startTLS(SMTPTransport.java:1907)
   at com.sun.mail.smtp.SMTPTransport.protocolConnect(SMTPTransport.java:666)
   at javax.mail.Service.connect(Service.java:317)
   at javax.mail.Service.connect(Service.java:176)
   at javax.mail.Service.connect(Service.java:125)
   at javax.mail.Transport.send0(Transport.java:194)
   at javax.mail.Transport.send(Transport.java:124)

하 이거때문에 회사에서 이틀 날렸다~

그냥 자바 버전 낮추니까 됌

그 전까지는 인텔리제이꺼쓰다가 뭐하느라 새로설치했더니..이런

1.8.291에서 1.8.261로 새로 하니까 됨..^^..휴

 

		tooltips: {

			mode: 'label',
			itemSort: function(a, b) {
				return b.datasetIndex - a.datasetIndex
			},

			}

 

 

 

dataset에서 pointStyle을 설정해준다. 

종류는 이렇게 있음

  • 'circle'
  • 'cross'
  • 'crossRot'
  • 'dash'
  • 'line'
  • 'rect'
  • 'rectRounded'
  • 'rectRot'
  • 'star'
  • 'triangle'

 

options - lengend에서 수정 usepointStyle = true 

 

결과물

 

 

 

참고 코드

stackoverflow.com/questions/46439315/change-chartjs-legend-icon-style

 

Change Chartjs Legend Icon Style

I am trying change my Chartjs Icon legend style as shown from my screenshot. Is it possible ?

stackoverflow.com

var data = {
   labels: ['Value [mm]', ''],
   datasets: [{
      label: "Hi-Hi Limit",
      type: 'line',
      data: [5432, 5432],
      backgroundColor: 'rgba(250, 255, 255, 0)',
      borderColor: 'rgba(255, 4, 0, 100)',
      borderWidth: 3,
      radius: 0,
      pointStyle: 'line'
   }, {
      label: "Hi Limit",
      type: 'line',
      data: [5130, 5130],
      backgroundColor: 'rgba(250, 255, 255, 0)',
      borderColor: 'rgba(250, 255, 0, 100)',
      borderWidth: 3,
      radius: 0,
      pointStyle: 'line'
   }, {
      label: "Lo Limit",
      type: 'line',
      data: [905, 905],
      backgroundColor: 'rgba(250, 255, 255, 0)',
      borderColor: 'rgba(250, 255, 0, 100)',
      borderWidth: 3,
      radius: 0,
      pointStyle: 'line'
   }, {
      label: "Lo-Lo Limit",
      type: 'line',
      data: [604, 604],
      backgroundColor: 'rgba(250, 255, 255, 0)',
      borderColor: 'rgba(255, 4, 0, 100)',
      borderWidth: 3,
      radius: 0,
      pointStyle: 'line'
   }, {
      type: 'line',
      label: "Level",
      data: [4800, 4800],
      backgroundColor: 'rgba(0, 119, 220, 1)',
      borderColor: 'rgba(0, 119, 220, 1)',
      borderWidth: 1,
      radius: 0,
      pointStyle: 'rect'
   }],

};

var options = {
   legend: {
      position: 'right',
      labels: {
         usePointStyle: true
      }
   },
   scales: {
      yAxes: [{
         gridLines: {
            display: true,
            color: "rgba(255,99,132,0.2)"
         }
      }],
      xAxes: [{
         gridLines: {
            display: false
         }
      }]
   }
};

Chart.Bar('chart', {
   options: options,
   data: data
});
body {
   background: #1D1F20;
   padding: 16px;
}

.chart-container {
   position: relative;
   margin: auto;
   height: 80vh;
   width: 80vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="chart-container">
   <canvas id="chart"></canvas>
</div>

stackoverflow.com/questions/53764367/how-to-trigger-hover-programmatically-in-chartjs

 

How to trigger hover programmatically in chartjs

I want to set the hover effect in ChartJs programmatically i wish to see both effects hoverBorderWidth, and hoverBorderColor. I know how to activate some tooltips, but I can't apply hover effects. ...

stackoverflow.com

hyung1.tistory.com/17

 

chart.js 로 그래프 그리기

chart.js 를 활용하여 그래프를 그리는 작업을 했다. (chart.js 링크: https://www.chartjs.org/) 기본 bar 그래프를 사용하면 좋으려만 디자인은 그렇게 나오지 않았기에..... 그리하여 이번에 작업하면서 사

hyung1.tistory.com

jsfiddle.net/kf9uLf3x/

 

Edit fiddle - JSFiddle - Code Playground

 

jsfiddle.net

let c = new Chart($('#chart'), {
  type: 'doughnut',
  data: {
    labels: ['a', 'b', 'c', 'd'],
    datasets: [{
      data: [1, 2, 4, 8],
      backgroundColor: ['red', 'blue', 'green', 'orange']
    }]
  },
  options: {
    maintainAspectRatio: false
  }
});
$('#a').on('click', function() { t(0); });
$('#b').on('click', function() { t(1); });
$('#c').on('click', function() { t(2); });
$('#d').on('click', function() { t(3); });

function t(idx) {
  var meta = c.getDatasetMeta(0),
    rect = c.canvas.getBoundingClientRect(),
    point = meta.data[idx].getCenterPoint(),
    evt = new MouseEvent('mousemove', {
      clientX: rect.left + point.x,
      clientY: rect.top + point.y
    }),
    node = c.canvas;
  node.dispatchEvent(evt);
}

 

 

 

위의 코드들을 참조해서

1) 마우스 오버가 아닌 클릭시 툴팁이 팝업되는 형식으로 수정 하고

2) 원하는 칼럼(?)을 클릭하는 이벤트를 만들어줌 (내 경우에는 첫번째인 [0]번)

ㅡ.ㅡ 이거하려고 무슨 chartjs 외부트리거 등등 엄청 찾았네..

여기서 포인트는 options -tooltip의 intersect를 false로 해주는 것이다.

function fn_make_chart_doughnut2(idNm, data, labels, legend_position, tooltipSign){
	if(legend_position == null) legend_position = 'top';
	if(tooltipSign == null) tooltipSign = '%';

	let ctx = document.getElementById(idNm);

	let chart_data = {
		datasets: [{
			data: data,
			backgroundColor: chart_colors,
			hoverBackgroundColor: chart_colors_hover,
			hoverBorderColor: "rgba(234, 236, 244, 1)",
		}],

		// These labels appear in the legend and in the tooltips when hovering different arcs
		labels: labels
	};

	let options = {
		events: ["click"],
		hover: {
			mode: 'nearest'
		},

		maintainAspectRatio: false,
		tooltips: {
			intersect: false,
			backgroundColor: "rgb(255,255,255)",
			bodyFontColor: "#858796",
			borderColor: '#dddfeb',
			borderWidth: 1,
			xPadding: 15,
			yPadding: 15,
			displayColors: true,
			caretPadding: 20,
			callbacks: {

				label: function(tooltipItem, chart) {
					let datasetLabel = chart.labels[tooltipItem.index] || '';
					let rateArr = fn_get_rateArrByList(chart.datasets[0].data, null);
					let rate = rateArr[tooltipItem.index];
					return datasetLabel+ ', ' +rate + " %";

				}
			}
		},
		title: {
			display: false,
			position: 'top',
			fontSize: 40,
			fontColor: "#858796",
			text: ""
		},
		layout: {
			padding: {
				top: 0,
				bottom: 0
			}
		},
		legend: {
			display: true,
			position: legend_position,
			labels: {
				padding: 10,
				boxWidth:12
			}
		},
		rotation:  1.2 * Math.PI,
		cutoutPercentage: 75,	//도넛 구멍 크기
	};

	let myDoughnutChart = new Chart(ctx, {
		type: 'doughnut',
		data: chart_data,
		options: options
	});

	return myDoughnutChart;
}
    function click_first_column() {
        var meta = doughnutRstChart.getDatasetMeta(0),
            rect =doughnutRstChart.canvas.getBoundingClientRect(),
            point = meta.data[0].getCenterPoint(),
            evt = new MouseEvent('click', {
                clientX: rect.left + point.x,
                clientY: rect.top + point.y
            }),
            node = doughnutRstChart.canvas;
        node.dispatchEvent(evt);
    }

    public String makeComma(int val){
        DecimalFormat Commas = new DecimalFormat("#,###");
        String rst = (String)Commas.format(val);

        return rst;

ifuwanna.tistory.com/241

 

[IntelliJ] 필수 단축키 정리 (+ 전체 단축키 표)

인텔리J(IntelliJ IDEA) 에서는 코드 작성, 편집, 검색, 리팩토링, 디버깅 등 IDE내에서  수행하는 대부분의 작업 명령의 키보드 단축키(ShortCut)을 제공합니다. 자주 사용되는 단축키는 숙지해 두시면

ifuwanna.tistory.com

https://www.jetbrains.com

 

JetBrains: Essential tools for software developers and teams

JetBrains is a cutting-edge software vendor specializing in the creation of intelligent development tools, including IntelliJ IDEA – the leading Java IDE, and the Kotlin programming language.

www.jetbrains.com

 General

자주 사용되는 공통 부분 단축키 입니다.

 

⌘0~9(Alt+#[0-9]) : 각 단축키에 해당하는 도구창을 엽니다. 예를 들어 ⌘1 을 사용하면 프로젝트 도구창을 토글할 수 있습니다.

⌘⇧F12(Ctrl+Shift+F12) : 편집기(Editor) 영역을 최대로 크기로 토글합니다.( Toggle maximizing editor)

⌘,(Ctrl+Alt+S) : 설정(Preferences) 창을 엽니다. ( Open Settings dialog )

⌘;(Ctrl+Alt+Shift+S) : 프로젝트 구조를 확인 및 변경 할 수 있는 창을 엽니다. 해당 메뉴에서 Modules, Libraries, Facets, Artifacts, SDK,Project compiler output 등을 확인 및 변경 할 수 있습니다.(open Project Structure dialog

⌘E(Ctrl+E) : 최근 사용한 파일 목록을 조회합니다.(Recent files popup)

A(Ctrl+Shift+A) : 액션을 검색하여 실행합니다. 설정을 변경하거나 단축키 등이 생각나지 않을때 유용한 기능이며 전체 검색인 더블⇧ 로 대체 할 수 있습니다. (Find Action)

Double⇧ : 가장 자주 사용되는 단축키 입니다. 파일, 클래스, 설정 등 키워드에 관련된 가능한 모든 것을 검색해 보여줍니다.( Search everywhere )

 

 

Editing

편집기(Editor) 관련된 주요 단축키 입니다.

 

^Space(Ctrl+Space) : 기본 코드 자동완성 기능입니다.  (Basic code completion)

^⇧Space(Ctrl+Shift+Space) : 소스코드를 분석해서 적합한 자동완성 코드를 추천해줍니다. (Smart code completion)

⌘N,^(Alt+Insert) : 코드를 생성합니다. 생성자나 Getter/Setter, 메서드 오버라이드 등의 코드를 자동생성할때 유용합니다. (Generate Code)

⌘O(Ctrl+O) Override 가능한 메서드 목록을 확인하여 구현하기 위한 코드를 자동 생성해 줍니다.

⌘I(Ctrl+I)  Implement 가능한 메서드 목록을 확인하여 구현하기 위한 코드를 자동 생성해 줍니다.

 

⌘P(Ctrl+P) : 현재 위치한 메서드의 파라미터 정보를 조회합니다. (Parameter info -within method call arguments)

F1(Ctrl+Q) : 도큐멘트를 조회합니다.(Quick Documentation)

⌥Space(Ctrl+Shift+i) : 구현된 코드를 조회합니다. (Quick Definition)

⌘B(Ctrl+B) : 해당 코드의 선언부로 이동.

⌘⌥B(Ctrl+Alt+B) : 해당 코드의 구현부로 이동.

⌥F7(Alt+F7) : 해당 항목이 사용된 위치 검색 

F2 : 오류, 경고 영역으로 점프 

(Alt+⏎) : 퀵픽스 제안 (Show intention actions and quick-fixes)

 

⌘D(Ctrl+D) : 라인 복제 (Duplicate current line)

⌘⌫(Ctrl+Y) : 라인 삭제 (Delete line at caret)

⌥↑,⌥↓(Ctrl+W,Shift+Ctrl+W) : 커서 근처의 코드 선택 영역을 확대하거나 축소합니다.

←,⌥→(Ctrl+←,Ctrl+→) : 단어별 포커스 이동

←,⌥(Ctrl+Shift+←,Ctrl+Shift+→) : 단어별 선택

fn,fn(PageUp,PageDown): Page Up/Down

fn←,fn→(Home, End) : 라인 시작,끝으로 이동

fn←,fn(Shift+Home,Shift+End) : 라인 전체 선택

 

⌘/(Ctrl+/) : 라인단위로 주석처리 합니다. ( Comment / uncomment with line comment )

/(Ctrl+Shift+/) : 블럭단위로 주석처리 합니다. ( Comment / uncomment with block comment )

⌥⌘L(Ctrl+Alt+L) : 해당 프로젝트의 표준 서식에 맞도록 정렬합니다. (Reformat code)

 

Compile and Run

컴파일(Compile) 및 실행(Run) 관련 주요 단축키 입니다.

 

⌘F9(Ctrl + F9) : 프로젝트 빌드(Make project)

⌘R(Shift + F10) : 실행 (Run)  

⌘d(Shift + F9): 디버그 (Debug)

 

Refactoring

소스 리팩토링(Refactoring) 관련 단축키 입니다.

 

^T(Ctrl+Alt+Shift+T) : 리팩토링 관련 전체 항목을 조회합니다. (Refactor this)

F5 : 복사 (Copy)

F6 : 이동 (Move)

⇧F6(Shift+F6) : 이름 변경(Rename)

⌘F6(Ctrl+F6) : 접근제어자, 반환타입, 이름 등 주요 정보를 변경합니다. (Change Signature)

 

 

VCS / Local History

Git 같은 버전 관리 시스템(Version Control System) 관련 단축키 입니다.

 

K(Ctrl+K) : Commit project to VCS

K(Ctrl+Shift+K) : Push commits

T(Ctrl+T) : Update project from VCS

^V(Alt + BackQuote) :  ‘VCS’ quick popup

 

1. chartjs 데이터 label 외에 yAxisID를 추가해준다.

Y축 ID없이 그냥 position을 바꾸면1. chartjs 데이터 label 외에 yAxisID를 추가해준다.

아니면 dataset에서 설정해주던가..

 

Y축 ID없이 그냥 position을 바꾸면 값만 생기고 차트는 오른쪽값을 따라서 그려지게 된다.

 

 

2. options 의 scale에서 설정해준다.

[ options > scales > yAxes ]

position을 바꿔주면 된다.

 

참고코드 : embed.plnkr.co/dtb9tl/

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div style="width:100%;">
      <canvas id="chart"></canvas>
    </div>
    <script src="script.js"></script>
  </body>

</html>
// Code goes here

var ctx = document.getElementById('chart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Visit 1', 'Visit 2', 'Visit 3', 'Visit 4', 'Visit 5'],
    datasets: [{
      label: 'LVEF % (Echo)',
      yAxisID: 'A',
      borderColor: '#ffbaa2',
      backgroundColor: 'white',
      data: [80, 70, 30, 20, 35],
      fill: false
    }, {
      label: 'Rhythm',
      yAxisID: 'B',
      borderColor: '#91cf96',
      backgroundColor: 'white',
      data: [80, 76, 79, 82, 80],
      fill: false
    }, {
      label: 'Height',
      yAxisID: 'C',
      borderColor: '#c881d2',
      backgroundColor: 'white',
      data: [185, 184, 183, 184, 185],
      fill: false
    }, {
      label: 'Weight',
      yAxisID: 'D',
      borderColor: '#29b6f6',
      backgroundColor: 'white',
      data: [65, 65, 65, 65, 65],
      fill: false
    }]
  },
  options: {
    tooltips: {
      mode: 'nearest'
    },
    scales: {
      yAxes: [{
        id: 'A',
        type: 'linear',
        position: 'left',
        ticks: {
          min: 0,
          max: 100,
          stepSize: 20,
          fontColor: '#ffbaa2',
          callback: function(value, index, values) {
            return value + ' %';
          }
        }
      }, {
        id: 'B',
        type: 'linear',
        position: 'right',
        ticks: {
          min: 60,
          max: 140,
          stepSize: 16,
          fontColor: '#91cf96',
          callback: function(value, index, values) {
            return value + ' bpm';
          }
        }
      }, {
        id: 'C',
        type: 'linear',
        position: 'right',
        ticks: {
          min: 160,
          max: 190,
          stepSize: 6,
          fontColor: '#c881d2',
          callback: function(value, index, values) {
            return value + ' cm';
          }
        }
      }, {
        id: 'D',
        type: 'linear',
        position: 'right',
        ticks: {
          min: 50,
          max: 100,
          stepSize: 10,
          fontColor: '#29b6f6',
          callback: function(value, index, values) {
            return value + ' kg';
          }
        },
        scaleLabel: {
          display: false
        },
      }]
    },
    elements: {
      line: {
        tension: 0, // disables bezier curves
      },
      point: {
        radius: 4,
        borderWidth: 2,
        pointStyle: 'circle'
      }
    }

  }
});

 

 

chartjs는 dataset 입력 순서대로 그려지고

가장 처음 그려진 것이 제일 위로 올라온다.

그리고 가장 처음 그려진 것의 범례 맨 앞에 위치함

 

범례는 그대로 내버려두고 차트의 순서만 바꾸고 싶다면

legend 옵션에서 reveser를 true로 바꿔주면된다.

 

 

dataset > order 옵션에서 순서를 정할 수 있다는데 안먹어서 찾아낸 방법.. 여러개인 경우는 모르겠다 ^ㅠ^

option에 responsive : false로 하면

캔버스크기에 맞춰서 그려짐 대충..

없으면 캔버스 크기 무시하고 지맘대로 그려버림.. 죽어..흑흑..

1시간은 날린듯

package java_sort;

 

import java.util.HashMap;

import java.util.Map;

 

public class HashmapGetdata {

 

    public static void main(String[] args) {

        

        Map<String, Object> hashMap = new HashMap();

 

 

        //데이터 넣어줌

        hashMap.put("num"1);

        hashMap.put("name""rios");

        hashMap.put("email""rios0812@naver.com");

        hashMap.put("phone_num""010-1234-1234");

 

 

        // ** value를 통해 key 값얻기 **       

        

        System.out.println(getKey(hashMap,"rios"));

        //rios라는 value 값을 통해서 얻은 key 값 -> name

        System.out.println(getKey(hashMap,"rios0812@naver.com"));

        //rios0812@naver.com 라는 value 값을 통해서 얻은 key 값 -> email

 

 

        // ** key를 통해 value얻기 **

 

        String getName = (String) hashMap.get("name");

        System.out.println(getName);

        //name 이란 key값을 통해서 value 값은 -> rios 

 

        String getPhone = (String) hashMap.get("phone_num");

        System.out.println(getPhone);

        //phone_num 이란 key값을 통해서 value 값은 -> 010-1234-1234

    }

 

 

   // hashmap에 value 로 key 찾기

   public static <K, V> K getKey(Map<K, V> map, V value) {

 

        for (K key : map.keySet()) {

            if (value.equals(map.get(key))) {

                return key;

            }

        }

        return null;

    }

 

 

 

파스칼 케이스로 해야 되는 간단한 문제..였다 ㅎ..

 

// 리액트 에서 컴포넌트들을 생성하는것은 파스칼 케이스에 해당되기 때문에 gdlButton 와 같이 생성하면 렌더링이 되지 않습니다.

 

-> GdlButon 과 같이 첫 문자가 대문자로 오는 파스칼 케이스여야 합니다.



출처: https://ipex.tistory.com/entry/React-시작-전-준비-단계-트러블-슈팅-Trouble-Shooting [깍돌이]


출처 : yngmanie.space/posts/cache

브라우저에서 캐시란 무엇이여 왜 중요할까요?

javascript  HTTP

11 Apr 2019

해당 포스트는 What is a browser cache, and why is it important?를 번역하여 작성하였습니다. 잘못된 부분이 있다면 댓글 부탁드립니다.

캐시라는 단어를 들어봤더라도 그것이 웹에서 정확하게 어떤 의미인지는 잘 모를겁니다. 흔히 캐싱의 의미는 어떤 것을 나중에 유용하게 사용하기위해 저장한다는 뜻입니다. 브라우저나 웹에서의 캐시는 이와 동일한 뜻이고 추가로 프로그램과 웹사이트 자산을 저장합니다. 웹사이트를 방문했을 때, 당신의 브라우저는 몇 개의 페이지를 가지고 있고 그것을 컴퓨터 하드디스크에 저장합니다. 브라우저가 저장할 자산은 아래와 같습니다.

  • 이미지: 로고, 사진, 백그라운드 등
  • HTML
  • CSS
  • Javascript

간단히 말해서 브라우저는 정적인 자산(웹페이지에 방문할 때마다 변하지 않는 것들)을 캐시합니다.

무엇을 캐시하고 얼마나 저장할지는 웹사이트에 의해 결정됩니다. 어떤 자산을 며칠만에 제거되지만 어떤 것들은 1년 넘게 캐시되어 있을 수 있습니다.

많은 사람이 웹사이트가 당신의 컴퓨터에 허락도 없이 자산을 저장한다고 했을 때, 그들은 약간 신경쓰입니다. 그리고 우리는 웹 개발자가 파괴적이고 악의적인 것들을 우리의 다바이스에 저장시키지 않도록 희망하면서 신뢰하고 있다고 말할 수 있습니다.

브라우저 캐싱의 이점은 위험보다 훨씬 큽니다. 좋은 방화벽, 바이러스 스캐너는 당신의 기계가 안전하도록 유지합니다.

캐시의 이점

웹사이트에 처음 방문했을 때, 당신의 브라우저는 원격으로 호스트 사이트 서버와 커뮤니케이션을 합니다. 브라우저는 요청하고 서버는 응답을 하면서 웹사이트 자산을 전달해 줍니다. HTML이 처음 다운로드되고 이것이 어떤 사이트를 그려야 하는지에 대한 정보가 담겨있습니다. 브라우저가 HTML 코드를 읽을 때 서버에게 다른 페이지에 대한 정보를 추가로 요청하는데 대부분 위에서 언급한 정적 자산입니다.

이 프로세스는 bandwidth을 사용합니다. 일부 웹페이지는 자산이 많고 크기때문에 모든 페이지를 다운로드하고 기능을 수행하는데 오랜 시간이 걸립니다.

예를 들어, 텍스트가 이미지가 먼저 나타나는 것을 웹사이트 처음 방문했을 때 느꼈을 겁니다. 텍스트가 자산 크기가 작기때문에 다운로드하는데 적은 시간이 걸리는 겁니다. 반면에 고화질의 이미지가 로드되는데는 몇초가 걸릴 수 있습니다.

캐싱은 브라우실 속도를 향상시킵니다. 일단 자산을 다운로드하면 그것은 어러분의 기계에 일정 기간동안 존재합니다. 당신의 하드디스크에서 파일을 검색하는 것이 인터넷이 아무리 빠르더라도 원격으로 서번에 요청하는것보다 효율적입니다.

일반적인 이커머스 사이트로 생각했을 때, 로고와 같은 자산은 사이트 어느 페이지에 있던 간에 동일한 위치에 표시됩니다. 캐시 기능이 없다면 다른 페이지로 이동할 때 마다 로고를 다운로드해야합니다.

고 퀄리티 이미지와 같이 복잡한 사이트는 큰 자바스크립트 파일을 사용합니다. 구매하기 버튼이 제품 하단에 나타나는데 5~10초 정도 걸린다고 가정했을 때 유저의 전환률이 부정적인 영향을 준다고 상상을 해봅시다. 유저가 편안하고 전환율을 높일 수 있게 하기위해서는 웹페이지는 빠르고 유동적이어야 합니다. 더불어 다음번에 캐시가 된 웹페이지에 방문하면 당신 디바이스에 저장된 자산을 활용해 빠르게 로딩할 수 있습니다.

모바일 디바이스는 빈번하게 bandwidth에 의해 제한됩니다. 일부 모바일데이터는 bandwidth에 대한 캡과 비용을 부과합니다. 유저입장에서 웹사이트를 다운로드를 하지않아야 좋을 것입니다.

캐시의 문제점

웹사이트에서 캐싱된 자산을 사용할 수 있도록 허용했습니다. 다음 날 로고는 색을 변경했습니다. 로고 색이 변경되고 웹사이트에서 변경된 색으로 확인했습니다. 그러나 오래된 로고는 여전시 웹사이트에 있습니다.

이미지 교체를 완벽하게 교체해도 문제는 캐싱이 되고 있다는 뜻입니다.

당신의 기기는 하드디스크에 캐시된 로고 버전이 있습니다. 그것은 새로운 이미지를 다운받도록 요청하지 않습니다. 그러므로 캐시가 만료되지 않는 한 새로운 로고를 얻을 수 있습니다.

유저가 하드디스크에 최신버전파일이 캐시되어 있지 않으면 여러 문제가 발생할 수 있습니다. 포맷이 안맞고, 자바스크립트가 깨지고 올바르지 않는 이미지가 나타납니다.

대부분의 경우 서버가 어떤 자산이 업데이트되고 유저 기기에서 교체되어야하는지 알고있기 때문에 문제가 되지 않습니다. 만약 일부 유저가 홈페이지가 깨졌다고 문제제기를 하면 브라우저캐시를 삭제해보라고 권하면 됩니다.

대부분의 브라우저는 ‘캐시 제거’버튼이 있습니다. 버튼을 클릭하면 캐시된 모든 파일이 삭제됩니다. 캐시를 지우고 자주 방문하던 사이트에 들어가봤을 때 로드되는 얼마나 걸리는지 확인해보세요.

브라우저는 특정 웹사이트만의 캐시를 삭제할 수 있습니다. 특정 사이트만 캐싱 이슈가 있다면 문제가 되는 사이트의 캐시를 지우고 기존 캐싱이 되어있는 사이트를 빠르고 유동적으로 사용하세요.

 

ecsimsw.tistory.com/entry/Spring-MVC-multipartResolver-Http-multipart-request?category=915995

offbyone.tistory.com/114

참고블로그

 

Java로 썸네일(Thumbnail) 이미지 만들기

갤러리와 같은 웹애플리케이션을 만들게 되면 이미지의 썸네일을 만들게 됩니다. 가끔 보면 썸네일 없이 원본이미지를 줄여서 보여주고 있는곳이 있는데, 모바일 환경이라면 시간과 데이터 사

offbyone.tistory.com

 

scalr 라이브러리 pom.xml에 등록

		<!--scalr 라이브러리 -->
		<dependency>
			<groupId>org.imgscalr</groupId>
			<artifactId>imgscalr-lib</artifactId>
			<version>4.2</version>
		</dependency>

 

내가 사용한 코드 / ootdphoto는 MultipartFile이다.

package com.mw.ootd.Service;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

import javax.imageio.IIOException;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;

import org.imgscalr.Scalr;
import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.mw.ootd.Domain.ootdBoard;
import com.mw.ootd.dao.ootdInterfaceDao;

@Service
public class ootdRegService {
	// 글등록과 관련된 기능이 모여있는 서비스

	private ootdInterfaceDao dao;

	@Autowired
	private SqlSessionTemplate template;
	
	

	File newFile = null;
	String ootdphotoname = null;
	String saveDirPath = null;
	
	

	public int ootdWrite(ootdBoard ootd, HttpServletRequest request) throws Exception {
		int result = 5;
		// 성공은1 만약에 사진이없다면 0, 글 내용이 없다면 2를 반환하고 알려줄 것.

		if (ootd.getOotdtext().trim().isEmpty()) {
			result = 2;
			return result;
		}

		// 사진이 정상적인 파일인지 확인하기
		if (ootd.getOotdphoto() != null && !ootd.getOotdphoto().isEmpty()) {

			String uploadPath = "/fileupload/ootdimage";
			saveDirPath = request.getSession().getServletContext().getRealPath(uploadPath);
			// 새로운 파일이름 만들어주기
			ootdphotoname = String.valueOf(System.nanoTime());
			newFile = new File(saveDirPath, ootdphotoname);

		} else {
			// 정상적인 사진이 없을 경우
			result = 0;
			return result;

		}

		// 파일저장하기 > s3 변경
		try {
			ootd.getOotdphoto().transferTo(newFile);

		} catch (IllegalStateException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}

		// 파일 이름 저장하기
		if (ootdphotoname != null) {
			ootd.setOotdphotoname(ootdphotoname);
		}

		// 썸네일 만들기
		makeThumbnail(saveDirPath, ootdphotoname, "png");

		// 데이터베이스에 저장하기
		try {
			dao = template.getMapper(ootdInterfaceDao.class);
			result = dao.ootdDocInsert(ootd);
			// 글번호값 리턴
			// int ootdidx = dao.ootdidxReturn(ootdphotoname);
			// System.out.println(ootdidx);
			// ootdidx에 맞는 좋아요 칼럼 생성
			// dao.makeLikeCol(ootdidx);

		} catch (Exception e) {
			e.printStackTrace();
			if (newFile != null && newFile.exists()) {
				newFile.delete();
			}
		}

		return result;

	}

	private void makeThumbnail(String filePath, String fileName, String fileExt) throws Exception {
		// 저장된 원본파일로부터 BufferedImage 객체를 생성합니다.
		BufferedImage srcImg = ImageIO.read(newFile);
		// 썸네일의 너비와 높이 입니다.
		int dw = 250, dh = 250;
		// 원본 이미지의 너비와 높이 입니다.
		int ow = srcImg.getWidth();
		int oh = srcImg.getHeight();

		// 원본 너비를 기준으로 하여 썸네일의 비율로 높이를 계산합니다.
		int nw = ow;
		int nh = (ow * dh) / dw;

		// 계산된 높이가 원본보다 높다면 crop이 안되므로
		// 원본 높이를 기준으로 썸네일의 비율로 너비를 계산합니다.
		if (nh > oh) {
			nw = (oh * dw) / dh;
			nh = oh;
		}
		// 계산된 크기로 원본이미지를 가운데에서 crop 합니다.
		BufferedImage cropImg = Scalr.crop(srcImg, (ow - nw) / 2, (oh - nh) / 2, nw, nh);

		// crop된 이미지로 썸네일을 생성합니다.
		BufferedImage destImg = Scalr.resize(cropImg, dw, dh);

		// 썸네일을 저장합니다. 이미지 이름 앞에 "THUMB_" 를 붙여 표시했습니다.
		String thumbName = filePath + "/THUMB_" + fileName;
		File thumbFile = new File(thumbName);
		//ImageIO.write(destImg, "PNG", thumbFile);
		//저장>s3
		ImageIO.write(destImg, fileExt.toUpperCase(), thumbFile);
	}
}

 

자바에서 콘솔에는 한글이 안깨지는데 받아오면 깨지는 경우 @GetMapping

	@GetMapping(produces="text/plain;charset=UTF-8")

 

 

pip install --upgrade pip

 

 

'memo' 카테고리의 다른 글

[JAVA] 이미지 파일 크롭하여 저장하기 (썸네일 생성)  (0) 2021.03.02
[자바] REST API 요청 시 한글깨짐  (0) 2021.02.17
[파이썬] pip 업그레이드  (0) 2021.02.17
자바스크립트 파일 절대경로 / decode  (0) 2021.02.08
최근 에러 참고  (0) 2021.02.03
[스프링] ajax 참고  (0) 2021.01.29
RESTCLIENT  (0) 2021.01.28
	String base64 = null;

		// 절대경로
		String realPath = ootdBase64Controller.class.getResource("/").getPath().replaceAll("/WEB-INF/classes/", "/");
		// 사진파일 이름
		String filePath = realPath + "fileupload/ootdimage/" + ootdphotoname;
		File imagefile = new File(filePath);

			FileInputStream input = new FileInputStream(imagefile);
			System.out.println(input);
			// 이미지 파일을 byte[] 로 읽어온다.
			byte[] b = new byte[input.available()];
			input.read(b);

			byte[] encoded = Base64.encodeBase64(b);
			// byte[] 형태의 base64 데이터를 String으로 변환.
			base64 = new String(encoded);
			System.out.println(base64);
			

 

apache common codec 사용

'memo' 카테고리의 다른 글

[자바] REST API 요청 시 한글깨짐  (0) 2021.02.17
[파이썬] pip 업그레이드  (0) 2021.02.17
[파이썬] 판다스 pandas 설치  (0) 2021.02.15
최근 에러 참고  (0) 2021.02.03
[스프링] ajax 참고  (0) 2021.01.29
RESTCLIENT  (0) 2021.01.28
[스프링] mvc패턴에 관한 블로그  (0) 2021.01.08

 

- AWS RDS 다른 컴퓨터에서 안될때 보안에서 IP 

m.blog.naver.com/PostView.nhn?blogId=baekmg1988&logNo=221316318423&proxyReferer=https:%2F%2Fwww.google.com%2F

 

[AWS] RDS DB 외부에서 접속 안될때 외부 접속 되게 하는 해결 방법

aws 클라우딩 서버 많이들 이용하시죠??ㅎㅎ 저도 친구들이랑 간단한 프로젝트 할 때는 아마존의 프리티어...

blog.naver.com

 

- append 했을때 onclick 등 쿼리안먹힐때

sup2is.tistory.com/90

 

[jQuery] jQuery append 이후 event 먹통 현상 대처

최대한 간략하게 설명해보면 다음과 같은 케이스가 있다 //html //javascript $('#somethingBtn').click(function () { $("#base").append(" bla bla "); }) $('.new').click(function() { //not working!!!!! });..

sup2is.tistory.com

 

- 모달로data넘기기

tristan91.tistory.com/415

 

bootstrap - modal로 데이터 넘기기

button을 누르면 delteCheckModal이 동작합니다. 게시글 삭제 deletecheckmodal 정말로 삭제하시겠습니까? aria-hidden="true">× '삭제'버튼을 누르면 해당 게시글이 삭제됩니다. 정말로 삭제하시겠습니까?..

tristan91.tistory.com

 

'memo' 카테고리의 다른 글

[파이썬] pip 업그레이드  (0) 2021.02.17
[파이썬] 판다스 pandas 설치  (0) 2021.02.15
자바스크립트 파일 절대경로 / decode  (0) 2021.02.08
[스프링] ajax 참고  (0) 2021.01.29
RESTCLIENT  (0) 2021.01.28
[스프링] mvc패턴에 관한 블로그  (0) 2021.01.08
tomcat서버 에러 발생시 해결 방법  (0) 2020.12.28
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="icon" href="../../../../favicon.ico"> -->

    <title>Offcanvas template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/bootstrap/offcanvas.css" rel="stylesheet">
  </head>

  <body class="bg-light">

    <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
      <a class="navbar-brand mr-auto mr-lg-0" href="#">BITCAMP</a>
      <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Notifications</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Switch account</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <div class="nav-scroller bg-white box-shadow">
      <nav class="nav nav-underline">
        <a class="nav-link active" href="#">Dashboard</a>
        <a class="nav-link" href="#">
          Friends
          <span class="badge badge-pill bg-light align-text-bottom">27</span>
        </a>
        <a class="nav-link" href="#">Explore</a>
        <a class="nav-link" href="#">Suggestions</a>
        <a class="nav-link" href="#">Link</a>
        <a class="nav-link" href="#">Link</a>
        <a class="nav-link" href="#">Link</a>
        <a class="nav-link" href="#">Link</a>
        <a class="nav-link" href="#">Link</a>
      </nav>
    </div>

    <main role="main" class="container">
      <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
        
        <div class="lh-100">
          <h1 class="mb-0 text-white lh-100">MemberList</h1>
          <small>member info</small>
        </div>
      </div>

      <div class="my-3 p-3 bg-white rounded box-shadow" id="member_list">
        <h6 class="border-bottom border-gray pb-2 mb-0">Member List</h6>
        


        

      </div>

     
    </main>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/assets/vendor/jquery-slim.min.js"><\/script>')</script>
    <script src="js/assets/vendor/popper.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/assets/js/vendor/holder.min.js"></script>
    <script src="js/bootstrap/offcanvas.js"></script>
    
    
    
    <script>
    
    	$(document).ready(function(){
    		
    		$.ajax({
    			url : 'http://localhost:8080/op/rest/ver1/members',
    			type : 'GET',
    			success : function(data){
    				console.log(data);
    				//alert(data);
    				//alert(JSON.stringify(data));
    				
    				
    				$.each(data, function(index, item){
    					
        				var html ='<div class="media text-muted pt-3">';
        				html += '<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">';
        				html += '<strong class="d-block text-gray-dark">'+item.memberid+'('+item.membername+')'+'</strong>';
        				html += ''+item.memberphoto;
        		    html += '</p>';
        		    html += '</div>';
        		    
        		    $('#member_list').append(html);
    				});
    				
    			},
    			error : function(e){
    				console.log("에러발생 : ",e);
    			}
    		})
 
    		
    	});
        
    </script>
    
    
    
    
    
    
  </body>
</html>

+ Recent posts