728x90 Vue.js15 [Vue] Vue.js 게시판 만들기 15 - 데이터 로딩 나타내기 지난 포스팅까지 진행하여 로그인 처리를 구현해봤습니다. 이번에는 로딩바를 통해 현재 서버와 통신중임을 사용자에게 안내하여 기다릴 수 있도록 해보고자합니다. 화면에서 서버로 어떤 작업을 요청했을 때, 서버의 처리가 오래 걸리게 되면 화면은 응답을 계속 기다리게 됩니다. 사용자는 현재 작업중인지 완료되었는지 알 수 없으므로 화면에서 벗어나지 않고 대기할 수 있도록 표시해주어야 합니다. Vuex에 로딩 상태 추가 전역으로 로딩 상태를 관리하기 위해 아래 작업을 진행합니다. 먼저 mutation_types.js에 LOADING_STATUS를 추가합니다. /* src/vuex/mutation_types.js */ export const USER_ID = 'USER_ID' export const ERROR_STAT.. 2022. 7. 4. [Vue] Vue.js 게시판 만들기 14 - Vue Router 네비게이션 가드 지난 포스팅에서 JWT를 이용한 로그인을 구현하고 화면에서 로그인 성공 후 발급받은 토큰을 확인했습니다. 이번 포스팅에서는 게시판을 이용하려면 로그인이 필요하도록 화면을 수정해보겠습니다. Vue Router 네비게이션 가드 Vue의 router/index.js에 포함되어있는 컴포넌트로 이동하려고 할때, Vue Router의 네비게이션 가드를 통해 특정 권한을 가지고 있는지 혹은 데이터를 가지고 있는지 확인하여 이동을 제어할 수 있습니다. (https://v3.router.vuejs.org/kr/guide/advanced/navigation-guards.html) 네비게이션 가드의 종류는 3가지가 있습니다. 전역 가드 라우트 별 가드 컴포넌트 내부 가드 이번 포스팅에서 다뤄볼 가드는 라우트 별 가드입니다... 2022. 6. 28. [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. 이전 1 2 3 4 다음 728x90
