Day 55. [Java/JavaScript/jQuery] Ajax, jQuery, 메일 보내기

아침에는 항상 전날 했던거 체크부터 !!

서버 상태에 따라 달라질 수도 있다 !!

 

---

jquery 함수들 모아둔 곳 !!!

우리는 jquery.get(), post(), params(), put(), delete() 썼다.

 

https://api.jquery.com/

jQuery API Documentation

---

자바 스크립트 파일로 옮겨 놓기

 

 

이렇게 js 파일을 새로 만들어준뒤

 

head.jsp에 추가하기~

---

오랜만에 쟈스★

$("") 안에 태그를 입력할 경우 페이지에 있는 모든 태그를 다 잡아준다.

 

이미지 태그를 동적으로 만들어서 추가한다.

img 태그를 만드는데 바디 안에 추가한다.

 

선택자로써 호출을 가장 많이 사용할 것이다.

 

이런 식으로 jquery는 선택자(selecter)로 사용을 많이 한다.

 

브라우저상에서 전역객체

document는 window의 자식객체이다.

 

이러한 문서객체 또한 jquery에 사용할 수 있다.

문서객체를 통해서 id를 찾겠다.

근데 그 id는 rno이다.

처음에 안뜨는 이유는 댓글을 누르지 않았을때!

이렇게 modal을 띄워야지 rno가 뜬다.

 

val()은 jquery 함수!!

 

30, 40이 들어가는 부분을 setter로 사용 가능하다.

 

attr( ... ) 안에 들어가는 것도 똑같이 setter 로 사용된 것이다.

getter와 setter 인자 차이는 setter가 하나 더 많다는 것이다.

 

setter의 리턴 타입은 string

getter의 리턴 타입은 자기자신이라 없다.

 

attr의 리턴타입은 $(this) 이다. 그렇기에 추가로 jquery 함수를 사용할 수 있다.

 

체이닝 또한 계속 가능하다.

 

이제는 jquery 에 자주 사용되는 함수에 대해 배울 예정이다.

 

reply.js 를 이용해서 

댓글 상세 조회, 댓글 등록 창 활성화

$(function(){
    // $("#replyModal").modal("show");
    const bno = '${board.bno}';
    showList();

    function showList(){
        replyService.list(201, function(data) {
            console.log(data);
            var str = "";
            for(var reply in data){
                str +='					<li class="list-group-item" data-rno="' + data[reply].rno + '">';
                str +='						<div class="list-group-item list-group-item-success small">';
                str +='							<span>'+ data[reply].writer +'</span>';
                str +='							<span class="small">' + data[reply].regDate + '</span>';
                str +='						</div>';
                str +='						<div class="list-group-item">' + data[reply].content + '</div>';
                str +='					</li>';
            }
            $(".replies").html(str);
        }, cp);
    }

    // 댓글 상세 조회
    // replies 태그 안에 li를 클릭했을때
    // li가 showlist로 만들어지면 동적이라서 이벤트를 위임해줘야한다. event delegate
    $(".replies").on("click", "li", function(){ // click 을 replies 안에 있는 li 들한테 준다.
        replyService.get($(this).data("rno"), function(data) {
            console.log(data);
            $("#rno").val(data.rno);
            $("#replyContent").val(data.content);
            $("#replyRegDate").val(data.regDate);
            $("#replyWriter").val(data.writer);


            // 버튼 숨기기
            $("#replyModal").find("button").hide()
            .end()
            .find("input, textarea").prop("disabled", true)
            .end().modal("show");

        }, cp);
        // console.log()
        $("#replyModal").modal("show");
    })

    // 댓글 등록 창 활성화
    $("#btnReplyReg").click(function(){
        $("#replyModal")
            .find(".modal-footer button").hide()
                .eq(0).show()
            .end()
        .end()
            .find("input, textarea").prop("disabled", false).val("")
        .end().modal("show");
    })
    $("#replyModal .modal-footer button:eq(0)").click(function(){
        var reply = {bno:bno, content:$("#replyContent").val(), writer:$("#replyWriter").val()}
        replyService.add(reply, function(data){
            // console.log(data);
            alert("등록버튼");
            showList();
        }, cp);
    })
})

---

이메일을 보내기 위해서 메일 서버가 따로 필요합니다.

 

하지만 직접 관리를 할 수 없기에 서버를 빌려서 씁니다.

 

이메일 프로토콜은

SMTP(Simple Mail Transfer Protocol)

를 쓸겁니다.

 

구글에서 이메일을 보내기 위해 설정을 해야함다.

 

구글에서 로그인 후 계정 관리

 

보안 > 앱 비밀번호 설정!

 

주의 * 꼭 부계정 생성해서 만드세요 !!!!!!!

앱 선택 > 메일

기기 선택 > 기타

 

lib 폴더 안에 

javax.mail, javax.mail-api maven에서 다운로드 후 넣기!

 

하기 전에 TCP와 UDP의 차이를 확인해야한다.

 

TCP와 UDP의 차이

SMTP로 메일을 발송할때 SSL이냐 TLS이냐에 따라 달라지는 것이 있다.

바로 암호화인데

TSL의 경우 처음엔 암호화 되지 않은 hello 메시지를 전달하는 것에서 시작한다.

SSL은 처음부터 암호화 된 상태로 전달된다.

 

SSL > UDP (빠르게 보내기)

TSL > IPX를 사용한다. (신뢰바탕)

 

TCP는 연속성보다 신뢰성있는 전송이 중요할 때에 사용하는 프로토콜이며,

UDP는 TCP보다 속도가 빠르며 네트워크 부하가 적다는 장점이 있지만, 신뢰성있는 데이터 전송을 보장하지는 않습니다.

그렇기 때문에 신뢰성보다는 연속성이 중요한 서비스의 예를 들면 실시간 서비스(streaming)에 자주 사용됩니다.

 

저는 SSL을 사용할 것 입니다.

 

내 정보는 가리구!