본문 바로가기

전체 글

 (268)
9. Vuex에 대해서 Springboot와 Vue 로그인 기능 구현하기 springboot에서 배운 JWT로그인 방식을 Vue에서도 사용하고싶다. 우선 Vue에서 할 일은 로그인 페이지 에서 /authenticate 시 token과 사용자의 정보를 저장하고 이후 api를 요청할때 token을 담아 보내 인증된 사용자라고 증명하는 것 위의 토큰과 사용자의 정보를 저장하기 위해 상태관리 라이브러리인 Vuex를 사용했다. Vuex란? Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 무수히 많은 컴포넌트의 데이터를 관리하기 위한 라이브러리 애플리케이션의 모든 컴포넌트들에 대한 중앙 집중식 저장소의 역할 및 관리를 담당 공통의 상태를 공유하는 여러 컴포넌트가 있는 경우 사용하기 적합하다 npm으로 Vuex 설치 npm ..
11월 5주차 - 12월 1주차 1. 상세페이지 구현 vue-table에서 각 열을 클릭하면 해당 글의 세부페이지로 이동되게 구현한다. 을 사용하여 클릭 이벤트를 넣는데 문제가 생겼다. -> data-table 자체에 모달을 삽입했기 때문 v-slot을 사용해서 직접 행을 그려준 뒤, 거기에 클릭 이벤트와 모달을 작성해주자 8. 상세페이지 출력 (springboot + vue 6) 상세페이지를 만들기 전 vue-table에서 각 열을 클릭하면 해당 글의 세부페이지로 이동되게 구현한다. (페이지가 넘어갈때 id도 함께 넘겨주자) v-slot을 사용하여 직접 테이블 열을 만들어서 클릭 dwc04112.tistory.com 2. 로그인 페이지 구현 상세페이지 구현이 끝나면 할 일. (JPA로 CRUD를 구현한 springboot에 적용해보기..
8. 상세페이지 출력 (springboot + vue 6) 상세페이지를 만들기 전 vue-table에서 각 열을 클릭하면 해당 글의 세부페이지로 이동되게 구현한다. (페이지가 넘어갈때 id도 함께 넘겨주자) v-slot을 사용하여 직접 테이블 열을 만들어서 클릭 이벤트를 넣었다. [다음 블로그에 이유가 잘 나와있다] Home.vue {{item.id}} {{ item.subject }} {{item.author }} {{item.writeDate }} {{item.readCount }} v-slot을 사용하여 각 열을 클릭하면 해당하는 id를 이동하는 페이지로 넘겨주게 작성했다. 아래는 클릭을 하면 발생하는 메소드로 vue router의 query방식으로 데이터를 전달한다. methods: { inView(id){ this.$router.push({path:'...
7. 게시판 출력 (Vue + Springboot 연동 5) Vuetify를 사용한 게시판 어찌저찌 Springboot에서 데이터를 가져와서 Vue를 통해 보여줬다. Vuetify를 사용하니 게시판 형태를 구현하기가 너무 쉬워서 깜짝놀랐다 그리고 Springboot에서 구현한 page를 나누는 기능을 여기서는 자동으로 지원해주니 더 편했는것 같다. {{props.item.id}} {{ props.item.subject }} {{ props.item.author }} {{ props.item.writeDate }} {{ props.item.readCount }} headers : 테이블의 헤더를 정의 items : 테이블에 나타낼 내용을 정의 이 두개의 옵션은 보통 data: () 안 쪽에 정의하는 것이 일반적이다. 테이블에 나타내야할 내용이 많아질수록 그대로 나 ..
11월 4주차 1. Vue.js+Springboot로 게시판 리스트 구현하기 7. Vue + Springboot 게시판 Vuetify를 사용한 게시판 어찌저찌 Springboot에서 데이터를 가져와서 Vue를 통해 보여줬다. Vuetify를 사용하니 게시판 형태를 구현하기가 너무 쉬워서 깜짝놀랐다 그리고 Springboot에서 구현한 page를 나 dwc04112.tistory.com 2. Maven과 Gradle 대표적인 빌드 관리 툴에 대해서
6. get방식 통신2 (Vue + Springboot 연동 4) axios 통신 이번 연습에는 서버에서 boardList를 받아와서 원하는 내용 보여주자 Home.vue {{user.content}} v-for 지시문으로, for문을 돌려 users를 탐색하여 content를 보여준다. Script data()안에 users 배열 변수 선언 methods에 retieveUsers함수를 추가한다. 이 부분이 Axios를 활용하여 Get 요청을 보내는 것이다. 이후 Mounted에 retieveUsers를 호출한다. Mounted는 lifecycle 단계 중 하나로, 쉽게 얘기하여 페이지가 로드될 때 이 함수를 수행하겠다. 라는 의미이다. 나머지 부분은 [Springboot+vue 연동3] 에서 설명했으니 넘어가도록 하자 springboot 연동 3, 4를 성공적으로 구..
5. get방식 통신 (Vue + Springboot 연동 3) 드디어 Vue와 Springboot 통신을 위한 준비가 다 되었다. axios를 통해 spring으로 데이터를 보낸 후 다시 Vue로 받아보자 (Get방식 통신) Vue 통신을 확인하기 위해서 프론트의 Home.vue의 코드를 다음과 같이 바꿔주었다 Click {{a}} methods 부분에서 axios를 사용해서 backend와 통신하고 있다 this.axios.get 부분에서 통신을 하고 있고, get방식으로 통신이 진행된다 '/example' 부분은 보내는 주소이다. 스프링에서 /example로 받는부분을 작성 { params: ... } : params에 보낼 데이터를 넣으면 된다. 만약 없다면 안넣어도 된다 .then(result => { }) : 통신을 보낸 다음 데이터의 결과를 볼 수 있게 ..
4. axios & vuetify (Vue + Springboot 연동 2) 어제까지 Vue build후 Springboot를 실행하면 Vue화면이 나오는 것 까지 성공적으로 실행했습니다. 이번에는 Vue와 Springboot 연동을 위해 axios와 vuetify를 설치할 것입니다 (vuetify는 3.xx 버전을 지원하지 않아서 2.xx버전을 다운받았음..) 1. Axios javascript 어플리케이션에서 서버 통신을 하기 위한 HTTP 통신 라이브러리. Vue.js에 종속되는 것이 아니라 다른 js 어플리케이션에서도 일반적으로 많이 사용된다 npm install axios vue의 node_modules에 설치하기 위해서 처음에 만든 vue파일 위치에서 axios를 받자. import Vue from 'vue' import App from './App.vue' impor..

티스토리툴바