개발새발, 써놓기

프로젝트를 만들 때 Dependencies 를 선택하는 창이 나온다.

Web Programming을 할 것이니까 Web 탭에서 Rest Repositories(RESTful 사용), Spring Web Services 를 선택하자.

SQL탭에서는 MyBatis를 사용할 것이기에 이것을 선택했고 그 외는 사용할 DB의 Driver를 선택한다.

Server 를 따로 설치하지 않기 때문에 (이 전 Spring Tool 3에서는 톰캣을 직접 넣어주었으나 여기서는 No) Boot 에서 JSP 실행을 위해 embedded tomcat을 maven repository 에서 검색한 후 version은 boot가 관리하기 때문에 version을 지운 후 넣는다.

html, css, JSP를 위해서는 상단 바 help에서 Marketplace에 들어가고 

이 것을 다운 받아준다.

로그를 찍히게 하기 위해 pom.xml 에 추가해야 하는 dependency가 있다.

<!-- https://mvnrepository.com/artifact/ch.qos.logback/logback-classic -->
<dependency>
    <groupId>ch.qos.logback</groupId>
    <artifactId>logback-classic</artifactId>
    <version>1.2.10</version>
    <scope>test</scope>
</dependency>

scope를 runtime으로 바꿔주어야 다 찍힌다.

pom.xml 에서 자바 버전과 스프링프레임워크의 버전을 바꿔줄 수 있다. 

dependency를 확인할 수 있는 사이트 : https://mvnrepository.com/

jdbc와 transaction을 위한 dependency를 추가했는데, 버전부분을 ${org.springfrwamework-version} 으로 바꾸면 위에서 보았던

<properties>

　　:

　　　<org.springframework-version>5.3.13</org.springframework-version>

</properties>

<org.springframework-version> 태그 안의 값으로세팅되기 때문에 나중에 버전을 일일히 바꿀 필요가 없어서 좋다.

프로젝트를 생성하고 나서는 Project Facets 에서 자바 버전을 맞춰주어야한다. 내가 깔은 자바 버전은 1.8 이기때문에 바꿔주었다. Dynamic Web Module 의 경우도 Servlet 3.1을 쓰기 때문에 바꿔주었다.

여기서 설정한 환경 변수가 classpath:/의 위치이다.

DB연결을 위한 JDBC, DBCP, Pool dependency도 검색해서 추가.

MariaDB 사용을 위한 dependency 추가 maven repository 에서 검색해서 넣어주면 된다.

오라클을 사용하려면 위 dependency를 추가한다.

mybatis 를 쓸 것이기 때문에 pom.xml 에 관련 사항도 추가해주자.

이 두개의 xml 이 객체 생성의 역할을 맡는다. 

mybatis의 객체생성을 위해서 root-context.xml 에 import 태그로 mybatis 를 연결해 객체생성을 할 수 있도록 한다.

POST 방식으로 통신하게 될 때 한글 깨짐 현상을 방지하기 위해서 POST방식을 UTF-8로 인코딩설정하기

하나라도 오타가 있으면

이렇게 ???로 한글이 깨져서 들어가게된다. 

주의할 것

이외 JSP, HTML, CSS 등 인코딩을 UTF-8로 바꿔주고

workspace의 인코딩도 UTF-8로 바꿔준다.

웹 브라우저를 Chrome 으로 선택하기

환경설정은 아무래도 처음 깔았을 때 빼고는 안하다 보니까 + 처음에는 선생님께서 하라는 대로 했기 때문에 자세히 기억이 안났는데 다시 처음부터 하다 보니까 오히려 이게 이렇게 필요한 거구나 하면서 알게되었던 것들이 있다. 

server.xml 파일에서 Connector 부분에서 포트번호를 바꿀 수 있고 URIEncoding을 통해 한글 인코딩을 설정해야한다.

설치 시 UTF-8로 문자셋을 설정해주어야 한글이 깨지지 않는다. 

Use UTF8 as default server's character set 을 눌러주자.

Enable networking 을 체크해주어야 다른 컴퓨터에서도 접근이 가능하다.

이후 윈도우 시작탭에서 MySQL Client (MariaDB) 라고 생기므로 누르고 들어가면된다.

Show database;
SELECT database();

CREATE database mydb;
USE mydb;

CREATE TABLE bbs (

);

DESC bbs;

show databases;
-- use (디비이름); 후
show tables;

AOP (Aspect Oriented Programming) 란?

관점 지향 프로그래밍

핵심 비지니스 로직과 공통 모듈을 분리함으로써 개발자가 좀 더 비지니스 로직에만 집중해서 처리할 수 있는 방법을 제공 한다.

공통 모듈을 적용해서 발생하는 의존 관계의 복잡성과 코드 중복을 해소해 주는 프로그래밍 기법이다.

즉, 공통 모듈(로깅, 보안인증, 트랜잭션 등)을 별도로 작성한 후 코드밖에서 비지니스 로직 사이에 삽입하는 것이 AOP 기능을 사용해 개발한 것이라고 볼 수 있다.

AOP는 OOP(Object Oriented Programming)를 대신하는 새로운 개념이 아니라, OOP를 더욱 OOP답게 사용할 수 있도록 도와주는 개념이다.

AOP 특징

Spring은 프록시(Proxy) 기반 AOP를 지원한다.

- Spring은 타겟(target) 객체에 대한 프록시를 만들어 제공한다.

- 타겟을 감사는 프록시는 실행시간(Runtime)에 생성된다.

- 프록시는 Advice를 타겟 객체에 적용하면서 생성되는 객체이다.

프록시(Proxy)가 호출을 가로챈다(intercept)

- 프록시는 타겟 객체에 대한 호출을 가로챈 다음 Advice의 부가기능 로직을 수행하고 난 후에 타겟의 핵심기능 로직을 호출한다.(전 처리 Advice)

- 타겟의 핵심기능 로직 메소드를 호출한 후에 공통 기능(Advice)을 수행한다. (후 처리 Advice)

Spring AOP는 메소드 Join Point만 기원한다.

- Spring은 동적 프록시를 기반으로 AOP를 구현하므로 메서드 Join Point 만 지원한다.

- 핵심 기능(타겟)의 메소드가 호출되는 런타임 시점에만 공통 기능(Advice)을 적용할 수 있다.

- AspectJ 같은 고급 AOP 프레임워크를 사용하면 객체의 생성, 필드 값의 조회와 조작, static 메소드 호출 및 초기화 등의 다양한 작업에 공통기능을 적용 할 수 있다. 

import java.util.Random;

public void generatePwd() throws Exception {
		// 10자리 임시 패스워드 생성
		StringBuilder sb = new StringBuilder();
		Random rd = new Random();
		String s = "~!@#$%^&*+-ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz";
		for (int i = 0; i < 10; i++) {
			int n = rd.nextInt(s.length());
			sb.append(s.substring(n, n+1));
		}

		System.out.println(sb.toString()); // 생성된 10자리 임시 패스워드 확인용
		
	}

Random 클래스를 임포트해서 문자열 s에서 무작위로 뽑은 한 자리를 스트링 빌더객체 sb에 10번 붙여주고 마지막에 스트링빌더에 있던 것을 toString() 메소드를 이용해서 변환시켜준다.

https://www.highcharts.com/demo/line-basic

<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>

실습을 위해서는 위 코드를 통해 라이브러리를 가져와야한다.

EDIT IN 버튼(둘 다)을 통해 들어가면 가져올 수 있다.

view options 을 통해 간단하게 모달창을 통해 옵션을 볼 수 있다.

Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },

    xAxis: {
        accessibility: {
            rangeDescription: 'Range: 2010 to 2017'
        }
    },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});

실제로 사용된 소스는 아래와 같다.

<script type="text/javascript">
// https://www.highcharts.com/demo
$(function() {
	var url = "${pageContext.request.contextPath}/hchart/line1";
	$.getJSON(url, function(data) { // GET 방식이고 JSON 으로
		Highcharts.chart('lineContainer1', {

		    title: {
		        text: '서울 월별 평균 기온'
		    },

		    yAxis: {
		        title: {
		            text: '기온(C)'
		        }
		    },

		    xAxis: {
		        categories: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']
		    },

		    series: data.series

		});
	});
});
</script>

제일 중요한 부분이 series 인데, 위에 홈페이지에서 세팅한 대로 값을 넘겨주었다.

오늘 배운 것 중에 기억해야할 쿼리!

WITH memberAge AS (
    SELECT m2.userId, TRUNC(MONTHS_BETWEEN(SYSDATE, birth)/12) age
    FROM member m
    JOIN member1 m1 ON m.memberIdx = m1.memberIdx
    JOIN member2 m2 ON m1.userId = m2.userId
    WHERE m.membership = 1

)
SELECT '10대' section, COUNT(*) count  FROM memberAge WHERE age>=10 AND age < 20
UNION ALL
SELECT '20대' section, COUNT(*) count  FROM memberAge WHERE age>=20 AND age < 30
UNION ALL
SELECT '30대' section, COUNT(*) count  FROM memberAge WHERE age>=30 AND age < 40
UNION ALL
SELECT '40대' section, COUNT(*) count  FROM memberAge WHERE age>=40 AND age < 50
UNION ALL
SELECT '50대' section, COUNT(*) count  FROM memberAge WHERE age>=50 AND age < 60
UNION ALL
SELECT '60대' section, COUNT(*) count  FROM memberAge WHERE age>=60 AND age < 70
UNION ALL
SELECT '기타' section, COUNT(*) count  FROM memberAge WHERE age <10 OR age>=70;

유저관리 차트에서 나이별로 차트를 보고 싶을 때 사용된다.