GO CAN DO IT

현재 예약 시스템은 화면에서 신청에 필요한 AccountId, 멤버십Id, 수업Id를 받아와 예약 히스토리에 해당 값을 insert하는 방식으로 진행한다. 이를 저장하기 위한 객체는 CourseReservation 객체였는데, 처음에는 AccountId만 PK로 지정했다가 수업Id와 AccountId를 같이 중복키로 등록해야 할 필요성이 생겼다. 이를 위해서 CourseReservationId라는 객체를 만들어주고 @Embeddable이라는 애노테이션을 붙여준다. 이렇게 PK만 따로 도메인을 만들어주면, 기존의 CourseReservation객체에서는 이를 주입받아서 사용하기만 하면 된다. @Data @Embeddable @NoArgsConstructor @AllArgsConstructor public ..

오늘 해야할 일은 테스트 코드를 완성하고 뷰에 데이터를 뿌리는일이다. 첫번째로 post 로 통신하고 파라미터를 @RequestBody로 받는 reserveOneCourse 메소드에 대한 테스트 코드를 작성해보았다. @Test public void reserveOneCourse() throws Exception { String content = objectMapper.writeValueAsString(new CourseReservationDto((1L),1,1)); mockMvc.perform(post("/reservation/1") .content(content)) .andExpect(status().isOk()) .andDo(print()); CourseMembership vo = courseMembe..

예약 시스템에서 사용자가 화면에서 수업을 예약/ 취소 할 경우 데이터를 핸들링하는 로직을 작성해보았다. 테스트 코드까지 완성시키는데 꽤 오래 걸렸다. 사용자가 예약 가능한 수업을 리스트를 조회하는 메소드를 테스트하는 로직이다. 멤버십 아이디에 대해서는 PathVariable로 받고 있기 때문에 기본 api 경로인 /reservation뒤에 1로 셋팅하고, 다른 유저아이디나 센터아이디, 기준일자에 대해서는 RequestParameter로 받고 있기 때문에 mockMvc의 Param으로 셋팅한다. @Test public void getCourseList() throws Exception{ MultiValueMap param = new LinkedMultiValueMap(); param.add("userId"..

화면단과 서버간의 통신을 위하여 axios 통신을 구현해 보았다. 먼저 아래의 명령어를 통해 axios 라이브러리를 설치해준다. $vue add axios Main.js에 다음과 같이 axios 설정을 해준다. import Vue from 'vue' import './plugins/axios' //####이부분 import App from './App.vue' //####이부분 import router from './router' import vuetify from './plugins/vuetify' //import axios from 'axios' Vue.prototype.$http = axios //####이부분 new Vue({ el: '#app', router, vuetify, axios, //#..

뷰에서는 라우터를 통해 뷰 파일과 url 을 연결해주는 기능을 제공한다. 뷰 예제에서는 보통 App.vue에 직접 라우터 경로를 임포트 하고, 해당 라우터 객체를 뷰인스턴스의 변수로 사용했다. 아래의 코드처뤔. 하지만, 대형 프로젝트에서는 이렇게 하지 않고 index.js라는 파일을 통해 라우터를 한꺼번에 관리한다. $mkdir router $cd router $vi index.js 를 통해 router라는 디렉토리를 하나 만들고, index.js라는 파일을 생성해주었다. 프로젝트 구조는 다음과 같아졌다. - src - components - router - index.js - App.vue main.js에서 우선 설정을 해준다. // 1. main.js import Vue from 'vue' impor..

이제 실제로 내가 뷰 프로젝트를 개발해보도록 하겠다. 백쪽은 JPA로 구현할거라서 우선, 통신은 구현하지않고 화면이랑 공통 레이아웃을 기준으로 우선 프론트쪽을 구현해보겠다. 가장 먼저 할 것은 바로 vuetify 설치! vuetify를 사용하기 위해 먼저 터미널에서 작업하려는 폴더로 이동 후, vuetify 를 깔아준다. $cd vue-form $vue add vuetify 뷰티파이 공식 사이트는 api 설명이 친절하게 잘되어있어서 여기꺼 보고 거의 따라하는 식으로 구현했다. https://vuetifyjs.com Navigation drawer component The navigation drawer component contains internal navigation links for an appli..