[23] REST 방식과 Ajax를 이용하는 댓글 처리 - Ajax 댓글 처리

REST 방식을 가장 많이 사용하는 형태는 역시 브라우저나 모바일 App 등에서 Ajax를 이용해서 호출하는 것이다. 예제에서는 Ajax 호출을 가정하고 웹페이지에서 사용하는 댓글 기능을 작성해 보도록 한다. 데이터 베이스 상에서 댓글은 전형적인 1:N 의 관계로 구성한다. 하나의 게이물에 여러 개의 댓글을 추가하는 형태로 구성하고, 화면은 조회 화면상에서 별도의 화면 이동 없이 처리하기 때문에 Ajax를 이용해서 호출한다.

 

1. 프로젝트의 구성

기본적인 웹 게시물 관리에서 만들었던 ex02 프로젝트를 그대로 복사하여 붙여넣고 pom.xml 등의 설정을 같게 한다!

 

2. 댓글 처리를 위한 영속 영역

댓글을 추가하기 위해서 댓글 구조에 맞는 테이블을 설계한다. 댓글 테이블은 tbl_reply라는 이름의 테이블로 지정해서 생성한다. 

 

 

tbl_reply 테이블은 bno 라는 칼럼을 이용해서 해당 댓글이 어떤 게시물의 댓글인지를 명시하도록 한다. 댓글 자체는 단독으로 CRUD가 가능하므로, 별도의 PK를 부여하도록 하고 외래키(FK) 설정을 통해서 tbl_board 테이블을 참조하도록 설정한다. 

 

2-1. ReplyVO 클래스의 추가

 

tbl_reply 테이블을 참고해서 org.zerock.domain 패키지 아래 ReplyVO 클래스르 추가한다. 

package org.zerock.domain;

import java.sql.Date;
import lombok.Data;

@Data
public class ReplyVO {
	
	private Long rno;
	private Long bno;
	
	private String reply;
	private String replyer;
	private Date replyDate;
	private Date updateDate;
}

 

 

2-2. ReplyMapper 클래스와 XML 처리

 

1) org.zerock.mapper 패키지에는 ReplyMapper 인터페이스를 처리하고, XML 파일 역시 생성해준다.

 

2) xml에 다음과 같은 코드를 입력한다. 

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE mapper
	PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
	"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.zerock.mapper.ReplyMapper">

</mapper>

 

xml을 작성할 때는 항상 namespace에 주의해서 작성한다.

 

CRUD로 작업을 테스트하기 전에 tbl_reply 테이블이 tbl_board 테이블과 FK의 관계로 처리되어 있다는 점을 기억해야만 한다. 

 

tbl_reply가 tbl_board 테이블의 bno 값과 정확히 일치해야 하므로 테스트를 진행하기전에 최신 bno 번호 몇 개를 예제로 확인해 두도록 한다. 

 

ReplyMapper 테스트

 

1) src/test/java 에 org.zerock.mapper 패키지를 만든 후, ReplyMapperTests.java 클래스를 만들고 코드를 추가한다.

package org.zerock.mapper;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringRunner;

import lombok.Setter;
import lombok.extern.log4j.Log4j;

@RunWith(SpringRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class ReplyMapperTests {
	
	@Setter(onMethod_ = @Autowired)
	private ReplyMapper mapper;
	
	@Test
	public void testMapper() {
		
		log.info(mapper);
	}
}

실행 결과

 

2-3. CRUD 작업

 

ReplyMapper를 이용한 CRUD 작업은 단일 테이블에 대한 작업과 유사하므로 등록, 수정, 삭제, 조회 작업을 처리한다.

 

등록(create)

 

우선은 외래키를 사용하는 등록 작업을 먼저 진행해 본다.

 

1) ReplyMapper 인터페이스에 다음의 코드를 추가한다. 

package org.zerock.mapper;

import org.zerock.domain.ReplyVO;

public interface ReplyMapper {

	public int insert(ReplyVO vo);
}

2) ReplyMapper의 SQL을 처리하는 XML 내용을 추가한다. 

3) 테스트 코드는 기존에 존재하는 게시물 일부의 bno(게시물 번호)를 사용해서 ReplyVO를 작성한다. 

	private Long[] bnoArr = { 2228229L, 2228228L, 2228227L, 2228226L, 2228225L};
	
	@Test
	public void testCreate() {
		IntStream.rangeClosed(1, 10).forEach(i -> {
			ReplyVO vo = new ReplyVO();
			
			// 게시물의 번호
			vo.setBno(bnoArr[i % 5]);
			vo.setReply("댓글 테스트 " + i);
			vo.setReplyer("replyer" + i);
			
			mapper.insert(vo);
		});
	}

 

ReplyMapperTests 내부의 bnoArr은 게시물 번호의 일부로 실제 데이터베이스에 있는 번호여야만 한다 (PK와 FK의 관계로 묶여있기 때문에)

 

테스트가 정상적으로 실행되는지 최종적으로 데이터베이스의 tbl_reply의 상태를 확인한다. 

정상적으로 insert되면 이렇게 뜬다! 

 

조회(read)

 

ReplyMapper 인터페이스와 ReplyMapper.xml에 조회 처리를 추가한다.

 

1) ReplyMapper 인터페이스 

	public ReplyVO read(Long bno);

 

2) ReplyMapper.xml의 일부

3) 테스트 코드는 tbl_reply에 있는 번호 중에서 하나를 이용해서 확인한다.

	@Test
	public void testRead() {
		Long targetRno = 5L;
		
		ReplyVO vo = mapper.read(targetRno);
		
		log.info(vo);
	}

 

삭제(delete)

 

특정 댓글의 삭제는 댓글의 번호(rno)만으로 처리가 가능하다.

 

1) ReplyMapper 의 일부

public int delete(Long bno);

 

2) ReplyMapper.xml 의 일부

 

3) ReplyMapperTests 클래스의 일부

	@Test
	public void testDelete() {
		Long targetRno = 1L;
		
		mapper.delete(targetRno);
	}

 

수정 (update)

 

댓글의 수정은 현재의 tbl_reply 테이블의 구조에서는 댓글의 내용과 최종 수정시간을 수정한다.

 

1) ReplyMapper 인터페이스의 일부

public int update(ReplyVO reply);

 

2) ReplyMapper.xml 의 일부

 

3) ReplyMapperTests 클래스의 일부

	@Test
	public void testUpdate() {
		Long targetRno = 10L;
		
		ReplyVO vo = mapper.read(targetRno);
		
		vo.setReply("Update Reply");
		
		int count = mapper.update(vo);
		
		log.info("UPDATE COUNT : " + count);
	}