분류 전체보기 269

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는 로..

카카오지도+위치 추적만들기! (배민 따라하기)

지난주 일요일 배달의 민족을 시켰는데 배달원의 위치가 실시간으로 나타나는 걸 봤다 너무 신기해서 비슷하게라도 만들어보자 해서 만들게 되었다 일단 지도는 카카오지도를 사용하면 될 거다 라고 생각했고 문제는 위치 정보를 어떻게 얻어오지..? 라고 생각하고 찾아봤다 그랬더니 놀랍게도 html이 자체적으로 가지고있는 기능이 있었다 navigator.geolocation=현재 위치 위도 경도를 알려준다 navigator.watchPosition=현재 위치+움직일 때마다 같이 움직인다 그래서 적용을 해보았다 1.개발자 센터 도메인등록 네이버 개발자센터-> 어플 생성 or기존 어플 입장-> 플랫폼-> 사이트 도메인에 입력-> 요약정보에서 자바스크립트 api키 확인 http://localhost:9090 2. 카카오 ..

simple 2021.10.12

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..