SpringBoot (49) 썸네일형 리스트형 #73 [MSA] 쇼핑몰 프로젝트 - 장바구니 전체페이지, 삭제 프론트 index.js // simple-cart : 장바구니 전체페이지 #3(장바구니 가기 버튼) { path: '/simple-cart', component: () => import('../views/simple-product/SimpleCartList.vue') } simpleCartList.vue this.retrieveSimpleCart()에서 this를 사용하는 이유는 Vue 컴포넌트 내에서 정의된 메서드인 retrieveSimpleCart를 호출하기 위해서입니다. Vue 컴포넌트 내에서 메서드를 호출할 때는 this 키워드를 사용해야 합니다. 이는 Vue 인스턴스 내부에서 컴포넌트의 데이터와 메서드에 접근할 수 있도록 합니다. 따라서 mounted 함수 내에서 this.retrieveSimp.. #72 [MSA] 쇼핑몰 프로젝트 - 장바구니 상세화면 프론트 모델링 : 마스터성 테이블 vs 히스토리성(이력) 테이블(개수가 무한정 증가) [ 추가/수정/삭제 일시를 관리하는게 좋음 ] SimpleCartService.js 상품 전체 조회, 상품 상세 조회 // SimpleCartService.js // 장바구니 공통 CRUD 함수 import http from "@/utils/http-common"; class SimpleCartService{ getAll(title, page, size){ return http.get(`/shop/simple-cart?title=${title}&page=${page}&size=${size}`); } } export default new SimpleCartService; index.js // simple-cart : 장바.. #71 [MSA] 쇼핑몰 프로젝트 - 전체조회, 상세조회 상세페이지 만들기 백엔드 : 패키지만 만들기 테이블 생성 인터넷에 있는 이미지 주소임. 이미지 파일 관리하지 않음 이미지 업로드 하는 곳도 있음 선생님은 아마존에 올렸음 올렸으면 관리를 해주지는 않음 ex) imgBB 무료 이미지 다운로드 하는 곳도 있음 프론트 index.html 부트스트랩 cdn 넣기 bootstratp@5.2.3 npm 추가 설치 - npm install bootstrap@5.2.3 - main.js 에는 아래 두줄 import // TODO: bootstratp import import 'bootstrap/dist/js/bootstrap.bundle' import 'bootstrap/dist/css/bootstrap.min.css' axios 라이브러리 설치 : 필수 - npm i.. #71 [MSA] 카프카 설치 및 실행 쇼핑몰 프로젝트 도커로 쪼개면 카프카로 쪼개짐 -> 쇼핑몰 만들기 프론트 : 도커로 만들기 백엔드 : 도커로 만들기 MVC 디자인 패턴 : Contorller, Service 사용 부서 서비스 용 도커, 사원 서비스용 도커 : 이렇게 따로따로 카프카를 통해 통신 하지만 우리는 백엔드 도커, 프론트 도커 이 두개로만 통신하기 프론트는 하나로 쓰고, 백엔드를 쪼개기 1. 파일 : 윈도우 하드디스크에 이미지 넣고, 하드디스크 경로만 올려서 접근 : 사이트 관리자가 안좋아함. 파일을 관리자가 계속 지워줘야함. 데이터베이스에 직접 넣는걸 선호했음 2. 갑자기 클라우드, 아마존 나옴. DB : 비싼데 여기에 이미지올리는건 어쩔수없었음. 이걸 대체하는 클라우드 서비스가 많이 나옴. 이 클라우드에서 지원하는 함수가 나.. #71 [Rest Client] 백엔드 테스팅 툴 백엔드 테스팅 툴 : Rest Client - 프론트 없이 백엔드 자체적으로 테스트하는 방법 - CRUD 컨트롤러 함수에 대해 테스트 가능 - CRUD 컨트롤러 함수 앞에 파란색 아이콘 클릭 ex) 비슷한 툴 : PostMan 툴(무료, 사용불편) Controller 에서 진행 백엔드로 json 파일이 보냄 1. 전체조회(get) 1. Controller 함수에서 왼쪽 api 클릭 : Controller 함수의 url 주소가 나옴 2. generated-requests.http으로 이동함 : 왼쪽 실행버튼 클릭 ### findAll() 컨트롤러 함수 : 전체조회 GET http://localhost:8000/api/basic/dept ### 전체조회 GET http://localhost:8000/api/.. #70 [Redis] 레디스 데이터베이스 종류 - 관계형 DB : 오라클(상용), My-sql(무료) 1) 테이블, 인덱스, 컬럼 등이 있는 구조 - 추가적 DB 운영 1) No-sql DB 종류 : Redis DB(캐싱 DB : 성능향상) -> Si 업체(쓰는지 모르겠음) vs 서비스업체(80% 사용) Mongo DB(문서 DB : json 파일, 데이터를 바로 저장) 20% 2) No-sql DB 정의 : 관계형 DB 형태를 따르지 않는 DB ex) Redis DB : Map 자료구조 형태 => (키, 값) Mongo DB : json 파일을 바로 저장 목적 성능 개선, 특수한 목적때 사용, 접속자 수가 폭주할 때 사용 단기간에 속도를 향상시키고 싶은 데이터를 잠깐 저장하고 날려버리는 기능 ex) 쇼핑몰에 이벤트로 몇월몇일 몇시.. #70 [Vue] Spring - Vue : 파일 업로드 - 삭제(delete) 공통 삭제 함수 만들기 FileDbService // TODO: 공통 삭제 함수 delete(uuid){ return http.delete(`/advanced/fileDb/delection/${uuid}`); } 전체 페이지에서 삭제 함수 만들기 FileDbList FileDbService의 delete 함수에서 uuid를 매개변수로 받아 함수를 실행한다. 삭제는 전체조회 페이지에 버튼이 있기 때문에 삭제하고 강제이동을 할 필요가 없음(this.$router.push("fileDb") 성공하던 실패하던 일단 로깅은 하는게 좋음. console.log 에 백엔드에서 어떤 신호가 왔는지 찍기 그리고 삭제 후 전체조회 페이지는 재조회하기 // TODO: 삭제 함수 async deleteFileDb(uuid) .. #70 [Vue] Spring - Vue : 파일 업로드 - 수정(update), 어노테이션, 파라메터 방식 @Controller : 클래스에 컨트롤러 기능 부여, 클래스위에 붙임 @GetMapping("url") 함수(){} : 함수의 위에 붙임, url 을 부여하는 기능 @RequestMapping("공통url") : 클래스 위에 붙임, 공통url 의미 부여 @RequestParam(defaultValue="") : 웹매개변수 전달받는 기능 부여 @ModelAttribute : 객체를 웹매개변수로 전달받아 jsp 로 전송해주는 기능 부여 @PathVariable : 파라메터 방식으로 웹매개변수를 전달받는 기능 부여 1. 쿼리스트링 방식 : http://localhost:8000/path-variable?name=hong 어노테이션 : @RequestParam 쿼리스트링을 사용하여 여러개의 값을 전달하는 방식.. 이전 1 2 3 4 5 ··· 7 다음
