Study (10) 썸네일형 리스트형 Spring Boot, Vue.js 캘린더 일정 조회 및 세부사항 조회 추가된 이벤트 조회 및 상세보기 지난 게시글에서 구현한 이벤트 추가하기에 이어 이벤트 조회 및 상세보기를 구현해 볼 것이다. Event 조회는 Event의 시작일 혹은 종료일이 해당 캘린더의 Month와 같은 것들만 조회할 것이다. 캘린더에 보이는 이벤트를 클릭했을 때 이벤트의 세부 정보를 볼 수 있는 Dialog를 띄울 것이다. 이벤트 조회 Spring Boot Event의 시작일의 연도, 개월과 종료일의 연도, 개월을 각각 비교해야 하고 이벤트를 조회하는 회원도 고려해야 한다. 쿼리가 조금씩 난잡해질수록 QueryDSL를 사용하는 게 매우 효율적이다. 그러므로 Event를 조회하는 쿼리는 QueryDSL로 작성해 볼 것이다. QueryDSL 의존성 추가 plugins { id "com.ewerk.gr.. Spring Boot, Vue.js 캘린더에 일정 추가하기 이벤트 추가하기 지난 게시글에서 이벤트 추가 Dialog를 생성하였다. 오늘은 Dialog를 통해 이벤트를 추가하면 해당 유저의 Event Table에 데이터가 삽입되고 캘린더에 추가된 이벤트가 보이도록 해볼 것이다. Spring Boot Event Entity @Entity @NoArgsConstructor(access = AccessLevel.PROTECTED) @Getter public class Event extends BaseTimeEntity { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name = "event_id") private Long id; @ManyToOne(fetch = FetchType.LAZY) @Join.. Vue.js 캘린더 UI 구현, Event 추가 Dialog 구현 Vuetify Calendar를 이용하여 캘린더를 구현해보고 캘린더에 Evnet를 등록하여 Event가 캘린더에 보일 수 있도록 구현해볼 것이다. v-calendar v-calendar를 사용하면 간단하게 캘린더 틀을 구현할 수 있다. 필요한 부분을 하나씩 커스텀하면 된다. v-calendar를 사용하면 이러한 형태로 캘린더가 보인다. 현재 테마를 dark 모드로 진행하고 있기 때문에 캘린더 테마도 dark로 하였다. v-calendar에는 start와 type이라는 props가 존재한다. start의 값이 2020-01-01라면 캘린더는 1월의 캘린더를 보여주게 된다. type은 여러 가지 존재하지만 대표적으로 month, week. day가 존재하는데 type에 따라 캘린더가 변형된다. 예를 들어 s.. Vue.js GitHub와 Netlify에 배포하기 Vue.js 프로젝트를 Netlify와 Github에 배포해보겠습니다. Netlify로 배포할 경우 Git Repository만 등록한다면 Push만으로 간단하게 배포할 수 있습니다. Github의 경우 따로 Build 된 파일을 저장소에 올려 배포할 수 있습니다. 먼저 배포를 위해 프로젝트와 Git 저장소를 만들어 보겠습니다. 프로젝트와 저장소 만들기 Vue CLI를 이용하여 Vue 프로젝트를 하나 만들겠습니다. 그리고 GitHub Repository를 만듭니다. Vue 프로젝트를 만들면 따로 git이 초기화되어 있기 때문에 생성한 Repository의 remote 설정 후 Repository에 Push 합니다. 정상적으로 Repository에 Push 된 것을 확인할 수 있습니다. 먼저 Netlify.. SpringBoot와 Vue.js를 이용한 회원가입, 로그인 기능, 권한별 라우터 설정 이전 게시글들에서 제작하였던 SpringBoot를 이용한 Auth2.0 서버와 Vue 로그인, 회원가입 화면을 통해 로그인, 회원가입 기능을 구현하고 라우터 내비게이션 가드를 이용해 권한별 라우터 설정을 하는 게시글입니다. 회원가입 기능 우선 UI framework를 Vuetify로 변경하였다. 회원가입 입력 검증 Resister.vue의 template 코드이다. 빨간 밑줄의 :rules를 통해 입력 검증이 가능하다. rules은 전달 인자(Argument)로 현재 입력 폼의 text를 넘겨준다. 그 값을 이용하여 아래와 같이 검증을 할 수 있다. 왼쪽 코드는 vuex의 state 코드이다. 각 검증을 ||(OR)을 통해 한 것을 알 수 있는데 즉 첫 번째 코드가 참이면 true가 되므로 뒤의 요구사항.. SpringSecurity OAuth CORS 문제 CORS Cross-Origin Resource Sharing의 약자로 추가 HTTP Header를 사용하여 다른 오리진(도메인이나 포트번호가 다른 서버)의 자원에 접근권한을 부여하는 메커니즘이다. 보통 다른 오리진에게 리소스를 요청할 때 cross-origin Http request에 의해 요청이 실행된다. 하나 이 요청은 동일 출처 정책(Same-origin policy)에 의해 요청이 차단된다. 동일 출처 정책 만약 응답 리소스에 올바른 CORS 헤더가 포함되어 있지 않으면 다른 오리진에 요청한 리소스를 브라우저에서 보 안목 적으로 차단하는 것이다 스프링 부트와 뷰를 통해 개발 중인 프로젝트를 통해 이 문제를 확인해보자. 서버 측 코드 @RequiredArgsConstructor @Configura.. Vue.js Core Libraries(Vue Router와 Vuex), MD Bootstrap 설치 및 로그인 회원가입 화면 제작 vue 프로젝트 생성은 해당 게시글을 참조하시면 됩니다. 이해가 안 되는 부분들은 공식 사이트를 참조하시면 많은 도움이 될 거 같습니다. Vue Router, Vuex, Axios 설치 Vue Router 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리 Vuex vue.js 애플리케이션을 위한 상태 관리 패턴과 라이브러리 Axios 뷰에서 권고하는 Promise 기반의 HTTP 통신 라이브러리 vue create로 생성한 프로젝트의 package.json을 보면 core-js, vue만 의존성이 추가된 것을 알 수 있다. 화면 제작에 앞서 뷰의 코어 라이브러리인 vue router, vuex와 axios를 설치한다. npm을 통해 설치한 후 package.json을 보면 의존성이 추가된 것을 확.. Spring Security OAuth 2.0, Jwt #2(Resource Server) 지난 게시글에서 설정한 Authorization Server에 이어 Resource Server를 설정하는 게시글입니다. 저번 게시글에서 Authorization Server 설정을 통해 JWT 토큰을 발급하였다. 이번엔 Resource Server를 설정할 것이다. GET 요청에 대해서는 모든 사용자를 허가할 것이다. 나머지 요청에 대해서는 인증된 사용자만 허가를 할 것이다. 게시판을 생성하고 조회하는 예제를 통해 Resource Server가 정상적으로 동작하는지 확인한다. Board 엔티티 생성 @NoArgsConstructor(access = AccessLevel.PROTECTED) @Getter @Entity public class Board { @Id @GeneratedValue(strateg.. 이전 1 2 다음
