국비 68 - 댓글 등록

댓글 등록

📍 session에 loginMember가 담겨있는지 확인하기 위해서
const loginMemberNo = "${loginMember.memberNo}";
의 loginMemberNo가 ""인지 검사

<script>
        // 댓글 관련 JS 코드에 필요한 값을 전역변수로 선언

        // jsp 파일: html, css, js, el, jstl 사용 가능
        // js 파일 : js

        // 코드 해석 순서 : EL == JSTL > HTML > JS

        // ** JS 코드에서 EL, JSTL을 작성하게 된다면 반드시 ""를 양쪽에 추가 **

        // 최상위 주소
        const contextPath = "${contextPath}";

        // 게시글 번호
        const boardNo = "${detail.boardNo}"; // 문자열 "500"

        // 로그인한 회원번호
        const loginMemberNo = "${loginMember.memberNo}";
        // -> 로그인 O : "10";
        // -> 로그인 X : ""; (빈문자열)

    </script>

Jsp

<div class="reply-write-area">
        <textarea id="replyContent"></textarea> <!-- 스크롤 안 생기려면 딱 붙여서 쓰기!! -->
        <button id="addReply">
            댓글 <br>
            등록
        </button>
    </div>

Ajax

// 댓글 등록
const addReply = document.getElementById("addReply");
const replyContent = document.getElementById("replyContent");

addReply.addEventListener("click", function(){ // 댓글 등록 버튼이 클릭이 되었을 때

    // 1) 로그인이 되어있나? -> 전역변수인 loginMemberNo 이용
    if(loginMemberNo == ""){ // 로그인 X
        alert("로그인 후 이용해주세요");
        return;
    }

    // 2) 댓글 내용이 작성되어 있나?
    if(replyContent.value.trim().length == 0){ // 미작성인 경우
        alert("댓글을 작성한 후 버튼을 클릭해주세요");
        replyContent.value=""; // 띄어쓰기, 개행문자 제거
        replyContent.focus();
        return;
    }

    // 3) AJAX를 이용해서 댓글 내용 DB에 저장(INSERT)
    $.ajax({
        url : contextPath + "/reply/insert",
        data : {
            "replyContent" : replyContent.value,
            "memberNo" : loginMemberNo,
            "boardNo" : boardNo
                },
        type : "POST",
        
        success : function(result){
            if(result > 0){ // 댓글 등록 성공
                alert("댓글이 등록되었습니다");
                replyContent.value="";
                selectReplyList(); // 비동기 댓글 목록 조회 함수 호출
                // -> 새로운 댓글 추가됨
            } else { // 실패
                alert("댓글 등록에 실패했습니다")
            }
        },
        error : function(req, status, error){
            console.log("댓글 등록 실패");
            console.log(req.responseText);
        }
    });
})

---

Servlet

// 댓글 등록
			if(command.equals("insert")) {
				
				// 파라미터 얻어오기
				String replyContent = req.getParameter("replyContent");
				int memberNo = Integer.parseInt(req.getParameter("memberNo"));
				int boardNo = Integer.parseInt(req.getParameter("boardNo"));
				
				// Reply 객체 생성해서 파라미터 담기
				Reply reply = new Reply();
				
				reply.setReplyContent(replyContent);
				reply.setMemberNo(memberNo);
				reply.setBoardNo(boardNo);
				
				// 댓글 등록(insert) 서비스 호출 후 결과 반환 받기
				int result = service.insertReply(reply);
				
				// 서비스 호출 결과를 그대로 응답 데이터로 내보냄
				resp.getWriter().print(result);
			}

Service

📍 reply.getReplyContent().replaceAll("정규표현식", "바꿀 문자열");

/** 댓글 등록 Service
	 * @param reply
	 * @return result
	 * @throws Exception
	 */
	public int insertReply(Reply reply) throws Exception {
		
		Connection conn = getConnection();
		
		// XSS : 관리자가 아닌 이용자가 악성 스크립트를 삽입해서 공격
		// Cross Site Scripting(XSS, 크로스 사이트 스크립팅) 공격 방지 처리
		
		reply.setReplyContent(Util.XSSHandling(reply.getReplyContent())); 
		
		
		
		// 개행문자 변경처리
		// textarea에 줄바꿈 문자 입력 시 \n, \r, \r\n, \n\r 중 하나로 입력(브라우저, OS 따라 다름)
		// 이 문자들을 HTML에서 줄바꿈으로 인식할 수 있도록 "<br>"태그로 변경
		
		// reply.getReplyContent().replaceAll("정규표현식", "바꿀 문자열");
		
		// 댓글 등록/수정
		// 게시글 등록/수정에서 사용
		// reply.setReplyContent(reply.getReplyContent().replaceAll("\n|\r|\r\n|\n\r", "<br>"));
		
		// static으로 선언해둔 개행문자 변경 메소드 사용
		reply.setReplyContent(Util.newLineHandling(reply.getReplyContent()));
		// 내용을 util 메소드 사용해서 바꾸고 그걸 다시 내용에 세팅하겠다.
		
		
		
		int result = dao.insertReply(conn, reply);
		
		if(result>0) conn.commit();
		else conn.rollback();
		
		close(conn);
		
		return result;
	}

DAO

/** 댓글 등록 DAO
	 * @param conn
	 * @param reply
	 * @return result
	 * @throws Exception
	 */
	public int insertReply(Connection conn, Reply reply) throws Exception {
		
		int result = 0;
		
		try {
			
			String sql = prop.getProperty("insertReply");
			
			pstmt = conn.prepareStatement(sql);
			
			pstmt.setString(1, reply.getReplyContent());
			pstmt.setInt(2, reply.getMemberNo());
			pstmt.setInt(3, reply.getBoardNo());
			
			result = pstmt.executeUpdate();
			
		} finally {
			close(pstmt);
		}
		return result;
	}
    

SQL

<!-- 댓글 등록 -->
	<entry key="insertReply">
		INSERT INTO REPLY VALUES(SEQ_RNO.NEXTVAL, ?, DEFAULT, DEFAULT, ?, ?)
	</entry>