728x90 개발/게시판 만들기21 [Vue] Vue.js 게시판 만들기 13 - JWT와 필터 적용 JWT(Json Web Token) 생성 로그인 방법중 토큰을 사용한 로그인을 진행하려고 합니다. JWT를 적용하여 토큰을 발급받고 토큰의 정보를 확인하는 방법을 적용하겠습니다. JWT 의존성은 이전 포스팅에서 추가하였으므로 바로 사용할 수 있습니다. 먼저, 토큰을 생성하고 확인하는 메서드를 생성하겠습니다. util 패키지를 생성하고 JwtUtil.java 파일을 생성합니다. /* util / JwtUtil.java */ import com.auth0.jwt.JWT; import com.auth0.jwt.JWTVerifier; import com.auth0.jwt.algorithms.Algorithm; import com.auth0.jwt.exceptions.JWTVerificationException;.. 2022. 6. 27. [Vue] Vue.js 게시판 만들기 12 - DB 변경과 시큐리티 설정 H2 DB에서 MariaDB로 변경 이전의 백엔드 프로젝트는 H2 Database를 사용했습니다. 로그인 이후 데이터 관리 등을 위해 MariaDB를 세팅하고 사용하도록 합니다. 도커 혹은 로컬에 MariaDB나 MySQL을 설치해주세요. (도커에 MariaDB 설치하기) vue-backboard의 application.yml 내용을 변경합니다. (jpa와 datasource 내용이 변경되었습니다.) datasource의 url과 username, password는 각자의 설정에 맞게 변경해주세요. server: port: 8081 spring: jackson: property-naming-strategy: SNAKE_CASE h2: console: enabled: true settings: web-al.. 2022. 6. 22. [Vue] Vue.js 게시판 만들기 11 - 로그인 화면 만들기 안녕하세요. 이전에 작성한 Vue.js 게시판 만들기를 정말 많은 분들이 찾아봐주셨습니다. 이번 포스팅부터는 로그인과 댓글 기능을 구현하면서 게시판 이외에도 실습해볼 수 있는 샘플 프로젝트를 만들어보려 합니다. 이전의 프론트엔드와 백엔드 프로젝트를 사용하므로 전의 포스팅들을 참고해주세요. (이후 포스팅부터는 챕터별로 브랜치를 업로드할 예정이며, 이번 포스팅까지의 화면 소스는 vue-frontend의 chap11 브랜치에 업로드 되어있습니다.) 로그인 화면 생성 우선 로그인을 진행할 화면을 만들도록 하겠습니다. vue-frontboard 프로젝트를 열고 views 폴더 아래로 common 폴더와 안에 Login.vue 파일을 생성합니다. 로그인 화면 소스를 간단하게 작성합니다. Please Log In L.. 2022. 6. 21. [Vue] Vue.js 게시판 만들기 10 - 게시글 검색 (with QueryDSL) Backend 게시글 검색 구현 게시글을 가져올 때, 검색 정보가 있으면 해당 정보로 검색된 리스트를 가져와야 하고 없으면 기본적인 리스트를 가져와야 합니다. 즉, 검색 정보가 Null인지 아닌지, Null이 아니라면 어떤 키의 데이터를 가져올지 만들어주어야 합니다. 쿼리를 직접 만들수도 있고, JPA + QueryDSL을 통해 자바 클래스와 메서드를 조작하는 방식으로 작업할 수 있습니다. 이번 포스팅은 JPA + QueryDSL을 통해 데이터를 가져오는 방법으로 진행해보겠습니다. 먼저 build.gradle에 QueryDSL과 관련된 부분을 추가합니다. plugins { id 'org.springframework.boot' version '2.6.3' id 'io.spring.dependency-man.. 2022. 3. 7. 이전 1 2 3 4 5 6 다음 728x90
