토이프로젝트 45

Vue kakaomap 드래그시 인근 마트들 표시하기

1.지도를 생성한다 2.드래그 이벤트를 등록한다 3.드래그 종료시 중심 좌표를 얻는다 4.중심좌표의 주소를 얻는다 5.주소로 키워드 검색을한다 6.marker 를 표시한다 모든 과정은 카카오 공식문서에 있다 1.지도를 생성한다 -https://cordingmonster.tistory.com/248 Vue 카카오 지도 만들기 1.개발자센터에서 자바스크립트 키를얻는다 2.카카오 지도를 호출한다 자세한설명 -https://apis.map.kakao.com/web/guide/ 코드 1.index.html에 sdk호출을 세팅한다 - 2.지도를 호출한다 -mount 시킨다 vuex문.. cordingmonster.tistory.com 2.드래그 이벤트를 등록한다 마운트에 등록해주면된다 3.드래그 종료시 중심 좌표를..

Super_Man/Front 2022.07.01

Vue 페이징시 checkbox 유지하기

이전까지와 다르게 페이지가 이동해도 checkbox값을 유지시켜야 할 일이 생겼다 솔직히 귀찮아서 구축안하고 그냥 다른 방법으로 넘긴 적이 있는데 이렇게 된거 만들었다 1.checkbox의 id값을 담을 배열을 하나 만든다 2. 페이지 이동시마다 id를 줘서 확인한다 - index of를 이용해서 확인 3. 체크박스 클릭 시 들어있으면 삭제 없으면 추가를 해주면 된다 checkState -페이지 이동시마다 체크박스 배열에서 확인하는 함수 nextTick -vue에서 자체 제공하는 기능이다 해당 태그가 생성된 뒤에 실행시켜준다 checkcheckedArr -해당 요소의 위치를 반환하는 함수 indexof은 자바스크립트 기본 제공 기능이다 없다면 -1 반환해준다 clickCheck -체크박스 클릭시 작동하는..

Vue/vue2 2022.04.01

Springboot 결제시스템(4) 결제검증

pg사에서 받은 정보를 검증하는 로직을 만들자 간단하게 금액만 비교하고 넘겨주자 (원래 실무에서는 훨씬 많은 검증을 하겠지만) 카카오페이연동 https://cordingmonster.tistory.com/221?category=1085850 세틀뱅크연동 https://cordingmonster.tistory.com/226 Springboot 세틀뱅크 카드/가상계좌결제(1) 결제창 호출 테스트 요청을 하고 https://develop.sbsvc.online/requestTest.do 세틀뱅크 개발 지원 서비스별 테스트 신청 develop.sbsvc.online 바로 테스트할 수 있다 1. 백엔드에서는 암호화만 잘해서 주면 된다 https://de.. cordingmonster.tistory.com 흐름 r..

Jang_bo_go 2022.03.16

Springboot 카카오페이 연동(3) 환불하기

https://developers.kakao.com/docs/latest/ko/kakaopay/cancellation Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 환불은 더 쉽다 진짜 세상 결제 api가 모두 카카오 페이 같다면 얼마나 좋을까 필수 값들을(20220315 기준) 던 저주기만 하면 된다 너무 쉬워서 설명할 게 없다.. 카카오 정말 대단하다 결제시스템을 매번 구축하면서 생각하는건 pg사 호출보다 실용적인 로직을 태워서 호출하는게 더 어렵다는 생각이든다

Springboot/Api 2022.03.15

Springboot 카카오페이 연동(2) 결제승인

이제 클라이언트가 결제를 하면 지정했던 url로 카카오 쪽에서 다시 보내준다 이전에 성공/실패/취소에따라 url를 보내줬는데 그걸 보고 다시 보내주는 것이다 흐름 pg토큰을 받음->결제내역 요청-> 서버에서 검증-> db 이 화면을 받는 순간 우리 서버로도 pg토큰이 날아온다 1. 세션에서 tid/partner_order_id값을 꺼내 준다 String[] orderIdAndTid=httpSession.getAttribute("orderIdAndTid").toString().split(","); String mchtTrdNo=orderIdAndTid[0]; String tid= orderIdAndTid[1]; https://developers.kakao.com/docs/latest/ko/kakaopay/..

Springboot/Api 2022.03.14

Springboot 카카오페이 연동(1) 결제창 호출

카카오페이를 연동해보자 흐름 결제창 호출-> 검증-> 판별-> 실패 시 환불 사전 준비 카카오 개발자 센터가서 1. 간단히 어플 등록-> 카카오 로그인 활성화 2. 플랫폼 등록 웹사이트= web으로 3. 리다이렉트 url등록 서버 주소만 등록하면 된다 1. 카카오페이에게 요청 https://developers.kakao.com/docs/latest/ko/kakaopay/single-payment#prepare Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com /v1/payment/ready에게 POST로 헤더에 Authorization: Kakao..

Springboot/Api 2022.03.14

Springboot 결제시스템(2) 쿠폰,상품,주소,거리,매장검증

이제 제일 어려운 구간이다 흐름 쿠폰 1차 유효성 검사-> 매장별로 제품을 꺼낸다->상품을 검증한다->쿠폰 2차 검증한다 제품별 결제정보 생성->매장 조건에 부합하는지 검증한다 1. 쿠폰 1차 검사 쿠폰 유효성 검사 후 받는다 couponVo couponVo=couponService.CheckAndGet(couponName); 2. 매장별로 제품을 꺼낸다 매장 꺼내기 storeVo storeVo=storeService.getVo(storeId); 검증 전 일단 배달 가능 지역인지 확인 if(checkDeliverRadius(storeVo.getSaddress(),storeVo.getDeliverRadius(),tryOrderDto.getAddress())){ 이 함수 안에서 카카오 주소 api를 호출해 ..

Jang_bo_go 2022.03.11

Springboot 결제시스템(1) 매장별 분리

장바구니 후 결제를 눌렀을 때 처리를 해보자 일단 장바구니에 있는 제품들을 보면 각 다른 매장 ex) 00동 하나로마트의 바나나, 00동 이마트의 소고기 등 서로 다른 매장의 물품이 섞여 있을 수 있다 그걸 제일 먼저 분리하고 매장별로 상품을 묶어 검증을 하자 흐름 장바구니 가져오기->매장별 분리-> 쿠폰, 제품, 매장 조건 검증 ->redis에 결제 정보 담기->선택 pg사 호출 1. 장바구니 가져오기 all -전체 choice -선택 장바구니만 join으로 제품까지 같이 들고 온다 2. 매장별 분리 장바구니 속에든 제품 정보로 매장별로 묶어준다 3. 쿠폰, 제품, 매장 조건 검증 -하이라이트 구간이다 다음 글에서 써보자

Jang_bo_go 2022.03.11

SpringBoot 장바구니 만들기(미완성버전)

미완성 사이드바가 가리긴 하는데 일단 전략을 바꿨다 구축하고 리팩터링 하는 걸로 그리고 애초에 장바구니에서 주문이 되는게 아니라 결제 페이지가 있어야하는데 일단 한꺼번에 만들었다 1. 수량조절 장바구니 고유 id값을 전달해 준다 요청받은 id/개수를 서버로 준다 서버 장바구니 id로 조회 basketVo basketVo=basketDao.findById(basketId).orElseThrow(()->utillService.makeRuntimeEX("존재하지 않는 장바구니 품목입니다", "tryUpadte")); 업데이트 basketVo.setCount(count); 가격 재계산 ((productVo)productService.getProduct(basketVo.getProductId()).get("mes..

Jang_bo_go 2022.03.07