[02.15] 내일배움캠프[Spring] TIL-71
1. Spring final Project
- 오늘 진행한 일
1) 맡았던 CRUD의 PR을 바탕으로 코드리뷰 및 수정 진행
2) 카카오 API를 사용해서 주소를 검색하고, 검색에 대한 선택을 바탕으로 x,y,address값을 DB에 저장
1) 코드 리뷰 및 수정
- Page의 요소들을 Param형태로 전달받게 되는데, 그 때 하나씩 지정하지 않고, 객체하나로 받아올 수 있도록 하기 위해서 @Setter가 필수적인데 Lombok -> @Setter를 빼먹은 실수!
- 해당 리뷰의 주인을 가려내기 위해서 처음 구상 때 TutorID값이 필요하다고 생각했지만, PK가 존재하기 때문에 굳이 필요 없을 것 같다.
- ServiceInterface를 정의하는 종류가 많아 *로 대체하였는데, 생각해보니 필요로 하지 않는 interface도 참조될 수 있기 때문에 그 부분을 수정했다.
2) 카카오 주소 찾기 API 작업
- 테스트를 위한 html 및 스크립트 구문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--kakao서비스 이용을 위한 참조-->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=6316a86b40c674ebf790e60e861e1731&libraries=services"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--주소 찾기 버튼을 클릭했을 때 진행할 Event-->
<script>
<!--address로 x,y값을 뽑아내기 위한 geocoder-->
var geocoder = new daum.maps.services.Geocoder();
var x;
var y;
var found_address;
function save_location(){
$.ajax({
type: "POST",
contentType: 'application/json; charset=utf-8',
url: "/location",
data: JSON.stringify(
{
"vectorX" : x,
"vectorY" : y,
"address" : found_address
}
),
success: function (response) {
alert(response);
}
});
}
function sample5_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
found_address = data.address; // 최종 주소 변수
// 주소 정보를 해당 필드에 넣는다.
document.getElementById("sample5_address").value = found_address;
// 주소로 상세 정보를 검색
geocoder.addressSearch(data.address, function(results, status) {
// 정상적으로 검색이 완료됐으면
if (status === daum.maps.services.Status.OK) {
var result = results[0]; //첫번째 결과의 값을 활용
x = result.y;
y = result.x;
console.log("x :" +x + "y : " + y + "address : "+ found_address);
}
});
}
}).open();
}
</script>
</head>
<body>
<input type="text" id="sample5_address" placeholder="주소">
<input type="button" onclick="sample5_execDaumPostcode()" value="주소 검색"><br>
<input type="button" onclick="save_location()" value="저장하기"><br>
</body>
</html>
- 초기 페이지 매핑과 DB에 저장을 하기 위한 간단한 Controller
package com.sparta.soomtut.controller;
import com.sparta.soomtut.dto.request.LocationRequestDto;
import com.sparta.soomtut.entity.Location;
import com.sparta.soomtut.entity.Member;
import com.sparta.soomtut.repository.LocationRepository;
import jakarta.transaction.Transactional;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
@Controller
@RequiredArgsConstructor
public class LocationTestController {
private final LocationRepository locationRepository;
@RequestMapping(value = "/")
public String locationTest(){
return "/map_view";
}
@Transactional
@ResponseBody
@PostMapping(value = "/location")
public String saveLocation(@RequestBody LocationRequestDto locationRequestDto){
float x = locationRequestDto.getVectorX();
float y = locationRequestDto.getVectorY();
String address = locationRequestDto.getAddress();
locationRepository.save(new Location(address,x,y));
return "저장이 완료되었습니다!";
}
}
- Troble : 계속해서 x,y좌표 변환에서 문제가 생겼었다 -> Geocoder()를 계속 읽지 못했음!
-> 해결 : 처음 제공한 KEY를 바탕으로 서비스 라이브러리의 스크립트 참조가 이뤄지지 않아서 그 객체를 사용할 수 없었다.
기록하는 습관