Vue/bookStore (14) 썸네일형 리스트형 BookStore 프로필 업로드 새로고침 현상 수정 내용 기존의 프로필 수정시 서버에서 프로필을 저장하고 저장한 위치를 vue의 store에서 저장하는 과정중 새로고침 현상이 일어나서 변경된 사진으로 갱신을 못하는 현상 수정 원인 받은 url을 store의 action에서 require로 가공후 저장하는 과정에서 새로고침 발생 해결 action에서 파일 위치만 저장 후 mutations: { ... isLoading : function(state, data){ state.loadingData = data; console.log("hi") }, putProfile: function (state, data){ state.userData.nickName = data.nickName state.userData.profilePicture = data.profile.. 로그인 변경점과 문제점 해결 변경 사항 기존의 로그인 방식은 아래와 같았다. (vue)login > (Spring)spring에서 로그인 처리 후 token 반환 > (vue)store로 데이터 전송 > store에서 받은 정보로 (Spring)유저 정보 조회 > 받은 정보 state에 commit 그래서 위 사진과 같이 총 쿼리가 4번이나 발생한다 로그인시 유저 조회, 토큰 검증시 조회 (유저정보 조회) 다시 유저 전체데이터 조회 (유저정보 조회) 반환할 유저 정보 조회 (유저정보 조회) 거기다 action의 비동기 로직처리 때문에 setTime으로 딜레이를 준 것 까지 합해 꽤 많은(?) 시간을 기다려야했다. 그래서? 로그인시 필요한 데이터를 전부 뽑아서 반환해주기로 했다. Jwt인증컨트롤러에서 기존에 검사할때 조회한 membe.. 10 . 검색과 자동완성 코로나와 기사시험 필기 준비로 인해 블로그 작성을 하지 못했다.. 4월 24일에 필기시험이 끝났는데 실기는 7월 말이라고 한다. ( 기다리기도 힘들다.. ) 이제 시험도 끝났고 다시 bookStore 만들기를 진행하겠다. 이번 글에서는 자동완성 기능의 동작 방법을 간단하게 설명한다. 자동완성 기능 vuetify에서 제공하는 v-autocomplete도 있지만 검색어가 남지 않는다던가 데이터 바인딩, 디자인 등 원하는대로 구현하기 힘들어서 직접 만들었다. ( 그리고 bookStore 페이지를 조금 꾸며줬다. 이게 제일 힘들었음... ) 텍스트 필드에 입력 값을 vue watch에서 감지하여 계속 서버와 통신한다. 자세한 내용은 아래에. Vue - template // 여기는 검색어를 입력하는 곳 // 여기.. 9. 도서 위시리스트 위시리스트 구현 동작 DB Springboot Vue.js 1. 위시리스트 동작 책 추가 , 책 삭제, 카테고리 삭제, 카테고리 추가 사진1. 각각의 책 card에 있는 위시리스트 추가 버튼을 누르면 다음과 같은 나의 위시리스트 다이얼로그 표시 (Dialog = true) 사진2. 나의 위시리스트 다이얼로그에는 로그인된 정보에 해당하는 위시리스트 카테고리들이 출력된다. 카테고리를 선택하면 사진1. 에서 선택한 책번호(bid)를 등록하겠냐는 문구가 출력 -> 사진3. 사진3. 등록버튼을 누르면 정보(책 번호, 선택한 카테고리)가 Springboot 로 넘어간다 Springboot 에서는? 1. 선택한 카테고리에서 해당 책 번호가 있는지 확인 -> 있다면 사진4. 2. 없다면 새로운 카테고리 번호(Title.. 8. 도서 위시리스트 (Spring boot) Wishlist Table bid와 mid를 외래키로 받는 비식별 관계 테이블을 생성했다 Springboot Jpa Entity에서도 복합키 설정을 해주려 했지만 many to one (lazy) 관계에서 join n+1 문제 fetch join시 on을 사용하지 못하는 불편함과 제일 큰 문제점인 insert에 문제가 생겼다. 필요한 데이터가 많지 않아서 Jpa에서 단일 테이블로 필요 데이터를 집어넣는 방식으로 구성을 했다. @Slf4j @Service @RequiredArgsConstructor public class WishlistService { final WishlistRepository wishlistRepository; final MemberRepository memberRepository; .. 7. 도서 리스트 1 책 등록 수정 카카오api를 사용하여 도서 정보를 가져왔는데 책 소개 내용도 잘리고 이미지 화질도 너무 별로였다. 그래서 isbn을 입력하면 교보문고의 이미지를 가져오도록 수정하였다. 도서 리스트 출력 저번 글 이후 부터 거의 Vue를 사용한 작업만 한거같다. vuetify에서 제공하는 v-row & col을 사용하여 구역을 나누고 책을 출력했지만 원하는 결과가 나오지 않아서 결국 v-layout과 v-flex를 사용하였다. vue를 사용하면 할수록 기본을 잘 배워두고 시작할걸 후회중이다.. v-carousel을 사용하여 책을 보여주는 mainBook.vue 화면과 카테고리 또는 태그를 선택하여 책을 분류해주는 about.vue (이름 바꿔야함..) 화면으로 구성하였다. footer는 선택한 태그를 보여.. 6. postBook - 도서등록 2 들어가기 이전 1. 카카오 책 검색 API 사용 API를 사용하면 키워드를 따로 등록해야 하고, 정보도 전체정보가 아닌 일부 정보만 제공했기 때문에 책API를 사용하지 않고 책을 하나하나 등록하려고 했었다. 직접 하나하나 등록하다가 보니 너무 막노동이라 카카오API를 통해 제공하는 정보는 넣고 추가로 넣어줘야 하는 정보는 직접 검색해서 넣어주기로 했다. 2. 추가되는 컬럼 벌써 4~5번이나 추가되고 삭제하는 것 같은데.. isbn은 String으로 바꿔주었고 책 소개 / 목차 / 서평 컬럼이 추가되었다. 그리고 전체적으로 컬럼 명이 바뀌었다. 3. 다양한 에러 그리고 컬럼이 추가되고 API를 사용하여 적용하는 도중 많은 에러가 떴었고 그 중 기억에 남는 에러는 400, 500에러와 데이터 타입에러 그리고.. 5. bookStore 도서 등록 도서등록을 하기전에 1. 로그인 구현 2. Store를 사용하여 토큰 state에 담기 3. 인터셉터로 토큰 실어주기 이전 Springboot + Vue 게시판에서 구현한 부분을 똑같이 만들어주었다. 도서 판매사이트를 참고하여 도서 테이블을 다시 만들었더니 컬럼의 수가 엄청 늘어났다. CREATE TABLE `book` ( `bid` bigint(20) NOT NULL COMMENT '책id', `mid` bigint(20) NOT NULL COMMENT 'member id', `title` varchar(300) NOT NULL COMMENT '책제목', `sub_title` varchar(200) NOT NULL COMMENT '부제목', `author` varchar(200) NOT NULL COM.. 이전 1 2 다음
