아이니그마

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

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

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

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

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 그 뒤 결과값을 어떻게 받아야 하나.. 고민하다가 이게 될까 하고 해 봤는데 됐다 놀랍게..

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

백엔드 서버 시큐리티 세팅 cors정책 세팅 로그인 필터 만들기 인증 필터 그외 uservo/dto/dao나 userdetail를 만들어주면된다 프론트서버 백엔드 통신을 위해 만들어놓은 함수들이다

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

점검사항 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 이 세 개를 자..

댓글 등록은 스킵하고! 수정/삭제를 봐 보자! 프런트 서버 js만 보면 된다 html은 달라진 게 없다 댓글 페이징에 쓰이는 함수들이다 댓글 버튼 함수들이다 서버에게 요청하는 함수들이다 백엔드 서버 insert update delete 거의 게시글 등록/수정/삭제랑 판박이다 설명은 스킵! confrimwrtier를 utillService로 빼주면 좋을 거 같다 옥에 티는 역시 수정 시 summer노트로 textarea를 주는데 역시 글자만 추출하는 방법을 아직 몰라서 그냥 구색만 해 논 것이다! 테스트 등록 12개를 등록했다 페이지 이동 url이 1인 이유는 최초 입장 시에만 page를 파라미터로 받고 그 뒤로는 자바스크립트에서 연산이 이뤄지기 때문이다 사실 들어올 때도 그냥 1로 해서 주면 되는데 그냥..