'2020/09'에 해당되는 글 5건

# Java 좌표를 통한 주소 구하기(Open API Geocoder API 사용하기)

1. Open API를 사용하기 위해서 KEY 값을 발급 받아야합니다.

3. JAVA 소스 

3-1.  main.java 

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

/**
 * Main
 */
public class Main {
	public static void main(String[] args) {
		JsonReader jsonReader = new JsonReader();
		// api 키값
		String key = "";
		// 경도
		String latitude = "37.57595319615567";
		// 위도
		String longitude = "126.97684687319756";
		// api 테스트
		// # 파라미터 종류 확인 : http://www.vworld.kr/dev/v4dv_geocoderguide2_s002.do
		String reverseGeocodeURL = "http://api.vworld.kr/req/address?"
				+ "service=address&request=getAddress&version=2.0&crs=epsg:4326&point="
				+  longitude + "," +  latitude
				+ "&format=json"
				+ "&type=both&zipcode=true"
				+ "&simple=false&"
				+ "key="+key;
		String getJson = jsonReader.callURL(reverseGeocodeURL);
		System.out.println("getJson => " + getJson);
		Map<String, Object> map = jsonReader.string2Map(getJson);
		System.out.println("json => " + map.toString());

		// 지도 결과 확인하기
		ArrayList reverseGeocodeResultArr = (ArrayList) ((HashMap<String, Object>) map.get("response")).get("result");

		String parcel_address = "";
		String road_address = "";

		for (int counter = 0; counter < reverseGeocodeResultArr.size(); counter++) {
			HashMap<String, Object> tmp = (HashMap<String, Object>) reverseGeocodeResultArr.get(counter);
			String level0 = (String) ((HashMap<String, Object>) tmp.get("structure")).get("level0");
			String level1 = (String) ((HashMap<String, Object>) tmp.get("structure")).get("level1");
			String level2 = (String) ((HashMap<String, Object>) tmp.get("structure")).get("level2");
			if (tmp.get("type").equals("parcel")) {
				parcel_address = (String) tmp.get("text");
				parcel_address = parcel_address.replace(level0, "").replace(level1, "").replace(level2, "").trim();
			} else {
				road_address = "도로 주소:" + (String) tmp.get("text");
				road_address = road_address.replace(level0, "").replace(level1, "").replace(level2, "").trim();
			}
		}

		System.out.println("parcel_address = > " + parcel_address);
		System.out.println("road_address = > " + road_address);
	}
}

3-2.  JsonReader.java

 - Jackson lib을 사용해서 String 값을 Map을 변경해서 사용합니다.

 - 첨부 파일에서 jar를 파일 다운 받아주세요.

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.URL;
import java.net.URLConnection;
import java.nio.charset.Charset;
import java.util.Map;

import javax.net.ssl.HostnameVerifier;
import javax.net.ssl.HttpsURLConnection;
import javax.net.ssl.SSLSession;

import com.fasterxml.jackson.databind.ObjectMapper;

public class JsonReader {
    public String callURL(String myURL) {

        System.out.println("Requeted URL:" + myURL);
        StringBuilder sb = new StringBuilder();
        URLConnection urlConn = null;
        InputStreamReader in = null;

        //error : Caused by: javax.net.ssl.SSLPeerUnverifiedException: Hostname not verified:
        HostnameVerifier allHostsValid = new HostnameVerifier() {
            @Override
            public boolean verify(String hostname, SSLSession session) {
                //특정 hostname만 승인을 해주는 형태             
                    return true;
            }
        };
        
        //
        HttpsURLConnection.setDefaultHostnameVerifier(allHostsValid);

        try {
            URL url = new URL(myURL);
            urlConn = url.openConnection();
            if (urlConn != null)
                urlConn.setReadTimeout(60 * 1000);
            if (urlConn != null && urlConn.getInputStream() != null) {
                in = new InputStreamReader(urlConn.getInputStream(), Charset.defaultCharset());
                //charset 문자 집합의 인코딩을 사용해 urlConn.getInputStream을 문자스트림으로 변환 객체를 생성.
                BufferedReader bufferedReader = new BufferedReader(in);
                //주어진 문자 입력 스트림 inputStream에 대해 기본 크기의 버퍼를 갖는 객체를 생성.
                if (bufferedReader != null) {
                    int cp;
                    while ((cp = bufferedReader.read()) != -1) {
                        sb.append((char) cp);
                    }
                    bufferedReader.close();
                }
            }
            in.close();
        } catch (Exception e) {
            throw new RuntimeException("Exception URL:"+ myURL, e);
        }
        System.out.println(sb.toString());
        return sb.toString();
    }
    
    public Map<String , Object> string2Map(String json){
        ObjectMapper mapper = new ObjectMapper();
        Map<String, Object> map = null;

        try {
            map = mapper.readValue(json, Map.class);
            System.out.println(map);

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

        return map;
    }
    
}

4 결과화면

   - 테스트 위치

  - REST API  테스트 결과 

- JAVA 테스트 결과 

#PGR 패턴 : en.wikipedia.org/wiki/Post/Redirect/Get

Post / Redirect / Get ( PRG )은 양식 제출 후 표시되는 페이지를 다른 시간에 양식을 제출하는 것과 같은 악영향없이 다시로드, 공유 또는 북마크 할 수 있는 웹 개발 디자인 패턴 입니다 .

HTTP POST 요청을 통해 웹 양식이 서버에 제출 될 때 서버 응답을 새로 고치려고하면 원래 POST의 콘텐츠가 다시 제출되어 중복 웹 구매 와 같은 원치 않는 결과가 발생할 수 있습니다 . 

이 문제를 방지하기 위해 많은 웹 개발자 는 웹 페이지를 직접 반환하는 대신 PRG 패턴 [2]을 사용합니다 . POST는 리디렉션을 반환합니다. HTTP 1.1 사양은 HTTP 303 ( "기타보기") 응답 코드를 도입 하여이 상황에서 브라우저가 초기 POST 요청을 다시 제출하지 않고도 서버 응답을 안전하게 새로 고칠 수 있도록합니다.

PRG 패턴은 중복 양식 제출의 모든 시나리오를 다룰 수는 없습니다. 예를 들어, 서버 지연으로 인해 초기 제출이 완료되기 전에 웹 사용자가 새로 고치는 경우 특정 사용자 에이전트에서 중복 POST가 발생합니다.

# controller 부분 

package com.example.demo.junitFormTest;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.ObjectError;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("junitForm")
public class FormController {
    List<Event> eventList = new ArrayList<>();

    /**
     * 이벤트 등록 화면 컨트롤러
     * @param model
     * @return
     */
    @GetMapping("/formEvent")
    public String formEvent(Model model) {
        // formEvent 화면에 Event 그릇 내려 주기
        model.addAttribute("event", new Event());
        // 이벤트 등록 페이지
        return "/junit/FormTest/formEvent";
    }

    /***
     * 이벤트 정보 확인
     * @param event
     * @param bindingResult
     * @return
     */
//    @PostMapping("/regEvent")
//    @ResponseBody
//    public Event regEvent(
//            @ModelAttribute Event event,
//            // 값을 바인딩 할 수 없는 경우네는 BindingResult 4000 에러
//            // 이벤트 변수 타입이 맞지 않은 경우 null 처리
//            BindingResult bindingResult) {
//        if(bindingResult.hasErrors()){
//            // binding 에러가 된 경우, 에러 종류 찍기
//            for (ObjectError allError : bindingResult.getAllErrors()) {
//                System.out.println(allError.toString());
//            }
//        }
//        return event;
//    }

    @PostMapping("/regEvent")
    public String regEvent(
            @Validated  @ModelAttribute Event event,
            BindingResult bindingResult) {
        if(bindingResult.hasErrors()){
            // binding 에러가 된 경우, 에러 종류 찍기
            for (ObjectError allError : bindingResult.getAllErrors()) {
                System.out.println(allError.toString());
            }
            // 에러가 발생했음으로 form으로 되돌아가기 만들기
            return "/junit/FormTest/formEvent";
        }
        eventList.add(event);
        // 에러가 발생하지 않은 경우 리다이렉트로 통한 getmapping 처리
        return "redirect:/junitForm/events/list";
    }

    @GetMapping("/events/list")
    public String getEvents(Model model){
        // getmapping으로 리스트가 처리된 페이지는 form 이벤트가 재발생하지 않는다.
        model.addAttribute(eventList);
        // 이벤트 리스트 보여줄 페이지 리턴
        return "/junit/FormTest/eventList";
    }
}

# Event.java

package com.example.demo.junitFormTest;


        import javax.validation.constraints.Min;
        import javax.validation.constraints.NotBlank;

public class Event {

    @NotBlank
    private String eventName;

    @NotBlank
    private String eventDescription;

    @Min(0)
    private Integer eventCount;

    public Integer getEventCount() {
        return eventCount;
    }

    public void setEventCount(Integer eventCount) {
        this.eventCount = eventCount;
    }

    public String getEventName() {
        return eventName;
    }

    public void setEventName(String eventName) {
        this.eventName = eventName;
    }

    public String getEventDescription() {
        return eventDescription;
    }

    public void setEventDescription(String eventDescription) {
        this.eventDescription = eventDescription;
    }
}
/*
*  validation 사용하기 위해서는 pom.xml 추가 요소
<dependency>
    <groupId>org.hibernate.validator</groupId>
    <artifactId>hibernate-validator</artifactId>
    <version>6.0.7.Final</version>
</dependency>
* */

# /junit/FormTest/formEvent -  formEvent.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>New Events</title>
</head>
<body>
<form action="#" th:action="@{/junitForm/regEvent}" method="post" th:object="${event}">
    <p th:if="${#fields.hasErrors('eventName')}" th:errors="*{eventName}">eventName Error</p>
    <p th:if="${#fields.hasErrors('eventDescription')}" th:errors="*{eventDescription}">eventDescription Error</p>
    <p th:if="${#fields.hasErrors('eventCount')}" th:errors="*{eventCount}">eventCount Error</p>

    <label for="eventName">eventName</label>
    <input type="text" id="eventName" th:title="eventName" th:field="*{eventName}">
    <br>
    <label for="eventDescription">eventDescription</label>
    <input type="text" id="eventDescription" th:title="eventDescription" th:field="*{eventDescription}">
    <br>
    <label for="eventCount">eventCount</label>
    <input type="text" id="eventCount" th:title="eventCount" th:field="*{eventCount}">
    <br>
    <input type="submit" value="Create">
</form>
</body>
</html>

# /junitForm/events/list -  eventList.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Event List</title>
</head>
<body>
<a th:href="@{/junitForm/formEvent}">Create New Event</a>
<div th:unless="${#lists.isEmpty(eventList)}">
    <ul th:each="event:${eventList}">
        <p th:text="${event.eventName}">eventName</p>
        <p th:text="${event.eventDescription}">eventDescription</p>
        <p th:text="${event.eventCount}">eventCount</p>
    </ul>
</div>
</body>
</html>

# 라인 차트에서 데이터셋 , 데이터 제거

# 결과화면

# 데이터 제거 버튼 

// 첫번째 값 제거
document.getElementById('firstRemoveData').addEventListener('click', function () {
	// 모든 차트 순회하기 위한 KEY 값 배열
	var keys = Object.keys(Chart.instances);
	// 차트 순회하기 
	keys.forEach(elem => {
		// 데이터 값 세팅
		console.log(Chart.instances[elem].config.data);
		Chart.instances[elem].config.data.labels.shift(); 
		Chart.instances[elem].config.data.datasets.forEach(function (dataset) {
			// 첫번쨰 배열값 제거
			dataset.data.shift();
		});
		// 데이터 업데이트 
		Chart.instances[elem].update();
	});
});

// 마지막 값 제거 
document.getElementById('LastRemoveData').addEventListener('click', function () {
	// 모든 차트 순회하기 위한 KEY 값 배열
	var keys = Object.keys(Chart.instances);
	// 차트 순회하기 
	keys.forEach(elem => {
		// 데이터 값 세팅
		console.log(Chart.instances[elem].config.data);
		Chart.instances[elem].config.data.labels.pop(); 
		Chart.instances[elem].config.data.datasets.forEach(function (dataset) {
			// 마지막 배열값 제거
			dataset.data.pop();
		});
		// 데이터 업데이트 
		Chart.instances[elem].update();
	});
});

# 데이터셋 제거 버튼

document.getElementById('FirstRemoveDataset').addEventListener('click', function () {
	// 모든 차트 순회하기 위한 KEY 값 배열
	var keys = Object.keys(Chart.instances);
	// 차트 순회하기 
	keys.forEach(elem => {
		// 데이터 값 세팅
		console.log(Chart.instances[elem].config.data);
		// 첫번째 그래프 제거
		Chart.instances[elem].config.data.datasets.pop();
		// 데이터 업데이트 
		Chart.instances[elem].update();
	});
});

document.getElementById('LastRemoveDataset').addEventListener('click', function () {
	// 모든 차트 순회하기 위한 KEY 값 배열
	var keys = Object.keys(Chart.instances);
	// 차트 순회하기 
	keys.forEach(elem => {
		// 데이터 값 세팅
		console.log(Chart.instances[elem].config.data);
		// 마지막 그래프 제거
		Chart.instances[elem].config.data.datasets.shift();
		// 데이터 업데이트 
		Chart.instances[elem].update();
	});
});

# 라인 차트 생성 후,  여러 차트에 데이터셋 , 데이터 추가 방법

#결과화면

# 데이터셋 추가 버튼

var colorNames = Object.keys(window.chartColors);
// chartColor는 아래 차트 옵션에 정의되어 있음
// 데이터셋 추가 버튼 
document.getElementById('addDataset').addEventListener('click', function () {
	var colorNames = Object.keys(window.chartColors);
	// 새로운 데이터셋 세팅 
	var newData = {
		// 라벨 
		label: 'Dataset',
		// 꼭지점
		backgroundColor: '',
		// 라인색 
		borderColor: '',
		data: [],
	};

	var fill = [
		'end',
		'start', 
		'origin', 
		false 
	];

	for (let index = 0; index < 4; index++) {
		// 데이터 세팅 
		var settingData = JSON.parse(JSON.stringify(newData));
		// 배경
		settingData.backgroundColor = chartColors[colorNames[index + 1]];
		// 선색
		settingData.borderColor = chartColors[colorNames[index + 2]];
		// 라벨
		settingData.label = 'new Data line' + (index + 1) + '/ Fill=' + fill[index];
		// 채우기 옵션
		settingData.fill = fill[index];
		// 데이터 채우기 
		for(var i = 0; i < Chart.instances[0].config.data.datasets[0].data.length; i++){
			settingData.data.push(randomScalingFactor());
		}
		// 데이터 반영 
		Chart.instances[index].data.datasets.push(settingData);
		// 라인 차트 업데이트 
		Chart.instances[index].update();
	}
});

# 데이터 추가 버튼

// 데이터 추가 버튼 
document.getElementById('addData').addEventListener('click', function() {
	// 모든 차트 순회하기 위한 KEY 값 배열
	var keys = Object.keys(Chart.instances);
	// 차트 순회하기 
	keys.forEach(elem => {
		// 차트 옵션의 달력 값 지정 
		var month = MONTHS[Chart.instances[elem].config.data.labels.length % MONTHS.length];
		// 차트 키 값  
		// console.log(elem);
		// 달력값 
		// console.log(month);
		// 차트 객체 
		// console.log(Chart.instances[elem]);
		// 차트 객체의 달력값 (라벨 지정)
		Chart.instances[elem].config.data.labels.push(month);
		// 데이터 값 세팅 
		Chart.instances[elem].config.data.datasets.forEach(function(dataset) {
			dataset.data.push(randomScalingFactor());
		});
		// 데이터 업데이트 
		Chart.instances[elem].update();
	});
});

# 차트 생성 옵션 

// 차트에 표현할 x 축의 값
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
// 차트에 표현할 컬러 
var 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 config = {
	type: 'line',
	data: {
		labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
		datasets: []
	},
	options: {
		// 컨테이너가 수행 할 때 차트 캔버스의 크기를 조정(dafalut : true)
		responsive: true,
		// 크기 조정 이벤트 후 새 크기로 애니메이션하는 데 걸리는 시간(밀리 초) (defalut : 0)
		responsiveAnimationDuration: 1000,
		// (width / height) 크기를 조정할 떄 원래 캔버스 종횡비를 유지 (defalut : true)
		maintainAspectRatio: true,
		// 캔버스 종횡비( width / height, 정사각형 캔버스를 나타내는 값) 높이가 속성으로 또는 스타일 통해 명시적으로 정의된 경우이 옵션은 무시
		aspectRatio: 2,
		// 크기 조정이 발생할 때 호출
		onResize: function () {
			console.log('onResize');
		},
		title: {
			display: true,
			// 차트 제목 
			text: 'Chart.js Line Chart'
		},
		tooltips: {
			mode: 'index',
			intersect: false,
		},
		hover: {
			mode: 'nearest',
			intersect: true
		},
		scales: {
			x: {
				display: true,
				scaleLabel: {
					display: true,
					labelString: 'Month'
				}
			},
			y: {
				display: true,
				scaleLabel: {
					display: true,
					labelString: 'Value'
				}
			}
		}
	}
};

// -100 ~ 100 사이 랜덤값 생성 
var randomScalingFactor = function () {
	return Math.round(Samples.utils.rand(-100, 100));
};
// 새로운 데이터 만들기 
var datasetSample = {
	label: 'label',
	backgroundColor: window.chartColors.red,
	borderColor: window.chartColors.red,
	data: [
		randomScalingFactor(),
		randomScalingFactor(),
		randomScalingFactor(),
		randomScalingFactor(),
		randomScalingFactor(),
		randomScalingFactor(),
		randomScalingFactor()
	],
};

   # chart.js Fill 옵션 정리 

    - Fill 옵션은 총 네 가지가 존재합니다 

    - false  : 아무것도 채워지지 않음

    - origin : 기준점 사이로 채워짐 

    - start : x축 선부터 채워짐

    - end : x축의 최대값의 기준으로 채워짐

   # chart 생성 옵션

var config = {
			type: 'line',
			data: {
				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
				datasets: []
			},
			options: {
				// 컨테이너가 수행 할 때 차트 캔버스의 크기를 조정(dafalut : true)
				responsive: true,
				// 크기 조정 이벤트 후 새 크기로 애니메이션하는 데 걸리는 시간(밀리 초) (defalut : 0)
				responsiveAnimationDuration: 1000,
				// (width / height) 크기를 조정할 떄 원래 캔버스 종횡비를 유지 (defalut : true)
				maintainAspectRatio: true,
				// 캔버스 종횡비( width / height, 정사각형 캔버스를 나타내는 값) 높이가 속성으로 또는 스타일 통해 명시적으로 정의된 경우이 옵션은 무시
				aspectRatio: 2,
				// 크기 조정이 발생할 때 호출
				onResize: function () {
					console.log('onResize');
				},
				title: {
					display: true,
					// 차트 제목 
					text: 'Chart.js Line Chart'
				},
				tooltips: {
					mode: 'index',
					intersect: false,
				},
				hover: {
					mode: 'nearest',
					intersect: true
				},
				scales: {
					x: {
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Month'
						}
					},
					y: {
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Value'
						}
					}
				}
			}
		};

   # chart 데이터 셋 생성

	// -100 ~ 100 사이 랜덤값 생성 
		var randomScalingFactor = function () {
			return Math.round(Samples.utils.rand(-100, 100));
		};
		// 새로운 데이터 만들기 
		var datasetSample = {
			label: 'label',
			backgroundColor: window.chartColors.red,
			borderColor: window.chartColors.red,
			data: [
				randomScalingFactor(),
				randomScalingFactor(),
				randomScalingFactor(),
				randomScalingFactor(),
				randomScalingFactor(),
				randomScalingFactor(),
				randomScalingFactor()
			],
		};

# chart 생성하기

// line1 ========================================================
// 생성할 canvas 요소 
var line1 = document.getElementById('line1').getContext('2d');
// config 파일 복사
var line1Config = JSON.parse(JSON.stringify(config));

// 데이터셋 생성하기 
var line1DatasetSample = datasetSample;
/// 라벨 
line1DatasetSample.label = 'line1 Dataset Sample';
// 채우기 옵션 
line1DatasetSample.fill = false;
// 채웠을 때 색깔
line1DatasetSample.backgroundColor = window.chartColors.red;
// 선 색깔 
line1DatasetSample.borderColor = window.chartColors.yellow;
// 데이터 채우기 
line1Config.data.datasets.push(line1DatasetSample);
// 타이틀값 
line1Config.options.title.text = 'line1/Fill Option = false';
// 차트 생성하기
window.line1 = new Chart(line1, line1Config);
//  ======================================================== line1

# 결과화면