springboot
-
[JavaScript, CSS, jQuery] SpringBoot : 캐러셀, 이미지 터치 슬라이드프로젝트/기능 정리 2023. 7. 18. 10:14
목적 화면 터치를 감지하여 터치 드래그 시 이미지 슬라이드 전환 기능 구현 이전 글에서 한 화면에 꽉 차는 한 페이지 자체를 슬라이드 하는 기능을 만들어봤다. 페이지 슬라이드 기능에서는 터치를 감지해서 화면을 전환하지 않았지만, 상세 글 보기에 나오는 이미지 캐러셀은 인스타그램 게시물처럼 횡방향 터치 이동 시 전환되도록 만들고 싶었다. 아직 데이터가 없어서 이미지 소스나 개수 등을 동적으로 생성해서 처리하진 않은 상태지만, 슬라이드 기능이 메인이므로 정리해보도록 하겠다. 완성본은 아래와 같다. [HTML] 먼저 html 태그 구조는 아래와 같다. 야경 본 날 반포 한강공원 제목영역과 라디오 버튼은 흐름을 모두 보기 위해 가져왔고, 메인인 슬라이드 이미지 영역은 아래 그림과 같다. 태그 ID를 표시하기 위..
-
[JavaScript, CSS] SpringBoot : 페이지 슬라이드프로젝트/기능 정리 2023. 7. 15. 20:12
목적 페이지 전환없이 좌우 슬라이드 기능 구현 스크롤 위치에 상관 없이 폼이 슬라이드로 등장했다가 제거시 슬라이드로 사라지도록 함. JavaScript와 css만 이용 진행중인 프로젝트의 갤러리 메인 페이지에서 글쓰기 버튼을 누르면 화면 오른쪽에서 슬라이드로 폼이 등장하는 기능을 만들고 싶었다. 나중에 웹뷰 앱으로 전환할 생각인데, 모바일 앱 UI상으로 페이지 새로고침은 자연스럽지 않으니 자연스레 연결해주는게 좋아보였기 때문이다. 근데 뭐.. 기본적으로 JS와 CSS, HTML밖에 다룰 줄 몰라서 여러 방법을 찾아봤으나.. 해결하지 못했다. fadeIn, fadeOut은 페이지 호출시에 opacity 조절을 통해 나름 자연스러워 보이게 할 수 있지만 슬라이드는(보기에는 별다를게 없어보이는데..) 어떻게 ..
-
[JavaScript] SpringBoot 프로젝트 : 회원가입 기능 구현 - 이메일 본인인증 인증번호 확인(JavaScript $ sign, resultView)프로젝트/기능 정리 2023. 7. 9. 15:21
목적 게시판 형식 웹사이트 개발 시 회원가입 기능 구현 정리 아이디 중복확인, 비밀번호 확인, 이메일 인증번호 등 세부 기능 정리 지난글에서는 네이버 이메일 기준 계정 설정, spring 설정 및 이메일 전송 처리 전반에 대해 정리했다. 이번 글에서는 Ajax로 리턴받은 인증번호와 회원이 메일을 통해 확인한 인증번호가 일치하는지 확인하고, 모든 값이 정상적으로 입력되었을 때 회원 정보가 DB에 등록되는 과정을 살펴보며 마무리하도록 하겠다. [데이터 흐름도] [MailController] Ajax 요청을 받은 컨트롤러의 코드를 다시 보자. @Controller public class MailController { @Autowired private MailService mailService; @Autowir..
-
[Java] SpringBoot 프로젝트 : 회원가입 기능 구현 - 이메일 본인인증 이메일 전송(Naver메일 설정, JavaMailSender, MIME, SMTP)프로젝트/기능 정리 2023. 7. 8. 23:49
목적 게시판 형식 웹사이트 개발 시 회원가입 기능 구현 정리 아이디 중복확인, 비밀번호 확인, 이메일 인증번호 등 세부 기능 정리 이번 글에서는 이메일을 전달 받은 서버에서 인증번호를 생성하고 메일을 보내는 과정을 알아보자. [데이터 흐름도] 데이터 흐름도는 다음과 같다. [이메일 설정] 먼저 SpringBoot를 기반으로 하고 있기에 dependency 추가와 설정을 해줘야 한다. 먼저 pom.xml에 dependency를 먼저 추가해보자. 다음은 application.yml에 설정을 해줘야 한다. 여기서는 네이버 메일을 사용했으므로 아래와 같다. username에는 발신 메일 주소(ex. test@naver.com)이 들어가고 password에는 해당 계정의 비밀번호가 들어가면 된다. 노출되면 안되므..
-
[JavaScript] SpringBoot 프로젝트 : 회원가입 기능 구현 - 이메일 본인인증 이메일 폼(<select>,<option>, JavaScript 변수, scope)프로젝트/기능 정리 2023. 7. 7. 17:02
목적 게시판 형식 웹사이트 개발 시 회원가입 기능 구현 정리 아이디 중복확인, 비밀번호 확인, 이메일 인증번호 등 세부 기능 정리 지난글까지는 회원가입 과정 중 아이디 중복확인 및 비밀번호 재확인, 전화번호 자동 하이픈(-) 기능을 살펴봤다. 이번 글부터는 이메일 인증 관련 부분에 대해 다뤄보자. [데이터 흐름도] 데이터 흐름도는 다음과 같다. [JSP] 먼저 폼을 어떻게 구성했는지 보겠다. 이메일 처리 전반 또한 이전 프로젝트에서 팀원이 작성해둔 코드를 거의(일부 변경) 그대로 가져온 것이다. 서칭해보니 팀원도 다른 포스트를 참고하여 작성한 것 같아 첨부한다. 참고 : https://devofroad.tistory.com/43 이메일 @ naver.com gmail.com daum.net hanmail..
-
[JavaScript] SpringBoot 프로젝트 : 회원가입 기능 구현 - 비밀번호 재확인, 전화번호 자동 하이픈(정규표현식)프로젝트/기능 정리 2023. 7. 1. 20:54
목적 게시판 형식 웹사이트 개발 시 회원가입 기능 구현 정리 아이디 중복확인, 비밀번호 확인, 이메일 인증번호 등 세부 기능 정리 지난 글에서는 아이디 중복체크 과정에 대해 정리했다. 이번 글에서는 흐름도엔 나와있지 않지만 JS로 비밀번호 재확인 과정과 전화번호 입력 시 자동으로 하이픈(-)을 넣어주는 기능을 정리해보도록 하겠다. [비밀번호 재확인] 우선 비밀번호 재확인부터 보자. [JSP] 비밀번호 비밀번호 재확인 디자인을 위한 태그를 제외하면 비밀번호 관련 코드는 위와 같다. 이전 글에서 설명했던 Spring 태그를 통해 비밀번호를 입력받았다. path가 곧 id와 일치하니 해당 id명만 기억하면 된다. [JavaScript] JS에서는 먼저 가입자가 최소 비밀번호 길이를 충족했을 때, 비밀번호 일치..
-
[Java] SpringBoot 프로젝트 : 회원가입 기능 구현 - 아이디 중복확인프로젝트/기능 정리 2023. 6. 29. 14:27
목적 게시판 형식 웹사이트 개발 시 회원가입 기능 구현 정리 아이디 중복확인, 비밀번호 확인, 이메일 인증번호 등 세부 기능 정리 지난 글에서는 전체적인 회원가입 과정 흐름과 가입 폼 태그 및 세부사항 등을 살펴봤다. 이번엔 회원가입 시 입력한 아이디 중복체크 과정을 알아보자. [데이터 흐름도] 데이터 흐름도는 다음과 같다. [JSP] 다시 아이디 부분 태그를 보면 아래와 같다. 아이디 간단히 흐름을 먼저 설명하자면, 회원이 아이디 입력 후 "중복체크" 버튼 클릭 JS에서 Ajax로 서버에 회원이 입력한 아이디 전달 요청 받은 컨트롤러는 회원이 입력한 아이디가 DB에 있는지 확인 아이디 유무에 따라 문자열을 담은 Map 객체 반환 정도로 볼 수 있다. 일단 버튼 태그는 아래와 같았다. id로 confir..
-
[Java] SpringBoot 프로젝트 : 회원가입 기능 구현 - 회원가입 폼(<form:form>, <form:input>, <form:errors>, validation)프로젝트/기능 정리 2023. 6. 28. 15:09
목적 게시판 형식 웹사이트 개발 시 회원가입 기능 구현 정리 아이디 중복확인, 비밀번호 확인, 이메일 인증번호 등 세부 기능 정리 두 번째 SpringBoot 프로젝트를 진행하면서 회원가입, 로그인 기능 구현을 맡았었다. 이전 프로젝트에서 다른 팀원이 진행했던 회원가입 기능 구현 코드를 거의 그대로 가져와서 이 프로젝트에 맞게 조금 변형하여 사용했는데, 이후 프로젝트를 위해 작성된 코드들을 하나씩 뜯어보고 리뷰해보도록 하겠다. 데이터 흐름은 다음과 같다. [데이터 흐름도] 회원가입 과정에서 필수적인 두 가지가 있다. 하나는 아이디 중복체크이고, 또 하나는 이메일 본인인증이다. 추가로 전화번호 입력과 비밀번호 확인도 있지만 해당 부분들은 JS에서만 처리 가능하여 흐름도엔 넣지 않았다. 이후 다루게될 내용엔..