토이프로젝트 45

springboot sqs 문자/이메일전송

사실 이번 jangbogo프로젝트는 모놀리식 아키텍처가 아닌 마이크로아키텍처로 하려고 했으나! 그러면 진짜 프로젝트 완성 못할 거 같아서...ㅋㅋㅋ 다른 서버라고 치고 구현해보자! (나중에 배치만 따로만들자) 일단 springboot + sqs를 하는 방법은 https://www.youtube.com/watch?v=q3zo3YREfJI 이 분거 보는 게 최고다 s3/sns도 이분 꺼 보고 붙였다 이분 장점이 다른 코드에 추가가 아니라 그냥 어떻게 기본적으로 연결하는지 보여준다 디펜던시별로 차이가 약간있는데 영상으로는 // https://mvnrepository.com/artifact/org.springframework.cloud/spring-cloud-aws-messaging implementation ..

aws/SQS 2021.12.16

vue.js eventbus 컴포넌트간 주고받기!

카카오 지도를 호출하였다 검색만 해주면 된다 문제는 컴포넌트 간에 어떻게 주고받아야 할지 몰랐다 쉽게 말해서 지도/내비 바/풋터는 한화면에 각기 다른 컴포넌트이다 즉 검색창에 타이핑 후 search버튼을 눌렀을 때 지도 컴포넌트에게 검색 값을 줘 야한다 구글링 결과 eventbus를 활용하기로 결정하였다! 1.eventbus 만들기 Vue.prototype.$EventBus = new Vue(); main.js에 이렇게만 해주면된다 2. 메서드 지정하기 네비 바로 가자 this.$EventBus.$emit('searchStore',storeKeyword); 뭔뜻이나면 searchStore로 storeKeyword를 전송한다는것이다 emit은 지정할때 on은 받을때 쓴다 받는곳으로 가보자! this.$Ev..

Jang_bo_go 2021.12.16

Springboot+vue.js 구매페이지 만들기!(1) 품목 표시

프런트 서버 사이드 바를 구해야 했다 부트스트랩 사이드 바를 하나 가져 와서 바꿨다 사이드바 추가 후 검색/페이징에 필요한 것들을 만들었다 사실 nexPage/beforePage는 변수만 다른 것이다 파라미터를 1/-1 받아주면서 합쳐보자 페이지 입장 시 파라미터 값을 찾아 서버로 요청을 보낸다 백엔드 서버 Service 조건대로 품목을 가져온다 public JSONObject getProducts(HttpServletRequest request) { 검색키워드에 따라 다른 쿼리문을 던진다 private List getProductVos(String kind,int start,String keyword) { 원래 sql 자체에도 조건문이 있는 걸로 아는데 일단 잘 몰라서 나눠주는 함수를 만들었다 테스트 ..

Springboot+Vue.js 회원서비스를 만들자!(4) 이메일/비밀번호찾기

이메일 찾기는 가입된 휴대폰으로 찾는다 결과는 핸드폰으로 전송해준다 비밀번호 찾기는 가입된 이메일로 찾는다 비밀번호 변경 페이지를 전송해준다 이메일 찾기 프런트 서버 백엔드 서버는 이미 이전 글들에서 구축한 상태이다 테스트 회원 가입된 번호일 때만 이렇게 문자가 온다! 비밀번호 찾기 프런트 서버 인증하는 페이지는 핸드폰이랑 거의 똑같은 수준이니 패스하고 비밀번호 변경 페이지이다 입장하자마자 토큰이 유효한지 보내본다 백엔드 서버 이메일을 이용하는데 이전 글에서 대표로 휴대폰으로 설명했다 둘이 매우 흡사하니 스킵! 테스트 비밀번호 찾기를 하면 확인이 된다면 이렇게 메일이 오고 db에 요청 기록이 남는다 이렇게 들어오면 바꿀 수 있다

카테고리 없음 2021.10.18

Springboot+Vue.js 회원서비스를 만들자!(4) 마이페이지

마이페이지 회원정보 서비스는 주로 팝업으로 열리게 할 계획이다 마이페이지/로그인/회원가입/비밀번호 찾기/이메일 찾기 등 프런트 서버 우편번호를 이제 팝업으로 띄울 것이다 이전 프로젝트처럼 만들어주자 이 함수를 사용하려면 페이지가 열리자마자 스크립트 태그를 넣어줘야 한다 내가 찾은 방법은 이것이다 페이지가 열리자마자 created가 실행된다 그러면 난 head에 자바스크립트 src를 경로로 넣어줄 것이다! 이렇게 전화번호/주소/비밀번호를 바꿀 수 있다 백엔드 서버 service 수정이 필요했다 예를 들어 번호가 같더라도 인증/변경/이메일 찾기 이렇게 세 개의 기능이 있었다 이걸 합 처서 관리하는 게 말이 안 돼서 분리시켰다 update/핸드폰 수정 시에만 다른 쿼리를 던진다 이유는 이미 회원가입되어있는 핸..

Springboot+Vue.js 회원서비스를 만들자!(3) 로그인

이제 로그인을 만들자 크게 다를 건 없다 일반/네이버/카카오 로그인 로그인 페이지 프런트 서버 크게 특별한 건 없다! oauth로그인이라면 오게 되는 리다이렉트 페이지 oauth로그인이라면 회사별 처리 백엔드 서버 로그인 필터 https://cordingmonster.tistory.com/178 서버셋팅하기! 백엔드 서버 시큐리티 세팅 cors정책 세팅 로그인 필터 만들기 인증 필터 그외 uservo/dto/dao나 userdetail를 만들어주면된다 프론트서버 백엔드 통신을 위해 만들어놓은 함수들이다 cordingmonster.tistory.com 카카오/네이버 로그인도 크게 달라진 건 없다 카카오로 봐보자 reuqest부분을 따로 빼고 콜백 부분을 합쳤다 무슨 말이냐면 예전엔 pay/login 이렇게..

Springboot+Vue.js 회원서비스를 만들자!(2) 회원가입

1. 회원가입 프런트 서버 vue의 for문 한번 쓰고 싶어서 해봤다 npm으로 카카오우편번호서비스를 받은 후 연동 이분 글을 추천한다 https://github.com/wan2land/vue-daum-postcode/tree/0.x-vue2 GitHub - wan2land/vue-daum-postcode: ✉️ 다음 우편번호 서비스 Componet for Vue 2 & 3. ✉️ 다음 우편번호 서비스 Componet for Vue 2 & 3. Contribute to wan2land/vue-daum-postcode development by creating an account on GitHub. github.com 그 뒤 결과값을 어떻게 받아야 하나.. 고민하다가 이게 될까 하고 해 봤는데 됐다 놀랍게..

Springboot+Vue.js 네비바를 만들자!(1)

이전 사이트들에 비해 이제 설명을 좀 더 간결하게 쓰려고 한다 구현 목록 1. 메인화면(홈페이지와 다름) 2. 네비바 3. 회원가입 4. 로그인/아웃 5. 마이페이지 6. 이메일/패스워드 찾기 1. 메인화면 전체적으로 페이드인 효과를 넣었다 첫 입장 시 나오는 화면이고 그다음 홈페이지는 따로 만들 예정이다 2. 네비 바 부트스트랩에서 가져온 걸 사용하였고 true면 네비바를 표시한다 true일 때 로그인 여부에 따른 부분 페이징 해당 페이지들은 네비바 미사용 if(uri=='/joinPage'||uri=='/loginPage'||uri=='/myPage'||uri=='/findPwdPage'||uri=='/findEmailPage'||uri=='/changePhonePage'){ logincheck는 로..

vue.js 맛보기!/ckeditor5/router/axios/async/await

점검사항 1. 기본지식 습득 2.ajax는 어떻게 해야 하는가(적용) 3. 페이징은 어떻게 이뤄지는가(적용) 4. 부트스트랩 연동 법(적용) 5.ckeditor5 연동 법(적용) 6. 포트번호변경(적용) 7.async/await(적용) 8.https적용(미적용) 1. 기본지식 습득 https://www.youtube.com/watch?v=-tVaahsXpwk&list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ- https://www.youtube.com/watch?v=sqH0u8wN4Rs 이영상들만 봐도 기본 지식들은 얻을 수 있었다 2.ajax->axios? 다운로드는 영상 참조(npm다운로드 후 사용 가능) 드디어 이게 나왔다 구글링 하면서 xhr/ajax/axios 이 세 개를 자..

Vue/vue2 2021.10.07

kim's shop 마치며

프로젝트 종료 이유는 1. 목표하는 바를 완성 -목표는 이거였다 1.jwt인증방식을 사용해보자 2.게시판 에디터를 붙혀보자 3.예약시스템을 당일이 아닌 통상적으로 만들어보자 4.결제시스템을 더 견고하게 만들어보자 다행이 위4개를 모두 만들었고 (절대 완벽하게 만들었다는 말이 아니다) 거기서 수많은 몰랐던 지식+확장을 할 수있었다 2. 월요일부터 국비 스프링 레거시 시작 예정 -원래 레거시 수업 전까지만 하려고 했다 이미 배운 내용이었고 수업을 들으면서도 역시 배운 내용이었다 아니 오히려 jsp수업을 집중적으로 듣고 온 나에겐 이전 수업보다 빠진 내용이 많았다 마치면서 소감은 정말~~~~ 많은걸 이 프로젝트에서 얻었다 프로젝트 초반 프런트와 백엔드가 통신하는 방법/절차를 익히는 것에서 고전했다 쿠키/cor..