[코드로 배우는 스프링 웹 프로젝트] ch17 Ajax 댓글 처리 1(Ajax, 게시물 등록)

◎ Ajax 댓글 처리

   ▷ REST 방식을 가장 많이 사용하는 형태는 브라우저나 모바일 App 등에서 Ajax를 이용해 호출하는 것

   ▷ 데이터베이스 상에서 댓글은 전형적인 1:N의 관계로 구성

   ▷ 하나의 게시물에 여러 개의 댓글을 추가하는 형태로 구성하고,

        화면은 조회 화면상 별도의 화면 이동 없이 처리하기 때문에 Ajax를 이용해 호출

 

 

1. 프로젝트의 구성

   ▷ REST 처리를 위해서 pom.xml에서 수정된 내용이 대부분이므로 ex02에서 사용된 'src/main/java' 폴더 아래 모든 Java 코드를 그대로 복사해서 사용

 

 

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

   ▷ 댓글 추가 위해 댓글 구조에 맞는 테이블 설

create table tbl_reply(
    rno number(10,0),
    bno number(10,0) not null,
    reply VARCHAR2(1000) not null,
    replyer VARCHAR2(50) not null,
    replyDate date default sysdate,
    updateDate date default sysdate
);

create sequence seq_reply;


alter table tbl_reply add constraint pk_reply primary key(rno);

alter table tbl_reply add constraint fk_reply_board
foreign key(bno) references tbl_board(bno);

 

(1) src/main/java/org.codehows.domain → ReplyVO 클래스의 추가

package org.codehows.domain;

import java.util.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) ReplyMapper 클래스와 XML 처리

◎ src/main/java/org.codehows.mapper → ReplyMapper 인터페이스 생성

package org.codehows.mapper;

public interface ReplyMapper {
	
}

 

◎ src/main/resources/org.codehows.mapper → ReplyMapper.xml 생성

  ▷ 댓글 처리 역시 화면상에서 페이지 처리가 필요할 수 있으므로 Criteria를 이용해서 처리

 

<?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.codehows.mapper.ReplyMapper">

</mapper>

▷ CRUD 작업을 테스트하기 전 tbl_reply 테이블이 tbl_board 테이블과 FK(외래키)의 관계로 처리되어 있음

 

select * from tbl_board where rownum < 10 order by bno desc;

 

 

 

◎ src/test/java/org.codehows.mapper → ReplyMapperTests 클래스 생성

   ▷ 테스트 코드를 습관적으로 작성하는 노력을 해야 합니다.

   ▷ ReplyMapper를 사용 가능한지에 대한 테스트 작업을 진행

 

package org.codehows.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.SpringJUnit4ClassRunner;

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

@RunWith(SpringJUnit4ClassRunner.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 testMpper() {
		log.info(mapper);
	}	
}

실행시키면 아래와 같이 Console 창에 결과가 출력됩니다.

 

 

(3) CRUD 작업

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

 

◎ 등록(create)

   ▷ 외래키를 사용하는 등록 작업 진행

1. ReplyMapper 인터페이스

package org.codehows.mapper;

import org.codehows.domain.ReplyVO;

public interface ReplyMapper {
	public int insert(ReplyVO vo);
}​

 

2. ReplyMapper의 SQL을 처리하는 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.codehows.mapper.ReplyMapper">

	<insert id="insert">
		insert into tbl_reply (rno, bno, reply, replyer)
		values (seq_reply.nextval, #{bno}, #{reply}, #{replyer})
	</insert>

</mapper>​

3. ReplyMapperTests 클래스 수정

package org.codehows.mapper;

import java.util.stream.IntStream;

import org.codehows.domain.ReplyVO;
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.SpringJUnit4ClassRunner;

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

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class ReplyMapperTests {
	
	// 테스트 전에 해당 번호의 게시물이 존재하는지 반드시 확인할 것
	private Long[] bnoArr = { 2005745L, 2005744L, 2005743L, 2005742L, 2005741L };

	@Setter(onMethod_ = @Autowired)
	private ReplyMapper mapper;
	
	@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);
		});
	}	
	
	@Test
	public void testMpper() {
		log.info(mapper);
	}	
}

여기서 중요한 것은 배열로 만든 BNO에 값이 존재하는지 확인해야합니다.

없다면 Error가 나타나게 되고 있는 번호만 bnoArr 배열로 지정하면 올바르게 작동되는 것을 확인할 수 있습니다.

저는 약 210만개 값들을 추가했기 때문에 테스트가 올바르게 실행되는 것을 확인할 수 있습니다.


test 실행 후 아래의 코드를 들어가보면 tbl_reply 테이블에 값이 추가된 것을 확인할 수 있습니다.

select * from tbl_reply order by rno desc;

 

rno는 1부터 시작해야하지만 실행이 되지않아 지우고 반복하는 과정에서 rno가 36부터 시작되게 되었습니다.

 

 

하나의 게시물에 여러 개의 댓글을 추가하는 형태로 구성하고 화면은 조회 화면상 별도의 화면 이동 없이 처리하기 때문에 Ajax를 이용해 호출합니다.

 

이전에 있던 클래스, 인터페이스, XML, JSP 파일 등을 모두 그대로 이용하여 초기 설정을 완료했습니다.

 

XML 파일을 수정할 때는 이전에 사용했던 내용들에 추가되는 내용이 있기 때문에 주의해야합니다!

 

그리고 게시물의 등록 작업까지 진행해보았습니다!

 

다음 글에서는 댓글 처리 조희, 수정, 삭제 방법에 대해서 배워볼게요!!

 

많은 분들의 피드백은 언제나 환영합니다!  많은 댓글 부탁드려요~~