주차 위치 기억 서비스 만들기 for 부모님
배경
우리 아파트 지하주차장은 지하1층부터 지하 4.5층까지 사실상 8개층으로 구성되어 있습니다 그래서 차를 주차하고 어디다 뒀는지 기억이 안나기 일 수라고 항상 부모님이 투털대십니다 그래서, 이 불편함을 어떻게 해소시킬 수 있을지 고민이었습니다.
무엇을 어떻게 만들어야 하는가?
서비스를 만들기 전 어떤 것부터 어떻게 만들어야하는지 막막했습니다. 처음에는 DB 에 저장되어있는 층 데이터를 가져와서 뷰에 동적인 변화를 일으키는 것을 설계했습니다. 하루만에 빨리 만들어야하는데, 아직은 저희 부모님만 쓰실 계획이라서 DB 설계는 아주 간단히 하기로 했습니다.
나중에 정식 서비스로 제대로 개발할 때 각 아파트에 저장되어있는 주차장 데이터를 등록해서 아파트 주민들이 제가 만든 주차장 서비스를 사용해서 편리해질 수 있도록 하는 것이 앞으로의 계획입니다.
일단 간단하게 만들기 위해서 jpa 의 save 메소드를 이용해서 (처음에는 insert 만약 데이터가 있다면 update 를 하는 메소드) 첫 row 를 계속 update 하는 방식으로 설계했습니다.
ERD
계속 insert 되는 것이 아니라 1 열에 계속 update 되는 것으로 설계했습니다.
특정 층을 클릭하면 마지막 주차 위치 가 옆에 뜹니다
원래는 mybatis 를 썼지만 지금은 jpa 를 연습 중입니다. 아직 연습중이라 java 설계구조가 익숙하지않아서 제가 보던 [스프링 부트와 AWS로 혼자 구현하는 웹 서비스] 의 내용을 참고 하여 만들었습니다
service 를 작성할 때 dto 에 만들어놓은 builder 를 잘 활용하지 못했습니다.. 왜냐하면 책만 보고 따라했기 때문입니다. 근데 직접 이렇게 책을 응용해서 제 서비스를 따로 만드려하니 책을 보고 따라해서 낳은 제 실력의 부족함이 보였습니다. 그래서 builder 의 중요성을 제대로 알게되어서 이번에 제대로 응용할 수 있었습니다.
package hachi.parkingapp.domain.park;
public class ParkPosition {
//앞 코드는 중략
@Builder
public ParkPosition(Long no, String lastPosition, LocalDateTime updateDate) {
this.no = no;
this.lastPosition = lastPosition;
this.updateDate = updateDate;
}
}
이렇게 선언한 builder 를 service에서 응용할 수 있습니다.
package hachi.parkingapp.web;
@Service
public class ParkPositionService {
public ParkPosition save(String lastPosition) {
ParkPosition parkPosition = ParkPosition.builder()
.lastPosition(lastPosition)
.updateDate(LocalDateTime.now())
.no(1L)
.build();
}
}
controller 와 service 그리고 repository 까지 다 만들고 나서 view 를 만드려고했습니다. 야심차게 이번에 thyme leaf 를 사용해보자고 마음 먹었습니다. 하지만 생각해보니 역할은 js 가 다할 것이고.. thyme leaf 의 역할이 없다고 생각들어서 마음을 바꿔먹었습니다.
$.ajax 보다 다른 것이 있나 하면서 javascript 공식 사이트를 찾아보던 중 $.post 를 찾아서 응용해봤습니다
const LAST_MARK = '<span class=".last" style="font-size: 44px;">[마지막]</span>';
$(document).ready(function () {
$.get('/park', function (_lastPosition) {
$('div').each(function () {
let floor = $(this).text();
if (floor == _lastPosition) {
$(this).append(LAST_MARK);
}
});
});
});
$('div').on('click', function () {
let floor = $(this).text();
$.post("/park", {lastPosition: floor})
.done(function (data) {
let _lastPosition = data.lastPosition;
$('div').each(function () {
let floor = $(this).text();
if (floor == _lastPosition) {
$(this).append(LAST_MARK);
} else {
$(this).find('span').remove();
}
});
});
})
모두 다 하고 이제 서버에 연결하고 배포해야합니다. 똑같이 책보면서 따라하는데 여러가지 막히는 부분이 많았습니다. 그래서 차근차근 다시 정리했습니다.
첫째로 ec2 를 새로 만들고 거기에 maven 을 먼저 설치하고 git 을 설치했습니다. maven 을 먼저 설치하는 이유는 메이븐을 설치할 때 java 1.7 을 다운받기 때문입니다 (우리는 1.8을 사용해야합니다)
aws 인스턴스에 접속해서 보안그룹을 원래 이미 설정한대로 잡아줬습니다
안해주면 db도 접속 안되서 maven 도 돌아가지않습니다
원래는 자동으로 배포하게 deploy.sh 를 설정해줘야하는데 maven 이 install 해서 만든 jar 파일을 배포해줍니다 (이 jar 파일은 target/classes 에 있습니다.)
$ java -jar /home/ec2-user/.m2/repository/hachi/parking-app/0.0.1-SNAPSHOT/parking-app-0.0.1-SNAPSHOT.jar &
완성본 !!!
정리하면서
jpa 도 처음 응용해보고, 게시판이 아닌 제 아이디어로 서비스만든 것이 많은 배움과 경험이 되었던 것 같습니다. 처음에는 웹 앱을 만들 계획이었습니다. 제가 좀 더 많은 경험이 쌓인다면 이 서비스 그대로 보강해서 웹 앱도 만들 생각입니다 앞으로도 이렇게 다양한 서비스를 빨리 빨리 만들면서 실력도 늘려보고 경험도 쌓아보고싶습니다.