본문 바로가기

Web Development/ETC3

[Web Development] SMTP 프로토콜을 통한 메일 전송 및 인증 회원 가입 시 사용자가 입력한 메일이 유효한 지 확인하기 위해 메일에 인증 코드를 전송하고, 해당 인증 코드 일치 여부를 검사하는 기능을 구현해보고자 한다. (해당 포스트에선 naver 메일로 인증을 진행한다.) 코드를 작성하기 전에 네이버 메일에 접속하여 smtp 설정이 필요하다. 메일을 전송할 네이버 계정에 로그인한 후 메일 인터페이스 하단 환경설정을 클릭한 후 위와 같이 설정하고 하단의 SMTP 포트 번호를 확인한다. 설정을 완료하면 메일 주소를 입력할 input 태그를 작성한다. onclick 이벤트를 통해 send() 함수를 실행시켜 메일 전송을 진행한다. 해당 이벤트로 발생되는 send() 함수는 아래와 같다. var result; function send() { var mail = $("#e.. 2022. 7. 1.
[MyBatis] MyBatis 를 활용한 동적 쿼리 필터링 기능 구현 시 다중 값을 쿼리하거나 특정 값 선택 여부에 따라 동적 쿼리로 구현해야 하는 경우, 우선 MyBatis 에 넘길 객체의 요소를 아래와 같이 설정한다. @Data @Alias("clothes") public class ClothesDTO { private String keyword; private String brand; private List type; private int minCost; private int maxCost; } keyword 는 사용자가 입력한 검색어, brand 는 단일 선택 값, type 은 체크박스 다중 선택값을 List 에 담아 전달한다. minCost, maxCost 는 검색하고자 하는 특정 값의 범위를 지정한다. MyBatis 에는 다양한 동적쿼리문이 있.. 2022. 6. 28.
[Web Programming] Checkbox 다중 값 전달 checkbox가 포함된 form 태그와 값을 반환할 div 영역을 아래와 같이 구성한다. Language : java cpp python javascript 비동기 방식으로 처리하기 위해 submit 버튼 대신 onchange 이벤트로 값을 전달하며 다중 값 전달을 위해 name 값을 서로 다르게 지정한다. form 태그에서 선택한 값들이 serializeArray() 를 통해 Map 객체로 controller에 전달되며 이때 checkbox 외에 다른 select, radio ... 더 다양한 입력 값을 한꺼번에 전달 가능하다. 결과적으로 처리한 값을 html() 로 id 값으로 지정한 div 영역 내부에 반환한다. @Data @Alias("type") public class TypeDTO { pri.. 2022. 6. 27.