001cloudid

스프링 웹 프로젝트 15

001cloudid — Tue, 14 Jan 2025 13:36:58 +0900

검색조건처리를 위한 Criteria 클래스 변경

검색항목(type)과 검색 키워드(keyword) 추가

package org.zerock.domain;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
public class Criteria {

	private int pageNum; // 페이지
	private int amount; // 개수
	
	private String type; // 검색 항복
	private String keyword; // 키워드

	public Criteria() {
		this(1,10); // 초기값
	}

	public Criteria(int pageNum, int amount) {
		super();
		this.pageNum = pageNum;
		this.amount = amount;
	}
	
	// 루프를 돌리기 위해서 배열이 필요
	public String[] getTypeArr() {
		return type == null? new String[] {} : type.split("");
	}
	
}

BoardMapper.xml 수정

(...생략...)
	<select id="getListWithPaging" resultType="org.zerock.domain.BoardVO"> <!-- xml에서 부등호처리 → cdata -->
		<![CDATA[  
		select *
		from (select /*+ index_desc(tbl_board pk_board) */ rownum rn, bno, title, writer, regdate,updateDate 
			  from tbl_board 
			  where 
			  ]]>
			  <foreach collection="typeArr" item="type">
			   <if test="type == 'T'.toString">
			   		title like #{keyword}
			   </if>
			   <if test="type == 'C'.toString">
			   		content like #{keyword}
			   </if>
			   <if test="type == 'W'.toString">
			   		writer like #{keyword}
			   </if>
			  </foreach>
			  <![CDATA[
			  bno > 0 and rownum > 0 and rownum <= (#{pageNum} * #{amount}))
		where rn > (#{pageNum}-1) * #{amount}
		]]>
	</select>
(...생략...)

문제가 있는 코드지만 되는지만 확인

BoardMapperTests

(...생략...)
	@Test
	public void testSearchPaging() {
		Criteria criteria = new Criteria();
		criteria.setType("T");
		criteria.setKeyword("test");
		List<BoardVO> list = boardMapper.getListWithPaging(criteria);
		for(int i = 0; i < list.size(); i++) {
			log.info(list);
		}
	}
}

BoardMapper 수정

	<select id="getListWithPaging" resultType="org.zerock.domain.BoardVO"> <!-- xml에서 부등호처리 → cdata -->
		<![CDATA[  
		select *
		from (select /*+ index_desc(tbl_board pk_board) */ rownum rn, bno, title, writer, regdate,updateDate 
			  from tbl_board 
			  where 
			  ]]>
			  <trim prefix="(" suffix=") AND">
				  <foreach collection="typeArr" item="type">
				   <if test="type == 'T'.toString">
				   		title like #{keyword}
				   </if>
				   <if test="type == 'C'.toString">
				   		content like #{keyword}
				   </if>
				   <if test="type == 'W'.toString">
				   		writer like #{keyword}
				   </if>
				  </foreach>
			  </trim>
			  <![CDATA[
			  bno > 0 and rownum > 0 and rownum <= (#{pageNum} * #{amount}))
		where rn > (#{pageNum}-1) * #{amount}
		]]>
	</select>

검색 조건을 다양하게 테스트

BordMapperTests

	@Test
	public void testSearchPaging() {
		Criteria criteria = new Criteria();
//		criteria.setType("T");
//		criteria.setKeyword("테스트");
		List<BoardVO> list = boardMapper.getListWithPaging(criteria);
		for(int i = 0; i < list.size(); i++) {
			log.info(list);
		}
	}

다른테스트

	@Test
	public void testSearchPaging() {
		Criteria criteria = new Criteria();
		criteria.setType("TCW");
		criteria.setKeyword("테스트");
		List<BoardVO> list = boardMapper.getListWithPaging(criteria);
		for(int i = 0; i < list.size(); i++) {
			log.info(list);
		}
	}

BoardMapper 수정(separator)

	<select id="getListWithPaging" resultType="org.zerock.domain.BoardVO"> <!-- xml에서 부등호처리 → cdata -->
		<![CDATA[  
		select *
		from (select /*+ index_desc(tbl_board pk_board) */ rownum rn, bno, title, writer, regdate,updateDate 
			  from tbl_board 
			  where 
			  ]]>
			  <trim prefix="(" suffix=") AND">
				  <foreach collection="typeArr" item="type" separator="OR">
				   <if test="type == 'T'.toString">
				   		title like #{keyword}
				   </if>
				   <if test="type == 'C'.toString">
				   		content like #{keyword}
				   </if>
				   <if test="type == 'W'.toString">
				   		writer like #{keyword}
				   </if>
				  </foreach>
			  </trim>
			  <![CDATA[
			  bno > 0 and rownum > 0 and rownum <= (#{pageNum} * #{amount}))
		where rn > (#{pageNum}-1) * #{amount}
		]]>
	</select>

like 처리

	<select id="getListWithPaging" resultType="org.zerock.domain.BoardVO"> <!-- xml에서 부등호처리 → cdata -->
		<![CDATA[  
		select *
		from (select /*+ index_desc(tbl_board pk_board) */ rownum rn, bno, title, writer, regdate,updateDate 
			  from tbl_board 
			  where 
			  ]]>
			  <trim prefix="(" suffix=") AND">
				  <foreach collection="typeArr" item="type" separator="OR">
				   <if test="type == 'T'.toString">
				   		title like '%'||#{keyword}||'%'
				   </if>
				   <if test="type == 'C'.toString">
				   		content like '%'||#{keyword}||'%'
				   </if>
				   <if test="type == 'W'.toString">
				   		writer like '%'||#{keyword}||'%'
				   </if>
				  </foreach>
			  </trim>
			  <![CDATA[
			  bno > 0 and rownum > 0 and rownum <= (#{pageNum} * #{amount}))
		where rn > (#{pageNum}-1) * #{amount}
		]]>
	</select>

조건이 없을 때

검색 → totalcount도 변경되기 때문에 처리해줘야함 → 그렇지 않으면 화면에서 처리가 안됨

sql 태그는 jsp:include와 같이 사용할 수 있음

BoardMapper.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.BoardMapper">

<sql id="criteria">
			  <trim prefix="(" suffix=") AND">
				  <foreach collection="typeArr" item="type" separator="OR">
				   <if test="type == 'T'.toString">
				   		title like '%'||#{keyword}||'%'
				   </if>
				   <if test="type == 'C'.toString">
				   		content like '%'||#{keyword}||'%'
				   </if>
				   <if test="type == 'W'.toString">
				   		writer like '%'||#{keyword}||'%'
				   </if>
				  </foreach>
			  </trim>
</sql>

	<select id="getList" resultType="org.zerock.domain.BoardVO">
		select * from tbl_board order by bno desc		
	</select>

	<insert id="insert">
		insert into tbl_board(bno, title, content, writer)
		values(seq_board.nextval, #{title}, #{content}, #{writer})
	</insert>

	<insert id="insertSelectKey">
		<selectKey order="BEFORE" keyProperty="bno" resultType="long">
			select seq_board.nextval from dual
		</selectKey>
		insert into tbl_board(bno, title, content, writer)
		values(#{bno}, #{title}, #{content}, #{writer})
	</insert>
	
	<select id="read" resultType="org.zerock.domain.BoardVO">
		select * from tbl_board
		where bno = #{bno}
		order by bno desc
	</select>
	
	<delete id="delete">
		delete from tbl_board
		where bno=#{bno}
	</delete>
	
	<update id="update">
		update tbl_board
		set title = #{title}, content = #{content}, writer = #{writer}, updateDate = sysdate
		where bno = #{bno} 
	</update>
	
	<select id="getListWithPaging" resultType="org.zerock.domain.BoardVO"> <!-- xml에서 부등호처리 → cdata -->
		<![CDATA[  
		select *
		from (select /*+ index_desc(tbl_board pk_board) */ rownum rn, bno, title, writer, regdate,updateDate 
			  from tbl_board 
			  where 
			  ]]>
		<include refid="criteria"></include>
			  <![CDATA[
			  bno > 0 and rownum > 0 and rownum <= (#{pageNum} * #{amount}))
		where rn > (#{pageNum}-1) * #{amount}
		]]>
	</select>
	
	<select id="getTotalCount" resultType="int">
		select count(bno) from tbl_board where <include refid="criteria"></include> bno > 0
	</select>
	
	<select id="searchTest" resultType="org.zerock.domain.BoardVO">
		<![CDATA[
		select * from tbl_board
		where
		]]>
		<trim suffix="and">
		<foreach collection="map" index="key" item="value" separator="OR" open="(" close=")">
			<if test="key == 'T'.toString()">
				title like #{value}
			</if>
			<if test="key == 'C'.toString()">
				content like #{value}
			</if>
			<if test="key == 'W'.toString()">
				writer like #{value}
			</if>
		</foreach>
		</trim>
		<![CDATA[
			rownum < 10
		]]>
	</select>
	
</mapper>

화면에서의 검색처리

list.jsp 검색상자 및 버튼 등 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><a class="move" href="<c:out value='${boardVO.bno}' />"><c:out value="${boardVO.title}" /></a></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                            
                            <form id="searchForm" action="/board/list" method="get">
                            	<select name="type">
                            		<option value="T">제목</option>
                            	</select>
                            	<input type="text" name="keyword">
                            	<button class="btn btn-default">Search</button>
                            </form>
                            
                            <div class="pull-right">
                            	<ul class="pagination">
                            		<c:if test="${page.prev}"> 
								    	<li class="page-item"><a class="page-link" href="${page.startPage - 1}" tabindex="-1">Previous</a></li>
									</c:if>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item ${page.criteria.pageNum == num? 'active' :''}"><a class="page-link" href="${num}">${num}</a></li>
									</c:forEach>                
									<c:if test="${page.next}">            	
								    	<li class="page-item"><a class="page-link" href="${page.endPage + 1}">Next</a></li>
                            		</c:if>
                            	</ul>
                            </div>
                            <form id="actionForm" action="/board/list" method="get">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            </form>
                            
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
	
	
	checkModal(result);
	
	history.replaceState({},null,null); // 히스토리 클리어
	
	function checkModal(result){
		
		if(result ==='' || history.state){
			return;
		}
		
		if(result === 'success'){
			$('.modal-body').html("정상적으로 처리됨.");
		} else if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		
		$("#myModal").modal("show");
	}
	
	$("#regBtn").click(function(){
		self.location = "/board/register";
	});
	
	var actionForm = $("#actionForm");
	
	$(".page-link").on("click", function(e){
		e.preventDefault(); // a태그는 기능은 이동 → 이동이 되지 않음(기본 동작 제어)
		
		console.log('click');
		
		//form 태그의 내용 변경 후 submit
		actionForm.find("input[name='pageNum']").val($(this).attr("href"));
		actionForm.submit();
		
	});
	
	$(".move").on("click", function(e){
		e.preventDefault();
		
		console.log($(this).attr("href"));
		
		actionForm.append("<input type='hidden' name='bno' value='"+$(this).attr("href")+"'>");
		actionForm.attr("action","/board/get").submit();
		
	})
	
});
</script>

<%@include file="../include/footer.jsp" %>

검색을 할 때 pageNum, amount를 가져가야함

(...생략...)
                            <div class="pull-right">
                            	<ul class="pagination">
                            		<c:if test="${page.prev}"> 
								    	<li class="page-item"><a class="page-link" href="${page.startPage - 1}" tabindex="-1">Previous</a></li>
									</c:if>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item ${page.criteria.pageNum == num? 'active' :''}"><a class="page-link" href="${num}">${num}</a></li>
									</c:forEach>                
									<c:if test="${page.next}">            	
								    	<li class="page-item"><a class="page-link" href="${page.endPage + 1}">Next</a></li>
                            		</c:if>
                            	</ul>
                            </div>
                            <form id="actionForm" action="/board/list" method="get">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            </form>
                            
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

(...생략...)

이후 검색해보면

이벤트처리

(...생략...)
                            <form id="searchForm" action="/board/list" method="get">
                            	<select name="type">
                            		<option value="T">제목</option>
                            	</select>
                            	<input type="text" name="keyword">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            	<button class="btn btn-default">Search</button>
                            </form>
                            
                            <div class="pull-right">
                            	<ul class="pagination">
                            		<c:if test="${page.prev}"> 
								    	<li class="page-item"><a class="page-link" href="${page.startPage - 1}" tabindex="-1">Previous</a></li>
									</c:if>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item ${page.criteria.pageNum == num? 'active' :''}"><a class="page-link" href="${num}">${num}</a></li>
									</c:forEach>                
									<c:if test="${page.next}">            	
								    	<li class="page-item"><a class="page-link" href="${page.endPage + 1}">Next</a></li>
                            		</c:if>
                            	</ul>
                            </div>
                            <form id="actionForm" action="/board/list" method="get">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            </form>
                            
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){

(...생략...)
	
	var searchForm = $("#searchForm");
	
	$("#searchForm button").on("click", function(e){
		e.preventDefault();
		console.log("클릭........");
	})
	
});
</script>

<%@include file="../include/footer.jsp" %>

확인 후 submit()

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><a class="move" href="<c:out value='${boardVO.bno}' />"><c:out value="${boardVO.title}" /></a></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                            
                            <form id="searchForm" action="/board/list" method="get">
                            	<select name="type">
                            		<option value="T">제목</option>
                            	</select>
                            	<input type="text" name="keyword">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            	<button class="btn btn-default">Search</button>
                            </form>
                            
                            <div class="pull-right">
                            	<ul class="pagination">
                            		<c:if test="${page.prev}"> 
								    	<li class="page-item"><a class="page-link" href="${page.startPage - 1}" tabindex="-1">Previous</a></li>
									</c:if>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item ${page.criteria.pageNum == num? 'active' :''}"><a class="page-link" href="${num}">${num}</a></li>
									</c:forEach>                
									<c:if test="${page.next}">            	
								    	<li class="page-item"><a class="page-link" href="${page.endPage + 1}">Next</a></li>
                            		</c:if>
                            	</ul>
                            </div>
                            <form id="actionForm" action="/board/list" method="get">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            </form>
                            
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
	
	
	checkModal(result);
	
	history.replaceState({},null,null); // 히스토리 클리어
	
	function checkModal(result){
		
		if(result ==='' || history.state){
			return;
		}
		
		if(result === 'success'){
			$('.modal-body').html("정상적으로 처리됨.");
		} else if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		
		$("#myModal").modal("show");
	}
	
	$("#regBtn").click(function(){
		self.location = "/board/register";
	});
	
	var actionForm = $("#actionForm");
	
	$(".page-link").on("click", function(e){
		e.preventDefault(); // a태그는 기능은 이동 → 이동이 되지 않음(기본 동작 제어)
		
		console.log('click');
		
		//form 태그의 내용 변경 후 submit
		actionForm.find("input[name='pageNum']").val($(this).attr("href"));
		actionForm.submit();
		
	});
	
	$(".move").on("click", function(e){
		e.preventDefault();
		
		console.log($(this).attr("href"));
		
		actionForm.append("<input type='hidden' name='bno' value='"+$(this).attr("href")+"'>");
		actionForm.attr("action","/board/get").submit();
		
	});
	
	var searchForm = $("#searchForm");
	
	$("#searchForm button").on("click", function(e){
		e.preventDefault();
		console.log("클릭........");
		searchForm.submit();
	});
	
});
</script>

<%@include file="../include/footer.jsp" %>

option 추가

(...생략...)
                            <form id="searchForm" action="/board/list" method="get">
                            	<select name="type">
                            		<option value="">---</option>
                            		<option value="T">제목</option>
                            		<option value="C">내용</option>
                            		<option value="W">작성자</option>
                            		<option value="TC">제목+내용</option>
                            		<option value="TCW">제목+내용+작성자</option>
                            	</select>
(...생략...)

검색 버튼을 누른다 → 새롭게 검색을 한다

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><a class="move" href="<c:out value='${boardVO.bno}' />"><c:out value="${boardVO.title}" /></a></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                            
                            <form id="searchForm" action="/board/list" method="get">
                            	<select name="type">
                            		<option value="" ${page.criteria.type == null?"selected":"" }>---</option>
                            		<option value="T" ${page.criteria.type eq 'T'?"selected":"" }>제목</option>
                            		<option value="C" ${page.criteria.type eq 'C'?"selected":"" }>내용</option>
                            		<option value="W" ${page.criteria.type eq 'W'?"selected":"" }>작성자</option>
                            		<option value="TC" ${page.criteria.type eq 'TC'?"selected":"" }>제목+내용</option>
                            		<option value="TCW" ${page.criteria.type eq 'TCW'?"selected":"" }>제목+내용+작성자</option>
                            	</select>
                            	<input type="text" name="keyword" value="${page.criteria.keyword}">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            	<button class="btn btn-default">Search</button>
                            </form>
                            
                            <div class="pull-right">
                            	<ul class="pagination">
                            		<c:if test="${page.prev}"> 
								    	<li class="page-item"><a class="page-link" href="${page.startPage - 1}" tabindex="-1">Previous</a></li>
									</c:if>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item ${page.criteria.pageNum == num? 'active' :''}"><a class="page-link" href="${num}">${num}</a></li>
									</c:forEach>                
									<c:if test="${page.next}">            	
								    	<li class="page-item"><a class="page-link" href="${page.endPage + 1}">Next</a></li>
                            		</c:if>
                            	</ul>
                            </div>
                            <form id="actionForm" action="/board/list" method="get">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            </form>
                            
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
	
	
	checkModal(result);
	
	history.replaceState({},null,null); // 히스토리 클리어
	
	function checkModal(result){
		
		if(result ==='' || history.state){
			return;
		}
		
		if(result === 'success'){
			$('.modal-body').html("정상적으로 처리됨.");
		} else if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		
		$("#myModal").modal("show");
	}
	
	$("#regBtn").click(function(){
		self.location = "/board/register";
	});
	
	var actionForm = $("#actionForm");
	
	$(".page-link").on("click", function(e){
		e.preventDefault(); // a태그는 기능은 이동 → 이동이 되지 않음(기본 동작 제어)
		
		console.log('click');
		
		//form 태그의 내용 변경 후 submit
		actionForm.find("input[name='pageNum']").val($(this).attr("href"));
		actionForm.submit();
		
	});
	
	$(".move").on("click", function(e){
		e.preventDefault();
		
		console.log($(this).attr("href"));
		
		actionForm.append("<input type='hidden' name='bno' value='"+$(this).attr("href")+"'>");
		actionForm.attr("action","/board/get").submit();
		
	});
	
	var searchForm = $("#searchForm");
	
	$("#searchForm button").on("click", function(e){
		e.preventDefault();
		console.log("클릭........");
		
		searchForm.find("input[name='pageNum']").val(1);
		
		searchForm.submit();
	});
	
});
</script>

<%@include file="../include/footer.jsp" %>

링크 처리

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><a class="move" href="<c:out value='${boardVO.bno}' />"><c:out value="${boardVO.title}" /></a></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                            
                            <form id="searchForm" action="/board/list" method="get">
                            	<select name="type">
                            		<option value="" ${page.criteria.type == null?"selected":"" }>---</option>
                            		<option value="T" ${page.criteria.type eq 'T'?"selected":"" }>제목</option>
                            		<option value="C" ${page.criteria.type eq 'C'?"selected":"" }>내용</option>
                            		<option value="W" ${page.criteria.type eq 'W'?"selected":"" }>작성자</option>
                            		<option value="TC" ${page.criteria.type eq 'TC'?"selected":"" }>제목+내용</option>
                            		<option value="TCW" ${page.criteria.type eq 'TCW'?"selected":"" }>제목+내용+작성자</option>
                            	</select>
                            	<input type="text" name="keyword" value="${page.criteria.keyword}">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            	<button class="btn btn-default">Search</button>
                            </form>
                            
                            <div class="pull-right">
                            	<ul class="pagination">
                            		<c:if test="${page.prev}"> 
								    	<li class="page-item"><a class="page-link" href="${page.startPage - 1}" tabindex="-1">Previous</a></li>
									</c:if>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item ${page.criteria.pageNum == num? 'active' :''}"><a class="page-link" href="${num}">${num}</a></li>
									</c:forEach>                
									<c:if test="${page.next}">            	
								    	<li class="page-item"><a class="page-link" href="${page.endPage + 1}">Next</a></li>
                            		</c:if>
                            	</ul>
                            </div>
                            <form id="actionForm" action="/board/list" method="get">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            	<input type="hidden" name="type" value="${page.criteria.type}">
                            	<input type="hidden" name="keyword" value="${page.criteria.keyword}">
                            </form>
                            
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
	
	
	checkModal(result);
	
	history.replaceState({},null,null); // 히스토리 클리어
	
	function checkModal(result){
		
		if(result ==='' || history.state){
			return;
		}
		
		if(result === 'success'){
			$('.modal-body').html("정상적으로 처리됨.");
		} else if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		
		$("#myModal").modal("show");
	}
	
	$("#regBtn").click(function(){
		self.location = "/board/register";
	});
	
	var actionForm = $("#actionForm");
	
	$(".page-link").on("click", function(e){
		e.preventDefault(); // a태그는 기능은 이동 → 이동이 되지 않음(기본 동작 제어)
		
		console.log('click');
		
		//form 태그의 내용 변경 후 submit
		actionForm.find("input[name='pageNum']").val($(this).attr("href"));
		actionForm.submit();
		
	});
	
	$(".move").on("click", function(e){
		e.preventDefault();
		
		console.log($(this).attr("href"));
		
		actionForm.append("<input type='hidden' name='bno' value='"+$(this).attr("href")+"'>");
		actionForm.attr("action","/board/get").submit();
		
	});
	
	var searchForm = $("#searchForm");
	
	$("#searchForm button").on("click", function(e){
		e.preventDefault();
		console.log("클릭........");
		
		searchForm.find("input[name='pageNum']").val(1);
		
		searchForm.submit();
	});
	
});
</script>

<%@include file="../include/footer.jsp" %>

기타 검색 처리

검색 후 조회, 수정, 삭제 페이지 이동 시 검색 항목 유지
RedirectAttribute에 검색 관련 내용을 추가하는 방식
UriComponentsBuilder를 이용해서 Criteria에서 링크를 생성하는 방식

get.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Read</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Read
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
								<div class="form-group">
									<label>BNO</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
	                            <form id="actionForm" action="/board/list" method="get">
	                            	<input type="hidden" name="pageNum" value="${criteria.pageNum}">
	                            	<input type="hidden" name="amount" value="${criteria.amount}">
	                            	<input type="hidden" name="bno" value="${boardVO.bno}">
	                            	<input type="hidden" name="type" value="${criteria.type}">
	                            	<input type="hidden" name="keyword" value="${criteria.keyword}">
                            	</form>
							 	<button type="button" class="btn btn-default listBtn"><a href="/board/list">List</a></button>
                                <button type="button" class="btn btn-default modiBtn"><a href="/board/modify?bno=<c:out value='${boardVO.bno }'/>">Modify</a></button>
								<script>
									
								var actionForm = $("#actionForm");
								
								$('.listBtn').click(function(e){
									e.preventDefault();
									actionForm.find("input[name='bno']").remove();
									actionForm.submit();
								});
								
								$('.modiBtn').click(function(e){
									e.preventDefault();
									actionForm.attr("action","/board/modify");
									actionForm.submit();
								});
								
								</script>

                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<%@include file="../include/footer.jsp" %>

redirect하는 경우

BoardController

	@PostMapping("/modify")
	public String modify(BoardVO boardVO, RedirectAttributes redirectAttributes, Criteria criteria) {
		log.info("BoardController modify()......................");
		
		int count = boardService.modify(boardVO);
		
		if(count == 1) {
			redirectAttributes.addFlashAttribute("result", "success");
		}
		
		redirectAttributes.addAttribute("pageNum",criteria.getPageNum());
		redirectAttributes.addAttribute("amount",criteria.getAmount());
		redirectAttributes.addAttribute("type",criteria.getType());
		redirectAttributes.addAttribute("keyword",criteria.getKeyword());
		
		return "redirect:/board/list";
	}
	
	@PostMapping("/remove")
	public String remove(@RequestParam("bno") Long bno, RedirectAttributes redirectAttributes, Criteria criteria) {
		log.info("BoardController remove()......................");
		
		int count = boardService.remove(bno);
		
		if(count == 1) {
			redirectAttributes.addFlashAttribute("result", "success");
		}
		
		redirectAttributes.addAttribute("pageNum",criteria.getPageNum());
		redirectAttributes.addAttribute("amount",criteria.getAmount());
		redirectAttributes.addAttribute("type",criteria.getType());
		redirectAttributes.addAttribute("keyword",criteria.getKeyword());
		
		return "redirect:/board/list";
	}

스프링 웹 프로젝트 14

001cloudid — Mon, 13 Jan 2025 17:27:17 +0900

※ 외부 라이브러리는 footer에 작성하는 이유? 성능과 로딩 최적화 때문

페이지 로딩 우선순위
head에 스크립트를 넣으면 페이지 로딩이 완료되기 전에 자바스크립트가 먼저 로드되고 실행될 수 있음. 이는 스크립트가 다른 DOM 요소의 렌더링을 차단할 수 있기 때문에 페이지 로딩 속도를 늦출 수 있음. footer에 스크립트를 넣으면 HTML 문서의 주요 콘텐츠가 먼저 로드되고 표시된 후, 그 다음에 자바스크립트가 로드되기 때문에 사용자에게 빠른 콘텐츠 표시를 제공할 수 있음
비동기적 로딩
footer에 스크립트를 추가하면서 async나 defer 속성을 사용하면, 스크립트가 비동기적으로 로드되거나 DOM이 완전히 로드된 후 실행될 수 있음. 이로 인해 페이지 로딩 시간이 개선
최소한의 차단적 렌더링

페이지 번호 이벤트 처리

페이지 번호의 링크는 페이지 번호만 가지도록 하고 별도의 form 태그와 이벤트 처리를 통해서 이동
검색 조건이 많이 붙을 수 있는데, 관련된 모든 링크를 다 수정해줘야하기 때문에 form태그를 사용
단점 → 자바스크립트가 정상하지 않으면 동작하지 않음

                            <form action="actionForm" action="/board/list" method="get">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            </form>

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><a href="/board/get?bno=<c:out value='${boardVO.bno}' />"><c:out value="${boardVO.title}" /></a></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                            
                            <h4>${page}</h4>
                            <div class="pull-right">
                            	<ul class="pagination">
                            		<c:if test="${page.prev}"> 
								    	<li class="page-item"><a class="page-link" href="${page.startPage - 1}" tabindex="-1">Previous</a></li>
									</c:if>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item ${page.criteria.pageNum == num? 'active' :''}"><a class="page-link" href="${num}">${num}</a></li>
									</c:forEach>                
									<c:if test="${page.next}">            	
								    	<li class="page-item"><a class="page-link" href="${page.endPage + 1}">Next</a></li>
                            		</c:if>
                            	</ul>
                            </div>
                            <form id="actionForm" action="/board/list" method="get">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            </form>
                            
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
	
	
	checkModal(result);
	
	history.replaceState({},null,null); // 히스토리 클리어
	
	function checkModal(result){
		
		if(result ==='' || history.state){
			return;
		}
		
		if(result === 'success'){
			$('.modal-body').html("정상적으로 처리됨.");
		} else if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		
		$("#myModal").modal("show");
	}
	
	$("#regBtn").click(function(){
		self.location = "/board/register";
	});
	
	var actionForm = $("#actionForm");
	
	$(".page-link").on("click", function(e){
		e.preventDefault(); // a태그는 기능은 이동 → 이동이 되지 않음(기본 동작 제어)
		
		console.log('click');
		
		//form 태그의 내용 변경 후 submit
		actionForm.find("input[name='pageNum']").val($(this).attr("href"));
		actionForm.submit();
		
	});
	
	
	
});
</script>

<%@include file="../include/footer.jsp" %>

3페이지에서 1376376의 글을 조회 → List 버튼을 누르면 list의 1페이지로 넘어감

list.jsp

 <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><a href="/board/get?bno=<c:out value='${boardVO.bno}' />"><c:out value="${boardVO.title}" /></a></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>

                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><a href="<c:out value='${boardVO.bno}' />"><c:out value="${boardVO.title}" /></a></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><a class="move" href="<c:out value='${boardVO.bno}' />"><c:out value="${boardVO.title}" /></a></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                            
                            <h4>${page}</h4>
                            <div class="pull-right">
                            	<ul class="pagination">
                            		<c:if test="${page.prev}"> 
								    	<li class="page-item"><a class="page-link" href="${page.startPage - 1}" tabindex="-1">Previous</a></li>
									</c:if>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item ${page.criteria.pageNum == num? 'active' :''}"><a class="page-link" href="${num}">${num}</a></li>
									</c:forEach>                
									<c:if test="${page.next}">            	
								    	<li class="page-item"><a class="page-link" href="${page.endPage + 1}">Next</a></li>
                            		</c:if>
                            	</ul>
                            </div>
                            <form id="actionForm" action="/board/list" method="get">
                            	<input type="hidden" name="pageNum" value="${page.criteria.pageNum}">
                            	<input type="hidden" name="amount" value="${page.criteria.amount}">
                            </form>
                            
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
	
	
	checkModal(result);
	
	history.replaceState({},null,null); // 히스토리 클리어
	
	function checkModal(result){
		
		if(result ==='' || history.state){
			return;
		}
		
		if(result === 'success'){
			$('.modal-body').html("정상적으로 처리됨.");
		} else if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		
		$("#myModal").modal("show");
	}
	
	$("#regBtn").click(function(){
		self.location = "/board/register";
	});
	
	var actionForm = $("#actionForm");
	
	$(".page-link").on("click", function(e){
		e.preventDefault(); // a태그는 기능은 이동 → 이동이 되지 않음(기본 동작 제어)
		
		console.log('click');
		
		//form 태그의 내용 변경 후 submit
		actionForm.find("input[name='pageNum']").val($(this).attr("href"));
		actionForm.submit();
		
	});
	
	$(".move").on("click", function(e){
		e.preventDefault();
		
		console.log($(this).attr("href"));
		
		actionForm.append("<input type='hidden' name='bno' value='"+$(this).attr("href")+"'>");
		actionForm.attr("action","/board/get").submit();
		
	})
	
});
</script>

<%@include file="../include/footer.jsp" %>

주소줄에 bno도 추가됨 추가적으로 수정 삭제 조회에도 이런 작업이 필요함

package org.zerock.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import org.zerock.domain.BoardVO;
import org.zerock.domain.Criteria;
import org.zerock.domain.PageDTO;
import org.zerock.service.BoardService;

import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j;

@Controller
@RequestMapping("/board/*")
@RequiredArgsConstructor
@Log4j
public class BoardController {

	private final BoardService boardService;
	
(...생략...)

	@GetMapping({"/get", "/modify"})
	public void get(@RequestParam("bno") Long bno,Model model, Criteria criteria) {
		model.addAttribute("boardVO", boardService.get(bno));
	}
	
}

get.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Read</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Read
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
								<div class="form-group">
									<label>BNO</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
	                            <form id="actionForm" action="/board/list" method="get">
	                            	<input type="hidden" name="pageNum" value="${criteria.pageNum}">
	                            	<input type="hidden" name="amount" value="${criteria.amount}">
	                            	<input type="hidden" name="bno" value="${boardVO.bno}">
                            	</form>
							 	<button type="button" class="btn btn-default listBtn"><a href="/board/list">List</a></button>
                                <button type="button" class="btn btn-default modiBtn"><a href="/board/modify?bno=<c:out value='${boardVO.bno }'/>">Modify</a></button>
								<script>
									
								var actionForm = $("#actionForm");
								
								$('.listBtn').click(function(e){
									e.preventDefault();
									actionForm.find("input[name='bno']").remove();
									actionForm.submit();
								});
								
								$('.modiBtn').click(function(e){
									e.preventDefault();
									actionForm.attr("action","/board/modify");
									actionForm.submit();
								});
								
								</script>

                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<%@include file="../include/footer.jsp" %>

수정

BoardController

	@PostMapping("/modify")
	public String modify(BoardVO boardVO, RedirectAttributes redirectAttributes, Criteria criteria) {
		log.info("BoardController modify()......................");
		
		int count = boardService.modify(boardVO);
		
		if(count == 1) {
			redirectAttributes.addFlashAttribute("result", "success");
		}
		
		redirectAttributes.addAttribute("pageNum",criteria.getPageNum());
		redirectAttributes.addAttribute("amount",criteria.getAmount());
		
		return "redirect:/board/list";
	}

modify.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Modify/Delete</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Modify/Delete
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                        <form>
                        	<input type="hidden" name="pageNum" value="${criteria.pageNum}">
                        	<input type="hidden" name="amount" value="${criteria.amount}">
								<div class="form-group">
									<label>BNO</label> <input name="bno" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
							 	<button class="btn btn-default" data-oper='modify'>Modify</button>
                                <button class="btn btn-danger" data-oper='remove'>Remove</button>
                                <button class="btn btn-info" data-oper='list'>List</button>
                        </form>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<script>
	$(document).ready(function(){
		
		var formObj = $('form');
		
		$('.btn').click(function(e){
			
			e.preventDefault();
			
			var operation = $(this).data("oper");
			
			console.log(operation);
			
			if(operation === 'list'){
				self.location = "/board/list";
			}else if(operation === 'remove'){
				formObj.attr("action", "/board/remove").attr("method","post");
				formObj.submit();
			}else if(operation === 'modify'){
				formObj.attr("action", "/board/modify").attr("method","post");
				formObj.submit();
			}
		})
		
		
	})
</script>

<%@include file="../include/footer.jsp" %>

삭제 → 삭제는 따로 할 필요는 없으나 이런 방법이 있다는 것을 알아두면 좋음

BoardController

	@PostMapping("/remove")
	public String remove(@RequestParam("bno") Long bno, RedirectAttributes redirectAttributes, Criteria criteria) {
		log.info("BoardController remove()......................");
		
		int count = boardService.remove(bno);
		
		if(count == 1) {
			redirectAttributes.addFlashAttribute("result", "success");
		}
		
		redirectAttributes.addAttribute("pageNum",criteria.getPageNum());
		redirectAttributes.addAttribute("amount",criteria.getAmount());
		
		return "redirect:/board/list";
	}

total

BoardMapper

	int getTotalCount(Criteria criteria); // 검색 조건을 Criteria로 넣기 위해서 파라미터로 Criteria를 넣어줌

BoardMapper.XML

	<select id="getTotalCount" resultType="int">
		select count(bno) from tbl_board 
	</select>

BoardService

	public int getTotal(Criteria criteria);

BoardServiceImpl

	@Override
	public int getTotal(Criteria criteria) {
		return boardMapper.getTotalCount(criteria);
	}

BoardController

	@GetMapping("/list")
	public void list(Model model, Criteria criteria) { 
		log.info("BoardController list()................");
		log.info("criteria : " + criteria);
		model.addAttribute("list", boardService.getList(criteria));
		model.addAttribute("page", new PageDTO(criteria, boardService.getTotal(criteria)));
	}

검색의 처리

제목, 내용, 작성자와 같은 단일 항목
제목 + 내용, 제목 + 작성자와 같은 복합 항목
검색 항목에 따라서 매번 다른 SQL이 처리될 필요가 있는 상황
→ MyBatis의 동적 쿼리 기능을 이용해서 처리
https://mybatis.org/mybatis-3/dynamic-sql.html

Mybatis 동적 태그

if
test라는 속성과 함께 특정한 조건이 true가 되었을 때 포함된 SQL을 사용하고자 할 때 작성
choose(when, otherwise)
if와 달리 여러 상황들 중 하나의 상황에서만 동작
trim(where, set)
단독으로 사용되지 않고, if, choose와 같은 태그들을 내포하고 있어 SQL들을 연결해주고, 앞 뒤에 필요한 구문들(and, or, where 등)을 추가하거나 생략하는 역할
foreach
List, Array, Map 등을 이용해서 루프를 처리

BoardMapper

package org.zerock.mapper;

import java.util.List;
import java.util.Map;

import org.zerock.domain.BoardVO;
import org.zerock.domain.Criteria;

public interface BoardMapper {

(...생략...)

	List<BoardVO> searchTest(Map<String, Map<String, String>> map);
}

BoardMapper.xml

	<select id="getTotalCount" resultType="int">
		select count(bno) from tbl_board 
	</select>
	
	<select id="searchTest" resultType="org.zerock.domain.BoardVO">
		<![CDATA[
		select * from tbl_board
		where
		]]>
		<foreach collection="map" index="key" item="value">
			#{key} #{value}
		</foreach>
		<![CDATA[
			rownum < 10
		]]>
	</select>

Key만 출력

package org.zerock.mapper;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

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 org.zerock.domain.BoardVO;
import org.zerock.domain.Criteria;
import org.zerock.domain.PageDTO;

import lombok.extern.log4j.Log4j;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class BoardMapperTests {

(...생략...)

	@Test
	public void testSearch() {
		Map<String, String> map = new HashMap<String, String>();
		map.put("T", "TTT");
		map.put("C", "CCC");
		
		Map<String, Map<String, String>> outer = new HashMap<String, Map<String,String>>();
		outer.put("map", map);
		
		List<BoardVO> list = boardMapper.searchTest(outer);
		
		log.info("list.................. : " + list);
	}
	
}

BoardMapper.xml

	<select id="searchTest" resultType="org.zerock.domain.BoardVO">
		<![CDATA[
		select * from tbl_board
		where
		]]>
		<foreach collection="map" index="key" item="value">
			<if test="key == 'T'.toString()">
				title like #{value}
			</if>
		</foreach>
		<![CDATA[
			rownum < 10
		]]>
	</select>

	<select id="searchTest" resultType="org.zerock.domain.BoardVO">
		<![CDATA[
		select * from tbl_board
		where
		]]>
		<trim suffix="and">
		<foreach collection="map" index="key" item="value">
			<if test="key == 'T'.toString()">
				title like #{value}
			</if>
		</foreach>
		</trim>
		<![CDATA[
			rownum < 10
		]]>
	</select>

	<select id="searchTest" resultType="org.zerock.domain.BoardVO">
		<![CDATA[
		select * from tbl_board
		where
		]]>
		<trim suffix="and">
		<foreach collection="map" index="key" item="value">
			<if test="key == 'T'.toString()">
				title like #{value}
			</if>
			<if test="key == 'C'.toString()">
				content like #{value}
			</if>
			<if test="key == 'W'.toString()">
				writer like #{value}
			</if>
		</foreach>
		</trim>
		<![CDATA[
			rownum < 10
		]]>
	</select>

	@Test
	public void testSearch() {
		Map<String, String> map = new HashMap<String, String>();
		map.put("T", "TTT");
		map.put("C", "CCC");
		map.put("W", "WWW");
		
		Map<String, Map<String, String>> outer = new HashMap<String, Map<String,String>>();
		outer.put("map", map);
		
		List<BoardVO> list = boardMapper.searchTest(outer);
		
		log.info("list.................. : " + list);
	}

	<select id="searchTest" resultType="org.zerock.domain.BoardVO">
		<![CDATA[
		select * from tbl_board
		where
		]]>
		<trim suffix="and">
		<foreach collection="map" index="key" item="value" separator="OR">
			<if test="key == 'T'.toString()">
				title like #{value}
			</if>
			<if test="key == 'C'.toString()">
				content like #{value}
			</if>
			<if test="key == 'W'.toString()">
				writer like #{value}
			</if>
		</foreach>
		</trim>
		<![CDATA[
			rownum < 10
		]]>
	</select>

select * from tbl_board where content like 'CCC' OR title like 'TTT' OR writer like 'WWW'

우선순위 때문에 or 조건은 괄호로 묶어줘야함

	<select id="searchTest" resultType="org.zerock.domain.BoardVO">
		<![CDATA[
		select * from tbl_board
		where
		]]>
		<trim suffix="and">
		<foreach collection="map" index="key" item="value" separator="OR" open="(" close=")">
			<if test="key == 'T'.toString()">
				title like #{value}
			</if>
			<if test="key == 'C'.toString()">
				content like #{value}
			</if>
			<if test="key == 'W'.toString()">
				writer like #{value}
			</if>
		</foreach>
		</trim>
		<![CDATA[
			rownum < 10
		]]>
	</select>

검색 조건이 없을 때

	@Test
	public void testSearch() {
		Map<String, String> map = new HashMap<String, String>();
		
		Map<String, Map<String, String>> outer = new HashMap<String, Map<String,String>>();
		outer.put("map", map);
		
		List<BoardVO> list = boardMapper.searchTest(outer);
		
		log.info("list.................. : " + list);
	}

select * from tbl_board where rownum < 10

동적 SQL → 확인 할 수 있는 것이 중요

스프링 웹 프로젝트 13

001cloudid — Sun, 12 Jan 2025 16:42:29 +0900

PK와 인덱스

PK를 생성하면 자동으로 인덱스 생성

인덱스를 이용하기 위한 힌트

개발자의 의도를 힌트를 이용해서 전달
힌트 구문은 잘못되어도 SQL 처리에 지장을 주지 않음
여러 종류의 힌트가 존재 FULL/ INDEX_DESC, INDEX_ASC
/*+ index_desc(tbl_board pk_board) */

데이터를 더 추가한 후

full 힌트

index 힌트

즉 데이터가 많아질수록 order by를 이용하기보다는 index를 이용

페이징 처리 → 오라클의 경우 다른 db와 다름, 좀 더 복잡함 → 실행계획에 따라서 어떻게 접근할지 결정됨

※실행계획 : sql을 작성했을 때 데이터베이스에서 어떻게 처리할지 순서가 결정?

rownum과 인덱스

rownum 가상 테이터 같은 것(실제 데이터가 아님), 출력되면서 붙는 번호
테이블에서 최종적으로 나오면서 붙이는 컬럼
인덱스를 통해서 나오는지, full 스캔을 통하는지에 따라서 rownum이 다르게 나

index → 가장 높은 번호가 가장 먼저 테이블에서 접근이 됨

페이지를 위해서는 아래의 SQL을 이용해야함

select /*+ index_desc(tbl_board pk_board) */ rownum, bno, title from tbl_board where bno>0 and rownum <= 10;

위는 1페이지에 해당할 것이다. 그렇다면 2페이지는?

select /*+ index_desc(tbl_board pk_board) */ rownum, bno, title from tbl_board where bno>0 and rownum >= 11 and rownum <=20;

를 작성하고 조회를 해보면 아무것도 뜨지 않음

FILTER에서 맞는 데이터가 하나도 없기 때문임

가능

from에 인라인뷰(select 문을 테이블 값을 들고오는 테이블로 사용 ) → 거기에 조건을 넣어줌

select *
from (select /*+ index_desc(tbl_board pk_board) */ rownum rn, bno, title from tbl_board where bno>0 and rownum >0 and rownum <=20)
where rn >10;

package org.zerock.domain;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
public class Criteria {

	private int pageNum; // 페이지
	private int amount; // 개수

	public Criteria() {
		this(1,10); // 초기값
	}

	public Criteria(int pageNum, int amount) {
		super();
		this.pageNum = pageNum;
		this.amount = amount;
	}
	
}

<?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.BoardMapper">

(...생략...)

	<select id="getListWithPaging" resultType="org.zerock.domain.BoardVO"> <!-- xml에서 부등호처리 → cdata -->
		<![CDATA[  
		select *
		from (select /*+ index_desc(tbl_board pk_board) */ rownum rn, bno, title from tbl_board where bno>0 and rownum > 0 and rownum <= (2 * 10))
		where rn > (2-1) *10
		]]>
	</select>
	
</mapper>

package org.zerock.mapper;

import java.util.List;

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 org.zerock.domain.BoardVO;
import org.zerock.domain.Criteria;

import lombok.extern.log4j.Log4j;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class BoardMapperTests {

	@Autowired
	private BoardMapper boardMapper;
	
(...생략...)

	@Test
	public void testPaging() {
		Criteria criteria = new Criteria(); // 1 페이지에 10개
		List<BoardVO> list = boardMapper.getListWithPaging(criteria);
		for(int i = 0; i < list.size(); i++) {
			log.info(list);
		}
	}
	
}

일치 → BoardMapper 수정

<?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.BoardMapper">

(...생략...)
	
	<select id="getListWithPaging" resultType="org.zerock.domain.BoardVO"> <!-- xml에서 부등호처리 → cdata -->
		<![CDATA[  
		select *
		from (select /*+ index_desc(tbl_board pk_board) */ rownum rn, bno, title from tbl_board where bno>0 and rownum > 0 and rownum <= (#{pageNum} * #{amount}))
		where rn > (#{pageNum}-1) * #{amount}
		]]>
	</select>
	
</mapper>

변경 후 다시 테스트

화면 페이징 처리

package org.zerock.service;

import java.util.List;

import org.zerock.domain.BoardVO;
import org.zerock.domain.Criteria;

public interface BoardService { // 고객과 의사소통하는 용어로 사용하기 때문에 변수명을 주의

//	public void register(BoardVO boardVO);

	public Long register(BoardVO boardVO);
	
	public BoardVO get(Long bno);
	
	public int modify(BoardVO boardVO);
	
	public int remove(Long bno);
	
	public List<BoardVO> getList();

	public List<BoardVO> getList(Criteria criteria); // 오버로딩
	
}

package org.zerock.service;

import java.util.List;

import org.springframework.stereotype.Service;
import org.zerock.domain.BoardVO;
import org.zerock.domain.Criteria;
import org.zerock.mapper.BoardMapper;

import lombok.RequiredArgsConstructor;
import lombok.ToString;
import lombok.extern.log4j.Log4j;

@Service
@Log4j
@RequiredArgsConstructor
@ToString
public class BoardSeriveImpl implements BoardService{ // 인터페이스를 사용 : 실제 객체가 무엇인지 몰라도 타입만 보고 코딩할 수 있게 하기 위해서
	
	private final BoardMapper boardMapper; // @RequiredArgsConstructor + final => 자동 주입

//	@Override
//	public void register(BoardVO boardVO) {
//		boardMapper.insert(boardVO);
//	}

	@Override
	public Long register(BoardVO boardVO) {
		boardMapper.insertSelectKey(boardVO);
		return boardVO.getBno();
	}
	
	@Override
	public BoardVO get(Long bno) {
		return boardMapper.read(bno);
	}

	@Override
	public int modify(BoardVO boardVO) {
		return boardMapper.update(boardVO);
	}

	@Override
	public int remove(Long bno) {
		return boardMapper.delete(bno);
	}

	@Override
	public List<BoardVO> getList() {
		return boardMapper.getList();
	}

	@Override
	public List<BoardVO> getList(Criteria criteria) {
		return boardMapper.getListWithPaging(criteria);
	}
	
}

package org.zerock.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import org.zerock.domain.BoardVO;
import org.zerock.domain.Criteria;
import org.zerock.service.BoardService;

import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j;

@Controller
@RequestMapping("/board/*")
@RequiredArgsConstructor
@Log4j
public class BoardController {

	private final BoardService boardService;
	
//	@GetMapping("/list")
//	public void list(Model model) { // Model 전달 당시에는 없는데 화면에 추가적인 데이터가 필요한 경우 사용
//		log.info("BoardController list()................");
//		model.addAttribute("list", boardService.getList());
//	}
	@GetMapping("/list")
	public void list(Model model, Criteria criteria) { 
		log.info("BoardController list()................");
		log.info("criteria : " + criteria);
		model.addAttribute("list", boardService.getList(criteria));
	}
	
	@GetMapping("/register")
	public void registerGet() {
		log.info("BoardController regsterGet()............");
	}
	
	@PostMapping("/register")
	public String register(BoardVO boardVO, RedirectAttributes redirectAttributes) {
		log.info("BoardController register()....................");
		boardService.register(boardVO);
		log.info("register : " + boardVO);
		redirectAttributes.addFlashAttribute("result", boardVO.getBno()); // addFlashAttribute 잠깐 결과를 보내는 방식
		// ※ redirectAttributes.addAttribute("result : " + boardVO.getBno()) // 브라우저의 링크와 같이 연결, list?bno= 이런 형식으로 할 때 쓰임
		
		return "redirect:/board/list";
	}
	
	@PostMapping("/modify")
	public String modify(BoardVO boardVO, RedirectAttributes redirectAttributes) {
		log.info("BoardController modify()......................");
		
		int count = boardService.modify(boardVO);
		
		if(count == 1) {
			redirectAttributes.addFlashAttribute("result", "success");
		}
		return "redirect:/board/list";
	}
	
	@PostMapping("/remove")
	public String remove(@RequestParam("bno") Long bno, RedirectAttributes redirectAttributes) {
		log.info("BoardController remove()......................");
		
		int count = boardService.remove(bno);
		
		if(count == 1) {
			redirectAttributes.addFlashAttribute("result", "success");
		}
		return "redirect:/board/list";
	}
	
	@GetMapping({"/get", "/modify"})
	public void get(@RequestParam("bno") Long bno,Model model) {
		model.addAttribute("boardVO", boardService.get(bno));
	}
	
}

Mapper에서 작성자, 작성일, 수정일을 들고오지 않음

<?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.BoardMapper">

(...생략...)
	
	<select id="getListWithPaging" resultType="org.zerock.domain.BoardVO"> <!-- xml에서 부등호처리 → cdata -->
		<![CDATA[  
		select *
		from (select /*+ index_desc(tbl_board pk_board) */ rownum rn, bno, title, writer, regdate,updateDate from tbl_board where bno>0 and rownum > 0 and rownum <= (#{pageNum} * #{amount}))
		where rn > (#{pageNum}-1) * #{amount}
		]]>
	</select>
	
</mapper>

JSP 처리

BoardController/BoardService/BoardServiceImpl 처리
list.jsp 처리

페이지 처리에 필요한 정보

현재 페이지 번호(page) → Criteria
이전과 다음으로 이동 가능한 링크의 표시 여부(prev, next)
화면에서 보여지는 페이지의 시작 번호와 끝 번호(startPage, endPage)
startPage = endPage - 9
endPage = (int)(Math.ceil(page/10.0))*10

total을 통한 endPage의 재계산
realEnd = (int)(Math.ceil((total * 1.0) / amount))
if(realEnd < endPage){
endPage = realEnd
}

※끝 페이지에서 계산하는 것이 더 편함

package org.zerock.domain;

import lombok.Getter;
import lombok.ToString;

@ToString
@Getter
public class PageDTO {

	private int startPage, endPage;
	private boolean prev, next;
	
	private int total;
	private Criteria criteria;
	
	public PageDTO(Criteria criteria, int total) {
		this.criteria = criteria;
		this.total = total;
		
		// 계산
		this.endPage = (int)(Math.ceil(criteria.getPageNum()/10.0)) * 10; 
		
		this.startPage = endPage - 9;
		
		this.prev = this.startPage > 1;
		
		int realEnd = (int)(Math.ceil((total * 1.0) / criteria.getAmount()));
		
		this.endPage = (realEnd < endPage) ? realEnd : endPage;
		
		this.next = this.endPage < realEnd;
	}
	
}

package org.zerock.mapper;

import java.util.List;

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 org.zerock.domain.BoardVO;
import org.zerock.domain.Criteria;
import org.zerock.domain.PageDTO;

import lombok.extern.log4j.Log4j;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class BoardMapperTests {

	@Autowired
	private BoardMapper boardMapper;
	
(...생략...)

	@Test
	public void testPageDTO() {
		Criteria criteria = new Criteria(); 
		PageDTO pageDTO = new PageDTO(criteria, 1376395);
		log.info(pageDTO);
	}
	
}

화면에 전달(아직까지 total은 들고오지 않음)

package org.zerock.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import org.zerock.domain.BoardVO;
import org.zerock.domain.Criteria;
import org.zerock.domain.PageDTO;
import org.zerock.service.BoardService;

import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j;

@Controller
@RequestMapping("/board/*")
@RequiredArgsConstructor
@Log4j
public class BoardController {

	private final BoardService boardService;
	
//	@GetMapping("/list")
//	public void list(Model model) { // Model 전달 당시에는 없는데 화면에 추가적인 데이터가 필요한 경우 사용
//		log.info("BoardController list()................");
//		model.addAttribute("list", boardService.getList());
//	}
	@GetMapping("/list")
	public void list(Model model, Criteria criteria) { 
		log.info("BoardController list()................");
		log.info("criteria : " + criteria);
		model.addAttribute("list", boardService.getList(criteria));
		model.addAttribute("page", new PageDTO(criteria, 123));
	}

(...생략...)

}

list.jsp에 model 출력

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><a href="/board/get?bno=<c:out value='${boardVO.bno}' />"><c:out value="${boardVO.title}" /></a></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                            
                            <h3>${page}</h3>
                            
               (..생략...)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><a href="/board/get?bno=<c:out value='${boardVO.bno}' />"><c:out value="${boardVO.title}" /></a></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                            
                            <h3>${page}</h3>
                            <div class="pull-right">
                            	<ul>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li>${num}</li>
									</c:forEach>                            	
                            	</ul>
                            </div>
                            
         (..생략...)

페이지 번호 링크 부트스트랩을 이용 list.jsp

(...생략...)
                            <h3>${page}</h3>
                            <div class="pull-right">
                            	<ul class="pagination"> 
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item"><a class="page-link" href="#">${num}</a></li>
									</c:forEach>                            	
                            	</ul>
                            </div>
(...생략...)

prev, next 버튼

(...생략...)
                            <h4>${page}</h4>
                            <div class="pull-right">
                            	<ul class="pagination"> 
								    <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item"><a class="page-link" href="#">${num}</a></li>
									</c:forEach>                            	
								    <li class="page-item"><a class="page-link" href="#">Next</a></li>
                            	</ul>
                            </div>
(...생략...)

Previous, Next list.jsp

(...생략...)
                            <h4>${page}</h4>
                            <div class="pull-right">
                            	<ul class="pagination">
                            		<c:if test="${page.prev}"> 
								    	<li class="page-item"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
									</c:if>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item"><a class="page-link" href="#">${num}</a></li>
									</c:forEach>                
									<c:if test="${page.next}">            	
								    	<li class="page-item"><a class="page-link" href="#">Next</a></li>
                            		</c:if>
                            	</ul>
                            </div>
(...생략...)

다음 아래 사진과 같은 작업

(...생략...)
 <h4>${page}</h4>
                            <div class="pull-right">
                            	<ul class="pagination">
                            		<c:if test="${page.prev}"> 
								    	<li class="page-item"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
									</c:if>
									<c:forEach begin="${page.startPage}" end="${page.endPage}" var="num">
										<li class="page-item ${page.criteria.pageNum == num? 'active' :''}"><a class="page-link" href="#">${num}</a></li>
									</c:forEach>                
									<c:if test="${page.next}">            	
								    	<li class="page-item"><a class="page-link" href="#">Next</a></li>
                            		</c:if>
                            	</ul>
                            </div>
(...생략...)

스프링 웹 프로젝트 12

001cloudid — Sat, 11 Jan 2025 16:28:37 +0900

SQL Developer를 종료하고 다시 시작하고난 뒤 sql_board.nextval로 bno값을 증가시켰을 때 bno값이 마지막 번호에서 증가되지 않는 문제가 발생 → Oracle의 시퀀스는 기본적으로 캐시 기능을 사용하는데, 시퀀스에서 생성되는 값을 미리 메모리에 저장해두고, 그 값을 반환함. 세션 종료와 캐시 SQL Developer를 종료하고 다시 시작하면, 캐시된 시퀀스 값들이 세션 종료와 함께 소멸됨. 즉 SQL Developer 세션이 종료될 때 메모리에서 캐시된 값들이 사라지고, 새로 시작된 세션에서 시퀀스가 처음부터 새로운 값을 생성하기 시작함. 이 과정에서 이미 캐시된 값들이 사려졌기 때문에 시퀀스가 값을 건너뛰는 현상이 발생할 수 있음

게시물 작업 이후 재전송

게시물의 틍록, 수정, 삭제의 경우에 해당
작업이 완료된 후에는 리스트 페이지로 다시 이동
BoardController에서는 RedirectAttributes의 addFlashAttribute()를 이용해서 단 한 번만 전송되는 데이터를 저장 후 전송
JSP 등의 화면에서는 JavaScript를 이용해서 경고창이나 모달창 등을 보여주는 형식

package org.zerock.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import org.zerock.domain.BoardVO;
import org.zerock.service.BoardService;

import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j;

@Controller
@RequestMapping("/board/*")
@RequiredArgsConstructor
@Log4j
public class BoardController {

	private final BoardService boardService;
	
(...생략...)
	
	@PostMapping("/register")
	public String register(BoardVO boardVO, RedirectAttributes redirectAttributes) {
		log.info("BoardController register()....................");
		boardService.register(boardVO);
		log.info("register : " + boardVO);
		redirectAttributes.addFlashAttribute("result", boardVO.getBno()); // addFlashAttribute 잠깐 결과를 보내는 방식
		// ※ redirectAttributes.addAttribute("result", boardVO.getBno()) // 브라우저의 링크와 같이 연결, list?bno= 이런 형식으로 할 때 쓰임
		
		return "redirect:/board/list";
	}
}

Submit Button을 누르고 뒤로 가기

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

(...생략...)

<script>
$(document).ready(function(){
	${result}
});
</script>

<%@include file="../include/footer.jsp" %>

자바스크립트 문법상 에러 나는 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

(...생략...)

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
});
</script>

<%@include file="../include/footer.jsp" %>

board/list에서 새로 고침을 하고 소스보기를 할 경우

이것을 가지고 작업을 했는지, 호출만 했는지를 구분 → 모달창

BoardController에서 특정한 데이터가 RedirectAttribute에 포함된 경우에 모달창
https://getbootstrap.com/docs/4.0/components/modal/ 코드를 복사

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

(...생략...)

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
	
	
	checkModal(result);
	
	function checkModal(result){
		
		if(result ===''){
			return;
		}
		
		if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		$("#myModal").modal("show");
	}
	
});
</script>

<%@include file="../include/footer.jsp" %>

글 작성 후

이후 http://localhost:8080/board/list에서 새로고침을 하면 모달창이 뜨지 않음

글쓰기 버튼 추가 및 버튼 글쓰기 버튼 클릭시 링크 이동

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
 (...생략...)
 
 
 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><c:out value="${boardVO.title}" /></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){

(...생략...)

	$("#regBtn").click(function(){
		self.location = "/board/register";
	});
	
});
</script>

<%@include file="../include/footer.jsp" %>

조회 페이지와 이동

목록에서 특정 게시물 선택 후 이동 처리 (번호가 전달되어야함)
조회의 경우 반드시 GET 방식으로만 처리

package org.zerock.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import org.zerock.domain.BoardVO;
import org.zerock.service.BoardService;

import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j;

@Controller
@RequestMapping("/board/*")
@RequiredArgsConstructor
@Log4j
public class BoardController {

	private final BoardService boardService;
	
(...생략...)
	
	@GetMapping("/get")
	public void get(@RequestParam("bno") Long bno,Model model) {
		model.addAttribute("boardVO", boardService.get(bno));
	}
	
}

get.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Read</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Read
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
								<div class="form-group">
									<label>BNO</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
							 	<button type="submit" class="btn btn-default">Submit Button</button>
                                <button type="reset" class="btn btn-default">Reset Button</button>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<%@include file="../include/footer.jsp" %>

list.jsp 에서 제목을 클릭하면 위의 조회 페이지를 볼 수 있게 구현

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                            <button id="regBtn" type="button" class="btn btn-xs pull-right">Register New Board</button>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><a href="/board/get?bno=<c:out value='${boardVO.bno}' />"><c:out value="${boardVO.title}" /></a></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
	
	
	checkModal(result);
	
	function checkModal(result){
		
		if(result ===''){
			return;
		}
		
		if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		$("#myModal").modal("show");
	}
	
	$("#regBtn").click(function(){
		self.location = "/register";
	});
	
});
</script>

<%@include file="../include/footer.jsp" %>

히스토리 클리어

list.jsp

(...생략...)

<script>
$(document).ready(function(){
	var result = '<c:out value="${result}"/>';
	
	
	checkModal(result);
	
	history.replaceState({},null,null); // 히스토리 클리어
	
	function checkModal(result){
		
		if(result ==='' || history.state){
			return;
		}
		
		if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		$("#myModal").modal("show");
	}
	
	$("#regBtn").click(function(){
		self.location = "/board/register";
	});
	
});
</script>

게시물의 수정/삭제 처리

게시물 조회 이후 수정/삭제 페이지로 이동
사용자의 선택에 따라서 작업을 처리
수정/삭제는 POST 방식으로 처리

BoardController의 get()메서드와 같기 때문에 똑같은 페이지를 만들 필요 없이 두 개의 링크를 처리할 수 있게

	@GetMapping({"/get", "/modify"})
	public void get(@RequestParam("bno") Long bno,Model model) {
		model.addAttribute("boardVO", boardService.get(bno));
	}

modify.jsp (get.jsp와 거의 유사하기 때문에 복사붙여넣기 후 이름만 수정)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Modify/Delete</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Modify/Delete
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
								<div class="form-group">
									<label>BNO</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
							 	<button type="submit" class="btn btn-default">Submit Button</button>
                                <button type="reset" class="btn btn-default">Reset Button</button>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<%@include file="../include/footer.jsp" %>

여기서 수정을 할 수 있는 것과 수정을 할 수 없는 것을 비교 ※링크 처리는 나중에

버튼먼저 변경

							 	<button class="btn btn-default">Modify</button>
                                <button class="btn btn-danger">Remove</button>
                                <button class="btn btn-info">List</button>

이벤트

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Modify/Delete</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Modify/Delete
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
								<div class="form-group">
									<label>BNO</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
							 	<button class="btn btn-default" data-oper='modify'>Modify</button>
                                <button class="btn btn-danger" data-oper='remove'>Remove</button>
                                <button class="btn btn-info" data-oper='list'>List</button>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<script>
	$(document).ready(function(){
		
		$('.btn').click(function(e){
			
			e.preventDefault();
			
			var operation = $(this).data("oper");
			
			console.log(operation);
		})
		
		
	})
</script>

<%@include file="../include/footer.jsp" %>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Modify/Delete</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Modify/Delete
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                        <form action="">
								<div class="form-group">
									<label>BNO</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
							 	<button class="btn btn-default" data-oper='modify'>Modify</button>
                                <button class="btn btn-danger" data-oper='remove'>Remove</button>
                                <button class="btn btn-info" data-oper='list'>List</button>
                        </form>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<script>
	$(document).ready(function(){
		
		var formObj = $('form');
		
		$('.btn').click(function(e){
			
			e.preventDefault();
			
			var operation = $(this).data("oper");
			
			console.log(operation);
			
			if(operation === 'list'){
				self.location = "/board/list";
			}
		})
		
		
	})
</script>

<%@include file="../include/footer.jsp" %>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Modify/Delete</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Modify/Delete
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                        <form>
								<div class="form-group">
									<label>BNO</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
							 	<button class="btn btn-default" data-oper='modify'>Modify</button>
                                <button class="btn btn-danger" data-oper='remove'>Remove</button>
                                <button class="btn btn-info" data-oper='list'>List</button>
                        </form>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<script>
	$(document).ready(function(){
		
		var formObj = $('form');
		
		$('.btn').click(function(e){
			
			e.preventDefault();
			
			var operation = $(this).data("oper");
			
			console.log(operation);
			
			if(operation === 'list'){
				self.location = "/board/list";
			}else if(operation === 'remove'){
				formObj.attr("action", "/board/remove");
			}
		})
		
		
	})
</script>

<%@include file="../include/footer.jsp" %>

remove 버튼을 누르면

이어서 attr("method","post")를 추가

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
(...생략...)
				formObj.attr("action", "/board/remove").attr("method","post");
			}
		})
	})
</script>

<%@include file="../include/footer.jsp" %>

submit만 해주면

(...생략...)
			if(operation === 'list'){
				self.location = "/board/list";
			}else if(operation === 'remove'){
				formObj.attr("action", "/board/remove").attr("method","post");
				formObj.submit();
			}
		})
		
		
	})
</script>

<%@include file="../include/footer.jsp" %>

input 태그에 name에 bno가 아니라 title로 작성되어 있어 오류 발생 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Modify/Delete</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Modify/Delete
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                        <form>
								<div class="form-group">
									<label>BNO</label> <input name="bno" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
							 	<button class="btn btn-default" data-oper='modify'>Modify</button>
                                <button class="btn btn-danger" data-oper='remove'>Remove</button>
                                <button class="btn btn-info" data-oper='list'>List</button>
                        </form>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<script>
	$(document).ready(function(){
		
		var formObj = $('form');
		
		$('.btn').click(function(e){
			
			e.preventDefault();
			
			var operation = $(this).data("oper");
			
			console.log(operation);
			
			if(operation === 'list'){
				self.location = "/board/list";
			}else if(operation === 'remove'){
				formObj.attr("action", "/board/remove").attr("method","post");
				formObj.submit();
			}
		})
		
		
	})
</script>

<%@include file="../include/footer.jsp" %>

Modal title이 비어있는 것을 수정

list.jsp

(...생략...)
	
	function checkModal(result){
		
		if(result ==='' || history.state){
			return;
		}
		
		if(result === 'success'){
			$('.modal-body').html("정상적으로 처리됨.");
		} else if(parseInt(result)>0){
			$('.modal-body').html("게시글 " + parseInt(result) + " 번이 등록됨.");
		}
		
		$("#myModal").modal("show");
	}
	
	$("#regBtn").click(function(){
		self.location = "/board/register";
	});
	
});
</script>

<%@include file="../include/footer.jsp" %>

modify.jsp에서 readonly 속성 제거

(...생략...)
								<div class="form-group">
									<label>BNO</label> <input name="bno" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
(...생략...)

modify.jsp

(...생략...)
<script>
	$(document).ready(function(){
		
		var formObj = $('form');
		
		$('.btn').click(function(e){
			
			e.preventDefault();
			
			var operation = $(this).data("oper");
			
			console.log(operation);
			
			if(operation === 'list'){
				self.location = "/board/list";
			}else if(operation === 'remove'){
				formObj.attr("action", "/board/remove").attr("method","post");
				formObj.submit();
			}else if(operation === 'modify'){
				formObj.attr("action", "/board/modify").attr("method","post");
				formObj.submit();
			}
		})
		
		
	})
</script>

get.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Read</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Board Read
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
								<div class="form-group">
									<label>BNO</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.bno}'/>">
								</div>
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control" readonly="readonly" value="<c:out value='${boardVO.title}'/>">
								</div>
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"><c:out value='${boardVO.content}'/></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control" value="<c:out value='${boardVO.writer}'/>">
								</div>
							 	<button type="submit" class="btn btn-default"><a href="/board/list">List</a></button>
                                <button type="reset" class="btn btn-default"><a href="/board/modify?bno=<c:out value='${boardVO.bno }'/>">Modify</a></button>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<%@include file="../include/footer.jsp" %>

스프링 웹 프로젝트 11

001cloudid — Thu, 9 Jan 2025 22:07:38 +0900

POST 방식 후 처리

등록, 수정, 삭제의 최종 처리는 POST 방식을 이용
브라우저에는 어떤 결과를 보여 줄 것인가?
1) 별도의 결과 페이지를 만들어서 보여주는 방식(ex, 회원가입 완료 페이지)
2) 목록 페이지로 이동하는 방식(ex, 목록 페이지에서 알림 메시지를 보여주는 방식)
POST 방식 후에는 'redirect:/...'를 고려

RedirectAttribute 사용 시기

상황
GET 방식으로 입력페이지 /board/register
POST 방식으로 입력 처리 /board/register
처리가 끝난 후 화면 이동을 해도 브라우저의 URL은 POST 방식 처리 URL 그대로
만일 브라우저를 새로고침 한다면?
=> 도배를 방지하기 위해
'redirect:/...'를 이용해서 브라우저와 연결을 한 번 종료
브라우저는 새롭게 특정 URL을 요구

package org.zerock.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import org.zerock.domain.BoardVO;
import org.zerock.service.BoardService;

import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j;

@Controller
@RequestMapping("/board/*")
@RequiredArgsConstructor
@Log4j
public class BoardController {

	private final BoardService boardService;
	
(...생략...)
	
	@PostMapping("/register")
	public String register(BoardVO boardVO, RedirectAttributes redirectAttributes) {
		log.info("BoardController register()....................");
		log.info("register : " + boardVO);
		redirectAttributes.addFlashAttribute("result : " + boardVO.getBno()); // addFlashAttribute 잠깐 결과를 보내는 방식
		// ※ redirectAttributes.addAttribute("result : " + boardVO.getBno()) // 브라우저의 링크와 같이 연결, list?bno= 이런 형식으로 할 때 쓰임
		
		return "redirect:/board/list";
	}
	
}

게시물의 수정

	@PostMapping("/modify")
	public String modify(BoardVO boardVO, RedirectAttributes redirectAttributes) {
		log.info("BoardController modify()......................");
		
		int count = boardService.modify(boardVO);
		
		if(count == 1) {
			redirectAttributes.addFlashAttribute("result", "success");
		}
		return "redirect:/board/list";
	}

게시물의 삭제

BoardMapper 인터페이스에 메서드 추가 파라미터는 PK

	@PostMapping("/remove")
	public String remove(@RequestParam("bno") Long bno, RedirectAttributes redirectAttributes) {
		log.info("BoardController remove()......................");
		
		int count = boardService.remove(bno);
		
		if(count == 1) {
			redirectAttributes.addFlashAttribute("result", "success");
		}
		return "redirect:/board/list";
	}

화면 처리

startbootstrap-sb-admin-2-gh-pages.zip

1.48MB

board/list에 pages 소스 붙여 넣기 후 링크 파일 넣어주기 및 수정

resources에 data, dist, js, less, pages, vendor 붙여 넣기 후 list.jsp를 아래와 파일과 같이 수정

include 적용

header.jsp, foot

er.jsp 추가 및 수정

list.jsp 잘라낸 후

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>Rendering engine</th>
                                        <th>Browser</th>
                                        <th>Platform(s)</th>
                                        <th>Engine version</th>
                                        <th>CSS grade</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="odd gradeX">
                                        <td>Trident</td>
                                        <td>Internet Explorer 4.0</td>
                                        <td>Win 95+</td>
                                        <td class="center">4</td>
                                        <td class="center">X</td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<%@include file="../include/footer.jsp" %>

목록 화면의 처리

list.jsp에서 taglib추가

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

수정

(...생략...)
                           <table width="100%" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>#번호</th>
                                        <th>제목</th>
                                        <th>작성자</th>
                                        <th>작성일</th>
                                        <th>수정일</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${list}" var="boardVO">
                                    <tr class="odd gradeX">
                                        <td><c:out value="${boardVO.bno}" /></td>
                                        <td><c:out value="${boardVO.title}" /></td>
                                        <td><c:out value="${boardVO.writer}" /></td>
                                        <td><fmt:formatDate value="${boardVO.regdate }" pattern="yyyy-MM-dd"/> </td>
                                        <td><fmt:formatDate value="${boardVO.updateDate }" pattern="yyyy-MM-dd" /></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
(...생략...)

jQuery를 header.jsp로 옮기기

등록 입력 페이지와 등록

GET 방식으로 게시물 등록 화면 제공
POST 방식으로 실제 게시물 등록처리
이후 목록 페이지로 이동

Controller

package org.zerock.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import org.zerock.domain.BoardVO;
import org.zerock.service.BoardService;

import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j;

@Controller
@RequestMapping("/board/*")
@RequiredArgsConstructor
@Log4j
public class BoardController {

	private final BoardService boardService;
	
	@GetMapping("/list")
	public void list(Model model) { // Model 전달 당시에는 없는데 화면에 추가적인 데이터가 필요한 경우 사용
		log.info("BoardController list()................");
		model.addAttribute("list", boardService.getList());
	}
	
	@GetMapping("/register")
	public void registerGet() {
		log.info("BoardController regsterGet()............");
	}
	
}

board/register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Board Register</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            DataTables Advanced Tables
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                        	<form action="/board/register" method="post">
								<div class="form-group">
									<label>Title</label> <input name="title" class="form-control">
								</div>
								
								<div class="form-group">
									<label>Content</label> <textarea rows="5" cols="50" class="form-control" name="content"></textarea>
								</div>
								<div class="form-group">
									<label>Writer</label> <input name="writer" class="form-control">
								</div>
							 	<button type="submit" class="btn btn-default">Submit Button</button>
                                <button type="reset" class="btn btn-default">Reset Button</button>
							</form>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
<%@include file="../include/footer.jsp" %>

input 태그와 textare 태그에 글을 작성하면 bno값이 null로 뜸. 왜 그런가를 찾아보니 Controller에서 Service를 설정해주지 않음

package org.zerock.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import org.zerock.domain.BoardVO;
import org.zerock.service.BoardService;

import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j;

@Controller
@RequestMapping("/board/*")
@RequiredArgsConstructor
@Log4j
public class BoardController {

(...생략...)

	@PostMapping("/register")
	public String register(BoardVO boardVO, RedirectAttributes redirectAttributes) {
		log.info("BoardController register()....................");
		boardService.register(boardVO);
		log.info("register : " + boardVO);
		redirectAttributes.addFlashAttribute("result : " + boardVO.getBno()); // addFlashAttribute 잠깐 결과를 보내는 방식
		// ※ redirectAttributes.addAttribute("result : " + boardVO.getBno()) // 브라우저의 링크와 같이 연결, list?bno= 이런 형식으로 할 때 쓰임
		
		return "redirect:/board/list";
	}
	
(...생략...)
	
}

이후 한글로 글을 작성하면

한글이 깨짐

※ 테스트는 한글로 하는 것이 좋음

한글 문제와 UTF-8 필터 처리

web.xml 필터 추가

	<filter>
		<filter-name>encodingFilter</filter-name>
		<filter-class>
			org.springframework.web.filter.CharacterEncodingFilter
		</filter-class>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>UTF-8</param-value>
		</init-param>
		<init-param>
			<param-name>forceEncoding</param-name>
			<param-value>true</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>encodingFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

한글이 정상적으로 처리된 결

스프링 웹 프로젝트 10

001cloudid — Wed, 8 Jan 2025 22:56:23 +0900

ex02에서 Tomcat으로 서버를 구동했을 때 아래와 같은 오류가 발생함.

- 아 래 -

org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'hikariConfig' defined in ServletContext resource [/WEB-INF/spring/root-context.xml]: Error setting property values; nested exception is org.springframework.beans.PropertyBatchUpdateException; nested PropertyAccessExceptions (1) are: PropertyAccessException 1: org.springframework.beans.MethodInvocationException: Property 'driverClassName' threw exception; nested exception is java.lang.NoClassDefFoundError: Unable to find Log4j2 as default logging library. Please provide a logging library and configure a valid spyLogDelegator name in the properties file.

- 끝 -

ex01은 hikariCP를 사용하지 않아서 제대로 서버가 구동되는데, ex00도 마찬가지로 위의 오류 메시지가 발생하면서 서버가 제대로 구동되지 못함.

이 오류는 Log4j2 로깅 라이브러리가 누락되어 발생함.

Log4j2는 Spring과 HikariCP가 로그를 기록하는 데 사용하는 로깅 라이브러리 중 하나인데, Spring이나 HikariCP와 같은 라이브러리는 로깅을 처리하는 데 외부 로깅 라이브러리(Log4j, Logback 등)를 필요로 함. HikariConfig의 초기화 과정에서 로그를 기록하려고 할 때, 해당 로그를 처리할 로깅 라이브러리가 없으면 NoClassDefFoundError가 발생.

이를 해결하기 위해 pom.xml에 두 가지 라이브러리를 추가해줌으로서 해결함

		<dependency>
			<groupId>org.apache.logging.log4j</groupId>
			<artifactId>log4j-api</artifactId>
			<version>2.0.1</version>
		</dependency>

		<dependency>
			<groupId>org.apache.logging.log4j</groupId>
			<artifactId>log4j-core</artifactId>
			<version>2.0.1</version>
		</dependency>

왜 이것으로 해결되는 것인지에 대한 궁금증이 생김

log4j-api
Log4j2의 API를 제공하는 라이브러리, 이 라이브러리를 통해 애플리케이션에서 로그를 작성하고, 로그 수준, 로그 출력 등을 설정할 수 있음
log4j-core
실제 로깅 기능을 수행하는 구현체, 이 라이브러리가 로깅 메시지를 콘솔, 파일 등으로 출력할 수 있게 해줌

log4j-api와 log4j-core 의존성을 추가하면, Log4j가 애플리케이션에 포함되어 HikariCP나 Spring에서 로그를 기록할 수 있게 됨. 이로 인해 NoClassDefFoundError가 발생하지 않게 되고, HikariConfig 빈을 정상적으로 생성할 수 있게 됨

로깅 라이브러리가 없으면 Spring이나 HikariCP가 내부에서 로그를 기록할 때 오류가 발생할 수 있음. log4j-api와 log4j-core 의존성을 추가하여 이 문제를 해결

프레젠테이션(웹) 계층의 CRUD 구현

package org.zerock.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.zerock.service.BoardService;

import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j;

@Controller
@RequestMapping("/board/*")
@RequiredArgsConstructor
@Log4j
public class BoardController {

	private final BoardService boardService;
	
	@GetMapping("/list")
	public void list(Model model) { // Model 전달 당시에는 없는데 화면에 추가적인 데이터가 필요한 경우 사용
		log.info("BoardController list()................");
		model.addAttribute("list", boardService.getList());
	}
	
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>board/list</title>
</head>
<body>
<h1>list page</h1>
${list}
</body>
</html>

BoardController의 등록처리

POST 방식으로 처리되는 데이터를 BoardVO 타입의 인스턴스로 바인딩해서 메서드에서 활용
BoardService를 이용해서 등록 처리
'redirect:'를 이용해서 다시 목록으로 이동

package org.zerock.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import org.zerock.domain.BoardVO;
import org.zerock.service.BoardService;

import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j;

@Controller
@RequestMapping("/board/*")
@RequiredArgsConstructor
@Log4j
public class BoardController {

	private final BoardService boardService;
	
(...생략...)

	@PostMapping("/register")
	public String register(BoardVO boardVO, RedirectAttributes redirectAttributes) {
		log.info("BoardController register()....................");
		log.info("register : " + boardVO);
		redirectAttributes.addFlashAttribute("result : " + boardVO.getBno());
		return "redirect:/board/list";
	}
	
}

package org.zerock.controller;

import org.junit.Before;
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 org.springframework.test.context.web.WebAppConfiguration;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.request.MockMvcRequestBuilders;
import org.springframework.test.web.servlet.setup.MockMvcBuilders;
import org.springframework.web.context.WebApplicationContext;

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

@RunWith(SpringJUnit4ClassRunner.class)
@WebAppConfiguration
@ContextConfiguration({
	"file:src/main/webapp/WEB-INF/spring/root-context.xml", 
	"file:src/main/webapp/WEB-INF/spring/appServlet/servlet-context.xml"})
@Log4j
public class BoardControllerTests {

	@Setter(onMethod_ = {@Autowired})
	private WebApplicationContext ctx;
	
	private MockMvc mockMvc;
	
(...생략...)

	@Test
	public void testRegister() throws Exception{
		log.info(
				mockMvc.perform(
						MockMvcRequestBuilders.post("/board/register").param("title", "Test 테스트")
																  .param("content", "content")
																  .param("writer", "user1"))
					   .andReturn()
					   .getModelAndView()
					   .getModelMap());
	}
}

스프링 웹 프로젝트 9

001cloudid — Tue, 7 Jan 2025 18:32:22 +0900

비즈니스 계층 구현

비즈니스 계층(서비스 계층)

고객의 요구사항을 반영하는 계층
업무의 단위로 설계(트랜잭션의 단위)
여러 개의 Mapper나 DAO를 사용하는 경우가 존재
xxxService 형태로 작성

서비스 패키지 설정

인터페이스와 클래스를 설정하고, root-context.xml에 등록

package org.zerock.service;

import java.util.List;

import org.zerock.domain.BoardVO;

public interface BoardService { // 고객과 의사소통하는 용어로 작성

	public void register(BoardVO boardVO);
	
	public BoardVO get(Long bno);
	
	public int modify(BoardVO boardVO);
	
	public int remove(Long bno);
	
	public List<BoardVO> getList();
	
}

package org.zerock.service;

import java.util.List;

import org.springframework.stereotype.Service;
import org.zerock.domain.BoardVO;
import org.zerock.mapper.BoardMapper;

import lombok.RequiredArgsConstructor;
import lombok.ToString;
import lombok.extern.log4j.Log4j;

@Log4j
@Service
@RequiredArgsConstructor
@ToString
public class BoardServiceImpl implements BoardService{

	private final BoardMapper boardMapper;

	@Override
	public void register(BoardVO boardVO) {
		
		boardMapper.insert(boardVO);
		
	}

	@Override
	public BoardVO get(Long bno) {
		
		return boardMapper.read(bno);
	}

	@Override
	public int modify(BoardVO boardVO) {

		return boardMapper.update(boardVO);
	}

	@Override
	public int remove(Long bno) {
		
		return boardMapper.delete(bno);
	}

	@Override
	public List<BoardVO> getList() {
		
		return boardMapper.getList();
	}
	
	
	
}

package org.zerock.service;

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.extern.log4j.Log4j;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class BoardServiceTest {
	
	@Autowired
	private BoardService boardService;
	
	@Test
	public void testPrint() {
		log.info(boardService);
	}

}

서비스 계층 준비 완료

테스트

package org.zerock.service;

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 org.zerock.domain.BoardVO;

import lombok.extern.log4j.Log4j;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class BoardServiceTest {
	
	@Autowired
	private BoardService boardService;
	
(...생략...)

	@Test
	public void testGetList() {
		boardService.getList().forEach(BoardVO -> log.info(boardService));
	}
	
}

※

package org.zerock.service;

import java.util.List;

import org.zerock.domain.BoardVO;

public interface BoardService { // 고객과 의사소통하는 용어로 작성

//	public void register(BoardVO boardVO);
	public Long register(BoardVO boardVO);
	
(...생략...)
	
}

package org.zerock.service;

import java.util.List;

import org.springframework.stereotype.Service;
import org.zerock.domain.BoardVO;
import org.zerock.mapper.BoardMapper;

import lombok.RequiredArgsConstructor;
import lombok.ToString;
import lombok.extern.log4j.Log4j;

@Log4j
@Service
@RequiredArgsConstructor
@ToString
public class BoardServiceImpl implements BoardService{

	private final BoardMapper boardMapper;

//	@Override
//	public void register(BoardVO boardVO) {
//		
//		boardMapper.insert(boardVO);
//		
//	}
	@Override
	public Long register(BoardVO boardVO) {
		
		boardMapper.insertSelectKey(boardVO);
		
		return boardVO.getBno();
		
	}

(...생략...)
	
}

package org.zerock.service;

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 org.zerock.domain.BoardVO;

import lombok.extern.log4j.Log4j;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class BoardServiceTest {
	
	@Autowired
	private BoardService boardService;
	
(...생략...)

	@Test
	public void testRegister() {
		BoardVO boardVO = new BoardVO();
		boardVO.setTitle("testRegister() title test");
		boardVO.setContent("testRegister() content test");
		boardVO.setWriter("testRegister() writer test");
		
		long bno = boardService.register(boardVO);
		
		log.info(bno);
	}
	
}

프레젠테이션(웹) 계층의 CRUD 구현

웹 계층의 구현

웹 계층에서 가정 먼저 설계하는 것은 URI의 설계
기준? → 와이어프레임, 스토리보드

Task	URL	Method	Parameter	From	URL 이동
전체 목록	/board/list	get
등록처리	/board/register	post	모든 항목	입력화면 필요	이동
조회	/board/get	get	bno=n
삭제 처리	/board/remove	post	bno	입력화면 필요
수정 처리	/board/modify	post	모든 항목	입력화면 필요	이동

작업의 순서

목록페이지 : 모든 진입 경로인 동시에 입력을 가는 링크
등록 입력/처리 : 게시물 등록 및 처리, 처리 후 이동
조회 : 목록 페이지에서 특정 게시물로 이동
수정/삭제 : 조회 페이지에서 수정/삭제 선택해 처리

Controller 목록 처리

게시물(BoardVO)의 목록을 Model에 담아서 전달
Model 전달 당시에는 없는데 화면에서 추가적인 데이터가 필요한 경우

package org.zerock.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j;

@Controller
@Log4j
@RequestMapping("/board/*")
@RequiredArgsConstructor
public class BoardController {

	@GetMapping("/list")
	public void list() {
		log.info("BoardController list()");
	}
	
	
}

package org.zerock.controller;

import org.junit.Before;
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 org.springframework.test.context.web.WebAppConfiguration;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.request.MockMvcRequestBuilders;
import org.springframework.test.web.servlet.setup.MockMvcBuilders;
import org.springframework.web.context.WebApplicationContext;

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

@RunWith(SpringJUnit4ClassRunner.class)
@WebAppConfiguration // Test for Controller
@ContextConfiguration({"file:src/main/webapp/WEB-INF/spring/root-context.xml", "file:src/main/webapp/WEB-INF/spring/appServlet/servlet-context.xml"})
@Log4j
public class BoardControllerTest {

	@Setter(onMethod_ = {@Autowired})
	private WebApplicationContext context;
	
	private MockMvc mockMvc;
	
	@Before
	public void setup() {
		this.mockMvc = MockMvcBuilders.webAppContextSetup(context).build();
	}
	
	@Test
	public void testList() throws Exception{
		log.info(
				mockMvc.perform(
						MockMvcRequestBuilders.get("/board/list"))
					   .andReturn()
					   .getModelAndView()
					   .getModelMap());
	}
	
	
}

스프링 웹 프로젝트 8

001cloudid — Mon, 6 Jan 2025 16:37:28 +0900

게시물 등록(Create)

insert와 selectkey 사용
생성된 게시물의 번호를 사용하는지에 따른 구분
insert만 처리되고 생성된 PK 값을 알 필요가 없는 경우
insert문이 실행되고, 생성된 PK 값을 알아야 하는경우

※ MyBatis를 사용할 때 #을 생각해야함. #은 getter나 setter로 생각

insert

package org.zerock.mapper;

import java.util.List;

import org.zerock.domain.BoardVO;

public interface BoardMapper {

	List<BoardVO> getList();
	
	void insert(BoardVO boardVO); // 메서드 이름, 메서드 파라미터, 메서드 리턴 타입 순서로 생각을 함
	
}

<?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.BoardMapper">

	<select id="getList" resultType="org.zerock.domain.BoardVO">
		select * from tbl_board order by bno desc
	</select>

	<insert id="insert">
		insert into tbl_board(bno, title,content, writer)
		values(seq_board.nextval, #{title}, #{content}, #{writer}) <!-- #은 ?로 바뀌고 get메서드 -->
	</insert>


</mapper>

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.SpringJUnit4ClassRunner;
import org.zerock.domain.BoardVO;

import lombok.extern.log4j.Log4j;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class BoardMapperTest {
	
	@Autowired
	private BoardMapper boardMapper;
	
(...생략...)

	@Test
	public void testInsert() {
		log.info("=======================");
		BoardVO boardVO = new BoardVO();
		boardVO.setTitle("Title 테스트");
		boardVO.setContent("Content 테스트");
		boardVO.setWriter("Writer 테스트");
		
		boardMapper.insert(boardVO);
		
	}

}

selectkey

package org.zerock.mapper;

import java.util.List;

import org.zerock.domain.BoardVO;

public interface BoardMapper {

(...생략...)

	void insertSelectKey(BoardVO boardVO);
}

<?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.BoardMapper">

(...생략...)

	<insert id="insertSelectKey">
		<selectKey order="BEFORE" keyProperty="bno" resultType="long">
			select seq_board.nextval from dual
		</selectKey> <!-- 성능은 훨씬 안좋음 -->
		insert into tbl_board(bno, title,content, writer)
		values(#{bno}, #{title}, #{content}, #{writer})
	</insert>

</mapper>

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.SpringJUnit4ClassRunner;
import org.zerock.domain.BoardVO;

import lombok.extern.log4j.Log4j;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class BoardMapperTest {
	
(...생략...)

	@Test
	public void testInsertSelectKey() {
		BoardVO boardVO = new BoardVO();
		boardVO.setTitle("ISK_Title 테스트");
		boardVO.setContent("ISK_Content 테스트");
		boardVO.setWriter("ISK_Writer 테스트");
		boardMapper.insertSelectKey(boardVO);
		log.info("=======================");
		log.info("after insert selectkey " + boardVO.getBno());
	}

}

게시물의 조회(read)

BoardMapper에 read관련된 메서드 추가
BoardMapper.xml의 SQL 추가
테스트를 통한 확인

package org.zerock.mapper;

import java.util.List;

import org.zerock.domain.BoardVO;

public interface BoardMapper {

(...생략...)
	
	BoardVO read(Long bno);

}

<?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.BoardMapper">

(...생략...)

	<select id="read" resultType="org.zerock.domain.BoardVO"> <!-- Alias로 할 수도 있음 -->
		select * from tbl_board where bno = #{bno}
	</select>

</mapper>

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.SpringJUnit4ClassRunner;
import org.zerock.domain.BoardVO;

import lombok.extern.log4j.Log4j;
import oracle.net.aso.b;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class BoardMapperTest {
	
	@Autowired
	private BoardMapper boardMapper;
	
(...생략...)

	@Test
	public void read() {
		BoardVO boardVO = boardMapper.read(21L);
		log.info(boardVO);
	}

}

삭제

package org.zerock.mapper;

import java.util.List;

import org.zerock.domain.BoardVO;

public interface BoardMapper {

(...생략...)
	
	// 삭제 리턴 타입을 int로 하는 이유? 몇 건이 삭제되었는지 알아보기 위해 사용
	int delete(Long bno);

}

<?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.BoardMapper">

(...생략...)

	<delete id="delete">
		delete from tbl_board where bno = #{bno}
	</delete>

</mapper>

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.SpringJUnit4ClassRunner;
import org.zerock.domain.BoardVO;

import lombok.extern.log4j.Log4j;
import oracle.net.aso.b;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class BoardMapperTest {
	
	@Autowired
	private BoardMapper boardMapper;
	
(...생략...)

	@Test
	public void testDelete() {
		int count = boardMapper.delete(21L);
		log.info("count : " + count);
	}

}

수정

package org.zerock.mapper;

import java.util.List;

import org.zerock.domain.BoardVO;

public interface BoardMapper {

(...생략...)
	
	int update(BoardVO boardVO);

}

<?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.BoardMapper">

(...생략...)

	<update id="update">
		update tbl_board
		set title = #{title}, content = #{content}, writer = #{writer}, updatedate = sysdate
		where bno = #{bno} 
	</update>

</mapper>

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.SpringJUnit4ClassRunner;
import org.zerock.domain.BoardVO;

import lombok.extern.log4j.Log4j;
import oracle.net.aso.b;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class BoardMapperTest {
	
	@Autowired
	private BoardMapper boardMapper;
	
(...생략...)

	@Test
	public void testUpdate() {
		BoardVO boardVO = new BoardVO();
		boardVO.setBno(1L);
		boardVO.setTitle("Update Title");
		boardVO.setContent("Update Content");
		boardVO.setWriter("Update Writer");
		
		log.info("count " + boardMapper.update(boardVO));
	}

}

sql에서 update from으로 작성했을 때 java.sql.SQLSyntaxErrorException: ORA-00903: invalid table name 에러가 발생함. update from 테이블명(X) update 테이블명(O)

스프링 웹 프로젝트 7

001cloudid — Sun, 5 Jan 2025 14:50:46 +0900

각 영역의 네이밍 규칙

xxController
스프링 MVC에서 동작하는 Controller 클래스
xxService, xxServiceImpl
비즈니스 영역을 담당하는 인터페이스는 ~~Service라는 방식을 사용하고,
인터페이스를 구현한 클래스는 ~~ServiceImpl이라는 이름을 사용
xxDAO, xxRepository
DAO(Data-Access-Object)나 Repository(저장소)라는 이름으로 영역을 따로 구성하는 것이 보편적
VO, DTO
VO의 경우 주로 ReadOnly의 목적이 강하고 데이터 자체도 불변하게 설계
DTO는 주로 데이터 수집의 용도로 사용

패키지 네이밍 규칙(ex. com.001cloudid)

.config : 프로젝트와 관련된 설정 클래스들의 보관 패키지
.controller : 스프링 MVC의 Controller들의 보관 패키지
.service : 스프링 Service 인터페이스와 구현 클래스 패키지
.domain : VO, DTO 클래스들의 패키지
.persistence : MyBatis Mapper 인터페이스 패키지
.exception : 웹 관련 예외처리 패키지
.aop : 스프링의 AOP 관련 패키지
.security : 스프링 Security 관련 패키지
.util : 각종 유틸리티 클래스 관련 패키지

와이어 프레임(기본적인 게시물의 CRUD 흐름) ※구현의 시작부

/board/list(게시물 목록) → /board/register(게시물 등록) → /board/list(게시물 목록 결과)

/board/list(게시물 목록) → /board/get(게시물 조회) → /board/modify(게시물 수정/삭제) → /board/list(게시물 목록 결과)

프로젝트의 생성 및 준비

Spring Legacy Project 생성
pom.xml에서 스프링 버전 변경
spring-test, spring-jdbc, spring-tx 추가
junit 버전 번경
Servlet 버전 변경
HikariCP, MyBatis, mybatis-spring, Log4jdbc 추가
JDBC 드라이버 프로젝트 내 추가
기타 Lombok의 설정

1. Spring Legacy Project 생성

Spring MVC Project

2. pom.xml 수정

스프링 버전, 자바 버전 수정

spring-tx, spring-jdbc, spring-test 추가

MyBatis를 이용할 예정임므로 HikariCP, MyBatis, mybatis-spring, Log4jdbc 라이브러리 추가

테스트를 위한 jUnit 버전 변경 및 Lombok 추가

Servlet 3.0이상을 제대로 사용하기 위해서 서브릿 2.5버전이 아닌 3.0이상으로 수정

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>org.zerock</groupId>
	<artifactId>controller</artifactId>
	<name>ex02</name>
	<packaging>war</packaging>
	<version>1.0.0-BUILD-SNAPSHOT</version>
	<properties>
		<java-version>1.6</java-version>
		<org.springframework-version>5.2.7.RELEASE</org.springframework-version>
		<org.aspectj-version>1.6.10</org.aspectj-version>
		<org.slf4j-version>1.6.6</org.slf4j-version>
	</properties>
	<dependencies>
		<!-- Spring -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
			<version>${org.springframework-version}</version>
			<exclusions>
				<!-- Exclude Commons Logging in favor of SLF4j -->
				<exclusion>
					<groupId>commons-logging</groupId>
					<artifactId>commons-logging</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>
		<!-- DB 세팅 연결 확인 -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-test</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-jdbc</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-tx</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>

		<!-- AspectJ -->
		<dependency>
			<groupId>org.aspectj</groupId>
			<artifactId>aspectjrt</artifactId>
			<version>${org.aspectj-version}</version>
		</dependency>

		<!-- Logging -->
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-api</artifactId>
			<version>${org.slf4j-version}</version>
		</dependency>
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>jcl-over-slf4j</artifactId>
			<version>${org.slf4j-version}</version>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-log4j12</artifactId>
			<version>${org.slf4j-version}</version>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>log4j</groupId>
			<artifactId>log4j</artifactId>
			<version>1.2.17</version>
			<exclusions>
				<exclusion>
					<groupId>javax.mail</groupId>
					<artifactId>mail</artifactId>
				</exclusion>
				<exclusion>
					<groupId>javax.jms</groupId>
					<artifactId>jms</artifactId>
				</exclusion>
				<exclusion>
					<groupId>com.sun.jdmk</groupId>
					<artifactId>jmxtools</artifactId>
				</exclusion>
				<exclusion>
					<groupId>com.sun.jmx</groupId>
					<artifactId>jmxri</artifactId>
				</exclusion>
			</exclusions>
			<scope>runtime</scope>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<version>1.18.36</version>
			<scope>provided</scope>
		</dependency>

		<!-- https://mvnrepository.com/artifact/com.zaxxer/HikariCP -->
		<dependency>
			<groupId>com.zaxxer</groupId>
			<artifactId>HikariCP</artifactId>
			<version>3.4.5</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis -->
		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis</artifactId>
			<version>3.5.6</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring -->
		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis-spring</artifactId>
			<version>1.3.2</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.bgee.log4jdbc-log4j2/log4jdbc-log4j2-jdbc4.1 -->
		<dependency>
			<groupId>org.bgee.log4jdbc-log4j2</groupId>
			<artifactId>log4jdbc-log4j2-jdbc4.1</artifactId>
			<version>1.16</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/com.oracle.database.jdbc/ojdbc6 -->
		<dependency>
			<groupId>com.oracle.database.jdbc</groupId>
			<artifactId>ojdbc6</artifactId>
			<version>11.2.0.4</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<version>1.18.36</version>
			<scope>provided</scope>
		</dependency>

		<!-- @Inject -->
		<dependency>
			<groupId>javax.inject</groupId>
			<artifactId>javax.inject</artifactId>
			<version>1</version>
		</dependency>

		<!-- Servlet -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>4.0.1</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>jsp-api</artifactId>
			<version>2.1</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>

		<!-- Test -->
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.12</version>
			<scope>test</scope>
		</dependency>
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<artifactId>maven-eclipse-plugin</artifactId>
				<version>2.9</version>
				<configuration>
					<additionalProjectnatures>
						<projectnature>org.springframework.ide.eclipse.core.springnature</projectnature>
					</additionalProjectnatures>
					<additionalBuildcommands>
						<buildcommand>org.springframework.ide.eclipse.core.springbuilder</buildcommand>
					</additionalBuildcommands>
					<downloadSources>true</downloadSources>
					<downloadJavadocs>true</downloadJavadocs>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>2.5.1</version>
				<configuration>
					<source>1.8</source>
					<target>1.8</target>
					<compilerArgument>-Xlint:all</compilerArgument>
					<showWarnings>true</showWarnings>
					<showDeprecation>true</showDeprecation>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.codehaus.mojo</groupId>
				<artifactId>exec-maven-plugin</artifactId>
				<version>1.2.1</version>
				<configuration>
					<mainClass>org.test.int1.Main</mainClass>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

root-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:mybatis-spring="http://mybatis.org/schema/mybatis-spring"
	xsi:schemaLocation="http://mybatis.org/schema/mybatis-spring http://mybatis.org/schema/mybatis-spring-1.2.xsd
		http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd">
	
	<!-- Root Context: defines shared resources visible to all other web components -->

	<bean id="hikariConnfig" class="com.zaxxer.hikari.HikariConfig">
		<property name="driverClassName" value="net.sf.log4jdbc.sql.jdbcapi.DriverSpy"></property>
		<property name="jdbcUrl" value="jdbc:log4jdbc:oracle:thin:@localhost:1521:XE"></property>
		<property name="username" value="book_ex"></property>
		<property name="password" value="book_ex"></property>
	</bean>
	
	<bean id="dateSource" class="com.zaxxer.hikari.HikariDataSource" destroy-method="close">
		<constructor-arg ref="hikariConnfig" />
	</bean>

	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dateSource"></property>
	</bean>

	<mybatis-spring:scan base-package="org.zerock.mapper"/>
		
</beans>

servlet-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:beans="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd
		http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

	<!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
	
	<!-- Enables the Spring MVC @Controller programming model -->
	<annotation-driven />

	<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
	<resources mapping="/resources/**" location="/resources/" />

	<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
	<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<beans:property name="prefix" value="/WEB-INF/views/" />
		<beans:property name="suffix" value=".jsp" />
	</beans:bean>
	
	<context:component-scan base-package="org.zerock.controller" />
	
	
	
</beans:beans>

데이터베이스 내 테이블 생성

create SEQUENCE seq_board; -- 아무 의미가 없는 번호/구분을 위한 번호

create table tbl_board(
    bno number(10,0),
    title varchar2(200) not null,
    content varchar2(2000) not null,
    writer varchar2(50) not null,
    regdate date default sysdate,
    updatedate date default sysdate
);

-- 모든 데이터베이스에 저장되는 것은 명사와 히스토리


-- PK
alter table tbl_board add constraint pk_board
primary  key(bno);

더미 데이터의 추가 → 추가시 한글이 깨지는지 확인 → 데이터 추가 시 한글로 된 데이터로

insert into tbl_board(bno, title, content, writer)
values(seq_board.nextval, '테스트 제목', '테스트 내용', 'user00');

※ 자바 파일은 실행하기전 반드시 저장하듯이 dbms는 커밋을 해줘야함

영속 계층 구현

테이블의 컬럼 구조를 반영하는 VO(Value Object) 클래스의 생성
MyBatis의 Mapper 인터페이스의 작성/XML 처리
작성한 Mapper 인터페이스의 테스트

VO클래스 → 테이블과 동일하게 맞춰주면 됨

BoardVO

package org.zerock.domain;

import java.util.Date;

import lombok.Data;

@Data
public class BoardVO {
	
	// 데이터베이스 관련 작업을 할 때는 소문자로 하지 않음 → 소문자로 하면 기본값을 가짐
	
	private Long bno;
	private String title, content, writer;
	private Date regdate, updateDate;
	
}

Mapper 인터페이스 작성

BoardMapper

package org.zerock.mapper;

import java.util.List;

import org.zerock.domain.BoardVO;

public interface BoardMapper {

	List<BoardVO> getList();
	
}

BoardMapper.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.BoardMapper">

	<select id="getList" resultType="org.zerock.domain.BoardVO">
		select * from tbl_board order by bno desc
	</select>

</mapper>

BoardMapperTest

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.SpringJUnit4ClassRunner;

import lombok.extern.log4j.Log4j;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class BoardMapperTest {
	
	@Autowired
	private BoardMapper boardMapper;
	
	@Test
	public void testGetList() {
		log.info("=======================");
		boardMapper.getList();
	}

}

스프링 웹 프로젝트 6

001cloudid — Sat, 4 Jan 2025 13:23:35 +0900

파일업로드 처리

Servlet 3.0 이후(Tomcat 7.0)에는 기본적으로 업로드 되는 파일을 처리할 수 있는 기능이 추가
별로 commos-fileupload 라이브러리를 사용

<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>

※ 라이브러리를 다운로드 할 때는 가능하면 서버는 중지시킨 후 실시

파일 업로드를 위한 servlet-context.xml

multipartResolver라는 이름으로 스프링 빈 설정

	<beans:bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<beans:property name="defaultEncoding" value="utf-8"></beans:property>
		<beans:property name="maxUploadSize" value="104857560"></beans:property> <!-- 1024*1024*2bytes 2MB -->
		<beans:property name="uploadTempDir" value="file:/C:/upload/tmp"></beans:property>
		<beans:property name="maxInMemorySize" value="10485756"></beans:property>
	</beans:bean>

디렉토리 생성

경로 : C:\upload\tmp

파일 업로드를 위한 HTML

form 태그 내 enctype="multipart"

SampleController

	@GetMapping("/exUpload") // 화면을 보는 것 기본 Get방식, 작업을 하는 것은 Post방식
	public void exUpload() {
		log.info("SampleController exUplad() log info"); // log → 작업이 어디까지 실행되었는지 확인하기 위해서
	}

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>exUpload</title>
</head>
<body>
	<h1>파일 업로드를 위한 HTML</h1>
	<form action="/sample/exUploadPost" method="post"
		enctype="multiPart/form-data">
		<div>
			<input type="file" name="files">
		</div>
		<div>
			<input type="file" name="files">
		</div>
		<div>
			<input type="file" name="files">
		</div>
		<div>
			<input type="file" name="files">
		</div>
		<div>
			<input type="file" name="files">
		</div>
		<div>
			<input type="submit">
		</div>
	</form>
</body>
</html>

SampleController

	@PostMapping("/exUploadPost")
	public void exUploadPost(ArrayList<MultipartFile> files) {
		files.forEach(file ->{
			log.info("=====================");
			log.info("name : " + file.getOriginalFilename());
			log.info("size : " + file.getSize());
			log.info("type : " + file.getContentType());
		});
	}

컨트롤러의 예외 처리(Exception)

@ExceptionHandler와 @ControllerAdvice를 이용한 처리 → 서버
@ResponseEntity를 이용하는 예외 메시지 구성 → 클라이언트 데이터 전송

@ControllerAdvice(스프링 빈으로 등록)

예외처리와 원래의 컨트롤러가 혼합된 형태의 클래스가 작성되는 방식
@ExceptionHandler는 해당 메서드가 () 들어가는 예외 타입을 처리한다는 것을 의미

package org.zerock.exception;

import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;

import lombok.extern.log4j.Log4j;

@ControllerAdvice
@Log4j
public class CommonExceptionAdvice {
	
	@ExceptionHandler(Exception.class)
	public String except(Exception exception, Model model) {
		log.error("Exception : " + exception.getMessage());
		model.addAttribute("exception",exception);
		log.error("model : " + model);
		return "error_page";
	}

}

servlet-context.xml

	<context:component-scan base-package="org.zerock.exception" />

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>error_page</title>
</head>
<body>
	<h1>error_page</h1>
	<h4>
		<c:out value="${exception.getMessage()}"></c:out>
	</h4>

	<ul>
		<c:forEach items="${exception.getStackTrace()}" var="stack">
			<li><c:out value="${stack}"></c:out></li>
		</c:forEach>
	</ul>
</body>
</html>

age값을 숫자가 아닌 값을 준다면

자바스크립트 7

001cloudid — Wed, 1 Jan 2025 15:13:10 +0900

문서 객체 모델 DOM(Document Object Model)

웹에서 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는 것
이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 함
모든 정보 요소를 자바스크립트로 가져와 프로그래밍할 때 사용
자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법

DOM 트리

웹 문서의 요소를 부모 요소와 자식 요소로 구분

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html(root)
head body
meta title
부모와 자식 구조로 표시하면 나무 형태가 되므로 DOM 트리라고 함
DOM 트리에서 가지가 갈라져 나간 항목을 노드라고 하며,
DOM 트리의 시작 부분인 html 노드를 나무 뿌리에 해당한다고 해서 루트 노드
루트 노드를 시작으로 웹 문서에서 사용한 요소는 계층 구조를 이룸
각 노드 사이의 관계를 부모와 자식, 형제 간으로 표현할 수 있음
부모 노드에는 자식 노드가 있으며, 부모 노드가 같은 형제 노드가 있음
DOM을 구성하는 기본 원칙
모든 HTML 태그는 요소(element) 노드
HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드
HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드
주석은 주석(comment) 노드

DOM 요소 접근하고 속성 가져오기

웹 문서에서 원하는 요소를 찾아가는 것을 '접근한다.'라고 함

DOM에 접근

CSS에서 class, id, 태그(선택자) 등의 스타일을 각각 구별해서 정의해야 함
id 선택자로 접근하는 getElementById()
요소명.getElementById("id명")
class 값으로 접근하는 getElementsByClassName()
요소명.getElementsByClassName("클래스명")
※ class 선택자는 중복되어 사용할 수 있으므로 Element가 아닌 Elements
태그 이름으로 접근하는 getElementsByTagName()
요소명.getElementsByTagName("태그명")
다양한 방법으로 접근 querySelector(), querySelectorAll()
DOM 트리의 텍스트, 속성 노드까지 자유롭게 제어하려면 querySelector(), querySelectorAll()
노드.querySelector(선택자)
노드.querySelectorAll(선택자 또는 태그)
id 선택자처럼 반환값이 하나라면 querySelector()를 사용
class 선택자나 태그 이름을 사용하여 여러 값이 한꺼번에 반환될 경우 querySelectorAll()
선택자를 표시할 때 id 이름 앞에는 # class 이름 앞에는 . 태그는 기호 없이 태그명만 작성
querySelector()에서 class 이름으로 접근할 때 class 이름을 사용한 여러 요소 중에서 첫 번째 요소만 반환

웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티

웹 요소의 내용을 수정할 때 사용
innerText 프로퍼티는 텍스트 내용을 표시
요소명.innerText = 내용
innerHTML 프로퍼티는 HTML 태그까지 반영하여 표시
요소명.innerHTML = 내용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 요소에 접근하고 속성 가져오기</title>
</head>
<body>
    <button onclick="intext()">innerText로 표시</button>
    <button onclick="inHTML()">innerHTML 표시</button>
    <h1>현재 시각 : </h1>
    <div id="current"></div>

    <script>
        // innerText, innerHTML 프로퍼티 사용
        var now = new Date();

        function intext(){
            document.getElementById("current").innerText = now;
        }

        function inHTML(){
            document.getElementById("current").innerHTML = "<b>"+ now+"</b>";
        }
    </script>
</body>
</html>

속성

웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하려면 DOM 트리에 속성 노드가 추가되면서 속성값이 저장
속성에 접근하려면 getAttribute() 메서드를 사용, 접근한 속성의 값을 바꾸려면 setAttribute() 메서드를 사용
속성 가져오기 getAttribute("속성명")
원하는 속성값으로 지정 setAttribute("속성명","값)
속성값이 이미 있다면 새로운 속성값으로 수정하고, 아직 해당 속성이 없다면 속성과 속성값을 새로 추가함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 가져오기, 수정하기</title>
</head>
<body>
    <div id = "picDiv">
        <img src="img/toa-heftiba-BHcB-sr_HzQ-unsplash.jpg" alt="이미지" id="pic" width="200" height="200" onclick="displaySrc()">
    </div>

    <script>
        // 이미지 속성 가져오기
        function displaySrc(){
            var pic = document.querySelector("#pic");
            alert("이미지 소스 : " + pic.getAttribute("src")); // 속성을 알림창에 표시
        }
    </script>
</body>
</html>

DOM 이벤트 처리

웹 문서에서 이벤트가 발생하면 이벤트 처리기(event handler)를 연결해야 함

DOM 요소에 함수 직접 연결

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 이벤트 처리</title>
</head>
<body>
    <img src="img/cup-1.png" id="cup">

    <script>
        var cup = document.getElementById("cup");

        cup.onclick = function(){
            alert("이미지를 클릭하였습니다.");
        }
    </script>

</body>
</html>

함수 이름을 사용해 연결

이벤트가 발생했을 때 실행할 함수를 따로 정의해 놓았다면 함수 이름을 사용해 연결할 수 있음
함수 이름 다음에 괄호를 추가하지 않음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 이벤트 처리</title>
</head>
<body>
    <!-- 
    함수 이름을 사용해 연결
    -->

    <img src="img/cup-1.png" id="cup">

    <script>
        // 이미지를 클릭하면 함수 실행
        var cup = document.querySelector("#cup");
        cup.onclick = changePic;
        
        function changePic(){
            cup.src = "img/cup-2.png";
        }
    </script>

</body>
</html>

DOM의 event 객체

이벤트 정보를 저장하는 event 객체가 존재
웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 들어 있음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM의 event 객체</title>
</head>
<body>
    <img src="img/cup-1.png" id="cup">

    <script>
        // 이미지를 클릭하면 함수 실행
        var cup = document.querySelector("#cup");
        cup.onclick = function(evnet) {
            alert("이벤트 유형 : " + event.type + ", 이벤트 발생 위치 : " + event.pageX + ", " + event.pageY);
        }
    </script>
</body>
</html>

event 객체에는 이벤트 정보만 들어 있음. 만약 이벤트가 발생한 대상에 접근하려면 이벤트 처리기에서 예약어 this를 사용해야함

addEventListener() 메서드

addEventListener() 메서드와 event 객체를 사용하면 한 요소에서 여러 이벤트 처리기를 연결해 실행할 수 있음
요소.addEventListener(이벤트, 함수, 캡처 여부);
이벤트 : 이번트 유형을 지정, on을 붙이지 않음
함수 : 이벤트가 발생하면 실행할 명령이나 함수를 지정. 함수를 정의할 때는 event 객체로 인수를 받음
캡처 여부 : 기본값은 false(버블링 : DOM의 자식 노드에서 부모 노드로 전달).
true(캡처링 : DOM의 부모 노드에서 자식 노드로 전달되는 것)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>addEventListener() 메서드</title>
</head>
<body>
    <img src="img/cup-1.png" id="cover">

    <script>
        // 마우스 포인터를 올리면 이미지 바꾸기
        var cover = document.getElementById("cover");
        cover.addEventListener("mouseover",changeImg);
        cover.addEventListener("mouseout",originImg);

        function changeImg(){
            cover.src = "img/cup-2.png";
        }
        function originImg(){
            cover.src = "img/cup-1.png";
        }
    </script>
</body>
</html>

CSS 속성에 접근

자바스크립트를 이용하면 스타일 속성값을 가져와서 그 값을 원하는 대로 수정할 수 있음
각 요소의 스타일을 자유롭게 수정할 수 있으므로 웹 문서에서 다양한 효과를 만들 수 있음
CSS 속성에 접근하려면 해당 스타일이 적용된 HTML 요소 다음에 예약어 style을 쓰고 속성을 작성
document.요소명.style.속성명

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 속성에 접근</title>
</head>
<style>
		#container {
			width:400px;
			margin:50px auto;
			text-align: center;
		}
		#rect {
			width:100px;
			height:100px;			
			border:1px solid #222;
			margin:30px auto;
			transition: 1s;
		}
</style>
<body>
	<div id="container">
		<p>도형 위로 마우스 포인터를 올려놓으세요.</p>
		<div id="rect"></div>
	</div>	

<script>
    var myRect = document.querySelector("#rect");
    myRect.addEventListener("mouseover",function(){
        myRect.style.backgroundColor = "green";
        myRect.style.borderRadius = "50%";
    });
    myRect.addEventListener("mouseout",function(){
        myRect.style.backgroundColor ="";
        myRect.style.borderRadius ="";
    });
</script>
</body>
</html>

DOM 노드 추가,삭제

노드리스트

DOM에서 새로운 노드를 만들어 추가하거나 삭제하려면 노드리스트를 사용해야함
DOM에 접근할 때 querySelectorAll() 메서드를 사용하면 노드를 한꺼번에 여러 개 가져올 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>노드리스트</title>
</head>
<body>
    <h1>웹 프로그래밍</h1>
    <ul id="itemList">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Python</li>
    </ul>
</body>
</html>

새로운 노드 추가 과정
모든 HTML 태그는 요소(element) 노드
HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드
HTML 태그에 있는 속성은 자식 노드인 속성 노드
주석은 주석 노드

텍스트 노드를 사용하는 새로운 요소 추가

요소 노드 만들기 createElement() 메서드
document.createElement(노드명)
텍스트 노드 만들기 createTextNode() 메서드
새로운 요소 노드를 만들었다면 내용을 담는 텍스트 노드를 자식 노드로 만들어 연결
document.createTextNode(텍스트)
자식 노드 연결 appendChild() 메서드
1, 2 과정은 노드만 만든 상태이며, 부모 노드와 자식 노드로 연결되지 않음
appendChild() 메서드는 텍스트 노드나 속성 노드를 만든 후 요소 노드에 연결할 때 사용
부모노드.appendChild(자식노드)
전체 소스 코드 완성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 노드를 사용하는 새로운 요소 추가</title>
    <style>
        #container{
          width:500px;
          margin:10px auto;
          padding:20px;
        }
        #info {
          margin-top:20px;
        }
      </style>
</head>
<body>
    <div id=""container">
        <h1>텍스트 노드를 사용하는 새로운 요소 추가하기</h1>
        <a href="#" onclick="addP()">더 보기</a>
        <div id="info"></div>
    </div>

    <script>
        function addP(){
            var newP = document.createElement("p");
            var textNode = document.createTextNode("DOM은 Documnet Object Model의 줄임말");
            newP.appendChild(textNode);
            document.getElementById("info").appendChild(newP);
        }
    </script>
</body>
</html>

    <div id=""container">
        <h1>텍스트 노드를 사용하는 새로운 요소 추가하기</h1>
        <a href="#" onclick="addP(); this.onclick='';">더 보기</a>
        <div id="info"></div>
    </div>

속성값이 있는 새로운 요소 추가하기

요소 노드 만들기 createElement() 메서드
속성 노드 만들기 createAttribute() 메서드
속성 노드 연결 setAttributeNode() 메서드
자식 노드 연결 appendChild() 메서드
전체 소스 코드 완성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성값이 있는 새로운 요소 추가하기</title>
</head>
<body>
    <div id="container">
        <h1>DOM</h1>
        <a href="#" onclick="addContents(); this.onclick=''">더보기</a>
        <div id="info"></div>
    </div>

    <script>
        function addContents(){
            var newP = document.createElement("p");
            var textNode = document.createTextNode("DOM은 Document Object Model의 줄임말");
            newP.appendChild(textNode);

            var newImg = document.createElement("img")
            var srcNode = document.createAttribute("src");
            var altNode = document.createAttribute("alt");
            srcNode.value = "img/dom.jpg";
            altNode.value = "DOM 트리 예제";
            newImg.setAttributeNode(srcNode);
            newImg.setAttributeNode(altNode);

            document.getElementById("info").appendChild(newP);
            document.getElementById("info").appendChild(newImg);
        }
    </script>

</body>
</html>

노드 삭제

parentNode 프로퍼티
DOM 트리의 노드는 바로 삭제할 수 없으므로 먼저 부모 노드에 접근해야함
삭제할 노드의 부모 노드를 찾아가는 방법을 먼저 알아야함
parentNode 프로퍼티는 현재 노드의 부모 노드에 접근해서 부모 노드의 요소를 반환
노드.parentNode

removeChild() 메서드
자식 노드를 삭제하는 역할
부모 노드만 찾는다면 삭제하는 것은 간단함
부모노드.removeChild(자식노드)

스프링 웹 프로젝트 5

001cloudid — Tue, 31 Dec 2024 17:41:26 +0900

Controller

서블릿에서 시작 → Spring MVC는 서블릿에서부터 시작 → 기본적으로 서블릿에 대한 이해가 필요함
서블릿에서 HttpServletRequest, HttpServletResponse를 사용했지만
Spring MVC에서는 사용할 필요가 없음 이유는 HttpServletRequest, HttpServletResponse는 파라미터를 수집하려고 사용하는데 Spring MVC에서는 자동으로 파라미터를 수집하는 기능을 처리해줌 + 리턴 타입

※ 이러한 Spring MVC를 이용하면 자바에서 배운 상속이나 인터페이스 등의 문법에 갇혀 있지 않을 수 있게 함

어노테이션

@Controller : 해당 클래스의 인스턴스를 스프링의 빈으로 등록하고 컨트롤러로 사용
componet-scan과 같이 활용
@RequestMapping : 특정한 URI에 대한 처리를 해당 컨트롤러나 메서드에서 처리
※ 과거 서블릿을 계속 만들거나 구조를 만들었어야함
스프링 4.3 이전까지는 @RequestMapping(method = "get") 방식으로 사용하였으나
스프링 4.3 이후에는 @GetMapping, @PostMapping으로 간단히 표현이 가능해

package org.zerock.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import lombok.extern.log4j.Log4j;

@Controller
@RequestMapping("/sample/*")
@Log4j
public class SampleController {
	
	@RequestMapping("")
	public void basic() {
		log.info("SampleController basic() log.info");
	}
	
	@GetMapping("/basicGet")
	public void basicGet() {
		log.info("SampleController basicGet() log.info");
	}

}

컨트롤러의 파라미터 수집

스프링 MVC의 컨트롤러는 메서드의 파라미터를 자동으로 수집, 변환하는 기능을 제공
Java Beans 규칙에 맞게 작성되어야 함
생성자가 없거나 빈 생성자
올바른 규칙으로 만들어진 Getter/Setter

package org.zerock.domain;

import lombok.Data;

@Data
public class SampleDTO {
	
	private String name;
	private int age;

}

	@GetMapping("/ex01")
	public void ex01(SampleDTO sampleDTO) {
		log.info("SampleController ex01(SampleDTO sampleDTO) log.info : " + sampleDTO);
	}

화면은 찾을 수 없지만, 실제로 데이터는 수집(console에서 확인이 가능함)

배열이나 리스트 처리

	@GetMapping("/ex02List")
	public String ex02List(@RequestParam("ids") ArrayList<String> ids) { // @RequestParam 명시적으로 작성 파라미터 이름이 ids인 것을 수집 
		log.info("SampleController ex02List() log.info ids" + ids);
		return "ex02List";
	}
	
	//http://localhost:8080/sample/ex02Bean?list[0].name=ABC&list[0].age=20
	@GetMapping("/ex02Bean")
	public String ex02Bean(@ModelAttribute("sample") SampleDTOList list, Model model) {
		log.info("SampleController ex02List() log.info list : " + list);
		model.addAttribute("result","success");
		return "sample/ex02Bean";
	}

Model

Model 객체는 JSP에 컨트롤러에서 생성된 데이터를 담아 전달하는 역할을 하는 존재
모델 2 방식에서 사용하는 requestsetAttribute()와 유사한 역할

	public String home(Locale locale, Model model) { // Model : 상자(데이터 전달), 화면으로 전달하고 싶다면 파라미터에 Model 추가
		logger.info("Welcome home! The client locale is {}.", locale);
		
		Date date = new Date();
		DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);
		
		String formattedDate = dateFormat.format(date);
		
		model.addAttribute("serverTime", formattedDate );
		
		return "home";
	}

※ Model을 사용하지 않아도 데이터 수집이 됨

	@GetMapping("/ex02Bean")
	public String ex02Bean(SampleDTOList list/* @ModelAttribute("sample") SampleDTOList list, Model model */) {
		log.info("SampleController ex02List() log.info list : " + list);
//		model.addAttribute("result","success");
		return "sample/ex02Bean";
	}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex02Bean.jsp</title>
</head>
<body>
	<h1>${sampleDTOList}</h1>
</body>
</html>

객체로 데이터를 수집하는 것은 화면까지 전달이 됨.
그렇다면 Model에 담아야하는 데이터는? 전달되는 파라미터가 아닌 경우
즉, 다른 곳(Service, DB)에서 발생한 데이터를 담기 위한 용기
Model에 담는 것은 전달된 데이터는 아닌데 화면에는 필요한 경우 ex) 게시판 - 목록

@ModelAttribute

내가 이 데이터를 명시적으로(이름으로) 화면에서 쓰겠다. 즉, 전달할 때 jsp에 이름을 바꿔서 쓰겠다.
이름을 명시적으로 해주는 역할을 함. 화면까지 전달해주는 역할

@GetMapping("/ex05")
public String ex05(SampleDTO sampleDTO, int page) {
		log.info("SampleController ex02List() log.info sampleDTO : " + sampleDTO);
   		log.info("SampleController ex02List() log.info page : " + page);
		return "sample/ex05";
	}

이를

@GetMapping("/ex05")
public String ex05(SampleDTO sampleDTO, @ModelAttribute("p") int page) {
		log.info("SampleController ex02List() log.info sampleDTO : " + sampleDTO);
   		log.info("SampleController ex02List() log.info page : " + page);
		return "sample/ex05";
	}

<h1>SampleDTO : ${sampleDTO}</h1>
<h1>page : ${p}</h1>

RedirectAttribute

화면에 한 번만 전달되는 파라미터를 처리하는 용도
내부적으로 HttpSession 객체에 담아서 한 번만 사용되고 폐기

// 딱 한 번만 전달
rttr.addFlashAttribute("name","ABC"); 
rttr.addFlashAttribute("age",20); 

return "redirect:/";

리턴 타입

어노테이션 이용 방식(자바의 리플렉션 -> 전통적인 방식X)

String: jsp를 이용하는 경우에는 jsp 파일의 경로와 파일이름을 나타내기 위해서 사용 → 분기
void : 호출하는 URL과 동일한 이름의 jsp를 의미 → 배열 요소로 가능
VO, DTO 타입 : 주로 JSON 타입의 데이터를 만들어서 반환하는 용도로 사용
ResponseEntitiy 타입 : response할 때 http 헤더 정보와 내용을 가공하는 용도로 사용
~~Model : 데이터를 반환하거나 화면까지 같이 지정하는 경우 사용~~
~~HttpHeaders : 응답에 내용 없이 http 헤더 메시지만 전달하는 용도로 사용~~

void 타입

	// void 타입 : 호출 IRL과 동일한 이름의 jsp 파일
	@GetMapping("/ex05")
	public void ex05() {
		log.info("SampleController ex05() log.info");
	}

String 타입

	// 상황에 따라 다른 화면을 보여줄 필요가 있을 경우 유용하게 사용
	// String 타입에는 redirect, forward 키워드를 붙여 사용할 수 있음
	// redirect : 리다이렉트 방식으로 처리하는 경우, forward : 포워드 방식으로 처리하는 경우
    // redirect 예시) re1에서 re2로 가야함(re1을 호출하면 re2로) → 사용자를 강제로 이동 시킬 때 많이 사용하는 방식
	@GetMapping("/re1")
	public String re1() {
		log.info("SampleController re1() log info");
		return "redirect:/sample/re2";
	}
	
	@GetMapping("/re2")
	public void re2() {
		log.info("SampleController re2() log info");
	}

주소줄에 http://localhost:8080/sample/re1 을 입력하면 http://localhost:8080/sample/re2로 이동

redirect는 2번 호출이 일어남(개발자도구에서 Network 탭을 확인)

re1을 호출

→ 서버 응답(re1은 re2로 가야함)

→ 브라우저 request, response를 한번씩 받음

→ 다른 곳으로 가야함

→ 자동으로 호출

→ re2로 이동

서블릿의 response.sendRedirect()와 같음

객체 타입

XML이나 JSON으로 처리
@ResponseBody 어노테이션과 같이 사용(Ajax)

ResponseEntity

HTTP 헤더 정보와 추가적인 데이터를 전달할 때 사

파일업로드 처리

Servlet 3.0이후(Tomcat 7.0)에는 기본적으로 업로드 되는 파일을 처리할 수 있는 기능이 추가
별도로 commons-fuleupload 라이브러리 등을 사용

자바스크립트 6

001cloudid — Tue, 31 Dec 2024 14:24:48 +0900

BOM

자바스크립트 내에 웹 브라우저와 관련된 여러 객체가 미리 정의되어 있기 때문에 특정한 사이트로 이동, 새 탭 열기 등 브라우저와 관련된 여러 가지 효과를 만들 수 있음
웹 브라우저 창에 문서가 표시되는 순간 브라우저는 HTML 소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어냄
웹 브라우저가 열리면 window 객체가 만들어지고 밑으로 하위 요소에 해당하는 객체들이 나타남
window 하위에는 document, navigator, history, location, screen 객체가 존재
window : 브라우저 창이 열릴 때마다 하나씩 만들어짐. 브라우저 창 안의 요소 중에서 최상위에 존재
document : 웹 문서마다 하나씩 있으며 body 태그를 만나면 만들어짐. HTML 문서의 정보가 담겨 있음
navigator : 현재 사용하는 브라우저의 정보가 들어있음
history : 현재 창에서 사용자의 방문 기록을 저장
location : 현재 페이지의 URL 정보가 담여있음
screen : 현재 사용하는 화면 정보를 다룸

window 객체의 프로퍼티

window 객체는 웹 브라우저의 상태를 제어하며 자바스크립트의 최상위에 존재, 자바스크립트의 모든 객체는 window 객체 안에 포함
window 객체의 프로퍼티는 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용
프러퍼티를 사용하려면 프로퍼티 이름 앞에 'window.'를 붙임
document : 브라우저 창에 표시된 웹 문서에 접근
frameElement : 현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고, 그렇지 않다면 null을 반환
innerHeight : 내용 영역의 높이
innerWidth : 내부 영역의 너비
localStorage : 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환
location : window 객체의 위치 또는 현재 URL을 나타냄
name : 브라우저 창의 이름을 가져오거나 수정
,....

window 객체의 메서드

웹 브라우저 창 자체와 관련
alert()나 prompt()는 windwo 객체의 메서드임. 원래는 window.alert()나 window.prompt()라고 해야하지만 window 객체는 기본 객체이므로 'window.'을 생략해도 사용할 수 있음
window 객체 메서드
alert() : 알림창
blur() 현재 창에서 포커스를 제거
close() : 현재 창 닫기
confirm() : 확인, 취소 버튼이 있는 확인 창을 표시
focus() : 현재 창에 포커스를 부여
open() : 새로운 창
,....
새 브라우저 창을 여는 open()
window.open(경로, 창이름, 창옵션)
경로 : 팝업 창에 표시할 문서나 사이트의 경로(주소)를 나타냄
창 이름 : 창 이름을 지정하지 않으면 팝업 창이 계속 새로 나타남
창 옵션 : left, top 속성을 사용해 위치를 정하거나 너비, 높이 속성을 사용해 크기를 지정할 수 있음. 지정하지 않으면 맨 왼쪽 위에 나타남

    <script>
        window.open("popup.html", "팝업창", "width=500, height=400");
    </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>popup.html</title>
</head>
<body>
    <h1>
        문서를 열면 팝업 창이 자동으로 열립니다.
    </h1>
</body>
</html>

※ 최근 웹 브라우저의 팝업 창이 열리지 않도록 하는 것을 기본으로 설정되어 있는 경우가 있음 팝업 창을 여는 함수에서 웹 브라우저의 차단 여부를 확인해 줄 필요가 있음

    <script>
        // 팝업이 차단된 브라우저의 알림 창 표시
        function openPopup(){
            var popup = window.open("popup.html", "팝업창", "width=500, height=400");
            if(popup == null){
                alert("팝업이 차단되어 있습니다. 팝업을 허용해주세요.");
            }
            popup.moveBy(100,100);
        }
    </script>

브라우저 창을 닫는 close()
일반적으로 팝업 창 내용을 모두 살펴본 후 창을 닫을 수 있도록 화면 아래 [닫기] 버튼이나 링크를 포함
window.close()

<button onclick="javascript:window.close();">닫기</button>

navigator 객체

웹 브라우저 버전을 비롯해 플로그인 설치 정보나 온, 오프라인 등의 여러 정보가 담겨 있음
사용을 해본 적이 없지만 이를 잘 활용하면 사용자 환경에 맞는 기능을 제공할 수 있을 것 같음
주로 프론트 엔드 개발에 활용도가 높을 것으로 보임
https://developer.mozilla.org/ko/docs/Web/API/Navigator

history 객체

방문한 사이트 주소가 배열 형태로 저장
브라우저 히스토리는 보안 문제로 읽기 전용
프로퍼티
length : 방문한 사이트 개수
메서드
back() : history 목록에서 이전 페이지를 현재 화면으로 불러옴
forward() : history 목록에서 다음 페이지를 현재 화면으로 불러옴
go() : 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러옴
back() == go(-1) / forward() == go(1)

location 객체

브라우저의 주소 표시줄과 관련
현재 문서의 URL 주소 정보가 들어 있는데 이 정보를 편집하면 현재 브라우저 창에서 열어야 할 사이트나 문서를 지정
프로퍼티
host : URL의 호스트 이름과 포트 번호를 담고 있음
href : 전체 URL. 이 값을 변경하면 해당 주소로 이동
,...
메서드
reload() : 현재 문서를 다시 불러옴
replace() : 현재 문서의 URL을 지우고 다른 URL의 문서로 교체
toString() : 현재 문서의 URL을 문자열로 반환

    <div id="display">
        <script>
            // 사이트 위치 고정하기
            document.write("<b>location.href</b> : " + location.href+" <br> ");
            document.write("<b>location.host</b> : " + location.host+" <br> ");
            document.write("<b>location.protocol</b> : " + location.protocol+" <br> ");
        </script>
    </div>

    <button onclick="location.replace(`https://001cloudid.tistory.com/category/organize/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%8A%B8%EB%A6%BD%ED%8A%B8`)">블로그 이동하기</button>

screen 객체

사용자의 화면 크기나 정보를 알아 낼 때 사용
프로퍼티
availHegiht
availWidth
colorDepth : 화면에서 픽셀을 렌더링 할 때 사용하는 색상 수
height
orientation : 화면의 현재 방향
pixelDepth : 화면에서 픽셀을 렌더링할 때 사용하는 비트 수
width
메서드
lockOrientation() : 화면 방향을 잠금
unlockOrientation() : 화면 방향 잠금을 해제

    <script>
        // screen 객체로 화면의 너비와 높이 알아내기
        document.write("<b>screen.availHeight</b>"+screen.availHeight+"<br>");
        document.write("<b>screen.availWidth</b>"+screen.availWidth+"<br>");
        document.write("<b>screen.height</b>"+screen.height+"<br>");
        document.write("<b>screen.width</b>"+screen.width+"<br>");
    </script>

자바스크립트 5

001cloudid — Mon, 30 Dec 2024 17:20:22 +0900

객체

객체(Object) 프로그램에서 인식할 수 있는 모든 대상
자바스크립트에서는 웹 과 관련된 대상을 모두 객체로 인식
자바스크립트의 객체
문서 객체 모델(DOM)
웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체. 일반적으로 웹 문서에 삽입하는 document, image, link 객체 등

브라우저 관련 객체(BOM)
웹 브라우저에서 사용하는 정보를 객체로 나타냄
사용하는 브라우저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체 등

내장 객체
웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있는데, 이를 내장 객체라고 함

객체의 인스턴스 만들기

객체를 참조 형태로 사용해야 함. 객체가 아니라 인스턴스 형태로 만들어서 사용해야 함
객체의 인스턴스를 만들 때는 new 예약어를 사용하고 new 뒤에 만들려고 하는 객체 이름
new 객체명

    <script>
        // Date 객체의 인스턴스 만들기
        var date = new Date();
        document.write("현재 시각은 : " + date);
    </script>

프로퍼티와 메서드

프로퍼티는 객체의 특징이나 속성
메서드는 객체에서 할 수 있는 동작을 표현

마침표 표기법으로 프로퍼티와 메서드 작성

인스턴스는 객체의 프로퍼티와 메서드를 그대로 물려받아 똑같이 사용
프로퍼티와 메서드를 표시하려면 인스턴스명 뒤에 마침표를 붙이고 객체의 프로퍼티나 메서드 이름을 작성

    <script>
        // 로컬 형식으로 현재 시각 표시
        var now = new Date();
        document.write("현재 시각 toLocaleString() : " + now.toLocaleString());
    </script>

자바스크립트의 내장 객체

웹 문서의 계층 구조와 상관없이 나타낼 수 있는 객체가 있음
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects 참고

Array 객체

    <script>
        // Array 객체 인스턴스 만들기 초기값이 없는 경우
        var numbers = new Array(); // 배열의 크기를 지정하지 않음
        var numbers = new Array(4); // 배열의 크기를 지정

        var numbers = ["1","2","3","4"] // 배열 선언
        var numbers = Array("1","2","3","4"); // Array 객체를 사용한 배열 선언언
    </script>

Array객체의 메서드

    <script>
        // 배열끼리 합치는 concat()
        var nums = [1,2,3];
        var chars = ["a","b","c"];

        var numsChars = nums.concat(chars);
        var charsNums = chars.concat(nums);
        document.write(numsChars + "<br>");
        document.write(charsNums);
    </script>

    <script>
        // 배열 안의 요소 합치기 join()
        var nums = [1,2,3];
        var chars = ["a","b","c"];

        var string1 = nums.join();
        document.write(string1);
        document.write("<br>구분<br>")
        var string2 = chars.join('/');
        document.write(string2);
    </script>

    <script>
        // 새로운 요소를 추가하는 push(), unshift()
        var nums = [1,2,3];
        var ret1 = nums.push(4,5); // 배열 맨 끝에 새로운 요소를 추가
        document.write("배열의 길이 : " + ret1 + ", 배열의 요소 " + nums);
        document.write("<br>구분<br>")
        var ret2 = nums.unshift(0); // 배열 맨 앞에 새로운 요소 추가
        document.write("배열의 길이 : " + ret2 + ", 배열의 요소 " + nums);
    </script>

    <script>
        // 배열에서 요소 꺼내기 pop(), shift()
        var nums = [1,2,3];
        var rem1 = nums.pop(); // 마지막 요소를 꺼냄
        document.write("꺼낸 요소 " + rem1 + ", nums의 요소 : " + nums);
        document.write("<br>구분<br>")
        var rem2 = nums.shift(); // 1번째 요소를 꺼냄
        document.write("꺼낸 요소 " + rem2 + ", nums의 요소 : " +nums);
    </script>

    <script>
        // 원하는 위치에 요소를 추가, 삭제하는 splice()
        // splice() 메서드의 인수가 1개인 경우 요소 삭제
        var nums = [1,2,3,4,5];
        var newNums = nums.splice(2);
        document.write("반환된 배열 : " + newNums + " 변경된 배열 : " + nums);
    </script>

    <script>
        // splice() 메서드의 인수가 2개인 경우. 첫 번째 인수는 인덱스값, 두 번째 인수는 삭제할 요소의 개수
        var lang = ["html", "css", "js", "java"];
        var newLang = lang.splice(2,1);
        document.write("반환된 배열 : " + newLang + "변경된 배열 : " + lang);
    </script>

    <script>
        // splice() 메서드의 인수가 3개인 경우. 첫 번째 인수는 배열에서 삭제할 시작 위치, 두 번째 인수는 삭제할 개수, 세번째 인수는 삭제한 위치에 새로 추가할 요소 지정
        var lang = ["html", "css", "js", "java"];
        var newLang = lang.splice(1,1,"python");
        document.write("반환된 배열 : " + newLang + "변경된 배열 : " + lang);
    </script>

     <script>
        //기존 배열을 바꾸지 않으면서 요소를 꺼내는 slice()
        var color = ["black", "green", "yellow", "blue"];
        var color2 = color.slice(2) // 인덱스 값이 2인 요소부터 마지막 요소까지 꺼내기
        document.write(color2);
    </script>

    <script>
        // slice() 메서드의 인수가 2개인 경우 요소 꺼내기
        var color = ["black", "green", "yellow", "blue"];
        var color2 = color.slice(2,4); // 인덱스값이 2부터 3인 요소까지 꺼내기(두번째 요소의 인덱스)
        document.write(color2);
    </script>

Date 객체

날짜와 시간 정보를 나타낼 수 있음
현재 날짜와 시간을 출력하거나 달력을 표시할 수도 있고, 특정일까지 얼마나 남았는지 알려주는 등 사이트에서 여러가지로 응용할 수 있음

    <script>
        // Date 객체 인스턴스 만들기
        var date = new Date();
        document.write(date);
    </script>

    <script>
        // Date 객체로 특정 날짜 나타내기
        var date = new Date("2025-01-01"); // 월, 일이 한 자리일 때는 앞에 0을 붙이지 않고 2025-1-1로 작성해도 됨
        document.write("Date 객체로 특정 날짜 나타내기 " + date);
        document.write("<br>")
        // Date 객체로 특정 날짜와 시간 나타내기
        var date1 = new Date("2024-12-30T17:00:00");
        document.write("Date 객체로 특정 날짜와 시간 나타내기 " + date1);
    </script>

    <script>
        // 자바스크립트의 날짜, 시간 입력 방식 알아보기
        // YYYY 연도, MM 월, DD 일, HH 시간, MM 분, SS 초를 의미
        // 1. YYYY-MM-DD 형식
        new Date("2024");
        new Date("2024-12");
        new Date("2024-12-30");

        // 2. YYYY-MM-DDTHH 형식
        new Date("2024-12-30T17:00:00"); // 시간을 나타낼 때는 날짜뒤에 T를 붙이고 HH:MM:SS의 형태로 사용
        new Date("2024-12-30T17:00:00Z"); // 맨 끝에 Z를 붙이면 UTC(국제 표준시)로 표시

        // 3. MM/DD/YYYY 형식
        new Date("12/30/2024");

        // 4. 이름 형식
        new Date("TUE Dec 30 2024 17:00:00 GMT+0900 (대한민국 표준시)");
    </script>

Date 객체 메서드

날짜, 시간 정보 가져오기(get+)	날짜, 시간 정보 설정하기(set+)
FullYear() : 연도를 4자리 숫자로 표시	FullYear() : 연도를 4자리 숫자로 설정
Month() : 0~11 사이 숫자로 월을 표시. 0이 1월을 의미	Month() : 0~11 사이 숫자로 월을 설정. 0이 1월을 의미
Date() : 1~31 사이 숫자로 일을 표시	Date() : 1~31 사이 숫자로 일을 설정
Day() : 0~6 사이 숫자로 요일을 표시. 0은 일요일을 의미	Day() : 0~6 사이 숫자로 요일을 설정. 0은 일요일을 의미
Time() : 1970/1/1 자정 이후 시간을 밀리초로 표시	Time() : 1970/1/1 자정 이후 시간을 밀리초로 설정
Hours() 0~23 사이의 숫자로 시를 표시	Hours() 0~23 사이의 숫자로 시를 설정
Minutes() : 0~59 사이 숫자로 분을 표시	Minutes() : 0~59 사이 숫자로 분을 설정
Seconds() : 0~59 사이 숫자를 초로 표시	Seconds() : 0~59 사이 숫자를 초로 설정
Millisecond() : 0~999 사이 숫자로 밀리초를 표시	setMillisecond() : 0~999 사이 숫자로 밀리초를 설정

날짜, 시간 형식 바꾸기	toLocaleString()	현재 날짜와 시간을 현지 시간으로 표시
날짜, 시간 형식 바꾸기	toString()	Date 객체 타입을 문자열로 표시

Math 객체

수학 계산과 관련된 메서드가 많이 포함
Date, Array 객체는 new 예약어로 객체의 인스턴스를 만든 후 프로그램에서 사용했지만, Math 객체는 인스턴스를 만들지 않음
Math.프로퍼티명
Math.메서드명

Math 객체의 프로퍼티

E : 오일러 상수
PI : 원주율
SORT2 : 루트2
SORT1_2 : 1/루트2
LN2 : 로그e의 2
LN10 : 로그e의 10
LOG2E : 로그2의 e
LOG10 : 로그10의 e

Math 객체의 메서드

수학과 관련된 함수의 결괏값을 반환
abs() : 절댓값을 반환
ceil() : 매개변수의 소수점 이하 부분을 올림
floor() : 매개변수의 소수점 이하 부분을 버림
log() : 매개변수에 대한 로그값
max() : 매개변수 중 최댓값을 반환
min() : 매개변수 중 최솟값을 반환
pow() : 매개변수의 지숫값을 반환
random() : 0~1 사이의 무작위 수를 반환
round() : 매개변수의 소수점 이하 부분을 반올림
sqrt() : 매개변수에 대한 제곱근을 반환

스프링 웹 프로젝트 4

001cloudid — Mon, 30 Dec 2024 13:42:36 +0900

MVC(Model-View-Controller)

대부분의 서블릿 기반 프레임워크들이 사용하는 방식
데이터와 처리, 화면을 분리하는 방식
웹에서는 Model 2 방식으로 표현

※ Model 2 : 왜 Controller를 따로 분리했을까?, 유지보수가 좋다는 이유는?

Controller : URL 처리, 화면과 로직 분리

※ 서블릿(모델2)과 스프링 MVC Cotroller

서블릿	스프링 MVC Controller
클래스에서 URL 분기	클래스 혹은 메서드에서 가능
GET/POST는 메서드 선택과 오버라이드	@GetMapping/@PostMapping
고정된 파라미터와 리턴 타입	파라미터의 자동 수집(상속이 아님) 상황에 따른 반환 타입 조정
수동으로 직접 forward	자동으로 forward 처리
의존성 주입 불가	스프링을 통해 다른 객체 주입
JSON 등의 처리 불편함	@RestController
	기타 어노테이션을 통한 많은 기능 지원
	다양한 Views 처리 기능

프로젝트 생성

설정

Spring Legacy Project를 생성하면 버전이 낮다는 단점, 스프링 버전 및 JDK 버전 수정 lombok 라이브러리 다운로드 등

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>org.zerock</groupId>
	<artifactId>controller</artifactId>
	<name>ex01</name>
	<packaging>war</packaging>
	<version>1.0.0-BUILD-SNAPSHOT</version>
	<properties>
		<java-version>1.6</java-version>
		<org.springframework-version>5.2.7.RELEASE</org.springframework-version>
		<org.aspectj-version>1.6.10</org.aspectj-version>
		<org.slf4j-version>1.6.6</org.slf4j-version>
	</properties>
	<dependencies>
		<!-- Spring -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
			<version>${org.springframework-version}</version>
			<exclusions>
				<!-- Exclude Commons Logging in favor of SLF4j -->
				<exclusion>
					<groupId>commons-logging</groupId>
					<artifactId>commons-logging</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-test</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<version>1.18.36</version>
			<scope>provided</scope>
		</dependency>

		<!-- AspectJ -->
		<dependency>
			<groupId>org.aspectj</groupId>
			<artifactId>aspectjrt</artifactId>
			<version>${org.aspectj-version}</version>
		</dependency>

		<!-- Logging -->
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-api</artifactId>
			<version>${org.slf4j-version}</version>
		</dependency>
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>jcl-over-slf4j</artifactId>
			<version>${org.slf4j-version}</version>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-log4j12</artifactId>
			<version>${org.slf4j-version}</version>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>log4j</groupId>
			<artifactId>log4j</artifactId>
			<version>1.2.17</version>
		</dependency>

		<!-- @Inject -->
		<dependency>
			<groupId>javax.inject</groupId>
			<artifactId>javax.inject</artifactId>
			<version>1</version>
		</dependency>

		<!-- Servlet -->
		<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>4.0.1</version>
			<scope>provided</scope>
		</dependency>

		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>jsp-api</artifactId>
			<version>2.1</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>

		<!-- Test -->
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.12</version>
			<scope>test</scope>
		</dependency>
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<artifactId>maven-eclipse-plugin</artifactId>
				<version>2.9</version>
				<configuration>
					<additionalProjectnatures>
						<projectnature>org.springframework.ide.eclipse.core.springnature</projectnature>
					</additionalProjectnatures>
					<additionalBuildcommands>
						<buildcommand>org.springframework.ide.eclipse.core.springbuilder</buildcommand>
					</additionalBuildcommands>
					<downloadSources>true</downloadSources>
					<downloadJavadocs>true</downloadJavadocs>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>2.5.1</version>
				<configuration>
					<source>1.8</source>
					<target>1.8</target>
					<compilerArgument>-Xlint:all</compilerArgument>
					<showWarnings>true</showWarnings>
					<showDeprecation>true</showDeprecation>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.codehaus.mojo</groupId>
				<artifactId>exec-maven-plugin</artifactId>
				<version>1.2.1</version>
				<configuration>
					<mainClass>org.test.int1.Main</mainClass>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

톰캣 설정

웹 프로젝트는 가능하면 절대 경로를 이용하는 구조를 사용하는 것이 바람직하므로 Server 탭에 Tomcat v9.0을 더블클릭 → Modules → 프로젝트 클릭(이 경우 ex01) → Edit → Path를 '/' 설정

web.xml

dd파일 서블릿과 관련된 설정파일
web.xml은 프로젝트 구동 시 관여하는 XML 중 하나(나머지는 root-context.xml, servlet-context.xml)
web.xml은 Tomcat 구동과 관련된 설정이며, 나머지 두 파일은 스프링과 관련된 설정 파일임
프로젝트 구동은 web.xml에서 시작
web.xml의 상단에는 가장 먼저 구동되는 Context Listener가 등록되어 있음
→ 프로젝트를 실행하면 가정 먼저 로그를 출력하면서 기록함
root-context.xml이 처리 → servlet-context.xml이 처리됨

스프링 MVC

사용자의 Request는 DispatcherServlet을 통해 처리
HandlerMapping은 Request의 처리를 담당하는 컨트롤러를 찾기 위해 존재
적절한 컨트롤러가 찾아졌다면 HandlerAdapter를 이용해서 해당 컨트롤러를 동작
Controller는 개발자가 작성해야하는 클래스로 실제 Request를 처리하는 로직을 작성
View에 전달해야 하는 데이터는 주로 Model이라는 객체에 담아서 전달
Controller는 다양한 타입의 결과를 반환하는 데 이에 대한 처리는 ViewResolver를 이용
View는 실제로 응답 보내야하는 데이터를 JSP 등을 이용해서 생성하는 역할을 하게 됨
만들어진 응답은 DispatcherServlet을 통해서 전송

개발자는 컨트롤러와 화면만 만들면 된다.

화면을 반환하려면 jsp이름을 반환값으로 하면 된다.

내가 화면에 전달하고 싶은 데이터가 있으면 Model 객체에 담아서 전달한다.

Controller

HttpServletRequest, HttpServletResponse를 사용할 필요 없이 필요한 기능을 구현
다양한 타입의 파라미터 처리, 다양한 타입의 리턴 타입 사용 가능
GET 방식, POST 방식 등 전송 방식에 대한 처리를 어노테이션 처리 가능
4버전 이후 @GetMapping, @PostMapping
상속, 인터페이스 방식 대신 어노테이션만으로도 필요한 설정 가능
오버라이드 규칙이 없어짐

스프링 웹 프로젝트 3

001cloudid — Sun, 29 Dec 2024 15:34:37 +0900

MyBatis와 스프링 연동

연동에 앞서 MyBatis란?

SQL Mapping 프레임 워크
SQL과 Object 간의 관계를 매핑해주는 역할
JDBC 코드에 비해 처리하는 부분이 간결해지고, close 처리를 지원
※ JPA와는 다름. JPA(RDBMS -> 객체지향에 접목). MyBatis는 SQL, 객체지향 매핑하는 역할
Spring에서의 사용
스프링은 MyBatis와의 연결을 위한 mybatis-spring 라이브러리를 이용해서 연동 처리

MyBatis 세팅

기본적으로 dataSource 설정 필요

pom.xml 라이브러리 추가

<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis -->
<dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis</artifactId>
    <version>3.5.6</version>
</dependency>

위의 라이브러리만 추가해도 개발이 가능하지만, 스프링과 연동하면 더 좋아짐. MyBatis Spring 라이브러리도 추가

<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring -->
<dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis-spring</artifactId>
    <version>1.3.2</version>
</dependency>

추가적인 설정이 필요 spring-jdbc, spring-tx

			<groupId>org.springframework</groupId>
			<artifactId>spring-jdbc</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-tx</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>

SqlSeesionFactory의설정

root-context.xml에 MyBatis설정

MyBatis의 핵심 객체는 SqlSessionFactory 타입의 객체

SqlSessionFactoryBean은 내부적으로 MyBatis의 SqlSessionFactory를 생성

	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dateSource"></property>
	</bean>

동작 확인(매우 중요한 설정이므로 하나씩 확인-동작해주는 것을 추천)

DataSourceTests에 아래 코드를 추가

package org.zerock.persistence;

(...생략...)

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class DataSourceTests {

(...생략...)

	@Autowired
	private SqlSessionFactory sqlSessionFactory;

(...생략...)

	@Test
	public void testConnection2() {
		try (SqlSession session = sqlSessionFactory.openSession(); Connection connection = session.getConnection()) {
			log.info(session);
            log.info(connection);
		} catch (Exception e) {
			e.printStackTrace();
			log.error(e.getMessage());
		}
	}
    
}

AutoClose하기 때문에 close를 해주지 않아도 됨

스프링 연동 처리 및 연동 테스트

src/main/java 폴더 안에 org.zerock.mapper 패키지를 생성 → TimeMapper 인터페이스

package org.zerock.mapper;

import org.apache.ibatis.annotations.Select;

public interface TimeMapper {
	
	@Select("select sysdate from dual") // 주의 ;(세미콜론)이 없어야함
	public String getTime();
	
}

Mapper 설정 root-context.xml에서 Namespaces에서 Mybatis-spring을 체크

체크하고 Source를 확인하면 코드가 자동으로 추가됨

자동 완성 기능이 됨

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mybatis-spring="http://mybatis.org/schema/mybatis-spring"
	xsi:schemaLocation="http://mybatis.org/schema/mybatis-spring http://mybatis.org/schema/mybatis-spring-1.2.xsd
		http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
	
	<!-- Root Context: defines shared resources visible to all other web components -->
	
	<bean id="hikariConnfig" class="com.zaxxer.hikari.HikariConfig">
		<property name="driverClassName" value="oracle.jdbc.driver.OracleDriver"></property>
		<property name="jdbcUrl" value="jdbc:oracle:thin:@localhost:1521:XE"></property>
		<property name="username" value="book_ex"></property>
		<property name="password" value="book_ex"></property>
	</bean>
	
	<bean id="dateSource" class="com.zaxxer.hikari.HikariDataSource" destroy-method="close">
		<constructor-arg ref="hikariConnfig" />
	</bean>
	
	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dateSource"></property>
	</bean>
	
	<mybatis-spring:scan base-package="org.zerock.mapper"/>
		
	<context:component-scan base-package="org.zerock.sample"></context:component-scan>
		
</beans>

이 과정까지하면 연동 처리가 완료

테스트 진행

src/test/java 폴더의 org.zerock.persistence 패키지 안에 TimeMapperTests클래스를 생성

package org.zerock.persistence;

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 org.zerock.mapper.TimeMapper;

import lombok.extern.log4j.Log4j;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class TimeMapperTests {
	
	@Autowired
	private TimeMapper timeMapper;
	
	@Test
	public void testTime1() {
		
		timeMapper.getTime(); // 호출
	}

}

package org.zerock.persistence;

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 org.zerock.mapper.TimeMapper;

import lombok.extern.log4j.Log4j;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class TimeMapperTests {
	
	@Autowired
	private TimeMapper timeMapper;
	
	@Test
	public void testTime1() {
		
//		timeMapper.getTime(); // 호출
		log.info(timeMapper.getTime());
		
	}

}

XML Mapper 설정

spring-test를 이용해서 테스트 코드 작성 시 sql이 길어지면 관리가 힘들어짐. XML Mapper와 Mapper 인터페이스를 사용

XML 파일은 src/main/java 폴더 mapper 패키지에 생성하거나 src/main/resources 폴더에 mapper 폴더를 만들고 생성해도 됨

단, src/main/resources 폴더에 만들때 폴더를 만들 때 하나하나씩 만들어야함

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">

↑ XML 문서를 만들면 dtd -> 자동완성기능

위의 코드를 작성하면 자동완성기능이 되며, 아래와 같이 쿼리를 작성

<?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.TimeMapper">  <!-- namespace는 인터페이스와 동일하게 -->
	<select id="getTime2"> <!-- getTime2에는 sql이 없음 -> mybatis는 xml에서 찾아 sql을 실행  -->
		select sysdate from dual
	</select>
</mapper>

현재 동작 확인

TimeMapperTests에 코드 추가

	@Test
	public void testTime2() {
		
		log.info(timeMapper.getTime2());
	}

sql은 실행되었으나 처리를 어떻게 해야할지 모르겠다는 의미의 에러가 발생

select의 경우 반환타입이 있어야함

TimeMapper.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.TimeMapper">
	<select id="getTime2" resultType="string"> <!-- getTime2에는 sql이 없음 -> mybatis는 xml에서 찾아 sql을 실행  -->
		select sysdate from dual
	</select>
</mapper>

정상 동작

mybatis 연동, spring-mybatis연동, xml처리까지 완료

log4jdbc-log4j2 설정

※ MyBatis는 내부적으로 PreparedStatement를 이용하기 때문에 좀 더 쉽게 SQL의 로그를 보기 위한 설정 → DB 버전에 조심해야함. 안될 경우 순수 jdbc로 로그를 찍어야함

순서 : 라이브러리 추가 → 프로퍼티 파일 추가 → DataSource 설정 변경

라이브러리 추가

		<!-- https://mvnrepository.com/artifact/org.bgee.log4jdbc-log4j2/log4jdbc-log4j2-jdbc4.1 -->
		<dependency>
			<groupId>org.bgee.log4jdbc-log4j2</groupId>
			<artifactId>log4jdbc-log4j2-jdbc4.1</artifactId>
			<version>1.16</version>
		</dependency>

프로퍼티 파일을 반드시 추가

log4jdbc.log4j2.Properties

0.00MB

이 파일을 src/main/resources에 추가 테스트할 때 불안해서 저자는 src/test/resources에도 함께 추가하는 것을 추천함

DataSource 설정 변경

root-context.xml에서

	<bean id="hikariConnfig" class="com.zaxxer.hikari.HikariConfig">
		<property name="driverClassName" value="oracle.jdbc.driver.OracleDriver"></property>
		<property name="jdbcUrl" value="jdbc:oracle:thin:@localhost:1521:XE"></property>
		<property name="username" value="book_ex"></property>
		<property name="password" value="book_ex"></property>
	</bean>

이 부분을 수정

	<bean id="hikariConnfig" class="com.zaxxer.hikari.HikariConfig">
		<property name="driverClassName" value="net.sf.log4jdbc.sql.jdbcapi.DriverSpy"></property>
		<property name="jdbcUrl" value="jdbc:log4jdbc:oracle:thin:@localhost:1521:XE"></property>
		<property name="username" value="book_ex"></property>
		<property name="password" value="book_ex"></property>
	</bean>

이 상태에서 JUnit 테스트

콘솔창 내용을 복사 붙여넣기

|----------------------|
|sysdate               |
|----------------------|
|2024-12-29 15:31:58.0 |
|----------------------|

INFO : jdbc.resultset - 1. ResultSet.next() returned false
INFO : jdbc.resultset - 1. ResultSet.close() returned void
INFO : jdbc.audit - 1. Connection.getMetaData() returned oracle.jdbc.driver.OracleDatabaseMetaData@5b12012e
INFO : jdbc.audit - 1. PreparedStatement.close() returned 
INFO : jdbc.audit - 1. Connection.clearWarnings() returned 
INFO : org.zerock.persistence.TimeMapperTests - 2024-12-29 15:31:58.0
INFO : com.zaxxer.hikari.HikariDataSource - HikariPool-1 - Shutdown initiated...
INFO : jdbc.connection - 1. Connection closed
INFO : jdbc.audit - 1. Connection.close() returned 
INFO : jdbc.connection - 2. Connection closed
INFO : jdbc.audit - 2. Connection.close() returned 
INFO : jdbc.connection - 3. Connection closed
INFO : jdbc.audit - 3. Connection.close() returned 
INFO : jdbc.connection - 4. Connection closed
INFO : jdbc.audit - 4. Connection.close() returned 
INFO : jdbc.connection - 5. Connection closed
INFO : jdbc.audit - 5. Connection.close() returned 
INFO : jdbc.connection - 6. Connection closed
INFO : jdbc.audit - 6. Connection.close() returned 
INFO : jdbc.connection - 7. Connection closed
INFO : jdbc.audit - 7. Connection.close() returned 
INFO : jdbc.connection - 8. Connection closed
INFO : jdbc.audit - 8. Connection.close() returned 
INFO : jdbc.connection - 9. Connection closed
INFO : jdbc.audit - 9. Connection.close() returned 
INFO : jdbc.connection - 10. Connection closed
INFO : jdbc.audit - 10. Connection.close() returned 
INFO : com.zaxxer.hikari.HikariDataSource - HikariPool-1 - Shutdown completed.

이렇게 동작하지 않는다면

설정 전 동작하는지 확인하고 동작 확인이 되는데 안된다면 DB나 JDBC 드라이버의 지원이 안됨.

자바스크립트 4

001cloudid — Sun, 29 Dec 2024 13:33:14 +0900

재사용할 수 있는 함수

입력을 바꿔 여러 번 사용할 수 있는 성질을 함수의 '재사용성'이라고 함

매개변수

함수를 실행하는 데 필요한 값을 함수 밖에서 제공하는 것
함수 안에서만 사용

return

결괏값을 함수 밖에서 사용하려면 함수를 실행한 위치로 돌려줘야함. 이러한 동작을 값을 반환한다(return)고 함
함수의 결괏값을 반환할 때 return을 사용해서 넘겨줄 값을 지정해주면 됨

    <script>
        // 매개 변수를 사용한 함수 선언하기
        function addNum(num1, num2){
            var sum = num1 + num2;
            return sum;
        }        
    </script>

인수(argument)

함수 선언이 끝났다면 실행할 함수를 호출해야함. 매개변수가 있는 함수를 호출할 때 실제 값 부분을 인수라고 함

    <script>
        // 매개변수를 사용한 함수 선언하고 호출하기
        function addNum1(num1, num2){
            var sum = num1 + num2;
            return sum;
        }
        var result = addNum1(10, 3);
        document.write("두 수를 더한 값은 " + result);
    </script>

    <script>
        // 위의 코드를 더 간단하게 작성
        function addNum2(num1, num2){
            return num1 + num2;
        }
        document.write("두 수를 더한 값은 " + addNum2(10,20));
    </script>

매개변수 기본값 지정

ES6부터 함수에서 매개변수를 선언할 때 기본값을 지정하는 기능도 생김

    <script>
        // 매개변수의 기본값 지정
        function multiple(a, b=5, c=10){
            return a * b * c;
        }
        console.log(multiple(5,10,20)); // a = 5, b = 10, c = 20
        console.log(multiple(10,20)); // a = 10, b = 20, c = 10(기본값)
        console.log(multiple(50)); // a = 50, b = 5(기본값), c = 10(기본값)
    </script>

함수표현식

익명함수

이름이 없는 함수, 익명 함수를 선언할 때는 이름을 붙이지 않음
익명 함수 실행은 익명 함수는 함수 자체가 식이므로 함수를 변수에 할당할 수 있으며, 또한 다른 함수의 매개변수로 사용할 수 있음

    <script>
        // 익명 함수 선언하기
        function(a, b){
            return a + b;
        }
    </script>

    <script>
        // 익명함수 실행
        var sum = function(a, b){
            return a + b;
        }
        document.write("익명 함수 실행 결과 : " + sum(10,20));
    </script>

즉시 실행 함수

한 번만 실행하는 함수, 함수를 정의하면서 동시에 실행하는 함수를 즉시 실행함수
함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석
즉시 실행 함수의 기본형식은 함수를 식 형태로 선언하므로 마지막에 세미콜론(;)을 붙임
(function(){
명령;
}());
또는
(function(매개변수){
명령;
}(인수))

    <script>
        // 즉시 실행 함수
        (function(){
            var name = prompt("이름을 입력해주세요.");
            document.write("안녕하세요. <b>" + name + "</b> 님");
        }());
    </script>

매개변수를 사용하는 함수라면 선언 부분 끝에 함수 실행을 위한 인수를 넣어줌

    <script>
        // 매개변수가 있는 즉시 실행 함수
        (function(a,b){
            sum = a + b;
        }(100,200));
        document.write("함수 실행 결과 " + sum);
    </script>

화살표 함수

=> 표기법을 사용해 함수 선언을 좀 더 간단하게 작성할 수 있음
(매개변수) => {함수내용}
매개변수가 없을 경우
매개변수를 넣는 괄호 안을 비워둠
중괄호 안에 함수 내용이 한 줄이라면 중괄호를 생략. 이때 return문은 생략된 것으로 간주
매개변수가 1개인 경우
매개변수의 괄호 생략 가능
매개변수가 2개 이상인 경우
(매개변수) => {...} 처럼 사용

    <script>
        // 매개변수가 없는 함수
        var hi = function(){
            return "Hello World";
        }
    </script>
    
    <script>
        // 매개변수가 없는 화살표 함수
        var hi = () => {return "Hello World"};
    </script>
    
    <script>
        // 매개변수가 없는 화살표 함수(중괄호 생략)
        var hi = () => "Hello World";
    </script>

    <script>
        // 매개변수가 1개인 함수
        var hi = function(user){
            document.write(user + "님 안녕하세요?");
        }
    </script>

    <script>
        // 매개변수가 1개인 화살표 함수
        var hi = user => {document.write(user + "님 안녕하세요?")};
    </script>

    <script>
        // 매개변수가 2개인 함수
        var sum = function(a, b){
            return a + b;
        }
    </script>

    <script>
        // 매개변수가 2개인 화살표 함수
        var sum = (a,b) => a + b;
    </script>

이벤트와 이벤트 처리기

이벤트

웹 브라우저나 사용자가 행하는 어떤 동작
웹 문서 영역 안에서 이루어지는 동작만을 이야기함
마우스나 기보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생
마우스 이벤트 : 마우스를 이용해서 버튼이나 휠 버튼을 조작할 때 발생
click, dbclick, mousedown, mousemove,...
키보드 이벤트 : 키보드에서 특정 키를 조작할 때 발생
keydown, keypress, keyup,...
문서 로딩 이벤트 : 서버에서 웹 문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에 보여주는 것과 관련된 이벤트
abort, error, load, resize,...
폼 이벤트 : 폼 요소에 내용을 입력하면서 발생하는 이벤트
blur, change, focus,...
https://developer.mozilla.org/ko/docs/Web 필요한 경우 찾아서 확인

이벤트 처리기(이벤트 핸들러)

이벤트가 발생하면 처리하는 함수
이벤트 처리하는 기본적인 방법
이벤트가 발생한 HTML 태그에 이벤트처리기를 직접 연결
이벤트 처리기의 기본 형식
HTML 태그 안에서 'on' 다음 '이벤트명'을 붙여 속성 이름 만들기
→ 실행할 이벤트 처리기의 함수명을 작성
<\태그 on이벤트명 = "함수명">
이벤트가 발생한 후 여러 가지 명령을 실행해야 한다면, 그 명령을 묶어 하나의 자바스크립트 함수로 만드는 것이 좋음. 이벤트가 발생할 때 함수 이름과 인수를 지정하여 실행

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 처리기</title>
</head>
<style>
    a:link, a:visited {
	color:black;
	text-decoration: none;
}
ul {
	list-style: none;
	width:500px;
	margin:10px auto;
	padding:0;
}
li {
	display:inline-block;
	width:120px;
	border:1px solid #ccc;
	padding:10px 15px;	
	font-size:16px;
	text-align:center;
}
#result {
	width:500px;
	height:300px;
	margin:30px auto;
	border:2px solid #ccc;
	border-radius:15px;
}
p {
	width:80%;
	padding:10px;
	line-height: 2em;
}
</style>
<body>
    <ul>
        <li><a href="#" onclick="alert('Yellow 버튼을 클릭했습니다.')">Yellow</a></li>
        <li><a href="#" onclick="alert('Green 버튼을 클릭했습니다.')">Green</a></li>
        <li><a href="#" onclick="alert('Purple 버튼을 클릭했습니다.')">Purple</a></li>
    </ul>
    <div id="result"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 처리기</title>
</head>
<style>
    a:link, a:visited {
	color:black;
	text-decoration: none;
}
ul {
	list-style: none;
	width:500px;
	margin:10px auto;
	padding:0;
}
li {
	display:inline-block;
	width:120px;
	border:1px solid #ccc;
	padding:10px 15px;	
	font-size:16px;
	text-align:center;
}
#result {
	width:500px;
	height:300px;
	margin:30px auto;
	border:2px solid #ccc;
	border-radius:15px;
}
p {
	width:80%;
	padding:10px;
	line-height: 2em;
}
</style>
<body>
    <ul>
        <li><a href="#" onclick="changeBg('yellow')">Yellow</a></li>
        <li><a href="#" onclick="changeBg('green')">Green</a></li>
        <li><a href="#" onclick="changeBg('purple')">Purple</a></li>
    </ul>
    <div id="result"></div>

    <script>
        function changeBg(color){
            var result = document.querySelector("#result");
            result.style.backgroundColor = color;
        }
    </script>
</body>
</html>

DOM을 이용한 이벤트 처리기

DOM을 이용하여 이벤트 처리기를 지정하면 태그와 자바스크립트 소스를 분리해서 유지보수에 도움이 됨
웹 요소를 클릭했을 때 실행할 함수를 연결하려면
웹 요소.onclick = 함수;
여기서 주의할 점은 함수의 이름만 사용하고 괄호는 붙이지 않아야함
웹 요소를 가져올 수 있는 방법 중 하나는 querySelector()를 사용
괄호 안에는 클래스 이름, id, 다양한 선택자를 넣을 수 있음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM을 이용한 이벤트 처리기</title>
</head>
<style>
a:link, a:visited {
	color:black;
	text-decoration: none;
}
ul {
	list-style: none;
	width:500px;
	margin:10px auto;
	padding:0;
}
li {
	display:inline-block;
	width:120px;
	border:1px solid #ccc;
	padding:10px 15px;	
	font-size:16px;
	text-align:center;
}
#result {
	width:500px;
	height:300px;
	margin:30px auto;
	border:2px solid #ccc;
	border-radius:15px;
}
p {
	width:80%;
	padding:10px;
	line-height: 2em;
}
</style>
<body>
    <button id="change">글자색 바꾸기</button>	
	<p>Reprehenderit tempor do quis sunt eu et exercitation deserunt. Laboris adipisicing est sint aliquip nulla pariatur velit irure elit qui id. Dolore aliquip dolore eu ut irure sint Lorem reprehenderit velit. Duis veniam irure cillum anim excepteur culpa pariatur sunt esse. Eu nulla commodo velit ex id dolore incididunt mollit incididunt nisi labore culpa qui ea. Commodo veniam veniam in ipsum ad minim occaecat qui pariatur adipisicing laborum quis.</p>
	
	<script>
    // 방법 1: 웹 요소를 변수로 지정 & 미리 만든 함수 사용
    var changeBttn = document.querySelector("#change");
    changeBttn.onclick = changeColor;
    
		function changeColor() {
      document.querySelector("p").style.color = "#f00";
    }
   
    // 방법 2: 웹 요소를 따로 변수로 만들지 않고 사용
    // document.querySelector("#change").onclick = changeColor;

		// function changeColor() {
    //   document.querySelector("p").style.color = "#f00";
    // }
    
    // 방법 3: 직접 함수를 선언
    // document.querySelector("#change").onclick = function() {
    //   document.querySelector("p").style.color = "#f00";
    // };
	</script>
</body>
</html>

스프링 웹 프로젝트 2

001cloudid — Sat, 28 Dec 2024 17:23:06 +0900

Oracle 11g Express Edition 설치 및 설정

설치에 앞서 왜 Oracle 11g인가?, 최신 버전의 Oracle은 안되는가? 라는 질문이 있을 수 있는데

이 질문에 답은 최신 버전일수록 용량이 크고 메모리를 많이 차지함으로서 프로그램이 무겁다기 때문이다.

https://www.oracle.com/database/technologies/xe-prior-release-downloads.html

이 곳에서 다운 받을 수 있다.

Oracle Database를 설치하면서 가장 주의해야하는 부분은

1. 설치 폴더 한국어가 있을 경우 문제가 발생

2. System, SYS 계정의 패스워드를 지정하게 되는데, 이 패스워드는 매우매우 중요하기 때문에 반드시 기억해둬야함!

3. 설치 중 포트 번호(톰캣이 8080 포트를 사용해서 발생할 수 있음)

비밀번호를 간단하게 oracle11g로 설정

SQL Plus를 사용할 수 있지만 인터페이스가 편하지만은 않다. 따라서 무료 SQL Developer도 설치

https://www.oracle.com/kr/database/sqldeveloper/technologies/download/

SQL Developer의 경우 JDK가 포함된 버전과 그렇지 않은 버전이 있다. 관계는 없는데 환경변수가 잡혀져있으면 JDK가 포함되지 않은 것을 사용해도 됨. sql developer 버전을 20.2를 사용할 예정

sqldeveloper.exe를 실행하면

아니요 누르면 실행됨

실행되면

비밀번호는 위에 Oracle을 설치할 때 패스워드 입력 후 테스트를 누르고 상태 성공인 것을 확인한 후 접속을 눌러줘야함

SYSTEM 계정은 사용하지 않음 따라서 사용할 계정을 만들어줘야함

쿼리에서 다음과 같이 함

※ SYSTEM에 하위 항목에서 다른 사용자로 만들 경우 암호화가 되어 사용할 수 없음

이후 SYSTEM의 연결을 끊고 새 접속

Oracle이 8080포트를 사용 → 변경 9090 포트로 변경

exec dbms_xdb.sethttpport(9090);

톰캣과 충돌이 나지 않음

JDBC 연결 확인

주의할 점은 JDBC Driver, Oracle은 maven repository

https://mvnrepository.com/artifact/com.oracle.database.jdbc/ojdbc6/11.2.0.4

JDBC 테스트 코드를 위해서

src/test/java에서 패키지를 만들고 JDBCTests 클래스를 생성

package org.zerock.persistence;

import org.junit.Test;

import lombok.extern.log4j.Log4j;

@Log4j
public class JDBCTests {

	@Test
	public void testConnection() throws Exception {
		
		Class clz = Class.forName("oracle.jdbc.driver.OracleDriver");
		
		log.info(clz);
	}
	
}

드라이버 로딩에 문제가 없음

여기까지 했으면 DB연결에 문제가 없음

Connection Pool(Hikair CP) 설정(매우 중요)

DataSource 설정

DB와 Connection을 맺고 끊은 작업은 리소스의 소모가 많은 작업

Pooling 기법을 통해 객체를 미리 생성하고 빌려 쓰는 방식으로 이용해서 연결 시간을 단축

Commons DBCP나 HikariCP 등을 활용

라이브러리 추가(pom.xml)

		<!-- https://mvnrepository.com/artifact/com.zaxxer/HikariCP -->
		<dependency>
			<groupId>com.zaxxer</groupId>
			<artifactId>HikariCP</artifactId>
			<version>3.4.5</version>
		</dependency>

DataSource 설정(root-context.xml)

일반적인 DB 세팅과 같음

https://github.com/brettwooldridge/HikariCP 참고

root-context.xml에

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
	
	<!-- Root Context: defines shared resources visible to all other web components -->
	
	<bean id="hikariConnfig" class="com.zaxxer.hikari.HikariConfig">
		<property name="driverClassName" value="oracle.jdbc.driver.OracleDriver"></property>
		<property name="jdbcUrl" value="jdbc:oracle:thin:@localhost:1521:XE"></property>
		<property name="username" value="book_ex"></property>
		<property name="password" value="book_ex"></property>
	</bean>
	
	<bean id="dateSource" class="com.zaxxer.hikari.HikariDataSource" destroy-method="close">
		<constructor-arg ref="hikariConnfig" />
	</bean>
	
	<context:component-scan base-package="org.zerock.sample"></context:component-scan>
		
</beans>

※언제 어노테이션으로 주입? 언제 xml 주입? → 소스코드가 없으면 어노테이션을 걸지 못함

DataSource를 만듦으로서 테스트

package org.zerock.persistence;

import java.sql.Connection;

import javax.sql.DataSource;

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.extern.log4j.Log4j;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml")
@Log4j
public class DataSourceTests {
	
	@Autowired
	private DataSource dataSource;
	
	@Test
	public void testConnection() {
		try(Connection connection = dataSource.getConnection()){
			log.info(connection);
		} catch(Exception e) {
			e.printStackTrace();
			log.error(e.getMessage());
		}
	}
}

자바스크립트 3

001cloudid — Sat, 28 Dec 2024 14:49:59 +0900

함수

동작해야 할 목적대로 묶은 명령을 함수(function)
alert() 함수와 같이 자바스크립트에 미리 만들어 놓은 함수를 '내장 함수'라고 함

함수를 사용하는 기본적인 방법은 함수를 만들 때 이름을 붙이고 필요할 때마다 함수 이름을 사용해 실행
함수가 어떤 명령을 처리할지 미리 알려주는 것을 함수를 선언한다, 함수를 정의한다 라고 함

<script>
    funciont 함수명(){
        명령
    }
</script>

함수를 선언하는 것만으로 함수가 실행되지 않음. 함수를 선언한 후 따로 실행하는 코드를 작성해야함
함수를 사용하는 것을 함수를 호출한다, 함수를 실행한다 라고 함

    함수명([변수])

함수 선언과 실행 순서 : 웹 브라우저에서 자바스크립트 소스를 해석할 때 함수 선언 부분을 가장 먼저 해석. 원하는 어느 곳에 함수를 선언해 놓기만 하면 선언한 위치와 상관없이 함스를 실행할 수 있음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>함수</title>
</head>
<body>

    <script>
        alert("자바스크립트에서 미리 만들어 놓은 함수를 내장 함수라고 함")        
    </script>

    <script>
        // 두 수를 더하는 함수 만들기
        function addNum(a, b) {
            var sum = a + b;
            alert(sum);
        }
    </script>

    <script>
        // 함수를 사용하지 않고 두 수 더하기
        var num1 = 10;
        var num2 = 20;
        var sum2 = num1 + num2;
        alert("함수를 사용하지 않고 두 수 더하기 : " + sum2);
    </script>

    <script>
        // 함수를 사용해 두 수 더하기
        function addNum2() {
            var num3 = 2;
            var num4 = 3;
            var sum3 = num3 + num4;
            alert("함수를 사용해 두 수 더하기 : " + sum3);
        }
    </script>

</body>
</html>

var

스코프 : 변수가 적용되는 범위. 변수가 어디까지 유효한지 범위를 가리키는 영역
지역 변수, 로컬 변수(local variable) : 한 함수 안에서만 사용할 수 있는 변수
전역 변수, 글로벌 변수(global variable) : 스크립트 소스 전체에서 사용할 수 있는 변수

함수 안에서만 쓸 수 있는 지역 변수 : 지역 변수를 선언할 때 사용하는 예약어 var

    <script>
        // var 예약어로 지역 변수 선언하기
        function addNumber(){
            var sum = 10 + 20; // 지역 변수 선언
        }
        addNumber(); // 함수 호출
        console.log(sum);
    </script>

스크립트 안에서 자유롭게 쓸 수 있는 전역 변수 : 전역 변수를 선언할 때는 var 예약어를 붙이지 않음. 함수 안에 선언한 변수라도 var 예약어를 사용하지 않으면 됨

    <script>
        // var 예약어를 사용한 지역 변수와 전역 변수
        function addNumber2(){
            var sum = 10 + 20;
            multi = 10 * 20;
        }
        addNumber2();
        console.log(multi);
    </script>

var와 호이스팅

호이스팅은 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것

    <script>
        var x = 10;

        function hoistingEx(){
            console.log("x = "+x);
            console.log("y = "+y);
            var y = 20;
        }
        hoistingEx();
    </script>

※ undefined는 변수가 선언되었지만 아직 값이 할당되지 않은 상태일 때의 자료형

자바스크립트 해석기는 함수 소스를 훑어보면서 var를 사용한 변수는 따로 기억해둠. 즉, 변수를 실행하기 전이지만 어떤 변수가 있는지를 기억해 두기 때문에 선언한 것과 같은 효과가 있는 것

위의 코드가 실제 코드라면 자바 스크립트 해석기가 인식하는 코드는

    <script>
        var x = 10;

        function hoistingEx(){
        	var y;
            console.log("x = "+x);
            console.log("y = "+y);
            y = 20;
        }
        hoistingEx();
    </script>

로 인식하게 됨

변수의 재선언과 재할당

var를 사용한 변수는 재선언과 재할당이 가능함

    <script>
        // var 예약어를 사용한 변수의 재할당과 재선언
        function addNumber(num1, num2){
            return num1 + num2;
        }
        var sum = addNumber(10, 20);
        console.log(sum); // 30
        sum = 50; // 변수 재할당
        console.log(sum); // 50 
        var sum = 100; // 변수 재선언
        console.log(sum); // 100 
    </script>

let과 const의 등장

var 예약어를 사용하는 변수는 함수 영역의 스코프를 가지고, 재할당과 재선언이 가능함. 이는 프로그램 오류를 발생시킬 수 있음.

var 예약어를 빠뜨리면 의도하지 않게 전역 변수가 되기도 하고, 변수를 재선언하거나 값을 재할당해 버리는 경우가 생김.

이러한 문제를 해결하기 위해 let, const가 추가되었고, var 예약어는 사용하지 않을 것이 권장됨

var, let, const의 가장 큰 차이는 스코프의 범위인데 var는 함수 영역의 스코프를 가지며, let과 const는 블록 영역의 스코프를 가짐

let

let으로 선언한 변수는 변수를 선언한 블록에서만 유효

    <script>
        // 블록 변수 선언
        function calcSum(n){
            let sum = 0;
            for(let i = 1; i < n + 1; i++){
                sum += i;
            }
            console.log(sum);
        }
        calcSum(10);
    </script>

전역 변수를 선언하고 싶다면 let 예약어를 쓰지 않고 변수 이름과 초깃값만 할당하면 됨

    <script>
        // 전역 변수 선언하기
        function caclSum1(n){
            sum = 0;
            for(let i = 0; i <= n; i++){
                sum += i;
            }
        }
        caclSum1(10);
        console.log(sum);
    </script>

let예약어를 사용하여 선언한 변수는 값을 재할당할 수 있지만 변수를 재선언할 수 없음

    <script>
        // 블록 변수의 재할당
        function calcSum2(n){
            let sum = 0;
            for(let i = 0; i <= n; i++){
                sum += i;
            }
            sum = 10; // sum 변수 재할당
            console.log(sum);
        }
        calcSum2(10);
    </script>

    <script>
        // 재선언할 수 없는 let 변수
        function caclSum3(n){
            let sum = 0;
            for(let i = 0; i <= n; i++){
                    sum += i;
                }
            let sum;
            console.log(sum);

        }
        calcSum3(10);
    </script>

let 예약어는 같은 변수 이름을 중복해서 사용할 수 없음

호이스팅이 없는 변수

let 예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류메시지를 나타냄

    <script>
        var x = 10;
        function dispalyNum(){
            console.log("x = " + x);
            console.log("y = " + y); // 선언되지 않은 y를 사용
            let y = 20; // y 변수 선언
        }
    </script>

const

const로 선언한 변수는 상수 변수(constant variable)

상수는 프로그램 안에서 변하지 않는 값

프로그램 안에서 특정한 상숫값을 자주 사용한다면 변수에 담아서 사용하는 것이 변리

재선언, 재할당 할 수 없음

    <script>
        // 재선언할 수 없는 const 변수
        const currentYear = 2024;
        console.log(currentYear);
        const currentYear;
    </script>

    <script>
        // 재할당할 수 없는 const 변수
        const currentYear2 = 2024;
        console.log(currentYear2);
        currentYear2 = 2025;
        console.log(currentYear2);
    </script>

따라서 변수 때문에 생기는 오류를 줄이려면 let과 const를 사용하는 것이 좋음

값이 자주 바뀌는 변수라면 let을, 재할당이 없는 변수라면 const 예약어를 사용

스프링 웹 프로젝트 1

001cloudid — Fri, 27 Dec 2024 16:35:20 +0900

프로젝트에서 패키지명을 대문자로 작성하면 안됨. 그 이유로는

자바의 공식 네이밍 규약
자바의 패키지명은 반드시 소문자로 작성해야함
운영 체제에서의 문제
일부 운영 체제에서는 파일 시스템이 대소문자를 구분(리눅스나 맥OS는 대소문자를 구분하지만, 윈도우는 대소문자를 구분하지 않음)
패키지명을 대문자로 시작하면 프로젝트가 다양한 운영 체제에서 실행될 때 호환성 문제가 발생할 수 있음. 이로 인해 애플리케이션의 배포 및 실행에 문제가 발생할 가능성이 커짐
URL 경로에서 대소문자 구분 문제
자바 클래스명과 패키지명 구분
호환성 및 표준화

lombok

프로젝트를 실행하면 home.jsp가 켜지면서 Console에는 다양한 로그 정보가 찍힘.

여기서 HomeController에 현재 객체를 참조하는 키워드인 this를 찍어내면?

this.toString()을 호출. 오버라이드 하지 않았다면 Object.toString()의 기본 구현인 객체의 클래스명과 해시코드를 포함하는 문자열을 반환할 것이다.

package org.zerock.controller;

import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

/**
 * Handles requests for the application home page.
 */
@Controller
public class HomeController {
	
	private static final Logger logger = LoggerFactory.getLogger(HomeController.class);
	
	/**
	 * Simply selects the home view to render by returning its name.
	 */
	@RequestMapping(value = "/", method = RequestMethod.GET)
	public String home(Locale locale, Model model) {
		logger.info("Welcome home! The client locale is {}.", locale);
		
		Date date = new Date();
		DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);
		
		String formattedDate = dateFormat.format(date);
		
		model.addAttribute("serverTime", formattedDate );
		
		System.out.println(this);
		
		return "home";
	}
	
}

이를 lombok을 이용해서 getter/setter, toString(), 생성자 등을 자동으로 생성해주게 끔 설치 및 설정

https://projectlombok.org/download 롬복 다운로드

이 파일을 열면

이렇게 뜰 경우에는 cmd창에서 설치

다운받은 디렉토리로 이동 후 명령어 작성

기다리면

자동으로 찾아주면 Install/Update -> Quit Installer

잘 설치되었는지 확인하려면, STS에 lombok.jar 파일이 생기고, STS.ini를 열어보면

가장 마지막 줄에 이렇게 추가됨

지금까지는 개발도구에 세팅을 했고, 프로젝트에서는 사용할 수없음. 사용하려면 pom.xml에 lombok 추가

https://mvnrepository.com/artifact/org.projectlombok/lombok 아까 다운 받은 버전과 같은 것을 복사한 후 pom.xml에 추

확인

HomeController에 @Controller 어노테이션 및에 @ToString 어노테이션을 추가하고 import하면 아래와 같이 됨

이후 프로젝트를 실행하면

의존성 주입 : 스프링을 이용하는 환경에서 각각의 객체를 생성하고 이를 스프링의 설정을 통해서 연결

스프링에서 객체를 만들면 이를 사용하기 위해서 bean을 추가해줘야한다.

근데 어떤 것을 bean으로 추가해주고, 어떤 것을 bean으로 추가할 필요가 없다.

그 기준은 무엇일까? 바로 오래 살아남아야하고 오래 일을 해야하는 것을 bean으로 추가해준다

bean으로 등록하는 방법은? XML 또는 어노테이션을 이용하는 방법이 있다.

어노테이션을 이용하는 방법은

1. @Component 어노테이션 추가

package org.zerock.sample;

import org.springframework.stereotype.Component;

@Component
public class Chef {

}

2. root-context.xml에서 Namespaces context 추가

3. Source에서 context:component-scan 태그 추가

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
	
	<!-- Root Context: defines shared resources visible to all other web components -->
	
	<context:component-scan base-package="org.zerock.sample"></context:component-scan>
	
		
</beans>

lombok 이용하기 위해 Chef 클래스에 @Data 어노테이션 추가. 추가하면 자동으로 equals(), hashCode(), toString()이 상속됨

※ Chef.java 파일의 아이콘을 보면 S가 붙어 있는데 이는 '스프링이 빈으로 관리한다'라고 생각하면 됨

Restaurant(Chef 클래스를 이용하는 클래스)

package org.zerock.sample;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import lombok.ToString;

@Component
@ToString
public class Restaurant {
	
	@Autowired
	private Chef chef;

}

이렇게하면 주입이 끝난 상태

테스트를 위한 설정

pom.xml에서

			<exclusions>
				<exclusion>
					<groupId>javax.mail</groupId>
					<artifactId>mail</artifactId>
				</exclusion>
				<exclusion>
					<groupId>javax.jms</groupId>
					<artifactId>jms</artifactId>
				</exclusion>
				<exclusion>
					<groupId>com.sun.jdmk</groupId>
					<artifactId>jmxtools</artifactId>
				</exclusion>
				<exclusion>
					<groupId>com.sun.jmx</groupId>
					<artifactId>jmxri</artifactId>
				</exclusion>
			</exclusions>
			<scope>runtime</scope>

위의 코드를 삭제

+ log4j 버전 1.2.17로 변경

+테스트 라이브러리 추가

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>org.zerock</groupId>
	<artifactId>controller</artifactId>
	<name>ex00</name>
	<packaging>war</packaging>
	<version>1.0.0-BUILD-SNAPSHOT</version>
	<properties>
		<java-version>1.6</java-version>
		<org.springframework-version>5.2.7.RELEASE</org.springframework-version>
		<org.aspectj-version>1.6.10</org.aspectj-version>
		<org.slf4j-version>1.6.6</org.slf4j-version>
	</properties>
	<dependencies>
		<!-- Spring -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
			<version>${org.springframework-version}</version>
			<exclusions>
				<!-- Exclude Commons Logging in favor of SLF4j -->
				<exclusion>
					<groupId>commons-logging</groupId>
					<artifactId>commons-logging</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-test</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<version>1.18.36</version>
			<scope>provided</scope>
		</dependency>

		<!-- AspectJ -->
		<dependency>
			<groupId>org.aspectj</groupId>
			<artifactId>aspectjrt</artifactId>
			<version>${org.aspectj-version}</version>
		</dependency>

		<!-- Logging -->
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-api</artifactId>
			<version>${org.slf4j-version}</version>
		</dependency>
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>jcl-over-slf4j</artifactId>
			<version>${org.slf4j-version}</version>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-log4j12</artifactId>
			<version>${org.slf4j-version}</version>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>log4j</groupId>
			<artifactId>log4j</artifactId>
			<version>1.2.17</version>
		</dependency>

		<!-- @Inject -->
		<dependency>
			<groupId>javax.inject</groupId>
			<artifactId>javax.inject</artifactId>
			<version>1</version>
		</dependency>

		<!-- Servlet -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>jsp-api</artifactId>
			<version>2.1</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>

		<!-- Test -->
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.7</version>
			<scope>test</scope>
		</dependency>
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<artifactId>maven-eclipse-plugin</artifactId>
				<version>2.9</version>
				<configuration>
					<additionalProjectnatures>
						<projectnature>org.springframework.ide.eclipse.core.springnature</projectnature>
					</additionalProjectnatures>
					<additionalBuildcommands>
						<buildcommand>org.springframework.ide.eclipse.core.springbuilder</buildcommand>
					</additionalBuildcommands>
					<downloadSources>true</downloadSources>
					<downloadJavadocs>true</downloadJavadocs>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>2.5.1</version>
				<configuration>
					<source>1.8</source>
					<target>1.8</target>
					<compilerArgument>-Xlint:all</compilerArgument>
					<showWarnings>true</showWarnings>
					<showDeprecation>true</showDeprecation>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.codehaus.mojo</groupId>
				<artifactId>exec-maven-plugin</artifactId>
				<version>1.2.1</version>
				<configuration>
					<mainClass>org.test.int1.Main</mainClass>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

테스트 코드 만들기 → 경로는 src/test/java안에 패키지 만들기

package org.zerock.sample;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

import lombok.extern.log4j.Log4j;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml") // 오타 나기 쉬움
@Log4j
public class SampleTests {

	@Test
	public void test1() {
		System.out.println("test1()");
		log.info("test1()");
	}
	
}

해결방법은 https://developer-syubrofo.tistory.com/41

세팅 확인

레스토랑 들고오기

package org.zerock.sample;

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.extern.log4j.Log4j;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml") // 오타 나기 쉬움
@Log4j
public class SampleTests {

	@Autowired
	private Restaurant restaurant; // 주입을 받아야함
	
	@Test
	public void test1() {
		System.out.println("SampleTests test1()");
		log.info("Log.info test1()");
		log.info(restaurant);
	}
	
	
}

package org.zerock.sample;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import lombok.ToString;

@Component
@ToString
public class Restaurant {
	
	@Autowired
	private Chef chef;

}

Restaurant은 만든 것이 없음.

즉 스프링 프레임워크 : 필요한 것 -> 선언 -> 어노테이션, 설정 -> 자동으로 필요한 객체를 만들어 줌

객체 주입 방법

1. 필드 주입

package org.zerock.sample;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import lombok.ToString;

@Component
@ToString
public class Restaurant {

	@Autowired
	private Chef chef;

}

2. Setter 주입

package org.zerock.sample;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import lombok.Setter;
import lombok.ToString;

@Component
@ToString
public class Restaurant {

	@Setter(onMethod_ = {@Autowired})
	private Chef chef;

}

3. 생성자 주입

package org.zerock.sample;

import org.springframework.stereotype.Component;

import lombok.AllArgsConstructor;
import lombok.ToString;

@Component
@ToString
@AllArgsConstructor
public class Restaurant {

	private Chef chef;

}

4. 최근 가장 권장하는 방법(5. 이상 버전부터 가능)

package org.zerock.sample;

import org.springframework.stereotype.Component;

import lombok.RequiredArgsConstructor;
import lombok.ToString;

@Component
@ToString
@RequiredArgsConstructor
public class Restaurant {

	private final Chef chef;

}

final로 된 객체를 찾아서 주입이 됨

스프링 설정 파일 root-context.xml(객체), servlet-context.xml(웹) 두 개가 존재

둘로 나눈 이유는? 스프링 프레임워크는 객체 프레임워크 → 외부 확장 → 외부에 대한 설정을 가져가는 것을 분리

에러가 나면 가장 먼저 확인해야할 것은 무엇일까?

component-scan이 제대로 되는지 확인해야함

package org.zerock.sample;

public class SampleHotel {

}

SampleHotel의 경우 생성만 했고 아무런 어노테이션이 존재하지 않음.
하지만 package org.zerock.sample는 component-scan 대상임 -> 어노테이션을 추가하면 스프링에서 관리를 시작함

어노테이션을 추가하면

package org.zerock.sample;

import org.springframework.stereotype.Component;

import lombok.ToString;

@Component
@ToString
public class SampleHotel {

	private Chef chef;

	public SampleHotel(Chef chef) {
		super();
		this.chef = chef;
	} 
	
}

※최근 들어서 추세는 new 예약어로 객체를 만들지 않음. 이유는 new 예약어로 객체를 생성하면 클래스에 종속적이게 되므로 다른 방법으로 객체를 만드는 방법을 선택한다고 함.

자바스크립트 2

001cloudid — Fri, 27 Dec 2024 12:02:09 +0900

변수(variable)

프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터
↔ 값을 한 번 지정하면 바뀌지 않는 데이터를 상수(constant)
변수 선언 규칙
변수를 사용하려면 변수를 구별할 수 있도록 이름을 붙여 주어야 하는데, 이것을 변수 선언
변수 선언
var || let || const 변수명

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>변수</title>
</head>

<body>

	<script>
        // 변수 선언하기
        var currentYear = 2024;
        var birthYear;
        var age;

        // 변수 한꺼번에 선언
        // var currentYear, birthYear, age;

        birthYear = prompt("태어난 연도를 입력해주세요.(형식 : YYYY)", "");
        age = currentYear - birthYear;
        document.write(currentYear + "년 현재, " + age + "입니다.");

    </script>

</body>

</html>

자료형

컴퓨터가 처리할 수 있는 자료의 형태. 데이터 유형, 데이터 타입, 데이터형이라고도 함

기본 유형(숫자형, 문자열, 논리형), 복합 유형(배열, 객체), 특수 유형(undefined, null)

숫자형(number)

따옴표 없이 숫자로만 표기
ex) var currentYear = 2024;
정수 : 소수점이 없는 숫자
실수 : 소수점이 있는 숫자
ex) var PI = 3.14;
자바 스크립트에서는 실수를 정밀하게 계산하는 것은 적합하지 않음. 예상하지 못한 계살 결괏값이 나올 때가 있음
따라서 정밀하게 숫자를 계한하는 프로그램을 만들 때 주의

문자형(String)

작은 따옴표나 큰 따옴표로 묶은 데이터를 의미
숫자도 따옴표로 묶으면 문자열로 인식
작은 따옴표로 시작한 문자열 데이터는 작은 따옴표로 끝맺음해야함
따옴표를 중복으로 써야할 경우 중복되지 않도록 속성값은 다른 따옴표로 묶어서 표현
ex) document.write("<\span style = 'color : red'>", "hello world", "<\/span>")

논리형(boolean)

참 혹은 거짓의 값으로 표현하는 자료형

undefined

자료형이 정의되지 않았을 때의 데이터 상태를 나타냄
자바스크립트에서 변수를 선언할 때 자료형을 미리 지정하지 않고 값을 할당할 때 결정
변수 선언만 하고 값이 할당되지 않을 자료형
변수에 값이 할당 되지 않았다를 뜻함

null

데이터 값이 유효하지 않은 상태

배열

변수 하나에 값을 여러 개 저장
여러 개의 데이터값을 하나의 배열 이름으로 묶어서 선언

연산자

프로그램에서 특정한 동작을 하도록 지시하는 기호

산술연산자

+, -, *, /, %, ++, --

할당연산자(대입 연산자)

변수에 값을 할당하거나 연산식의 결과를 변수에 저장할 때 사용
=, +=, -=, *=, /=, %=

연결연산자

둘 이상의 문자열을 합쳐서 하나의 문자열로 만드는 연산자
+, ,

비교연산자

피연산자 2개의 값을 비교해서 참 혹은 거짓으로 결괏값을 반환
주로 두 값을 비교하므로 어떠한 조건을 체크할 때 사용
==, ===, !=, !==, <, <=, >, >=
==, === 연산자 비교
== : 피연산자가 서로 같으면 true
=== : 피연산자도 같고 자료형도 같으면 true

논리연산자

true, false를 처리하는 연산자
||, &&, !

조건문

if문

if(조건){
	조건 결과가 true일 때 실행
}

if-else

if(조건){
	조건 결과가 true일 때 실행
} else {
	조건 결과가 false일 때 실행
}

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>조건문</title>
</head>
<body>

	<script>
        var num = prompt("숫자를 입력하세요.");

        if(num%3==0) {
            document.write("3의 배수");
        } else {
            document.write("3의 배수가 아닙니다.");
        }
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>조건문</title>
</head>
<body>

    <script>
        var num = prompt("숫자를 입력하세요.");

        if(num!=null){
            if(num%3==0) {
            document.write("3의 배수");
            } else {
                document.write("3의 배수가 아닙니다.");
            }
        } else {
            document.write("입력이 취소되었습니다.")
        }

    </script>

</body>
</html>

※ 조건 계산을 빠르게 하는 방법

조건이 2가지 이상일 경우 동시에 함께 체크하는 조건식을 만들 때는 첫 번째 조건을 보고 빠르게 판단할 수 있도록 해야함

만약, and(&&) 조건식이 둘 이상일 경우 false가 될 확률이 높은 조건을 첫 번째 조건식으로

or(||) 조건식이 둘 이상일 경우 true가 될 확률이 높은 조건을 첫번째 조건식으로 사용하는 것이 좋음

switch

처리할 명령이 많은 경우 if-else문을 여러 개 사용해서 조건을 확인하는 것보다 switch문이 더 보기 편함

switch(조건)
{
	case 값1 : 명령1
    break;
    case 값2 : 명령2
    break;
    ...
    default : 명령 n
}

중요한 것은 break 작성 유무(자주 까먹어서 값1이 나왔을 때 명령1만 나오면 되는 데 명령2, ... 명령 n까지 실행됨)

또한 default에는 break를 작성하지 않음

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>조건문</title>
</head>
<body>
    <script>
        var switchTest = prompt("관심 언어를 입력해주세요. 1 : html/css, 2 : javascript, 3. python");

        switch(switchTest){
            case "1" : document.write("관심있어하는 언어는 <b>html/css</b> 입니다.");
            break;
            case "2" : document.write("관심있어하는 언어는 <b>javascript</b> 입니다.");
            break;
            case "3" : document.write("관심있어하는 언어는 <b>python</b> 입니다.");
            break;
            default : document.write("잘 못 입력하셨습니다.");
        }
    </script>
</body>
</html>

만약 아래와 같이 break가 없다면?

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>조건문</title>
</head>
<body>
    <script>
        var switchTest = prompt("관심 언어를 입력해주세요. 1 : html/css, 2 : javascript, 3. python");

        switch(switchTest){
            case "1" : document.write("관심있어하는 언어는 <b>html/css</b> 입니다.");
            //break;
            case "2" : document.write("관심있어하는 언어는 <b>javascript</b> 입니다.");
            //break;
            case "3" : document.write("관심있어하는 언어는 <b>python</b> 입니다.");
            //break;
            default : document.write("잘 못 입력하셨습니다.");
        }
    </script>
</body>
</html>

switch에서는 break를 작성해주는게 가장 중요함

반복문

for

초깃값 → 조건 → 명령 → 증감식 순서로 진행

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반복문 for</title>
</head>
<body>

    <script>
        var i;
        var sum = 0;
        for(i = 1; i < 11; i++){
            sum += i;
        }
        document.write("1부터 10까지 더한 합은 : " + sum);
    </script>
</body>
</html>

중첩된 for문

for문 안에 다른 for문을 넣어서 사용할 수 있는데 이를 중첩된 for문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반복문 중첩 for</title>
</head>
<body>
    <script>
        var i;
        var j;
        for(i = 2; i < 10; i++){
            document.write("<h1>"+i+"단</h1>");
            for(j = 1; j < 10; j ++){
                document.write(i+" * "+j+" = " + (i*j)+"<br>");
            }
        }
    </script>
</body>
</html>

while문

while
조건이 참인 동안 명령을 반복
do-while
조건이 마지막에 붙는데, do문은 일단 명령을 한 번 실행 한 후 while 문에서 조건을 체크
조건이 false라도 최소 한 번은 실행

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반복문 while</title>
</head>
<body>

    <script>
        var num = prompt("숫자를 입력해주세요");
        var result = 1;
        var first = 1;

        while(first<=num){
            result *= first;
            first++;
        }
        document.write(num + "! =  " + result);

    </script>
</body>
</html>

continue

주어진 조건에 해당하는 값을 만나면 해당 반복문을 건너뜀. 반복문의 맨 앞으로 되돌아가 다음 과정으로 넘어감

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>continue</title>
</head>
<body>
    <script>
        var i;
        var sum = 0;

        for(i = 1; i <= 10; i++){
            if(i%2==0){
                continue;
            }
            sum +=i;
        }
        document.write("1부터 10까지의 홀수의 합은 " + sum);
    </script>
</body>
</html>

자바스크립트 1

001cloudid — Thu, 26 Dec 2024 14:59:25 +0900

자바스크립트가 하는 일

웹에서 자바스크립트는 동적이고 인터렉티브한 기능을 구현하는데 사용

DOM 조작 : HTML 문서의 구조를 실시간으로 수정하고 업데이트
이벤트 처리 : 사용자의 입력을 처리하고 이에 반응
비동기 요청(AJAX) : 서버와 비동기적으로 데이터를 주고받아 페이지 새로고침 없이 동적으로 콘텐츠를 업데이트
애니메이션 : 페이지 내 요소에 애니메이션 효과를 추가
클라이언트 측 유효성 검사 : 사용자가 입력한 데이터를 실시간으로 검증하여 오류를 미리 감지
상태 관리 및 로직 처리 : 페이지 내 상태를 관리하고, 사용자 인터페이스에 맞게 동적인 로직을 처리

즉, 웹 페이지를 더 동적, 반응형으로 만들어 사용자 경험을 향상시키는 핵심적인 역할

웹 브라우저와 자바스크립트

웹 문서 안에서 <\script> 태그로 자바스크립트를 작성

<\script>태그는 웹 문서 안의 어디서든 위치할 수 있고 삽입한 위치 그자리에서 바로 실행
하나의 문서에서 여러 개 사용
HTML, CSS와 달리 영어 대소문자를 구별
변수의 이름이나 함수를 지정할 때 영어 대소문자를 정확하게 구별해야함

NewFile01.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>글자색 바꾸기</title>
<style>
	body{text-align: center;}
	heading{color: yellow;}
	text{color: darkslategray; font-size: 20px;}
</style>
</head>
<body>

<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해보세요</p>

<script>
//	var heading = document.querySelector("#heading");
//	var heading = document.getElementById("heading");
	var heading = document.querySelector("h1");
	heading.onclick = function(){
		heading.style.color="red";
	}
</script>
</body>
</html>

※ 위의 코드에서 document.querySelector()와 getElementById()를 바꿔서 사용할 수 있으나 두 메서드는 차이가 존재함

document.querySelector()

CSS 선택자를 이용해서 요소를 선택
주어진 선택자에 맞는 첫 번째 요소만 반환
CSS 스타일의 선택자 문법을 그대로 사용할 수 있어, 아이디, 클래스, 태그 이름, 속성 등 다양한 선택자가 가능

document.getElementById()

특정 id를 가진 요소를 선택
id는 페이지 내에서 유일해야 하기 때문에, 항상 단 하나의 요소만 반환
document.querySelector()보다 속도가 빠름. id가 유일함을 보장하기 때문에 내부적으로 더 간단하게 동작

외부 스크립트 파일로 연결

CSS와 마찬가지로 자바스크립트 소스도 따로 파일로 저장한 후 웹 문서에 연결해서 사용할 수 있음

이는 웹 문서 안에 직접 자바스크립트 소스가 드러나지 않고 HTML 태그와 CSS만 유지할 수 있어 소스가 깔끔해짐

js/NewFile02.js

/**
 * 
 */
	var heading = document.getElementById("heading");
//	var heading = document.querySelector("h1");
	heading.onclick = function(){
		heading.style.color="red";
	}

NewFile02.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>글자색 바꾸기(외부스크립트)</title>
<style>
	body{text-align: center;}
	heading{color: yellow;}
	text{color: darkslategray; font-size: 20px;}
</style>
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해보세요</p>

<script src="js/NewFile02.js"></script>
</body>
</html>

웹 브라우저에서 스크립트 해석 과정

1행의 !DOCTPYE html을 보고 웹 문서라는 것을 알게됨.
html태그 사이의 내용을 HTML 표준에 맞춰 읽기 시작
HTML 태그와 순서와 포함 관계 확인
head 태그 사이, body 태그 사이에 어떤 태그가 있는지 확인.
태그 간의 관계는 어떻게 되어 있는지 등을 분석
style 태그의 스타일 정보 분석
16행 script 태그를 만나면 웹 브라우저 안에 포함된 자바스크립트 해석기에게 스크립트 소스를 넘겨 자바스크립트 해석기가 해석
2,3에서 분석한 정보에 따라 웹 브라우저 화면에 표시
자바스크립트를 실행해서 결과를 화면에 표시

용어와 기본 입출력방법

표현식과 명령문

표현식
연산식뿐만 아니라 실제 값, 함수를 실행하는 것을 포함
어떤 값을 만들어 낼 수 있다면 모두 식이 될 수 있고, 식은 변수에 저장
명령문
끝에는 세미콜론을 붙여 구분

입출력 방법

알림창 : 가장 많이 사용하는 간단한 대화상자 알림창을 열어 메시지 표시

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>간단한 입출력</title>
</head>

<body>

     <script>
        alert('alert() 알림창')
    </script>

</body>

</html>

확인창 : 사용자가 [확인], [취소] 버튼 중에서 직접 클릭하여 사용자가 어떤 버튼을 눌렀는지 결과를 번수에 저장한 후 그 값에 따라 프로그램에서 처리

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>간단한 입출력 confirm()</title>
</head>

<body>
    <script>
        var answer = confirm("변경하시겠습니까?");
        document.getElementById("confirmAnswer").textContent = answer ? "확인" : "취소";
    </script>



</body>

</html>

프롬프트창 : 텍스트 필드 안에 간단한 메시지를 입력할 수 있으며 그 내용을 가져와 프로그램에서 사용할 수 있음

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>간단한 입출력 prompt()</title>
</head>
<body>
    프롬프트 입력 : <span id="promptAnswer"></span>

    <script>
        var name = prompt("이름을 입력해주세요.","홍길동");
        document.getElementById("promptAnswer").textContent = name;
    </script>
    
</body>
</html>

document.write() : 브라우저 화면에서 결과값을 확인하는 용도로 사용. 웹 문서에서 ()안의 내용을 표시하는 명령문. document.write()의 괄호 안에는 실제 웹 브라우저 화면에 표시할 내용이나 어떤 결과값이 저장된 변수를 넣을 수 있음

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>간단한입출력 document.write()</title>
</head>

<body>
    브라우저 화면에서 결과값을 확인하는 용도로 사용<br>
    웹 문서에서 ()안의 내용을 표시하는 명령문<br>
    document.write()의 괄호 안에는 실제 웹 브라우저 화면에 표시할 내용이나 어떤 결과값이 저장된 변수를 넣을 수 있음<br>
    document.write("")결과<br>
    <script>
        document.write("<h1>안녕하세요.</h1>");

    </script>
</body>

</html>

예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실습</title>
</head>
<body>
    <script>
        var name = prompt("이름을 입력해주세요.");
        document.write("<h1>안녕하세요</h1>");
        document.write(`<b>`+name+`</b>`+ "님 안녕하세요");
    </script>
</body>
</html>

console.log() : 괄호 안의 내용을 콘솔 창에 표시. 콘솔 창은 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>간단한입출력 console.log()</title>
</head>

<body>

    <script>
        var name = prompt("이름을 입력해주세요.");
        console.log("입력한 이름은 " + name + "입니다.");
    </script>
</body>

</html>

※ VS Code에서 Git을 사용하여 로컬 프로젝트를 GitHub(Git 리포지토리)에 올리기

github에 새 리포지토리를 생성한 후

터미널 열기(Ctrl + `)
Git 초기화 : git init
원격 리포지토리 추가 git remote add origin github주소
변경 사항 스테이지 : git add .
커밋 : git commit -m "커밋사항"
로컬 리포지토리에서 GitHub 리포지토리로 푸시 : git push -u origin master

1차 프로젝트 추가 - 암호화2

001cloudid — Mon, 23 Dec 2024 17:27:40 +0900

구현하려고 했던 것

회원 가입 시 사용자가 입력한 평문 비밀번호를 암호화하여 DBMS Member 테이블의 pw 컬럼에 저장하고, 로그인 시 회원가입 시 입력한 비밀번호로 로그인 성공

발생한 문제

DBMS Member 테이블에 pw컬럼에 암호화된 비밀번호가 입력, 하지만 로그인 시 회원가입 시 입력한 비밀번호로 로그인 실패, 암호화 된 비밀번호를 입력해야 로그인 성공

문제 해결을 위한 접근

로그인 할 때 사용자가 입력한 평문 비밀번호와 DB에 저장된 암호화된 비밀번호를 직접 비교.

Spring Security의 PasswordEncoder 인터페이스에서 제공하는 matches() 메소드를 사용

boolean matches(CharSequence rawPassword, String encodedPassword);

matches() : 입력받은 평문 비밀번호와 DB에 저장된 암호화된 비밀번호를 비교하여 두 값이 일치하는지 확인

rawPassword : 사용자가 입력한 평문 비밀번호

encodedPassword : DB에 저장된 암호화 비밀번호. 보통 encode() 메소드를 통해 암호화된 후 저장

MemberService.java

기존 로그인 시 userCheck() 메소드

	public MemberDTO userCheck(MemberDTO memberDTO) {
		System.out.println("MemberService userCheck()");
		return memberDAO.userCheck(memberDTO);
	}

MemberService 에서 로그인 처리 과정 로직을 수정

	public MemberDTO userCheck(MemberDTO memberDTO) {
		System.out.println("MemberService userCheck()");
		
		 // DB에서 회원 정보를 가져옴
        MemberDTO encodedPassword = memberDAO.userCheck(memberDTO);

        // DB에서 가져온 암호화된 비밀번호와 비교
        if (encodedPassword != null && passwordEncoder.matches(memberDTO.getPw(), encodedPassword.getPw())) {
            return encodedPassword;
        }
        return null;
	}

MemberMapper.xml

기존 쿼리

	<select id="userCheck" resultType="com.itwillbs.domain.MemberDTO">
		select * 
		from member
		where id = #{id} and pw = #{pw} 
	</select>

수정된 쿼리

	<select id="userCheck" resultType="com.itwillbs.domain.MemberDTO">
		select * 
		from member
		where id = #{id}
	</select>

쿼리에서 pw 부분이 없어져야 함. 비밀번호를 직접 비교하는 방식이 아닌 Spring Security의 PasswordEncoder를 사용하여 암호화된 비밀번호를 비교하기 때문임. 평문 비밀번호를 DB 쿼리에서 바로 비교하지 않고, 암호화된 값과 비교하는 방식으로 동작함.

암호화된 비밀번호 입력

평문 암호입력(1234)

회원가입 시 비밀번호 암호화 완료

회원 수정 → 비밀 번호 변경 시 마찬가지로 암호화를 해줘야 함

MemberService.java

기존 회원 정보 메소드

	// 회원 정보 수정
	public void updateMember(MemberDTO memberDTO) {
		System.out.println("MemberService updateMember()");
		memberDAO.updateMember(memberDTO);
	}

수정된 회원 정보 메소드

	// 회원 정보 수정
	public void updateMember(MemberDTO memberDTO) {
		System.out.println("MemberService updateMember()");
		
		// 비밀번호가 변경되었으면 암호화
		if(memberDTO.getPw() != null && !memberDTO.getPw().isEmpty()) {
			String encodedPassword = passwordEncoder.encode(memberDTO.getPw());
			memberDTO.setPw(encodedPassword);
		}

		memberDAO.updateMember(memberDTO);
	}

또 다른 문제 사항

1. 기존에 회원 가입되어 있던(암호화를 하기 전) 회원들의 로그인이 되지 않음

→ 해결 방법

MemberService의 userCheck() 메소드에 조건문을 주어 기존 사용자들도 로그인이 가능하게 구현

MemberService.java

	public MemberDTO userCheck(MemberDTO memberDTO) {
		System.out.println("MemberService userCheck()");
		
		 // DB에서 회원 정보를 가져옴
        MemberDTO encodedPassword = memberDAO.userCheck(memberDTO);

        // DB에서 가져온 암호화된 비밀번호와 비교
        if (encodedPassword != null && passwordEncoder.matches(memberDTO.getPw(), encodedPassword.getPw())) {
            return encodedPassword;
        }
        return null;
	}

위 코드를 아래 코드로 수정

	public MemberDTO userCheck(MemberDTO memberDTO) {
		System.out.println("MemberService userCheck()");
		// DB에서 회원 정보를 가져옴
		MemberDTO encodedPassword = memberDAO.userCheck(memberDTO);
		// DB에서 가져온 비밀번호가 평문인 경우
		if (encodedPassword != null && !encodedPassword.getPw().startsWith("{bcrypt}")) { // 기존 비밀번호가 평문인 경우
			// 기존 비밀번호를 암호화하여 업데이트
			String encodedPw = passwordEncoder.encode(encodedPassword.getPw());
			encodedPassword.setPw(encodedPw);
			// 암호화된 비밀번호로 업데이트 (DB에 반영)
			memberDAO.updateMemberPassword(encodedPassword);
		}
		// DB에서 가져온 암호화된 비밀번호와 입력된 비밀번호를 비교
		if (encodedPassword != null && passwordEncoder.matches(memberDTO.getPw(), encodedPassword.getPw())) {
			return encodedPassword;
		}
		return null; // 로그인 실패
	}

MemberDAO.java

	public void updateMemberPassword(MemberDTO memberDTO) {
	    System.out.println("MemberDAO updateMemberPassword()");
	    // 비밀번호를 암호화된 형태로 DB에 업데이트
	    sqlSession.update(namespace + ".updateMemberPassword", memberDTO);
	}

MemberMapper.xml

	<update id="updateMemberPassword" parameterType="com.itwillbs.domain.MemberDTO">
		update member
		set pw = #{pw}
		where id = #{id}
	</update>

코드를 수정하면

기존의 평문 비밀번호로 로그인을 하면 자동으로 암호화된 암호로 변경됨

1-1 다음 문제 사항

비밀번호가 암호화가 되지 않은 회원이 로그인 했을 때 평문 비밀번호가 암호화 비밀번호로 변경이 됨

다만, 비밀번호가 변경 된 후 로그아웃 후 로그인 할 때 평문 비밀번호, 암호화된 비밀번호로 로그인이 안됨

또 다른 문제 사항 2

비밀번호 찾기에서 암호화된 비밀번호는 평문으로 된 비밀번호로 복호화가 불가능하므로 비밀번호 찾기를 시도하고 이후 비밀번호 바꿀 수 있게 함

findPW.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>공티 새 비밀번호 설정</title>
<style type="text/css">
#idForm {
	max-width: 400px;
	margin: auto;
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
	background-color: blue;
	color: white;
	padding: 10px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	width: 100px;
}
</style>
</head>
<jsp:include page="../inc/top.jsp" />
<body>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<div id="idForm">
		<form action="${pageContext.request.contextPath}/main/findPwPro" method="post">
			<h2>새로운 비밀번호</h2>
			<input type="hidden" name="id" value="${memberDTO2.id}">
			새로운 비밀번호 <input type="password" name="pw" id="pw"><br>
			비밀번호 확인 <input type="password" id="pw2"><br>
			<center>
				<button type="submit" onclick="return validatePw()">확인</button>
				<button type="reset" value="취소" class="cancel"
					onclick="history.go(-2)">돌아가기</button>
			</center>
		</form>
	</div>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<jsp:include page="../inc/bottom.jsp" />
	
	<script type="text/javascript">
		// 비밀번호 확인 함수
		function validatePw(){
			var pw = document.getElementById("pw").value;
			var pw2 = document.getElementById("pw2").value;
			
			if(pw !== pw2){
				alert("입력한 비밀번호가 다릅니다.");
				document.getElementById("pw").focus();
				return false;
			}
			return true;
		}
	
	</script>
</body>
</html>

pwChange.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>공티 비밀번호 변경 완료</title>
<style type="text/css">
#idForm {
	max-width: 400px;
	margin: auto;
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
	background-color: blue;
	color: white;
	padding: 10px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	width: 100px;
}
</style>
</head>
<jsp:include page="../inc/top.jsp" />
<body>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<div id="idForm">
		<form action="${pageContext.request.contextPath}/main/findPwPro" method="post">
			<h2>비밀번호가 성공적으로 변경되었습니다.</h2>
			<center>
				<a href="${pageContext.request.contextPath}/main/login">로그인 페이지로 가기</a>
			</center>
		</form>
	</div>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<jsp:include page="../inc/bottom.jsp" />

</body>
</html>

MemberController.java

@PostMapping("/main/findPW")
public String searchPWPro(MemberDTO memberDTO, Model model) {
System.out.println("MemberController searchPWPro()");
MemberDTO memberDTO2 = new MemberDTO();
memberDTO2 = memberService.userCheckPW(memberDTO);
if (memberDTO2 != null) {
model.addAttribute("memberDTO2", memberDTO2);
return "/main/findPW";
} else {
return "/main/msg_search";
}
}

@PostMapping("/main/findPwPro")
public String resetPwPro(MemberDTO memberDTO) {
System.out.println("MemberController resetPwPro()");
memberService.updateMemberPassword(memberDTO);
return "/main/pwChange";
}

MemberService.java

	public void updateMemberPassword(MemberDTO memberDTO) {
		System.out.println("MemberService updateMemberPassword()");
		memberDAO.updateMemberPassword(memberDTO);
	}

비밀번호가 암호화가 되지 않은 회원 비밀번호 찾기

qwer로 변경

변경 후 DB확인

비밀번호가 변경됨. 하지만 새로운 비밀번호 qwer로 로그인을 시도했을 때 로그인이 안됨. 암호화된 비밀번호로 로그인이 되는 문제

MemberService.java

	public MemberDTO userCheck(MemberDTO memberDTO) {
		System.out.println("MemberService userCheck()");
		
		System.out.println("평문으로 입력한 비밀번호 : " + memberDTO.getPw());
	
		// DB에서 회원 정보를 가져옴
		MemberDTO encodedPassword = memberDAO.userCheck(memberDTO);
		// DB에서 가져온 비밀번호가 평문인 경우
		if (encodedPassword != null && !encodedPassword.getPw().startsWith("{bcrypt}")) { // 기존 비밀번호가 평문인 경우
			return encodedPassword;
		}
		// DB에서 가져온 암호화된 비밀번호와 입력된 비밀번호를 비교
		if (encodedPassword != null && passwordEncoder.matches(memberDTO.getPw(), encodedPassword.getPw())) {
			return encodedPassword;
		}
		return null; // 로그인 실패
	}

1차 프로젝트 추가 - 암호화1

001cloudid — Sun, 22 Dec 2024 17:01:21 +0900

만들어진 프로젝트에 스프링 시큐리티의 암호화를 적용하기로 함

1. 라이브러리 추가

기존 프로젝트 스프링 프레임워크의 버전은 4.3.8이었으나 Spring Security를 이용할때 4.x 버전에 버그가 있다고 하여,

스프링 프레임워크의 버전을 5.0.7로 변경한 후 Maven Dependencies에 추가할 라이브러리를 pom.xml에 작성해주는 것으로부터 시작

pom.xml

(...생략...)

	<properties>
		<java-version>11</java-version>
		<org.springframework-version>5.0.7.RELEASE</org.springframework-version> <!-- 스프링 시큐리티 4.버전에서 버그가 있음 -->
		<org.aspectj-version>1.6.10</org.aspectj-version>
		<org.slf4j-version>1.6.6</org.slf4j-version>
	</properties>
	<dependencies>

		<!-- Spring Security 적용 추가 -->
		<!-- Spring Security Core (암호화 관련 기능 제공) -->
		<dependency>
			<groupId>org.springframework.security</groupId>
			<artifactId>spring-security-core</artifactId>
			<version>${org.springframework-version}</version> 
		</dependency>

		<!-- Spring Security Crypto (암호화 관련 기능 제공) -->
		<dependency>
			<groupId>org.springframework.security</groupId>
			<artifactId>spring-security-crypto</artifactId>
			<version>${org.springframework-version}</version> 
		</dependency>
		<!-- Spring Security 적용 끝 -->
        
(...생략...)

BCryptPasswordEncoder를 사용할 수 있도록 설정을 추가 방법

1. root-context.xml과 servlet-context.xml 파일을 통해 필요한 설정

2. Java Config 기반의 설정

둘 중 하나로 해야함

web.xml에 대한 추가 설정은 따로 하지 않음. 실제 암호화 설정은 Spring 설정 파일(root-context.xml 또는 servlet-context.xml에서 다룸)

2. root-context.xml

root-context.xml에서 PasswordEncoder를 빈으로 등록하고 필요한 서비스 클래스에서 이를 사용할 수 있도록 주입받을 수 있음

root-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd">

	<!-- BCryptPasswordEncoder 빈 등록 -->
	<bean id="passwordEncoder" class="org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder" />

	(...이하 생략...)
    
</beans>

3. MemberService.java

PasswordEncoder를 주입하는 곳은 비즈니스 로직을 담당하는 서비스 클래스에 주입받음.

즉, MemberService에 주입받을 수 있도록해야함

MemberService.java

package com.itwillbs.service;

(...생략...)

@Service
public class MemberService {

	@Inject
	private MemberDAO memberDAO;
	
	private final PasswordEncoder passwordEncoder;
	
	@Autowired
	public MemberService(PasswordEncoder passwordEncoder) {
		this.passwordEncoder = passwordEncoder;
	}

(...생략...)

	// ============회원 가입
	public void insertMember(MemberDTO memberDTO) {
		System.out.println("MemberService insertMember()");
		
		// 1. 평문 비밀번호를 암호화
		String encodedPassword = passwordEncoder.encode(memberDTO.getPw());
		
		// 2. 암호화된 비밀번호를 memberDTO로 저장
		memberDTO.setPw(encodedPassword);
		
		// 3. 암호화된 비밀번호와 함께 회원 데이터를 DAO로 전달
		memberDAO.insertMember(memberDTO);
	}

(...생략...)

}

이후 회원 가입

바로 오류가 발생됨. 오류가 발생된 이유는 암호화해서 DB에 값을 넣을 때 데이터크기가 맞지 않아서 생기는 문제.

비밀번호는 20자인데 암호화된 것은 20자를 넘어간다는 이야기인듯.

따라서 컬럼 타입의 크기를 수정할 필요가 있음

정확히 어느정도의 크기인지 몰라서 100으로 변경

다시 회원가입

암호화는 성공적으로 된 것을 알 수 있음

회원가입 시 했던 비밀번호를 입력하고 로그인을 시도

암호화된 비밀번호를 입력 시

로그인이 성공한다. 평문 암호를 입력했을 때 로그인이 될 수 있게 구현해야하는데, 뭔가 잘못되었다...

또 다른 테스트를 위해서 다른 아이디 를 만들어보았다

BCrypt로 암호화된 비밀번호는 60자로 현재 varchar(100)을 해놨는데 이는 불필요한 자원을 사용할 수 있으므로 수정이 필요한 것 같다.

남은 부분

1. 암호화 완료

2. 부트스트랩을 이용해 화면 수정

백엔드 엔드(Back-End)

001cloudid — Wed, 18 Dec 2024 17:19:35 +0900

백엔드 개발이 무엇인가에 대한 질문을 받았다. '보이지 않는 곳에서 시스템의 중요한 역할을 하는 것'이라고 답하였다. 과연이게 맞는 것일까

백엔드(Back-end)

백엔드?

웹이나 앱에서 사용자의 행동을 처리하고, 정보를 저장, 관리, 전달하며, 서버와 데이터베이스를 관리
서버나 데이터베이스, API 개발을 맡음
즉, 웹 사이트의 뒷단에서 정보를 처리하고 저장하는 역할을 맡음
예) 회원가입, 글쓰기

백엔드의 역할과 기능을 제대로 알지 못하고 있었고 그에 따라 전체적인 방향성에 문제가 생겼다는것을 깨달음..

컬렉션 프레임워크(1) Map

001cloudid — Tue, 3 Dec 2024 13:43:39 +0900

컬렉션 프레임워크는 모든 자바 교재를 보면 뒷부분에 나오는 것이지만 생각보다 자주 까먹게 되는 부분인 것 같다. 따라서 정리가 필요할 것 같다는 생각이 들었다. 자주 사용하려고 노력도 필요하지만 언제, 어떤 식으로 사용되는지 등을 다시 알아보는 시간을 가져고 보자 한다.

Map 정의 및 특징

컬렉션 프레임워크에서 키(Key)와 값(Value) 쌍으로 데이터를 저장하고 관리하는 자료 구조.
데이터를 빠르게 검색, 수정, 삭제할 수 있는 기능을 제공
키는 유일해야 함. 동일한 키에 대해 여러 값을 저장할 수 없음
값은 중복이 가능함. 같은 값은 여러 키에 중복될 수 있음
null의 키와 값 Map의 일부에서는 허용됨

정의는 쉽게 키-값 쌍으로 저장된 구조로 간단히 정리가 되는데 map은 언제 사용할까? 라는 의문이 들었다.

Map을 사용해야 하는 상황

키와 값의 관계가 필요할 때
키-값 쌍으로 데이터를 저장하므로, 각 키에 대한 고유한 값을 매핑해야 할 때 유용
빠른 데이터 조회가 필요할 때
내부적으로 해시 테이블을 사용하거나 이진 트리 구조를 사용하여 데이터를 저장. 이로 인해 키를 기반으로 한 빠른 조회가 가능
키의 유일성이 필요한 경우
Map을 가장 잘 나타낸 것이 아이디-비밀번호라고 생각함. 아이디는 중복을 허용하지 않지만, 비밀번호는 중복이 가능하기 때문. 즉 아이디가 키, 비밀번호가 값
단, Map의 경우 동일 키에 대한 값을 덮어쓰게 됨.
중복된 키를 저장할 수 없기 때문에 데이터의 무결성을 보장
HashMap과 TreeMap
HashMap 키의 순서가 중요하지 않은 경우
TreeMap 키의 순서가 중요하고, 자동으로 정렬된 순서
null
키-값 모두 null을 허용할 수 있음

Map 인터페이스의 주요 메소드

put(K key, V value)
지정한 키와 값을 Map에 추가함. 단, 동일한 키가 이미 존재하면 기존 값을 덮어씀
get(Object key)
지정된 키에 해당하는 값을 반환. 키가 없으면 null을 반환
remove(Object key)
지정된 키에 해당하는 항목을 제거
containsKey(Object key)
지정한 키가 Map에 존재하는지 여부를 확인
size()
Map에 저장된 키-값 쌍의 수를 반환
isEmpty()
Map이 비어있는지 확인
clear()
Map에 저장된 모든 항목을 제거

Map은 인터페이스이다. 그렇다면 이를 구현해서 사용해야 하는데 구현한 것들은 뭐가 있을까?

Map을 구현한 클래스

HashMap
가장 널리 사용되는 Map 구현체
해시 테이블을 기반으로 빠른 조회 성능일 제공
순서를 보장하지 않음. 데이터는 삽입 순서와 관계없이 저장
null 키와 null 값 허용

Map<String, Integer> map = new HashMap<>();
map.put("apple", 1);
map.put("banana", 2);
===============================================
import java.util.HashMap;
import java.util.Map;

public class 맵 {
    public static void main(String[] args) {
        // HashMap을 생성 (학생 ID를 키로, 성적을 값으로 저장)
        Map<Integer, String> studentGrades = new HashMap<>();
        
        // 데이터를 삽입 (학생 ID, 성적)
        studentGrades.put(101, "A");
        studentGrades.put(102, "B");
        studentGrades.put(103, "A+");
        
        // 성적 조회
        System.out.println("학생 101의 성적: " + studentGrades.get(101)); // A
        
        // 특정 학생 ID가 존재하는지 확인
        System.out.println("학생 102의 성적이 있는지 확인: " + studentGrades.containsKey(102)); // true
        
        // 학생 삭제
        studentGrades.remove(103);
        System.out.println("학생 103 삭제 후: " + studentGrades);
        
        // Map의 크기 확인
        System.out.println("학생 수: " + studentGrades.size());
        
        // 모든 항목 순회
        for (Map.Entry<Integer, String> entry : studentGrades.entrySet()) {
            System.out.println("학생 ID: " + entry.getKey() + ", 성적: " + entry.getValue());
        }
    }
}

TreeMap
키를 자동으로 정렬(기본적으로 오름차순)
null키 허용하지 않음

Map<String, Integer> map = new TreeMap<>();
map.put("apple", 1);
map.put("banana", 2);
map.put("orange", 3);

LinkedHashMap
HashMap처럼 데이터를 해시 테이블에 저장하지만, 삽입 순서를 유지
HashMap처럼 빠른 조회 성능을 제공
삽입 순서대로 데이터를 순회할 수 있음
null키와 null 값 허용

Map<String, Integer> map = new LinkedHashMap<>();
map.put("apple", 1);
map.put("banana", 2);

이 외에 ~~HashMap으로 된 클래스가 있지만 프로그래밍을 할 때는 HashMap을 코딩 테스트할 때 LinkedHashMap을 사용하는 경우를 보았다.

정리

데이터의 키와 쌍을 이루는 경우에 사용하며 Map을 사용하면 효율적으로 데이터 처리와 관리가 가능

자바 배열과 배열 정렬

001cloudid — Mon, 2 Dec 2024 15:04:30 +0900

프로그래머스 Lv0 ~ Lv1을 풀면서 느낀 점은 배열 정렬을 자주 사용한다. 그만큼 배열 정렬은 다양한 상황(데이터 처리나 알고리즘 구현)에서 필요한 기능이다. 하지만 매번 헷갈려서 검색으로 해결했다. 그렇다 보니 한 번 풀고 나면 또 금방 잊어버리는 경우가 많았다. 매 번 검색하는 것도 번거롭고 내 나름대로 정리하고 이것을 머릿속에 넣어두기 위해 정리하고자 한다.

배열

자바에서 배열은 여러 종류로 나누어짐. 배열은 데이터를 연속적으로 저장하는 자료 구조로, 특정한 데이터 타입에 맞춰 고정된 크기를 가짐. 배열의 종류로는 기본 배열(문자 배열, 객체 배열), 다차원 배열(2차원 이상 배열), 가변 배열이 있음.

1. 기본 배열

단일 데이터 타입(int, char, String 등)의 값들을 하나의 배열로 저장. 배열의 크기는 고정되며 선언 시 배열의 크기를 지정

public class 배열 {
    public static void main(String[] args) {
        int[] numbers = {1, 2, 3, 4, 5}; //배열 선언과 초기화
        
        // 배열 출력
        for (int i = 0; i < numbers.length; i++) {
            System.out.println(numbers[i]);
        }
    }
}

2. 다차원 배열

배열의 배열로, 여러 개의 1차원 배열을 요소로 가진 배열. 2차원 이상 배열을 의미.

public class 이차원배열 {
    public static void main(String[] args) {
        // 2차원 배열 선언 및 초기화
        int[][] matrix = {
            {1, 2, 3},
            {4, 5, 6},
            {7, 8, 9}
        };
        
        // 2차원 배열 출력
        for (int i = 0; i < matrix.length; i++) {
            for (int j = 0; j < matrix[i].length; j++) {
                System.out.print(matrix[i][j] + " ");
            }
            System.out.println();
        }
    }
}

public class 삼차원배열 {
    public static void main(String[] args) {
        // 3차원 배열 선언 및 초기화
        int[][][] cube = {
            {{1, 2}, {3, 4}},
            {{5, 6}, {7, 8}}
        };
        
        // 3차원 배열 출력
        for (int i = 0; i < cube.length; i++) {
            for (int j = 0; j < cube[i].length; j++) {
                for (int k = 0; k < cube[i][j].length; k++) {
                    System.out.print(cube[i][j][k] + " ");
                }
                System.out.println();
            }
        }
    }
}

3. 가변 배열(ArrayList)

배열 크기를 동적으로 변경할 수 있는 배열 형태. 내부적으로 배열을 사용하지만, 배열의 크기가 자동으로 증가하거나 감소하는 기능을 제공

import java.util.*;

public class 가변배열 {
    public static void main(String[] args) {
        // ArrayList 선언
        ArrayList<Integer> numbers = new ArrayList<>();
        
        // 값 추가
        numbers.add(1);
        numbers.add(2);
        numbers.add(3);
        
        // 출력
        for (int num : numbers) {
            System.out.println(num);
        }
    }
}

Arrays 클래스

배열을 다룰 때 자주 사용되는 메소드들은 Arrays 클래스에 有. 배열 정렬, 검색, 복사, 비교 등의 작업을 효율적으로 처리할 수 있음

1. 배열 길이

배열의 길이(배열의 요소 개수)를 구하려면 length 속성을 사용. 배열의 크기는 고정되므로, 배열이 생성된 후 변경할 수 없음

※ length와 length() 차이

length와 length() 차이

2. 배열 복사( Arrays.copyOf(), System.arraycopy() )

import java.util.Arrays;

public class ArrayCopyEx {
    public static void main(String[] args) {
        int[] original = {1, 2, 3, 4, 5};
        int[] copy = Arrays.copyOf(original, original.length);  // 배열을 동일한 크기로 복사
        
        System.out.println("복사된 배열: " + Arrays.toString(copy));  // [1, 2, 3, 4, 5]
    }
}

public class SystemArrayCopyEx {
    public static void main(String[] args) {
        int[] original = {1, 2, 3, 4, 5};
        int[] copy = new int[5];
        
        // System.arraycopy(원본 배열, 원본 시작 인덱스, 복사 배열, 복사 시작 인덱스, 복사할 길이)
        System.arraycopy(original, 0, copy, 0, original.length);
        
        System.out.println("복사된 배열: " + Arrays.toString(copy));  // [1, 2, 3, 4, 5]
    }
}

※ 배열을 부분적으로 복사( Arrays.copyOfRange() )

import java.util.Arrays;

public class 배열부분적복사 {
    public static void main(String[] args) {
        int[] original = {1, 2, 3, 4, 5};
        
        // 배열의 2번째부터 4번째까지 복사
        int[] copied = Arrays.copyOfRange(original, 1, 4);
        
        System.out.println("복사된 배열: " + Arrays.toString(copied));  // [2, 3, 4]
    }
}

3. 배열 정렬( Arrays.sort() )

숫자, 문자, 문자열 유니코드 순서대로 오름차순 정렬

import java.util.Arrays;

public class 배열정렬 {
    public static void main(String[] args) {
        int[] numbers = {5, 3, 8, 1, 2};
        
        // 배열 오름차순 정렬
        Arrays.sort(numbers);
        
        System.out.println("정렬된 배열: " + Arrays.toString(numbers));  // [1, 2, 3, 5, 8]
    }
}

4. 배열 역순 정렬( Arrays.sort() + Collections.reverseOrder() )

import java.util.Arrays;
import java.util.Collections;

public class 내림차순정렬 {
    public static void main(String[] args) {
        Integer[] numbers = {5, 3, 8, 1, 2};  // Integer 객체 배열
        Arrays.sort(numbers, Collections.reverseOrder());  // 내림차순 정렬
        
        System.out.println("내림차순 정렬된 배열: " + Arrays.toString(numbers));  // [8, 5, 3, 2, 1]
    }
}

5. 배열 비교 ( Arrays.equals() )

배열이 동일한 값을 가지고 있는지 확인할 수 있음

import java.util.Arrays;

public class 배열내용비교 {
    public static void main(String[] args) {
        int[] arr1 = {1, 2, 3};
        int[] arr2 = {1, 2, 3};
        
        // 배열 내용 비교
        boolean isEqual = Arrays.equals(arr1, arr2);
        
        System.out.println("배열이 같은가? " + isEqual);  // true
    }
}

6. 배열을 문자열로 변환 ( Arrays.toString() )

import java.util.Arrays;

public class 배열을문자열로변환 {
    public static void main(String[] args) {
        int[] numbers = {1, 2, 3, 4, 5};
        
        // 배열을 문자열로 변환
        String arrayStr = Arrays.toString(numbers);
        
        System.out.println("배열을 문자열로 변환: " + arrayStr);  // [1, 2, 3, 4, 5]
    }
}

7. 배열 검색 ( Arrays.binarySearch() )

정렬된 배열에서 특정 값을 검색할 때 사용. 반드시 정렬이 되어 있어야함. 이진 탐색을 기반

import java.util.Arrays;

public class 배열검색 {
    public static void main(String[] args) {
        int[] numbers = {1, 2, 3, 4, 5};
        
        // 이진 탐색
        int index = Arrays.binarySearch(numbers, 3);
        
        System.out.println("값 3의 인덱스: " + index);  // 2
    }
}

함께 볼만한 자료 : https://velog.io/@dlzlqlzl/Java-ArrayList-%EC%A0%95%EB%A0%AC%ED%95%98%EA%B8%B0-%EC%98%A4%EB%A6%84%EC%B0%A8%EC%88%9C-%EB%82%B4%EB%A6%BC%EC%B0%A8%EC%88%9C-%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%A0%95%EC%9D%98-%EC%A0%95%EB%A0%AC

justBoard15 댓글 구현(6) 完

001cloudid — Mon, 11 Nov 2024 11:38:02 +0900

댓글 페이징 처리를 숨겨야한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 550px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td><fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${boardDTO.writetime}"/></td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/list"><input type="button" value="글 목록"></a>
</div>
<hr>
<c:if test="${empty sessionScope.id }">
<p><b>댓글은 회원만 작성 및 확인 할 수 있습니다. 확인을 위해서 회원 가입해주세요.</b></p><br>
</c:if>
<c:if test="${!empty sessionScope.id }">
댓글<br>
<form action="${pageContext.request.contextPath}/board/replyInsertPro" method="post">
<input type="hidden" name="no" value="${boardDTO.no }">
<input type="hidden" name="id" value="${sessionScope.id }">
<input type="text" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 35px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="checkbox" name="replyHidden" value="true">비밀글 <input type="hidden" name="replyHidden" value="false"><input type="submit" value="작성"></span>
</form>
댓글 목록 <sub>비밀 댓글은 굵게 표시됩니다.</sub><br>
    <c:if test="${empty replyList}">
        작성된 댓글이 없습니다.
    </c:if>
    <c:if test="${!empty replyList}">
        <table>
            <c:forEach var="replyDTO" items="${replyList}">
                <tr>
                    <c:choose>
                        <c:when test="${replyDTO.replyHidden && replyDTO.id != sessionScope.id}">
                            <td style="width: 600px">작성자: ${replyDTO.id}</td>
                            <td style="width: 1000px">비밀글입니다.</td>
                            <td style="width: 600px">작성시간: <fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${replyDTO.replyWriteTime}" /></td>
                        </c:when>
                        <c:otherwise>
                            <td style="width: 600px">작성자: ${replyDTO.id}</td>
                            <td style="width: 1000px"><b>내용: ${replyDTO.replyContent}</b></td>
                            <td style="width: 600px">작성시간: <fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${replyDTO.replyWriteTime}" /></td>
                        </c:otherwise>
                    </c:choose>
                </tr>
            </c:forEach>
        </table>
    </c:if>
	    <div style="float: right;">
	    	<c:if test="${pageDTO.startPage > pageDTO.pageBlock}">
	    		<a href="${pageContext.request.contextPath}/board/content?no=${boardDTO.no}&pageNum=${replyPageDTO.startPage - replyPageDTO.pageBlock}">Prev</a>
			</c:if>
	
			<c:forEach var="i" begin="${replyPageDTO.startPage}" end="${replyPageDTO.endPage}" step="1">
	    		<a href="${pageContext.request.contextPath}/board/content?no=${boardDTO.no}&pageNum=${i}">${i} </a>
			</c:forEach>
			<c:if test="${replyPageDTO.endPage < replyPageDTO.pageCount}">
		    	<a href="${pageContext.request.contextPath}/board/content?no=${boardDTO.no}&pageNum=${replyPageDTO.startPage + replyPageDTO.pageBlock}">Next</a>
			</c:if>
	    </div>
</c:if>

</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

댓글 페이징 처리를 로그인 했을 때만 확인할 수 있게 변경했다.

문제 사항

변수명을 잘 못 한 것 같다.
id라는 것이 board, reply, member에 있는데 막상 만들다 보니 점점 어디의 어떤 게 id인지 혼동이 온다.
유사한 점이 많아 게시판과 댓글을 한 로직에 코드를 작성했다.
막상 점점 분량이 커지다보니 꼬인다.

해결 방법

변수명을 을 한 눈에 알아 볼 수 있도록 작성한다.
id 같은 경우 member_id, board_id, reply_id로 하도록 한다.
유사한 점이 많더라도 로직을 분리한다.

이전 글에서 마주한 문제를 해결하려고 노력하다보니 코드가 어디서부터 어떻게 꼬인지 잘 모르겠다.

몇 주동안 일이 생겨서 흐름이 끊긴 것도 큰 것 같다.

일단 임시 방편으로

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 550px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td><fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${boardDTO.writetime}"/></td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/list"><input type="button" value="글 목록"></a>
</div>
<hr>
<c:if test="${empty sessionScope.id }">
<p><b>댓글은 회원만 작성 및 확인 할 수 있습니다. 확인을 위해서 회원 가입해주세요.</b></p><br>
</c:if>
<c:if test="${!empty sessionScope.id }">
댓글<br>
<form action="${pageContext.request.contextPath}/board/replyInsertPro" method="post">
<input type="hidden" name="no" value="${boardDTO.no }">
<input type="hidden" name="id" value="${sessionScope.id }">
<input type="text" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 35px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="submit" value="작성"></span>
</form>
댓글 목록 <sub></sub><br>
    <c:if test="${empty replyList}">
        작성된 댓글이 없습니다.
    </c:if>
    <c:if test="${!empty replyList}">
        <table>
            <c:forEach var="replyDTO" items="${replyList}">
                <tr>
                  <td style="width: 1600px">내용: ${replyDTO.replyContent}</td>
                  <td style="width: 600px">작성시간: <fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${replyDTO.replyWriteTime}" /></td>
                </tr>
            </c:forEach>
        </table>
    </c:if>
	    <div style="float: right;">
	    	<c:if test="${pageDTO.startPage > pageDTO.pageBlock}">
	    		<a href="${pageContext.request.contextPath}/board/content?no=${boardDTO.no}&pageNum=${replyPageDTO.startPage - replyPageDTO.pageBlock}">Prev</a>
			</c:if>
	
			<c:forEach var="i" begin="${replyPageDTO.startPage}" end="${replyPageDTO.endPage}" step="1">
	    		<a href="${pageContext.request.contextPath}/board/content?no=${boardDTO.no}&pageNum=${i}">${i} </a>
			</c:forEach>
			<c:if test="${replyPageDTO.endPage < replyPageDTO.pageCount}">
		    	<a href="${pageContext.request.contextPath}/board/content?no=${boardDTO.no}&pageNum=${replyPageDTO.startPage + replyPageDTO.pageBlock}">Next</a>
			</c:if>
	    </div>
</c:if>

</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

원래 생각과는 다르지만 댓글 구현까지는 완료했다. 수정, 보완할 여지가 많다. 수시로 보완할 예정이다.

justBoard15 댓글 구현(5) 댓글 페이지 처리

001cloudid — Sun, 20 Oct 2024 15:32:10 +0900

댓글 페이지 처리는 게시판 글 페이지 처리와 마찬가지로 PageDTO를 이용하면 될 것 같다.

그래서 Controller, Service, DAO에 pageDTO객체만 추가해 주면 될 것 같다는 생각이 들었다.

BoardController

	@GetMapping("/content")
	public String content(BoardDTO boardDTO, ReplyDTO replyDTO, PageDTO pageDTO,HttpServletRequest request, Model model) {
		System.out.println("BoardController Content()");
		boardDTO = boardService.getBoard(boardDTO); //글에 대한 정보
		boardService.readCount(boardDTO); //조회수
		
		//페이지
		int pageSize = 5; //화면에 보여줄 글의 개수
		String pageNum = request.getParameter("pageNum");
		if(pageNum ==null) {
			pageNum = "1";
		}
		int currentPage =Integer.parseInt(pageNum);	//int형 currentPage 변수명에 pageNum을 정수형으로 변경	
		
		//pageDTO에 저장
		pageDTO.setPageSize(pageSize);
		pageDTO.setPageNum(pageNum);
		pageDTO.setCurrentPage(currentPage);
		
		
	    List<ReplyDTO> replyList = boardService.getReplyList(boardDTO.getNo(), pageDTO); // 게시글 번호를 사용
	    
	    model.addAttribute("pageDTO",pageDTO);
	    model.addAttribute("boardDTO", boardDTO);
	    model.addAttribute("replyDTO", replyDTO);
	    model.addAttribute("replyList", replyList); // 댓글 리스트 추가
		return "board/content";
	}

BoardSerivce

	public List<ReplyDTO> getReplyList(int no, PageDTO pageDTO) {
		System.out.println("BoardService getReplyList()");
		return boardDAO.getReplyList(no, pageDTO);
	}

BoardDAO는 return값이 no과 pageDTO 두 개가 되어야하기 때문에 두 값을 Map을 사용하여 두 값을 변환할 수 있다.(검색을 통해 알아보았다.)

	public List<ReplyDTO> getReplyList(int no,PageDTO pageDTO) {
		System.out.println("BoardDAO getReplyList()");
		Map<String, Object> params = new HashMap<String, Object>();
		params.put("no", no);
		params.put("startRow", pageDTO.getStartRow());
		params.put("pageSize", pageDTO.getPageSize());
		return sqlSession.selectList(namespace+".getReplyList", params);
	}

여기서 Map을 배운지도, 사용한지도 오래되어 정리하고 지나가자.

Map이란(인터페이스)

리스트나 배열처럼 순차적으로 해당 요소 값을 구하지 않고 키를 통해 값을 얻음
키와 값을 쌍으로 저장하는 방식을 사용(키는 실질적인 값을 찾기 위한 이름의 역할)
특징
요소의 저장 순서를 유지하지 않음.
키는 중복 불가, 값은 중복 가능.

Map 자주 사용하는 메소드

put
Map에 데이터를 넣기, 추가
/* 존재하는 경우 맵에서 키에 대한 매핑을 제거 */
입력 시 지정한 타입에 맞게 값을 넣어줘야 함

예시)
Map<String, Object> param = new HashMap();
param.put("번호",no);
param.put("시작행", startRow);
param.put("페이지크기", pageSize);

MAP Table
Key | value
번호 | no
시작행 | startRow
페이지크기 | pageSize
get
원하는 데이터 출력
/* 지정된 값을 이 맵의 지정된 키와 연결 */

예시)
System.out.println(map.get("번호")); //no
remove
데이터 삭제
foreach문을 사용하여 Map 데이터 추출 (출처 : https://sin0824.tistory.com/13)
-getKey : Map에 저장된 Key 출력
-getValue : Map에 저장된 Value 출력

예시)
for(Entry<String, Object> entry : map.entrySet()){
System.out.println(entry.getKey()); // 또는 System.out.println(entry.getValue());
}
//데이터 한 줄씩 출력
for(Entry<string, object> entry : map.entrySet()){
System.out.println(entry);
}

화면으로 돌아가서 확인해 보니 다음과 같다.

화면에 보이는 댓글은 5개가 되는데 페이지가 증가하거나 하지 않음. 0을 클릭하면

이와 같은 오류가 발생한다.

startPage가 0으로 나타나는데 BoardDAO에 코드를 조금 수정해 보았다.

	public List<ReplyDTO> getReplyList(int no,PageDTO pageDTO) {
		System.out.println("BoardDAO getReplyList()");
		Map<String, Object> params = new HashMap<String, Object>();
		params.put("no", no);
//		params.put("startRow", pageDTO.getStartRow());
		params.put("startRow", (pageDTO.getCurrentPage()-1) * pageDTO.getPageSize());
		params.put("pageSize", pageDTO.getPageSize());
		return sqlSession.selectList(namespace+".getReplyList", params);
	}

그럼에도 변화가 없다. 댓글과 글의 페이지 처리를 별개로 관리하는 방식으로 해야 할 것 같다. 서로 로직이 비슷한 부분도 있지만 다른 부분도 있어 페이지 처리 로직이 다를 수 있기 때문이다. 따라서 ReplyPageDTO 클래스를 따로 분리해서 만들도록 해야겠다.

ReplyPageDTO

package com.mystory001.domain;

public class ReplyPageDTO {

    private int pageSize; //글의 개수
    private int currentPage; //현재 페이지
    private String pageNum;
    
    private int startRow; //시작하는 행 번호
    private int endRow; //끝나는 행 번호
    
    private int pageBlock; //한 화면에 보여 줄 페이지 개수
    private int startPage; //시작 페이지
    private int endPage; //끝 페이지
    
    private int count; //전체 글의 개수
    private int pageCount; //전체 페이지 개수
	public int getPageSize() {
		return pageSize;
	}
	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}
	public int getCurrentPage() {
		return currentPage;
	}
	public void setCurrentPage(int currentPage) {
		this.currentPage = currentPage;
	}
	public String getPageNum() {
		return pageNum;
	}
	public void setPageNum(String pageNum) {
		this.pageNum = pageNum;
	}
	public int getStartRow() {
		return startRow;
	}
	public void setStartRow(int startRow) {
		this.startRow = startRow;
	}
	public int getEndRow() {
		return endRow;
	}
	public void setEndRow(int endRow) {
		this.endRow = endRow;
	}
	public int getPageBlock() {
		return pageBlock;
	}
	public void setPageBlock(int pageBlock) {
		this.pageBlock = pageBlock;
	}
	public int getStartPage() {
		return startPage;
	}
	public void setStartPage(int startPage) {
		this.startPage = startPage;
	}
	public int getEndPage() {
		return endPage;
	}
	public void setEndPage(int endPage) {
		this.endPage = endPage;
	}
	public int getCount() {
		return count;
	}
	public void setCount(int count) {
		this.count = count;
	}
	public int getPageCount() {
		return pageCount;
	}
	public void setPageCount(int pageCount) {
		this.pageCount = pageCount;
	}
    
}

BoardController

	@GetMapping("/content")
	public String content(BoardDTO boardDTO, ReplyDTO replyDTO, ReplyPageDTO replyPageDTO,HttpServletRequest request, Model model) {
		System.out.println("BoardController Content()");
		boardDTO = boardService.getBoard(boardDTO); //글에 대한 정보
		boardService.readCount(boardDTO); //조회수
		
		//페이지 처리
		int pageSize = 5; //화면에 보여줄 글의 개수
		String pageNum = request.getParameter("pageNum");
		if(pageNum ==null) {
			pageNum = "1";
		}
		int currentPage =Integer.parseInt(pageNum);	//int형 currentPage 변수명에 pageNum을 정수형으로 변경	
		
		//replyPageDTO에 저장
		replyPageDTO.setPageSize(pageSize);
		replyPageDTO.setPageNum(pageNum);
		replyPageDTO.setCurrentPage(currentPage);
		
		//댓글 목록 조회
	    List<ReplyDTO> replyList = boardService.getReplyList(boardDTO.getNo(), replyPageDTO); // 게시글 번호를 사용
	    
	    //댓글 관련 설정
	    int count = boardService.getReplyCount(replyPageDTO); //전체 댓글의 개수 구하기
	    int pageBlock = 5; //한 화면에 보여줄 페이지 개수 설정
	    int startPage = (currentPage - 1) / pageBlock * pageBlock + 1; //한 화면에 보여 줄 시작 페이지
	    int endPage = startPage + pageBlock - 1; //한 화면에 보여 줄 끝 페이지
	    int pageCount = count / pageSize + (count % pageSize == 0? 0 : 1); //전체 페이지 개수
	    if(endPage > pageCount) {
	    	endPage = pageCount;
	    }
	    
	    //댓글 저장
	    replyPageDTO.setCount(count);
	    replyPageDTO.setPageBlock(pageBlock);
	    replyPageDTO.setStartPage(startPage);
	    replyPageDTO.setEndPage(endPage);
	    replyPageDTO.setPageCount(pageCount);
	    
	    model.addAttribute("replyPageDTO",replyPageDTO);
	    model.addAttribute("boardDTO", boardDTO);
	    model.addAttribute("replyDTO", replyDTO);
	    model.addAttribute("replyList", replyList); // 댓글 리스트 추가
		return "board/content";
	}

BoardSerivce

	public List<ReplyDTO> getReplyList(int no, ReplyPageDTO replyPageDTO) {
		System.out.println("BoardService getReplyList()");
		
		//시작하는 행 번호 구하기(currentPage,pageSize)
		int currentPage = replyPageDTO.getCurrentPage();
		int pageSize = replyPageDTO.getPageSize();
		int startRow = (currentPage - 1) * pageSize + 1;
		int endRow = startRow + pageSize - 1;
		
		replyPageDTO.setStartRow(startRow - 1);
		replyPageDTO.setEndRow(endRow);
		
		return boardDAO.getReplyList(no, replyPageDTO);
	}
	
	public int getReplyCount(ReplyPageDTO replyPageDTO) {
		System.out.println("BoardSerivce getReplyCount()");
		return boardDAO.getReplyCount(replyPageDTO);
	}

BoardDAO

	public List<ReplyDTO> getReplyList(int no,ReplyPageDTO replyPageDTO) {
		System.out.println("BoardDAO getReplyList()");
		Map<String, Object> params = new HashMap<String, Object>();
		params.put("no", no);
		params.put("startRow", replyPageDTO.getStartRow());
		params.put("pageSize", replyPageDTO.getPageSize());
		return sqlSession.selectList(namespace+".getReplyList", params);
	}

	public int getReplyCount(ReplyPageDTO replyPageDTO) {
		System.out.println("BoardDAO getReplyCount()");
		return sqlSession.selectOne(namespace+".getReplyCount", replyPageDTO);
	}

boardMapper

	<select id="getReplyList" resultType="com.mystory001.domain.ReplyDTO">
		select *
		from reply
		where `no` = #{no}
		order by replyWriteTime desc
		limit #{startRow}, #{pageSize}
	</select>
	
	<select id="getReplyCount" resultType="int">
		select count(*)
		from reply
		where `no` = #{no}
	</select>

문득 작성하고 나니 ReplyPageDTO에 no객체가 없어 문제가 생길 것이다. 또한 mapper에 join을 이용해서 sql을 작성해줘야 할 것 같다는 생각이 들었다.

글 목록에서 글을 클릭하면

내 예측이 맞았다. MyBatis가 ReplyPageDTO 클래스에서 no에 대한 객체에 대한 getter를 찾지 못했기 발생한 오류이다. 따라서 그에 맞는 수정

ReplyPageDTO

    private int boardNo; //게시글 번호
    
	public int getBoardNo() {
		return boardNo;
	}
	public void setBoardNo(int boardNo) {
		this.boardNo = boardNo;
	}

BoardDTO와 같이 no로 작성하려 했으나 변수명을 보고 어떤 것인지 한눈에 알 수 있어야 하기 때문에 조금 수정했다.

BoardController

	@GetMapping("/content")
	public String content(BoardDTO boardDTO, ReplyDTO replyDTO, ReplyPageDTO replyPageDTO,HttpServletRequest request, Model model) {
		System.out.println("BoardController Content()");
		boardDTO = boardService.getBoard(boardDTO); //글에 대한 정보
		boardService.readCount(boardDTO); //조회수
		
		//페이지 처리
		int pageSize = 5; //화면에 보여줄 글의 개수
		String pageNum = request.getParameter("pageNum");
		if(pageNum ==null) {
			pageNum = "1";
		}
		int currentPage =Integer.parseInt(pageNum);	//int형 currentPage 변수명에 pageNum을 정수형으로 변경	
		
		//replyPageDTO에 저장
		replyPageDTO.setPageSize(pageSize);
		replyPageDTO.setPageNum(pageNum);
		replyPageDTO.setCurrentPage(currentPage);
		replyPageDTO.setBoardNo(boardDTO.getNo()); //게시글 번호
		
		//댓글 목록 조회
	    List<ReplyDTO> replyList = boardService.getReplyList(replyPageDTO.getBoardNo(), replyPageDTO); // 게시글 번호를 사용
	    
	    //댓글 관련 설정
	    int count = boardService.getReplyCount(replyPageDTO.getBoardNo()); //전체 댓글의 개수 구하기
	    int pageBlock = 5; //한 화면에 보여줄 페이지 개수 설정
	    int startPage = (currentPage - 1) / pageBlock * pageBlock + 1; //한 화면에 보여 줄 시작 페이지
	    int endPage = startPage + pageBlock - 1; //한 화면에 보여 줄 끝 페이지
	    int pageCount = count / pageSize + (count % pageSize == 0? 0 : 1); //전체 페이지 개수
	    if(endPage > pageCount) {
	    	endPage = pageCount;
	    }
	    
	    //댓글 저장
	    replyPageDTO.setCount(count);
	    replyPageDTO.setPageBlock(pageBlock);
	    replyPageDTO.setStartPage(startPage);
	    replyPageDTO.setEndPage(endPage);
	    replyPageDTO.setPageCount(pageCount);
	    
	    model.addAttribute("replyPageDTO",replyPageDTO);
	    model.addAttribute("boardDTO", boardDTO);
	    model.addAttribute("replyDTO", replyDTO);
	    model.addAttribute("replyList", replyList); // 댓글 리스트 추가
		return "board/content";
	}

BoardService

	public List<ReplyDTO> getReplyList(int boardNo, ReplyPageDTO replyPageDTO) {
		System.out.println("BoardService getReplyList()");
		
		//시작하는 행 번호 구하기(currentPage,pageSize)
		int currentPage = replyPageDTO.getCurrentPage();
		int pageSize = replyPageDTO.getPageSize();
		int startRow = (currentPage - 1) * pageSize + 1;
		int endRow = startRow + pageSize - 1;
		
		replyPageDTO.setStartRow(startRow - 1);
		replyPageDTO.setEndRow(endRow);
		
		return boardDAO.getReplyList(boardNo, replyPageDTO);
	}
	
	public int getReplyCount(int boardNo) {
		System.out.println("BoardSerivce getReplyCount()");
		return boardDAO.getReplyCount(boardNo);
	}

BoardDAO

	public List<ReplyDTO> getReplyList(int boardNo,ReplyPageDTO replyPageDTO) {
		System.out.println("BoardDAO getReplyList()");
		Map<String, Object> params = new HashMap<String, Object>();
		params.put("boardNo", boardNo);
		params.put("startRow", replyPageDTO.getStartRow());
		params.put("pageSize", replyPageDTO.getPageSize());
		return sqlSession.selectList(namespace+".getReplyList", params);
	}

	public int getReplyCount(int boardNo) {
		System.out.println("BoardDAO getReplyCount()");
		return sqlSession.selectOne(namespace+".getReplyCount", boardNo);
	}

boardMapper

	<select id="getReplyList" resultType="com.mystory001.domain.ReplyDTO">
		select b.id, r.replyContent,r.replyWriteTime,r.`no`
		from board b join reply r on b.`no` = r.`no`
		where b.`no` = #{no}
		order by replyWriteTime desc
		limit #{startRow}, #{pageSize}
	</select>
	
	<select id="getReplyCount" resultType="int">
		select count(*)
		from reply
		where `no` = #{no}
	</select>

결과는?

로그인을 했는데 댓글을 확인할 수 없음.

로그인을 하지 않았을 때는 원하던 대로 구현되었음.

그래서 댓글 개수가 넘어오는지에 대해 찾아보니 0으로 뜸

댓글 개수가 0으로 나온다.

content.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td><fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${boardDTO.writetime}"/></td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/list"><input type="button" value="글 목록"></a>
</div>
<hr>
<c:if test="${empty sessionScope.id }">
<p><b>댓글은 회원만 작성 및 확인 할 수 있습니다. 확인을 위해서 회원 가입해주세요.</b></p><br>
</c:if>
<c:if test="${!empty sessionScope.id }">
댓글<br>
<form action="${pageContext.request.contextPath}/board/replyInsertPro" method="post">
<input type="hidden" name="no" value="${replyDTO.no }">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 35px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="checkbox" name="replyHidden" value="true">비밀글 <input type="hidden" name="replyHidden" value="false"><input type="submit" value="작성"></span>
</form>
댓글 목록 <sub>비밀 댓글은 굵게 표시됩니다.</sub><br>
<c:if test="${empty replyList }">
작성된 댓글이 없습니다. 
</c:if>
<c:if test="${!empty replyList}">
    <table>
        <c:forEach var="replyDTO" items="${replyList}">
            <tr>
                <c:if test="${replyDTO.replyHidden == false}">
                    <td>작성자: ${replyDTO.id}</td>
                    <td>내용: ${replyDTO.replyContent}</td>
                    <td>작성시간: <fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${replyDTO.replyWriteTime}" /></td>
                </c:if>
                <c:if test="${replyDTO.replyHidden == true}">
                    <c:if test="${empty sessionScope.id}">
                        <td><b>권한이 없습니다.</b></td>
                    </c:if>
                    <c:if test="${sessionScope.id eq replyDTO.id or sessionScope.id eq boardDTO.id}">
                        <td><b>작성자: ${replyDTO.id}</b></td>
                        <td><b>내용: ${replyDTO.replyContent}</b></td>
                        <td><b>작성시간: <fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${replyDTO.replyWriteTime}" /></b></td>
                    </c:if>
                </c:if>
            </tr>
        </c:forEach>
    </table>
</c:if>
	<c:if test="${pageDTO.startPage > pageDTO.pageBlock}">
    	<a href="${pageContext.request.contextPath}/board/content?no=${boardDTO.no}&pageNum=${replyPageDTO.startPage - replyPageDTO.pageBlock}">Prev</a>
	</c:if>

	<c:forEach var="i" begin="${replyPageDTO.startPage}" end="${replyPageDTO.endPage}" step="1">
    	<a href="${pageContext.request.contextPath}/board/content?no=${boardDTO.no}&pageNum=${i}">${i}</a>
	</c:forEach>

	<c:if test="${replyPageDTO.endPage < replyPageDTO.pageCount}">
    	<a href="${pageContext.request.contextPath}/board/content?no=${boardDTO.no}&pageNum=${replyPageDTO.startPage + replyPageDTO.pageBlock}">Next</a>
	</c:if>
</c:if>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

BoardController

	@GetMapping("/content")
	public String content(BoardDTO boardDTO, ReplyDTO replyDTO, ReplyPageDTO replyPageDTO,HttpServletRequest request, Model model) {
		System.out.println("BoardController Content()");
		boardDTO = boardService.getBoard(boardDTO); //글에 대한 정보
		boardService.readCount(boardDTO); //조회수
		
		//댓글 페이지 처리
		int pageSize = 5; //화면에 보여줄 글의 개수
		String pageNum = request.getParameter("pageNum");
		if(pageNum ==null) {
			pageNum = "1";
		}
		int currentPage =Integer.parseInt(pageNum);	//int형 currentPage 변수명에 pageNum을 정수형으로 변경	
		
		//replyPageDTO에 저장
		replyPageDTO.setPageSize(pageSize);
		replyPageDTO.setPageNum(pageNum);
		replyPageDTO.setCurrentPage(currentPage);
		replyPageDTO.setBoardNo(boardDTO.getNo()); //게시글 번호
		
		//댓글 목록 조회
		List<ReplyDTO> replyList = boardService.getReplyList(replyPageDTO.getBoardNo(), replyPageDTO); // 게시글 번호를 사용
	    
	    //댓글 관련 설정
	    int count = boardService.getReplyCount(replyPageDTO.getBoardNo()); //전체 댓글의 개수 구하기
	    int pageBlock = 5; //한 화면에 보여줄 페이지 개수 설정
	    int startPage = (currentPage - 1) / pageBlock * pageBlock + 1; //한 화면에 보여 줄 시작 페이지
	    int endPage = startPage + pageBlock - 1; //한 화면에 보여 줄 끝 페이지
	    int pageCount = count / pageSize + (count % pageSize == 0? 0 : 1); //전체 페이지 개수
	    if(endPage > pageCount) {
	    	endPage = pageCount;
	    }
	    
	    //댓글 저장
	    replyPageDTO.setCount(count);
	    replyPageDTO.setPageBlock(pageBlock);
	    replyPageDTO.setStartPage(startPage);
	    replyPageDTO.setEndPage(endPage);
	    replyPageDTO.setPageCount(pageCount);
	    
	    //모델에 데이터 추가
	    model.addAttribute("replyPageDTO",replyPageDTO);
	    model.addAttribute("boardDTO", boardDTO);
	    model.addAttribute("replyDTO", replyDTO);
	    model.addAttribute("replyList", replyList); // 댓글 리스트 추가
		return "board/content";
	}

BoardService

	public List<ReplyDTO> getReplyList(int boardNo, ReplyPageDTO replyPageDTO) {
		System.out.println("BoardService getReplyList()");
		
		
		//시작하는 행 번호 구하기(currentPage,pageSize)
		int currentPage = replyPageDTO.getCurrentPage();
		int pageSize = replyPageDTO.getPageSize();
		int startRow = (currentPage - 1) * pageSize + 1;
		int endRow = startRow + pageSize - 1;
		
		replyPageDTO.setStartRow(startRow - 1);
		replyPageDTO.setEndRow(endRow);
		
		return boardDAO.getReplyList(boardNo, replyPageDTO);
	}
	
	public int getReplyCount(int boardNo) {
		System.out.println("BoardSerivce getReplyCount()");
		return boardDAO.getReplyCount(boardNo);
	}

BoardDAO

	public List<ReplyDTO> getReplyList(int boardNo, ReplyPageDTO replyPageDTO) {
		System.out.println("BoardDAO getReplyList()");
		
		Map<String, Object> params = new HashMap<String, Object>();
		params.put("boardNo", boardNo);
		params.put("startRow", replyPageDTO.getStartRow());
		params.put("pageSize", replyPageDTO.getPageSize());
		return sqlSession.selectList(namespace+".getReplyList", params);
	}

	public int getReplyCount(int boardNo) {
		System.out.println("BoardDAO getReplyCount()");
		return sqlSession.selectOne(namespace+".getReplyCount", boardNo);
	}

boardMapper

	<select id="getReplyList" resultType="com.mystory001.domain.ReplyDTO">
		select b.id, r.replyContent,r.replyHidden, r.replyWriteTime,r.`no`
		from board b join reply r on b.`no` = r.`no`
		where b.`no` = #{no}
		order by replyWriteTime desc
		limit #{startRow}, #{pageSize}
	</select>
	
	<select id="getReplyCount" resultType="int">
		select count(*)
		from reply
		where `no` = #{no}
	</select>

이 지경이 되니까 생각된 것은 페이지마다 클래스를 분리하는 게 아니라 기능마다 클래스를 분리하는 것이 귀찮지만 나중에 더 유지보수하기에 편리해진다... 로직도 비슷하고 해서 따로 분리 안했는데 이렇게 되다보니 왜 분리해서 작업하는지 이해가 되는 부분이다. 하드코딩 된 것인지 모르겠는데 이쯤되니까 뭘 수정해야할지 머리가 돌아가지 않는다..

replyList가 null인 것 같은데 이를 가져와야할 듯하다. 글 번호를 가지고

수정해서

BoardController

	@GetMapping("/content")
	public String content(BoardDTO boardDTO, ReplyDTO replyDTO, ReplyPageDTO replyPageDTO,HttpServletRequest request, Model model) {
		System.out.println("BoardController Content()");
		boardDTO = boardService.getBoard(boardDTO); //글에 대한 정보
		boardService.readCount(boardDTO); //조회수
		
		//댓글 페이지 처리
		int pageSize = 5; //화면에 보여줄 글의 개수
		String pageNum = request.getParameter("pageNum");
		if(pageNum ==null) {
			pageNum = "1";
		}
		int currentPage =Integer.parseInt(pageNum);	//int형 currentPage 변수명에 pageNum을 정수형으로 변경	
		
		//replyPageDTO에 저장
		replyPageDTO.setPageSize(pageSize);
		replyPageDTO.setPageNum(pageNum);
		replyPageDTO.setCurrentPage(currentPage);
		replyPageDTO.setBoardNo(boardDTO.getNo()); //게시글 번호
		
		//댓글 목록 조회
		List<ReplyDTO> replyList = boardService.getReplyList(replyPageDTO.getBoardNo(), replyPageDTO); // 게시글 번호를 사용
	    
	    //댓글 관련 설정
	    int count = boardService.getReplyCount(replyPageDTO.getBoardNo()); //전체 댓글의 개수 구하기
	    int pageBlock = 5; //한 화면에 보여줄 페이지 개수 설정
	    int startPage = (currentPage - 1) / pageBlock * pageBlock + 1; //한 화면에 보여 줄 시작 페이지
	    int endPage = startPage + pageBlock - 1; //한 화면에 보여 줄 끝 페이지
	    int pageCount = count / pageSize + (count % pageSize == 0? 0 : 1); //전체 페이지 개수
	    if(endPage > pageCount) {
	    	endPage = pageCount;
	    }
	    
	    //댓글 저장
	    replyPageDTO.setCount(count);
	    replyPageDTO.setPageBlock(pageBlock);
	    replyPageDTO.setStartPage(startPage);
	    replyPageDTO.setEndPage(endPage);
	    replyPageDTO.setPageCount(pageCount);
	    
	    //모델에 데이터 추가
	    model.addAttribute("replyPageDTO",replyPageDTO);
	    model.addAttribute("boardDTO", boardDTO);
	    model.addAttribute("replyDTO", replyDTO);
	    model.addAttribute("replyList", replyList); // 댓글 리스트 추가
		return "board/content";
	}

BoardService

	public List<ReplyDTO> getReplyList(int boardNo, ReplyPageDTO replyPageDTO) {
		System.out.println("BoardService getReplyList()");
		
		//시작하는 행 번호 구하기(currentPage,pageSize)
		int currentPage = replyPageDTO.getCurrentPage();
		int pageSize = replyPageDTO.getPageSize();
		int startRow = (currentPage - 1) * pageSize + 1;
		int endRow = startRow + pageSize - 1;
		
		replyPageDTO.setStartRow(startRow - 1);
		replyPageDTO.setEndRow(endRow);
		
		return boardDAO.getReplyList(boardNo, replyPageDTO);
	}
	
	public int getReplyCount(int boardNo) {
		System.out.println("BoardSerivce getReplyCount()");
		return boardDAO.getReplyCount(boardNo);
	}

BoardDAO

	public List<ReplyDTO> getReplyList(int boardNo, ReplyPageDTO replyPageDTO) {
		System.out.println("BoardDAO getReplyList()");
		
		Map<String, Object> params = new HashMap<String, Object>();
		params.put("boardNo", boardNo);
		params.put("startRow", replyPageDTO.getStartRow());
		params.put("pageSize", replyPageDTO.getPageSize());
		return sqlSession.selectList(namespace+".getReplyList", params);
	}

	public int getReplyCount(int boardNo) {
		System.out.println("BoardDAO getReplyCount()");
		return sqlSession.selectOne(namespace+".getReplyCount", boardNo);
	}

boardMapper

	<select id="getReplyList" resultType="com.mystory001.domain.ReplyDTO">
		select b.id, r.replyContent,r.replyHidden, r.replyWriteTime,r.`no`
		from board b join reply r on b.`no` = r.`no`
		where b.`no` = #{boardNo}
		order by r.replyWriteTime desc
		limit #{startRow}, #{pageSize}
	</select>
	
	<select id="getReplyCount" resultType="int">
		select count(*)
		from reply
		where `no` = #{no}
	</select>

content.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 550px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td><fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${boardDTO.writetime}"/></td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/list"><input type="button" value="글 목록"></a>
</div>
<hr>
<c:if test="${empty sessionScope.id }">
<p><b>댓글은 회원만 작성 및 확인 할 수 있습니다. 확인을 위해서 회원 가입해주세요.</b></p><br>
</c:if>
<c:if test="${!empty sessionScope.id }">
댓글<br>
<form action="${pageContext.request.contextPath}/board/replyInsertPro" method="post">
<input type="hidden" name="no" value="${replyDTO.no }">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 35px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="checkbox" name="replyHidden" value="true">비밀글 <input type="hidden" name="replyHidden" value="false"><input type="submit" value="작성"></span>
</form>
댓글 목록 <sub>비밀 댓글은 굵게 표시됩니다.</sub><br>
<c:if test="${empty replyList }">
작성된 댓글이 없습니다. 
</c:if>
<c:if test="${!empty replyList}">
<%--     <c:out value="${replyList.size()}" /> 댓글 개수 --%>
    <table>
        <c:forEach var="replyDTO" items="${replyList}">
            <tr>
            <%-- replyHidden = 1이면 => 비밀글 => 굵게.  --%>
                     <c:if test="${replyDTO.replyHidden && replyDTO.id != sessionScope.id}">
                        <td style="width: 600px">작성자: ${replyDTO.id}</td>
                        <td style="width: 1000px">비밀글입니다.</td>
                        <td style="width: 600px">작성시간: <fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${replyDTO.replyWriteTime}" /></td>
                    </c:if>
                    <c:if test="${!replyDTO.replyHidden || replyDTO.id == sessionScope.id}">
                        <td style="width: 600px">작성자: ${replyDTO.id}</td>
                        <td style="width: 1000px"><b>내용: ${replyDTO.replyContent}</b></td>
                        <td style="width: 600px">작성시간: <fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${replyDTO.replyWriteTime}" /></td>
                    </c:if>
                </tr>              
        </c:forEach>
    </table>
    
    <div style="float: right;">
    
    <c:if test="${pageDTO.startPage > pageDTO.pageBlock}">
    	<a href="${pageContext.request.contextPath}/board/content?no=${boardDTO.no}&pageNum=${replyPageDTO.startPage - replyPageDTO.pageBlock}">Prev</a>
	</c:if>

	<c:forEach var="i" begin="${replyPageDTO.startPage}" end="${replyPageDTO.endPage}" step="1">
    	<a href="${pageContext.request.contextPath}/board/content?no=${boardDTO.no}&pageNum=${i}">${i} </a>
	</c:forEach>

	<c:if test="${replyPageDTO.endPage < replyPageDTO.pageCount}">
    	<a href="${pageContext.request.contextPath}/board/content?no=${boardDTO.no}&pageNum=${replyPageDTO.startPage + replyPageDTO.pageBlock}">Next</a>
	</c:if>
    </div>

</c:if>
</c:if>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

문제를 발견했다 댓글 작성자가 글을 쓴 작성자로 되는 문제가 있다.

댓글 작성자는 d2인데 글 작성자와 같게 되는 문제가 있다.

DB에는?

Controller에서 세션에 사용자 ID를 가져올 수 있도록 코드를 추가해줘야함

BoardController

	@PostMapping("/replyInsertPro")
	public String replyInsertPro(ReplyDTO replyDTO, Model model, HttpServletRequest request) {
		System.out.println("BoardController replyInsertPro()");
		
		//세션에 사용자ID 가져오기
		HttpSession session = request.getSession();
		String userID = (String)session.getAttribute("id");
		if(userID !=null ) {
			replyDTO.setId(userID); //댓글 작성자 ID 설정
		}
		
		boardService.replyInsert(replyDTO);
		return "redirect:/board/content?no="+replyDTO.getNo();
	}

코드를 수정하고 글쓴이와 댓글 작성자를 다르게 해서 댓글을 작성했다.

여기서는 작성자가 여전히 글쓴이와 동일함.

남은 작업 댓글작성자를 올바르게 표시 + 비밀글

justBoard14 댓글 구현(4)

001cloudid — Tue, 15 Oct 2024 12:41:51 +0900

지난번 reply 테이블에 board 테이블의 no를 외래키로 지정했다.

그리고 다음과 같이 추가 수정했다.

content.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td>${boardDTO.writetime}</td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/list"><input type="button" value="글 목록"></a>
</div>
<hr>
댓글<br>
<form action="${pageContext.request.contextPath}/board/replyInsertPro" method="post">
<input type="hidden" name="no" value="${replyDTO.no }">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 60px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="checkbox" name="replyHidden" value="true">비밀글 <input type="hidden" name="replyHidden" value="false"><input type="submit" value="작성"></span>
</form>
댓글 목록<br>
<c:forEach var="replyDTO" items="${replyList}">
<tr>
<td>${replyDTO.id}</td><td>${replyDTO.replyContent}</td>
</tr>
</c:forEach>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

BoardController

	@PostMapping("/replyInsertPro")
	public String replyInsertPro(ReplyDTO replyDTO, Model model) {
		System.out.println("BoardController replyInsertPro()");
		boardService.replyInsert(replyDTO);
		return "redirect:/board/content?no="+replyDTO.getNo();
	}
    
	@GetMapping("/content")
	public String content(BoardDTO boardDTO, ReplyDTO replyDTO, Model model) {
		System.out.println("BoardController Content()");
		boardDTO = boardService.getBoard(boardDTO); //글에 대한 정보
		boardService.readCount(boardDTO); //조회수
		
		List<ReplyDTO> replyList = boardService.getReplyList();
		
		model.addAttribute("boardDTO",boardDTO);
		model.addAttribute("replyDTO",replyDTO);
		return "board/content";
	}

BoardService 변화 없음

	public void replyInsert(ReplyDTO replyDTO) {
		System.out.println("BoardService replyInsert()");
//		replyDTO.setNum(boardDAO.getMaxNum()+1); //댓글 번호(PK) 값 설정
		replyDTO.setReplyWriteTime(new Timestamp(System.currentTimeMillis())); //댓글 작성 시간
		boardDAO.replyInsert(replyDTO);
	}

	public List<ReplyDTO> getReplyList() {
		System.out.println("BoardService getReplyList()");
		return boardDAO.getReplyList();
	}

BoardDAO 변화없음

	public void replyInsert(ReplyDTO replyDTO) {
		System.out.println("BoardDAO replyInsert()");
		sqlSession.insert(namespace+".replyInsert", replyDTO);
	}

	public List<ReplyDTO> getReplyList() {
		System.out.println("BoardDAO getReplyList()");
		return sqlSession.selectList(namespace+".getReplyList");
	}

boardMapper

	<insert id="replyInsert">
		insert into reply(num,id,replyContent,replyHidden,replyWriteTime,`no`)
		values(#{num},#{id},#{replyContent},#{replyHidden},#{replyWriteTime},#{no})
	</insert>
	
	<select id="getReplyList" resultType="com.mystory001.domain.ReplyDTO">
		select *
		from reply
		where `no` = #{no}
		order by replyWriteTime desc
	</select>

화면

댓글을 작성하면 내가 원하는 방향으로 된다.

reply 테이블 조회를 했을 때 위는 수정하기 전, 아래는 수정 후이기 때문에 no의 값이 차이가 있다.

제대로 들어갔음에도 content.jsp에서 보이지 않는 것은 문제가 있다. 이 부분부터 수정해보도록 하자.

replyList.toString()을 출력해보니 비어있음을 알 수 있다.

게시글 번호 전달 확인을 위해 게시 글번호를 전달 및 boolean값 설정

BoardController

	@GetMapping("/content")
	public String content(BoardDTO boardDTO, ReplyDTO replyDTO, Model model) {
		System.out.println("BoardController Content()");
		boardDTO = boardService.getBoard(boardDTO); //글에 대한 정보
		boardService.readCount(boardDTO); //조회수
		
	    List<ReplyDTO> replyList = boardService.getReplyList(boardDTO.getNo()); // 게시글 번호를 사용
	    System.out.println(replyList.toString()); // 디버깅을 위한 로그 출력
	    model.addAttribute("boardDTO", boardDTO);
	    model.addAttribute("replyDTO", replyDTO);
	    model.addAttribute("replyList", replyList); // 댓글 리스트 추가
		return "board/content";
	}
    
	@PostMapping("/replyInsertPro")
	public String replyInsertPro(ReplyDTO replyDTO, Model model) {
		System.out.println("BoardController replyInsertPro()");
		boardService.replyInsert(replyDTO);
		return "redirect:/board/content?no="+replyDTO.getNo();
	}

BoardService

	public void replyInsert(ReplyDTO replyDTO) {
		System.out.println("BoardService replyInsert()");
		replyDTO.setReplyHidden(false); //Boolean값으로 설정
		replyDTO.setReplyWriteTime(new Timestamp(System.currentTimeMillis())); //댓글 작성 시간
		boardDAO.replyInsert(replyDTO);
	}

	public List<ReplyDTO> getReplyList(int no) {
		System.out.println("BoardService getReplyList()");
		return boardDAO.getReplyList(no);
	}

BoardDAO

	public void replyInsert(ReplyDTO replyDTO) {
		System.out.println("BoardDAO replyInsert()");
		sqlSession.insert(namespace+".replyInsert", replyDTO);
	}

	public List<ReplyDTO> getReplyList(int no) {
		System.out.println("BoardDAO getReplyList()");
		return sqlSession.selectList(namespace+".getReplyList", no);
	}

boardMapper 변화없음

	<insert id="replyInsert">
		insert into reply(num,id,replyContent,replyHidden,replyWriteTime,`no`)
		values(#{num},#{id},#{replyContent},#{replyHidden},#{replyWriteTime},#{no})
	</insert>
	
	<select id="getReplyList" resultType="com.mystory001.domain.ReplyDTO">
		select *
		from reply
		where `no` = #{no}
		order by replyWriteTime desc
	</select>

content.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td>${boardDTO.writetime}</td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/list"><input type="button" value="글 목록"></a>
</div>
<hr>
댓글<br>
<form action="${pageContext.request.contextPath}/board/replyInsertPro" method="post">
<input type="hidden" name="no" value="${replyDTO.no }">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 60px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="checkbox" name="replyHidden" value="true">비밀글 <input type="hidden" name="replyHidden" value="false"><input type="submit" value="작성"></span>
</form>
댓글 목록<br>
<%-- <c:forEach var="replyDTO" items="${replyList}"> --%>
<!--     <tr> -->
<%--         <c:if test="${replyDTO.replyHidden ne 1}"> --%>
<%--             <td>${replyDTO.id}</td><td>${replyDTO.replyContent}</td><td>${replyDTO.replyWriteTime}</td> --%>
<%--         </c:if> --%>
<%--         <c:if test="${replyDTO.replyHidden eq 1}"> --%>
<!--             <td>비밀글입니다.</td> -->
<%--             <c:if test="${sessionScope.id eq replyDTO.id or sessionScope.id eq boardDTO.id}"> --%>
<%--                 <td>${replyDTO.id}</td><td>${replyDTO.replyContent}</td><td>${replyDTO.replyWriteTime}</td> --%>
<%--             </c:if> --%>
<%--         </c:if> --%>
<!--     </tr> -->
<%-- </c:forEach> --%>
<c:if test="${not empty replyList}">
    <c:forEach var="replyDTO" items="${replyList}">
        <tr>
				<c:if test="${replyDTO.replyHidden == false}">
				    <td>작성자 : </td><td>${replyDTO.id}</td>
				    <td>내용 : </td><td>${replyDTO.replyContent}</td>
				    <td>작성시간 : </td><td>${replyDTO.replyWriteTime}</td><br>
				</c:if>
				<c:if test="${replyDTO.replyHidden == true}">
				    <td><b>비밀댓글</b></td>
                <c:if test="${sessionScope.id eq replyDTO.id or sessionScope.id eq boardDTO.id}">
                    <td>작성자 : </td><td>${replyDTO.id}</td>
                    <td>내용 : </td><td>${replyDTO.replyContent}</td>
                    <td>작성시간 : </td><td>${replyDTO.replyWriteTime}</td><br>
                </c:if>
            </c:if>
        </tr>
    </c:forEach>
</c:if>
<c:if test="${empty replyList}">
    <p>댓글이 없습니다.</p>
</c:if>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

로그인을 하지 않았을때

일단 구현하는데 급급해서 정리되지 않은 jstl 코드를 수정하고 위의 그림과 같이 로그인이 되지 않았을 때 글을 작성하지 못하도록 댓글 창을 숨기는 작업을 하도록하자.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 650px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td>${boardDTO.writetime}</td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/list"><input type="button" value="글 목록"></a>
</div>
<hr>
<c:if test="${empty sessionScope.id }">
<p><b>댓글은 회원만 작성 및 확인 할 수 있습니다. 확인을 위해서 회원 가입해주세요.</b></p><br>
</c:if>
<c:if test="${!empty sessionScope.id }">
댓글<br>
<form action="${pageContext.request.contextPath}/board/replyInsertPro" method="post">
<input type="hidden" name="no" value="${replyDTO.no }">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 60px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="checkbox" name="replyHidden" value="true">비밀글 <input type="hidden" name="replyHidden" value="false"><input type="submit" value="작성"></span>
</form>
댓글 목록 <sub>비밀 댓글은 굵게 표시됩니다.</sub><br>
<c:if test="${empty replyList }">
작성된 댓글이 없습니다. 
</c:if>
<c:if test="${!empty replyList}">
    <c:forEach var="replyDTO" items="${replyList}">
        <tr>
				<c:if test="${replyDTO.replyHidden == false}">
				    <td>작성자 : </td><td>${replyDTO.id}</td>
				    <td>내용 : </td><td>${replyDTO.replyContent}</td>
				    <td>작성시간 : </td><td>${replyDTO.replyWriteTime}</td><br>
				</c:if>
				<c:if test="${replyDTO.replyHidden == true}">
				    <c:if test="${empty sessionScope.id}">
				    <td><b>권한이 없습니다.</b></td>
				    </c:if>
                <c:if test="${sessionScope.id eq replyDTO.id or sessionScope.id eq boardDTO.id}">
                    <td><b>작성자 : </b></td><td><b>${replyDTO.id}</b></td>
                    <td><b>내용 : </b></td><td><b>${replyDTO.replyContent}</b></td>
                    <td><b>작성시간 : </b></td><td><b>${replyDTO.replyWriteTime}</b></td><br>
                </c:if>
            </c:if>
        </tr>
    </c:forEach>
</c:if>
</c:if>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

댓글 수가 많아지면 화면에 이상하게 나타나서 해당 페이지만 높이를 높였다.

로그인 했을 때

댓글이 있을 때

댓글이 없을 때

비로그인

작성일이나 댓글 작성 시간에 소수점 시간까지 나타 낼 필요는 없을 것 같다. 또한 보기에도 지저분하다고 느껴진다.

날짜 형식 변경

JSTL fmt로 날짜 형식을 변경해보자. jsp상단에 fmt를 선언하는 것하고 사용하면 된다.

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

날짜 형식에

<fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${}" />

여기서 주의할 점은 월은 대문자 M(Month), 분은 소문자 m(minute). 분보다 월이 더 큰 개념이라고 외워두고 더 큰 개념이니까 큰 거 → 대문자 이렇게 좀 유치하지만 외워두자

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 650px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td><fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${boardDTO.writetime}"/></td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/list"><input type="button" value="글 목록"></a>
</div>
<hr>
<c:if test="${empty sessionScope.id }">
<p><b>댓글은 회원만 작성 및 확인 할 수 있습니다. 확인을 위해서 회원 가입해주세요.</b></p><br>
</c:if>
<c:if test="${!empty sessionScope.id }">
댓글<br>
<form action="${pageContext.request.contextPath}/board/replyInsertPro" method="post">
<input type="hidden" name="no" value="${replyDTO.no }">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 60px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="checkbox" name="replyHidden" value="true">비밀글 <input type="hidden" name="replyHidden" value="false"><input type="submit" value="작성"></span>
</form>
댓글 목록 <sub>비밀 댓글은 굵게 표시됩니다.</sub><br>
<c:if test="${empty replyList }">
작성된 댓글이 없습니다. 
</c:if>
<c:if test="${!empty replyList}">
    <c:forEach var="replyDTO" items="${replyList}">
        <tr>
				<c:if test="${replyDTO.replyHidden == false}">
				    <td>작성자 : </td><td>${replyDTO.id}</td>
				    <td>내용 : </td><td>${replyDTO.replyContent}</td>
				    <td>작성시간 : </td><td><fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${replyDTO.replyWriteTime}" /></td><br>
				</c:if>
				<c:if test="${replyDTO.replyHidden == true}">
				    <c:if test="${empty sessionScope.id}">
				    <td><b>권한이 없습니다.</b></td>
				    </c:if>
                <c:if test="${sessionScope.id eq replyDTO.id or sessionScope.id eq boardDTO.id}">
                    <td><b>작성자 : </b></td><td><b>${replyDTO.id}</b></td>
                    <td><b>내용 : </b></td><td><b>${replyDTO.replyContent}</b></td>
                    <td><b>작성시간 : </b></td><td><b><fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" value="${replyDTO.replyWriteTime}" /></b></td><br>
                </c:if>
            </c:if>
        </tr>
    </c:forEach>
</c:if>
</c:if>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

날짜 포멧을 변경하였고, 추가적으로 다른 회원은 비밀 댓글이 작성되었는지 알 수 없다.

댓글이 많아지면 이렇게 되서 높이를 높였는데 이렇다. 댓글 작성 칸을 줄이고 페이지 처리하면 문제 없을 것 같다만.. 해결방안을 하면서 찾아보도록 해야겠다.

남은 작업은 댓글 수정, 삭제, 페이지 처리

justBoard13 댓글 구현(3) 데이터

001cloudid — Sun, 13 Oct 2024 11:57:19 +0900

화면까지 구성했고 어떤 식으로 주소매핑을 해야 할지 정했다.

이번에는 주소매핑에서 mapper까지 설정해 보도록 하겠다.

이전글에서 Update로 되어있는 부분은 Insert로 수정하였다.

댓글을 작성하고 작성 버튼을 누르면 /board/replyInsertPro 여기서 댓글을 작성하는 처리과정을 거치게 된다. 이 과정부터 시작해 보도록 하자

BoardController

	@PostMapping("/replyInsertPro")
	public String replyInsertPro(ReplyDTO replyDTO, Model model) {
		System.out.println("BoardController replyInsertPro()");
		BoardDTO boardDTO = new BoardDTO();
		boardService.replyUpdatePro(replyDTO);
		return "redirect:/board/content?no="+boardDTO.getNo();
	}

작성하고 나니 굳이 BoardDTO 객체를 안에서 작성할 필요는 없을 것 같다는 생각이 들었다.

	@PostMapping("/replyInsertPro")
	public String replyInsertPro(ReplyDTO replyDTO,BoardDTO boardDTO, Model model) {
		System.out.println("BoardController replyInsert()");
		boardService.replyInsert(replyDTO);
		return "redirect:/board/content?no="+boardDTO.getNo();
	}

Controller에서 return 값을 저렇게 써본적은 처음인데 잘 될 거라고 생각한다.

BoardService

	public void replyInsert(ReplyDTO replyDTO) {
		System.out.println("BoardService replyInsert()");
		replyDTO.setNum(boardDAO.getMaxNum()+1); //댓글 번호(PK) 값 설정
		replyDTO.setReplyWriteTime(new Timestamp(System.currentTimeMillis())); //댓글 작성 시간
		boardDAO.replyInsert(replyDTO);
	}

댓글 번호는 PK라 어디 보이지 않아도 반드시 필요한 값, 댓글 작성 시간도 따로 값을 지정해주지 않았기 때문에 Service에서 설정이 필요함. 비밀글 처리를 jsp에서 해줘야 할지 Service에서 해야 할지 잘 모르겠다.

BoardDAO

	public void replyInsert(ReplyDTO replyDTO) {
		System.out.println("BoardDAO replyInsert()");
		sqlSession.insert(namespace+".replyInsert", replyDTO);
	}
	
	public int getMaxNum() {
		System.out.println("BoardDAO getMaxNum()");
		return sqlSession.selectOne(namespace+".getMaxNum");
	}

boardMapper

	<insert id="replyInsert">
		insert into reply(num,id,replyContent,replyHidden,replyWriteTime,re_ref,re_lev,re_sql)
		values(#{num},#{id},#{replyContent},#{replyHidden},#{replyWriteTime},#{re_ref},#{re_lev},#{re_sql})
	</insert>
	
	<select id="getMaxNum" resultType="java.lang.Integer">
		select max(num) from reply
	</select>

뭔가 실행하면 오류가 날 것 같다만 일단 실행해보도록 해야겠다.

역시 오류가 뜬다. 어디의 값이 문제인지 toString을 오버라이딩해서 알아보도록 하자

ReplyDTO

	@Override
	public String toString() {
		return "ReplyDTO [id=" + id + ", replyContent=" + replyContent + ", replyHidden=" + replyHidden
				+ ", replyWriteTime=" + replyWriteTime + ", re_ref=" + re_ref + ", re_lev=" + re_lev + ", re_seq="
				+ re_seq + ", num=" + num + "]";
	}

BoardController

	@PostMapping("/replyInsertPro")
	public String replyInsertPro(ReplyDTO replyDTO,BoardDTO boardDTO, Model model) {
		System.out.println("BoardController replyInsert()");
		boardService.replyInsert(replyDTO);
		replyDTO.toString();
		return "redirect:/board/content?no="+boardDTO.getNo();
	}

그럼에도 계속해서 똑같은 오류가 난다.

content.jsp에서 댓글form에 num을 hidden으로 넣어보았다. 아마 num값이 넘어오지 않아서 그런가 싶다는 생각이 들었다.

<hr>
댓글<br>
<form action="${pageContext.request.contextPath}/board/replyInsertPro" method="post">
<input type="hidden" name="num">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 60px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="checkbox" name="replyHidden">비밀글 <input type="submit" value="작성"></span>
</form>
댓글 목록<br>
이곳에 댓글 목록이 나타남. 작성자 - 댓글 내용 순으로
</div> <%-- content영역 div --%>

이러한 문제를 직면했다. 전에 프로젝트할 때 이러한 상황을 경험했다. 타입이 맞지 않아서 생긴 걸로 기억하는데 자세히 알아보기 위해 검색해 보았다.

HTTP 에러 코드

400 : 잘못된 요청으로 문법상 오류가 있어서 서버가 요청을 이해하지 못한 경우 → 잘못입력한 url인 경우가 많음
404 : 클라이언트가 요청한 문서를 찾지 못한 경우 → url이나 캐시 삭제
405 : request라인에 명시된 메소드를 수행하기 위한 해당 자원의 이용이 허용되지 않았을 경우
415 : 지원되지 않는 형식으로 클라이언트가 요청해서 서버가 요청에 대한 승인을 거부한 경우
500 : 웹 서버가 요청사항을 수행할 수 없는 경우

참고 : https://donggu1105.tistory.com/145

댓글을 작성했을 때 콘솔창은

replyInsertPro()까지 가지 않을 것을 확인할 수 있다.

이전 글을 확인해 보니 빠진 부분이 있었다. content.jsp 주소매핑과정에서 ReplyDTO도 추가해줘야 한다는 것이다.

	@GetMapping("/content")
	public String content(BoardDTO boardDTO, ReplyDTO replyDTO, Model model) {
		System.out.println("BoardController Content()");
		boardDTO = boardService.getBoard(boardDTO); //글에 대한 정보
		boardService.readCount(boardDTO); //조회수
		model.addAttribute("boardDTO",boardDTO);
		model.addAttribute("replyDTO",replyDTO);
		return "board/content";
	}

이러거나 저러거나 400 오류가 발생함 해당 오류가 발생할 수 있는 이유에 대해서 조금 더 구체적으로 알아보았다.

400 오류가 발생하는 이유

필수 입력 누락
잘못된 URL 요청
HTTP 메소드 문제
서버 세션 유효성 문제
폼 데이터 불일치
잘못된 데이터 타입
Ajax 요청 시 처리 문제
CORS 정책 문제

이걸 찾아보니 아무래도 비밀글 체크박스와 관련되어 문제가 생긴 것 같다. true 또는 false가 넘어가야 하고, db에는 0 또는 1로 받아져야 하기 때문이다.

이를 체크박스로 해결하려고 하니 어떻게 해야 할지 좀 막막했다. 그래서 알아보니

content.jsp에

<input type="checkbox" name="replyHidden" value="true">비밀글
<input type="hidden" name="replyHidden" value="false">

이렇게 하면 체크박스가 체크되었을 때는 true가 전송되고, 체크되지 않았을 때 false가 전송되게 할 수 있다.

BoardController

	@PostMapping("/replyInsertPro")
	public String replyInsertPro(ReplyDTO replyDTO,BoardDTO boardDTO, Model model) {
		System.out.println("BoardController replyInsertPro()");
		
		//replyHidden을 boolean으로 변환
		if("true".equals(replyDTO.isReplyHidden())) {
			replyDTO.setReplyHidden(true);
		} else {
			replyDTO.setReplyHidden(false);
		}
		
		boardService.replyInsert(replyDTO);
		return "board/content?no="+boardDTO.getNo();
	}

replyHidden값을 처리...

이렇게 했음에도 여전히 문제가 생긴다.

원인을 찾지 못했다. 원인이 될 부분만 찾아보았다.

폼 데이터 문제
→ num이 비어있으므로 번호를 제대로 설정
DTO 데이터 처리
→ isReplyHidden() 메소드는 boolean값을 반환해야 함
리다이렉션 return
→ "board/content?no=" 는 단순히 URL을 반환
DAO 및 매퍼 설정

content.jsp

<hr>
댓글<br>
<form action="${pageContext.request.contextPath}/board/replyInsertPro" method="post">
<input type="hidden" name="num" value="${replyDTO.num }">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 60px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="checkbox" name="replyHidden" value="true">비밀글 <input type="hidden" name="replyHidden" value="false"><input type="submit" value="작성"></span>
</form>
댓글 목록<br>
이곳에 댓글 목록이 나타남. 작성자 - 댓글 내용 순으로
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

BoardController

	@PostMapping("/replyInsertPro")
	public String replyInsertPro(ReplyDTO replyDTO,BoardDTO boardDTO, Model model) {
		System.out.println("BoardController replyInsertPro()");
		
		//replyHidden을 boolean으로 변환
		if("true".equals(replyDTO.getReplyHidden())) {
			replyDTO.setReplyHidden(true);
		} else {
			replyDTO.setReplyHidden(false);
		}
		
		boardService.replyInsert(replyDTO);
		return "redirect:/board/content?no="+boardDTO.getNo();
	}

BoardService, BoardDAO, boardMapper는 그대로 놔둠.

댓글 작성하니 이번엔

문법오류인가? 일단 검색해 보니 Project - Clean 했을 경우 문제가 해결된다고 한다.

혹시 몰라서 Tomcat까지 Clean을 하고 restart 하고 댓글 작성하니

다시 NullPointerException 발생. 그래도 희망적인 사실은 400 오류 떴을 때보다 콘솔에서 더 많이 진행됨을 확인할 수 있었다.

num값이 넘어오지 못하는 것 같다. 가장 쉬운 방법은 db에서 auto_increment 속성을 추가해 주면 될 것 같은데.. 그렇다면 auto_increment 속성을 추가해 보자. 어차피 reply 테이블의 num 컬럼은 테이블의 기본키를 위한 의미 없는 컬럼이기 때문에 바꿔도 상관없을 것 같다.

추가적으로도 NullPointerException이 발생하였다. 이 과정에서 auto_increment 속성을 걸어뒀는데 getMaxNum()이 필요할까? content.jsp에 num값을 넘겨줘야 할까? BoardController에 replyHidden을 또 boolean으로 변환하는 것이 필요할까?

즉 아래와 같이 변경했다.

content.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td>${boardDTO.writetime}</td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/list"><input type="button" value="글 목록"></a>
</div>
<hr>
댓글<br>
<form action="${pageContext.request.contextPath}/board/replyInsertPro" method="post">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 60px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="checkbox" name="replyHidden" value="true">비밀글 <input type="hidden" name="replyHidden" value="false"><input type="submit" value="작성"></span>
</form>
댓글 목록<br>
이곳에 댓글 목록이 나타남. 작성자 - 댓글 내용 순으로
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

BoardController

	@PostMapping("/replyInsertPro")
	public String replyInsertPro(ReplyDTO replyDTO,BoardDTO boardDTO, Model model) {
		System.out.println("BoardController replyInsertPro()");
		//replyHidden을 boolean으로 변환
//		if("true".equals(replyDTO.getReplyHidden())) {
//			replyDTO.setReplyHidden(true);
//		} else {
//			replyDTO.setReplyHidden(false);
//		}
		boardService.replyInsert(replyDTO);
		return "redirect:/board/content?no="+boardDTO.getNo();
	}

BoardSerivce

	public void replyInsert(ReplyDTO replyDTO) {
		System.out.println("BoardService replyInsert()");
//		replyDTO.setNum(boardDAO.getMaxNum()+1); //댓글 번호(PK) 값 설정
		replyDTO.setReplyWriteTime(new Timestamp(System.currentTimeMillis())); //댓글 작성 시간
		boardDAO.replyInsert(replyDTO);
	}

BoardDAO

	public void replyInsert(ReplyDTO replyDTO) {
		System.out.println("BoardDAO replyInsert()");
		sqlSession.insert(namespace+".replyInsert", replyDTO);
	}
	
//	public int getMaxNum() {
//		System.out.println("BoardDAO getMaxNum()");
//		return sqlSession.selectOne(namespace+".getMaxNum");
//	}

boardMapper

	<insert id="replyInsert">
		insert into reply(num,id,replyContent,replyHidden,replyWriteTime)
		values(#{num},#{id},#{replyContent},#{replyHidden},#{replyWriteTime})
	</insert>
	
<!-- 	<select id="getMaxNum" resultType="java.lang.Integer"> -->
<!-- 		select max(num) from reply -->
<!-- 	</select> -->

이렇게 하고 댓글을 작성했다.

여전히 오류가 발생하지만 발생하는 이유는 주소줄에서 no=0이라 그런 것 같다. 기존의 no값을 넘겨갈 줄 알았는데 아닌 것 같다. 그래도 값은 들어간 것 같아서 확인해 봤다.

content.jsp에 jstl을 이용해서 나타내기를 하면 될 것 같고, no값이 제대로 받아올 수 있게 수정하면 얼추 될 것 같다.

일단 몇몇 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td>${boardDTO.writetime}</td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/list"><input type="button" value="글 목록"></a>
</div>
<hr>
댓글<br>
<form action="${pageContext.request.contextPath}/board/replyInsertPro" method="post">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 60px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="checkbox" name="replyHidden" value="true">비밀글 <input type="hidden" name="replyHidden" value="false"><input type="submit" value="작성"></span>
</form>
댓글 목록<br>
<c:forEach var="replyDTO" items="${replyList}">
<tr>
<td>${replyDTO.id}</td><td>${replyDTO.replyContent}</td>
</tr>
</c:forEach>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

BoardController

	@PostMapping("/replyInsertPro")
	public String replyInsertPro(ReplyDTO replyDTO,BoardDTO boardDTO, Model model) {
		System.out.println("BoardController replyInsertPro()");
		//replyHidden을 boolean으로 변환
//		if("true".equals(replyDTO.getReplyHidden())) {
//			replyDTO.setReplyHidden(true);
//		} else {
//			replyDTO.setReplyHidden(false);
//		}
		boardService.replyInsert(replyDTO);
		return "redirect:/board/content?no="+boardDTO.getNo();
	}
    
	@GetMapping("/content")
	public String content(BoardDTO boardDTO, ReplyDTO replyDTO, Model model) {
		System.out.println("BoardController Content()");
		boardDTO = boardService.getBoard(boardDTO); //글에 대한 정보
		boardService.readCount(boardDTO); //조회수
		
		List<ReplyDTO> replyList = boardService.getReplyList();
		
		model.addAttribute("boardDTO",boardDTO);
		model.addAttribute("replyDTO",replyDTO);
		return "board/content";
	}

BoardSerivce

	public void replyInsert(ReplyDTO replyDTO) {
		System.out.println("BoardService replyInsert()");
//		replyDTO.setNum(boardDAO.getMaxNum()+1); //댓글 번호(PK) 값 설정
		replyDTO.setReplyWriteTime(new Timestamp(System.currentTimeMillis())); //댓글 작성 시간
		boardDAO.replyInsert(replyDTO);
	}

	public List<ReplyDTO> getReplyList() {
		System.out.println("BoardService getReplyList()");
		return boardDAO.getReplyList();
	}

BoardDAO

	public void replyInsert(ReplyDTO replyDTO) {
		System.out.println("BoardDAO replyInsert()");
		sqlSession.insert(namespace+".replyInsert", replyDTO);
	}

	
//	public int getMaxNum() {
//		System.out.println("BoardDAO getMaxNum()");
//		return sqlSession.selectOne(namespace+".getMaxNum");
//	}

	public List<ReplyDTO> getReplyList() {
		System.out.println("BoardDAO getReplyList()");
		return sqlSession.selectList(namespace+".getReplyList");
	}

boardMapper

	<insert id="replyInsert">
		insert into reply(num,id,replyContent,replyHidden,replyWriteTime)
		values(#{num},#{id},#{replyContent},#{replyHidden},#{replyWriteTime})
	</insert>
	
<!-- 	<select id="getMaxNum" resultType="java.lang.Integer"> -->
<!-- 		select max(num) from reply -->
<!-- 	</select> -->

	<select id="getReplyList" resultType="com.mystory001.domain.ReplyDTO">
		select *
		from reply
		order by replyWriteTime desc
	</select>

문뜩 테이블 설계가 잘 못되었음을 느낀다.

현재 이와같은 ERD인데, 테이블 board와 reply는 no로 연결되어야할 것 같다.

reply 테이블에 no 컬럼을 추가하고 외래키를 지정해주자

다음 ReplyDTO에 no 객체 생성

	private int no;
	
	
	public int getNo() {
		return no;
	}

	public void setNo(int no) {
		this.no = no;
	}

justBoard12 댓글 구현(2) 화면

001cloudid — Sat, 12 Oct 2024 13:38:36 +0900

2일 전 화면 구성에 대해서 테이블 생성과 DTO를 만들었다.

오늘은 화면 구성을 구현하고 다음에 기능을 구현하도록 할 예정이다.

board/content.jsp에 대충 hr태그와 textarea태그를 넣어서 검사를 통해 크기 조정을 해보았다.

추가해야 할 부분은 등록하는 버튼, 작성자, 비밀글 체크박스가 될 것이다. 추가해야 할 부분을 추가해보았다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td>${boardDTO.writetime}</td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/list"><input type="button" value="글 목록"></a>
</div>
<hr>
댓글<br>
<form action="" method="post">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 60px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="checkbox" name="replyHidden">비밀글 <input type="submit" value="작성"></span>
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

뭔가 그럴싸해보인다. 생각보다 나쁘지 않다고 느껴진다.

다음으로는 댓글 목록이 필요하다. 댓글 목록은 댓글 아래 작성자 내용으로 보이게 하려고 한다. 이는 댓글 목록을 가져와 반복문을 통해 출력하면 된다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td>${boardDTO.writetime}</td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/list"><input type="button" value="글 목록"></a>
</div>
<hr>
댓글<br>
<form action="${pageContext.request.contextPath}/board/replyUpdatePro" method="post">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br>
<textarea rows="5" cols="30" style="width: 792px; height: 60px" placeholder="내용을 작성해주세요." name="replyContent"></textarea><br>
<span style="float: right;"><input type="checkbox" name="replyHidden">비밀글 <input type="submit" value="작성"></span>
</form>
<hr>
댓글 목록<br>
이곳에 댓글 목록이 나타남. 작성자 - 댓글 내용 순으로
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

댓글을 작성 → 페이지가 새로고침 → 현재 페이지로 구현하고 싶다. 대부분의 사이트의 경우 ajax로 구현하여 부분만 업데이트 되는 식으로 되어있는 것을 쉽게 확인 할 수 있고, 이 방법은 꽤나 오래된 방법이지 않을까 싶지만 기본부터 다지는 것이 중요하다고 생각되어서 이 방법으로 구현하고 그 후 ajax를 이용해서 구현해 볼 생각이다.

내가 구현하고자하는 방법을 어떻게 구현해야할지 감이 오지 않아 검색을 해보았다. 현재 JSP 페이지에서 댓글을 작성하고, 작성 후 현재 글을 새로 고침하는 기능을 추가하려면 댓글 작성 후 댓글 목록을 포함한 같은 페이지로 리다이렉트해야한다.

즉, 코드로 보자면 먼저 댓글 작성 후 리다이렉트

@PostMapping("/replyUpdatePro")
public String replyUpdatePro(ReplyDTO replyDTO) {
    boardService.replyUpdatePro(replyDTO);
    return "redirect:/board/content?no=" + reply.getBoardNo(); // 댓글이 작성된 게시글로 리다이렉트
}

다음으로 JSP 페이지에서 댓글 목록 표시

@GetMapping("content")
public String viewPost(BoardDTO boardDTO,ReplyDTO replyDTO, Model model) {
    BoardDTO boardDTO = boardService.getBoard(boardDTO);
    List<Reply> reply = boardService.getCommentsByPostId(boardDTO);
    model.addAttribute("boardDTO", boardDTO);
    model.addAttribute("replyDTO", replyDTO);
    return "viewPost"; // 게시글 뷰 JSP
}

정리하자면 1. 댓글 작성 후 해당글로 리다이렉트하여 새로 고침된 상태로 보여줌 2. 댓글 목록을 가져와 JSP에서 반복문을 통해 출력.. 막상 이렇게 하려고나니 jQuery작성하는게 조금 복잡하긴하지만 ajax로 구현하는 게 더 편하겠다는 생각이 든다...

다음에는 본격적으로 구현하는 작업을 해 볼 생각이다.

justBoard11 댓글 구현(1) DB

001cloudid — Thu, 10 Oct 2024 15:05:40 +0900

댓글을 구현해보고자 한다.

객체

댓글과 관련된 객체를 먼저 어디에 무엇을 만들지 먼저 생각해 보도록 하자.

티스토리의 댓글을 살펴보면 댓글 작성자, 댓글 내용, 댓글 작성 시간, 비밀글 여부 이렇게 생각해 볼 수 있다.

DTO를 새로 만들어도 될 것 같고, 아니면 기존에 있던 BoardDTO에 객체를 추가하는 방법이 있을 것 같다.

만약 새로운 ReplyDTO를 만든다면

String id, String replyContent, boolean replyHidden, Timestamp replyWriteTime 이렇게 객체를 만들면 될 것 같다.

BoardDTO에 객체를 추가하는 식으로 한다면

String replyContent, boolean replyHidden, Timestamp replyWriteTime을 추가해 주면 될 것이다.

또한 댓글의 댓글을 작성할 경우를 생각해보아야 한다.

댓글과 대댓글

댓글이 작성될 때마다 한 칸씩 늘어가는 방식보다는 한 댓글에 대댓글을 나열하는 방식으로 만들고자 한다. 댓글 그룹이 필요할 것이고, 들여 쓰기와 답글 순서가 필요할 것이다.

int re_ref 댓글그룹, int re_lev 들여쓰기, int re_seq 답글순서도 함께 추가해야 할 것이다.

구현

모두 로그인을 해야할 수 있는 기능들이다.

1. 일반 댓글과 비밀 댓글

비밀글 체크박스를 둔다. 체크하고 댓글을 작성했을 때 비밀글이 되며, 글의 작성자와 비밀 댓글 작성자만 볼 수 있으며, 그렇지 않은 이용자는 "비밀 댓글이므로 접근할 수 없습니다."라고 구현할 것이다. 이는 어렵지 않게 구현할 수 있을 것 같다. 체크박스를 체크하면 replyHidden이 true가 되게 로직을 짜면 될 것이고, jstl을 이용해서 작성자와 댓글 작성자를 확인하는 과정을 거치면 어렵지 않을 것이다.

2. 위에서 언급했듯이 처음 작성하는 댓글 re_lev을 0으로 설정하고 그 댓글의 대댓글을 re_lev 1로 설정 그 아래로 계속 대댓글의 댓글을 re_lev 1로만 설정하면 댓글과 대댓글 그림과 같이 구현할 수 있을 것 같다.

4. 댓글 수정, 삭제 시 어떻게 구현할지에 대해 두 가지 방법이 있는데 뭘로 할지 아직도 고민 중이다. 수정, 삭제되었을 때 그냥 깔끔하게 완전히 삭제될 것이냐, 아니면 작성자가 삭제했습니다. 와 같은 방식으로 할지... 나는 깔끔한 걸 좋아해서 완전히 삭제되는 것을 선호하나 이것은 둘 다 구현해 보도록 할 예정이다. 만약 작성자가 삭제했습니다. 이 방법으로 구현하려고 하려면 객체가 추가되어야 하므로, 먼저 완전히 삭제되는 방식으로 먼저 구현해 볼 예정이다.

댓글을 작성했을 때 페이지가 새로고침 되지 않고 곧장 글이 작성된다. 이 부분은 ajax를 이용한 것 같은데 기본적인 기능을 모두 구현한 후 마지막에 구현하는 것으로 생각해 볼 예정이다.

DTO 및 테이블 생성

먼저 DTO를 어떻게 해야할지 검색하다가 참고할 만한 정리 글을 보았다. https://velog.io/@cyseok123/%EB%8C%93%EA%B8%80, https://devofroad.tistory.com/59 나중에 막힐 때 힌트식으로 참고하면 될 것 같다. 구현해 놓은 곳을 찾아보면 새로운 DTO(VO)를 만들어서 제작하는 것 같다.

그렇다면 왜 따로 만들까? 궁금증이 생겨 찾아봤지만 결국 원하는 대답을 찾기 어려웠다. 무엇보다 어떻게 검색을 해야 할지 어려웠다. 여기에서는 ChatGPT의 도움을 받았다.

BoardDTO에 댓글 객체 추가
장점
구조가 단순해져서 게시판과 댓글을 함께 다룰 수 있어 편리함
댓글 수가 적고 게시글과 강하게 연관되어 있는 경우, 데이터 조회 시 편리함
단점
댓글 수가 많아지거나 복잡한 기능(대댓글, 좋아요 등)을 추가할 경우 DTO가 비대해지고 관리하기 어려움
게시글과 댓글의 독립적인 관리가 어려움
ReplyDTO 클래스 만들기
장점
댓글 관련 기능을 독립적으로 관리할 수 있어 확장성이 높음
게시글과 댓글의 책임을 분리하여 코드의 가독성과 유지보수성을 높일 수 있음
단점
댓글을 조회할 때 게시글과 댓글을 함께 조합해야 하므로 복잡성을 증가할 수 있음
클래스와 연관 관계를 설정

다 따로 만드는 것에는 이유가 있었다. 새로운 클래스로 DTO를 만드는 방식으로 구현하도록 하겠다.

ReplyDTO

package com.mystory001.domain;

import java.sql.Timestamp;

public class ReplyDTO {
	
	private String id; //댓글 작성자
	private String replyConent; //댓글 내용
	private boolean replyHidden; //비밀글 여부(true → 비밀글, false → 일반글(default))
	private Timestamp replyWriteTime; //댓글 작성 시간
	private int re_ref; //댓글 그룹
	private int re_lev; //들여쓰기
	private int re_seq; //댓글 순서
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getReplyConent() {
		return replyConent;
	}
	public void setReplyConent(String replyConent) {
		this.replyConent = replyConent;
	}
	public boolean isReplyHidden() {
		return replyHidden;
	}
	public void setReplyHidden(boolean replyHidden) {
		this.replyHidden = replyHidden;
	}
	public Timestamp getReplyWriteTime() {
		return replyWriteTime;
	}
	public void setReplyWriteTime(Timestamp replyWriteTime) {
		this.replyWriteTime = replyWriteTime;
	}
	public int getRe_ref() {
		return re_ref;
	}
	public void setRe_ref(int re_ref) {
		this.re_ref = re_ref;
	}
	public int getRe_lev() {
		return re_lev;
	}
	public void setRe_lev(int re_lev) {
		this.re_lev = re_lev;
	}
	public int getRe_seq() {
		return re_seq;
	}
	public void setRe_seq(int re_seq) {
		this.re_seq = re_seq;
	}

}

테이블 생성

cmd로 스키마(데이터베이스) 조회를 하려고 했는데 예약어가 기억이 안났다. 데이터베이스 조회하기 show databases이다. 참고로 MySQL의 경우 스키마와 데이터베이스가 거의 동일한 의미이다.

use test 를 이용해서 데이터베이스를 사용하게 끔하고 테이블 생성

테이블을 생성하려고하니 PK를 뭘로해야할지에 대해 문제가 생겼다. 그래서 num이라는 컬럼 PK로 지정히기로 함. 기본키로만 사용하려고 만든 컬럼이다. 또한 ReplyDTO에도 num이라는 객체를 만들어줬으며 conent라고 오타가 있어 함께 수정했다.

package com.mystory001.domain;

import java.sql.Timestamp;

public class ReplyDTO {
	
	private String id; //댓글 작성자(FK - Member)
	private String replyContent; //댓글 내용
	private boolean replyHidden; //비밀글 여부(true → 비밀글, false → 일반글(default))
	private Timestamp replyWriteTime; //댓글 작성 시간
	private int re_ref; //댓글 그룹
	private int re_lev; //들여쓰기
	private int re_seq; //댓글 순서
	private int num; //댓글 번호(PK)
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getReplyContent() {
		return replyContent;
	}
	public void setReplyContent(String replyContent) {
		this.replyContent = replyContent;
	}
	public boolean isReplyHidden() {
		return replyHidden;
	}
	public void setReplyHidden(boolean replyHidden) {
		this.replyHidden = replyHidden;
	}
	public Timestamp getReplyWriteTime() {
		return replyWriteTime;
	}
	public void setReplyWriteTime(Timestamp replyWriteTime) {
		this.replyWriteTime = replyWriteTime;
	}
	public int getRe_ref() {
		return re_ref;
	}
	public void setRe_ref(int re_ref) {
		this.re_ref = re_ref;
	}
	public int getRe_lev() {
		return re_lev;
	}
	public void setRe_lev(int re_lev) {
		this.re_lev = re_lev;
	}
	public int getRe_seq() {
		return re_seq;
	}
	public void setRe_seq(int re_seq) {
		this.re_seq = re_seq;
	}

}

문뜩 boolean타입이 MySQL에 있었나라는 생각이 들었다. 그래서 과거 프로젝트에서 int로 구분했던 것 같은데.. 찾아보니

MySQL에서 BOOLEAN 타입이 없기 때문에 TINYINT(1)을 사용하여 BOOLEAN을 대신한다고 되어있다.

외래키 제약조건을 설정하지 않았다.

테이블을 수정하면서 외래키를 추가하고 싶다면

"alter table 테이블명 add foreign key(컬럼명) references 참조테이블(참조컬럼);"

만약 참조하는 테이블의 PK가 하나라면 참조컬럼은 생략 가능함.

테이블을 생성하고 수정하면 바로바로 구조 확인을 해주는 것이 필수이기 때문에 테이블 생성, 수정, 삭제를 했을 때 반드시 구조 확인하는 습관을 들여놨다.

일단 기본적으로 테이블 설계와 DTO를 설정해놨으니 남은 부분은 화면 그리고 기능 구현을 하면 될 것 같다.

DBMS

001cloudid — Sun, 6 Oct 2024 13:51:34 +0900

목차

DB와 DBMS
SQL
용어
데이터베이스 구축 절차

1. DB와 DBMS

DB와 DBMS 관계

위의 그림은 DB와 DBMS의 관계를 아주 쉽게 표현해 놓은 것이라고 생각한다. 그렇다면 DB는 무엇이면 DBMS는 무엇인지에 대해 자세히 알아보고자 한다.

DB란?

조직화된 정보들의 모음, 데이터의 집합, 데이터의 저장 공간 자체를 의미

DB의 예시

DBMS란?

DataBase Management System의 약자로 데이터의 집합인 데이터베이스를 관리해 주는 프로그램을 의미
데이터베이스 생성부터 데이터베이스의 유지, 저장 공간, 백업/복구 등을 관리
데이터 검색, 삽입, 수정, 삭제 작업을 함.
유형 : 관계형, 계층형, 망형, 객체지향형 등
종류 : Oracle, MySQL, MariaDB, SQL Server, DB2, SQLite 등
특징
데이터 무결성 : 제약 조건을 통해 데이터의 오류를 관리
데이터 독립성 : 데이터 베이스가 변경되거나 저장소가 변경되어도 기존 데이터에 영향을 미치지 않음
보안 : 권한, 암호화 등의 보안 기능
데이터 중복의 최소화 : 공유가 가능하므로 동일한 데이터가 중복 저장되는 것을 방지
응용 프로그램 제작 및 유지보수의 편의성 : 여러 응용 프로그램과 호환되어 프로그램 개발 및 유지보수가 쉬움
데이터의 안정성 향상 : 백업, 복구 기능을 제공

2. SQL(Structured Query Language)

관계형 DBMS에서 사용되는 언어
ANSI 표준이므로 모든 DBMS에서 동일하게 사용.
단, 모든 DBMS의 SQL문이 완벽하게 동일하지 않음
표준 SQL과 함께 자체 문법도 포함
Oracle의 경우 +PL/SQL, MySQL의 경우 +SQL, SQL Server : + T-SQL
구문
DQL(데이터질의어) : select
DDL(데이터정의어) create alter drop truncate
DML(데이터조작어) insert update delete
DCL(데이터제어어) grant revoke
TCL(트랜잭션제어어) commit rollback savepoint
※ 교재에 따라 select를 DML로 포함한다. 나는 그게 중요한 건 아니라고 생각하는 주의라 그냥 그런가 보다 하고 넘어가면 된다고 생각한다.

3. 용어

데이터베이스에서 가장 어려운 것 중 하나를 뽑으라면 '용어'라고 대답할 것이다. 같은 의미인데 부르는게 참으로 다양하다.

DBMS(Database Management System)
데이터베이스 관리 시스템의 약자. 데이터베이스를 관리하는 시스템 또는 프로그램
DB
조직화 된 정보들의 모음 또는 데이터의 집합. DB는 고유한 이름을 가져야 함
객체(Object)
유무형의 정보를 가지고 있는 독립적인 실체. 종류로는 테이블, 뷰, 인덱스 등이 있음
테이블(Table)
데이터베이스 내에서 데이터를 저장할 때 가장 많이 사용하는 객체 유형. 행과 열로 이루어져 있음
데이터(Data)
테이블과 같은 객체에 저장된 실제 정보
열(Column)
열, 컬럼, 속성, 어트리뷰트(Attribute)라고 부름. 테이블에서 세로 부분, 하나의 테이블은 여러 개의 열로 구성
※ 여기서는 컬럼이라는 용어로 부를 예정
열 이름(Column name)
각 열을 구분하기 위한 이름. 테이블 내에서 고유해야 함
행(Row)
행, 로우, 레코드라고도 함. 테이블에서 가로 부분, 데이터 전체를 의미
SQL
사람과 DBMS가 소통하기 위해 사용하는 언어
기본키(Primary Key, PK)
테이블의 컬럼을 구분해 줄 수 있는 대표 컬럼에게 부여하는 제약 조건으로, 중복값과 비어 있는 값이 들어 올 수 없음
외래키(Foreign Key, FK)
테이블과 테이블을 연결해 주는 제약 조건. 테이블에서 FK가 적용된 컬럼을 자식 컬럼, FK가 참조하는 컬럼을 부모 컬럼이라고 함
스키마(Schema)
데이터를 담는 그릇
※MySQL의 경우 스키마가 DB와 동일한 의미로 사용. Oracle에서는 스키마가 유저와 동일한 의미로 사용

4. 데이터베이스 구축 절차

데이터베이스 구축 절차

DBMS를 설치한 후 『데이터베이스 생성 → 테이블 생성 → 데이터 입력 → 데이터 조회 및 활용』으로 데이터베이스 구축 절차가 이루어진다. 그 이 후 데이터 백업 및 관리나 응용 프로그램 개발 시 데이터 활용 등에 데이터가 사용된다. MySQL을 기준으로 설명할 예정이다.

※SQL문은 대문자로 작성하는 것이 통상적인 관행이다. 하지만 나는 대문자로 작성하는 것이 익숙하지도 않고 오타 날 확률이 높아 소문자로 작성하는 편이다. 앞으로도 그럴 예정

데이터베이스 생성

create schema 스키마명;

테이블 생성

create table 테이블명(컬럼명1 데이터타입(컬럼사이즈)[default, 제약조건], 컬럼명2 데이터타입(컬럼사이즈) [default, 제약조건] ,...);

이름 결정 시 유의 사항

데이터베이스명, 스키마명, 테이블명, 컬럼명 등은 영문을 사용(한글도 가능하나 호환성 문제가 발생할 가능성이 있음)

영문으로 시작해야하며, 영문/숫자/특수문자(_,#,$)가 혼합될 수 있음

데이터타입

※ char와 varchar : 공간효율 varchar, 성능 및 속도 char

제약조건

auto_increment 속성

데이터 삽입 시 자동으로 1부터 시작해서 1씩 증가하는 값이 반환. 시작값과 증가값은 변경 가능.

단, PK, Unique 제약조건이 선언된 컬럼 + 숫자 데이터 타입 걸럼에만 가능

create table 테이블명 (컬럼명 int/bigint auto_increment primary key,...); //테이블 생성 시
alter table 테이블명 auto_increment=입력값; //테이블 생성 후 auto_increment 시작값 변경
set @@auto_increment_incrrment=증가값; //증가값 변경

데이터 입력, 수정 및 활용

데이터 입력

insert into 테이블명[(컬럼1, 컬럼2,...)]
values (값1, 값2,...);

값 작성 방식 숫자의 경우 그대로 숫자만 작성, 문자, 날짜의 경우 '문자/날짜'로 작은 따옴표 안에 작성

단, 날짜는 '년-월-일'으로 작성

데이터 수정

update 테이블명 
set 컬럼명1 = 값, 컬럼명2 = 값,...
[where 조건문];

데이터 삭제

delete from 테이블명
[where 조건문];

데이터 수정, 삭제 시 where문이 없을 경우 컬럼명=값에 대한 모든 데이터가 수정되고, 데이터 모두 삭제됨

데이터 조회

select 컬럼명|*
from 테이블명
where 조건문
group by 그룹
having 그룹 조건
order by 컬럼명;

select 문의 논리적 실행 순서 from → where → group by → having → select → order by

예약어 distinct 데이터 값 중복 제거, alias 별칭

웹 시큐리티

001cloudid — Sat, 5 Oct 2024 12:39:10 +0900

프로젝트에서 스프링 웹 시큐리티를 이용해 암호화를 적용해 본 적이 있다.

스프링 웹 시큐리티

자바 기반의 스프링 애플리케이션에서 보안을 강화하기 위한 것이다.

주요 기능으로는 인증, 인가, CSRF보호, 세션 관리, 비밀번호 암호화 등이 있다.

주요 개념으로는 SecurityFilterChain, AuthenticationManager, UserDetailsService, GrantedAuthority가 있다.

주요 기능

인증(Authentication)
사용자 인증을 통해 애플리케이션에 접근할 수 있는 사용자를 확인
다양한 인증 방식을 지원
인가(Authorization)
인증된 사용자가 특정 자원에 접근할 수 있는지를 결정
역할 기반 접근 제어 및 권한 기반 접근 제어를 지원
CSRF 보호
크로스 사이트 요청 위조 공격으로부터 애플리케이션을 보호
세션 관리
사용자의 세션을 관리하고, 세션 고정 공격을 방지
비밀번호 암호화
사용자의 비밀번호를 안전하게 저장하기 위해 다양한 암호화 알고리즘을 지원
커스터마이징
필터, 인터셉터 등을 통해 보안 기능을 커스터마이즈

주요 개념

SecurityFilterChain
요청을 처리하는 필터 체인으로, 각 필터는 요청을 가로채고 특정 작업을 수행
AuthenticationManager
인증 요청을 처리하는 컴포넌트로, 사용자 정보를 확인하고 인증 토큰을 생성
UserDetailsService
사용자 정보를 제공하는 서비스 인터페이스로, 데이터베이스에서 사용자 정보를 로드하는 데 사용
GrantedAuthority
사용자의 권한을 나타내는 인터페이스로, 특정 권한을 가진 사용자인지를 확인하는 데 사용

구현 과정

환경 설정
- Maven이나 Gradle을 통해 spring-security-core, spring-security-web, spring-security-config를 시큐리티 관련 의존성 추가
- web.xml 파일에 필터를 설정하여 시큐리티 필터가 작동하도록 함
보안 설정 XML 또는 Java 구성
- 보안 설정을 XML 파일 또는 Java 클래스를 통해 구성
1) XML을 설정하면 spring-security.xml 파일에 설정을 정의
2) Java 클래스를 사용하면 WebSecurityConfigurerAdapter 를 확장하여 설정
사용자 인증 설정
1) XML 설정
<security:authentication-manager>
<security:authentication-provider>
<security:user-service>
<security:user name="user" password="password" authorities="ROLE_USER"/>
<security:user name="admin" password="admin" authorities="ROLE_ADMIN"/>
</security:user-service>
</security:authentication-provider>
</security:authentication-manager>
2) Java 설정 : AuthenticationManagerBuilder를 사용해 메모리 기반 인증을 설정
HTTP 보안 설정
1) XML 설정
<security:http>
 <security:intercept-url pattern="/admin/**" access="ROLE_ADMIN" />
 <security:intercept-url pattern="/" access="permitAll" />
 <security:intercept-url pattern="/**" access="isAuthenticated()" />
 <security:form-login login-page="/login" permit-all="true" />
 <security:logout permit-all="true" />
</security:http>
2) Java 설정
HttpSercurity를 사용하여 요청에 대한 접근 권한을 설정. URL 패턴에 따라 권한을 부여하고, 폼 로그인 및 로그아웃 기능을 추가
로그인 및 로그아웃 설정
로그인 페이지를 설정하고, 사용자가 로그인을 할 수 있도록 함. 로그아웃 기능을 통해 사용자가 세션을 종료할 수 있도록 설정
종합적인 접근 제어
anyRequest().authenticated()와 같은 메소드를 사용하여 인증된 사용자만 접근할 수 있도록 모든 요청에 대한 기본 보안을 설정

기본 설정 예시

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.inMemoryAuthentication()
            .withUser("user").password("{noop}password").roles("USER")
            .and()
            .withUser("admin").password("{noop}admin").roles("ADMIN");
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
                .antMatchers("/admin/**").hasRole("ADMIN")
                .antMatchers("/", "/home").permitAll()
                .anyRequest().authenticated()
                .and()
            .formLogin()
                .loginPage("/login")
                .permitAll()
                .and()
            .logout()
                .permitAll();
    }
}

예시에 사용된 코드 설명

@Configuration
→ 해당 클래스가 하나 이상의 @Bean 메소드를 포함하고 있으며, Spring IoC 컨테이너에 의해 처리되어야 함을 나타냄. 즉 이 클래스는 스프링의 설정 클래스

@EnableWebSecurity
→ 스프링 시큐리티를 활성화함. 스프링 시큐리티 관련 구성 요소들이 자동으로 설정되고 기본적인 보안 필터가 적용됨

SecurityConfig extends WebSecurityConfigurerAdapter

→ 웹 애플리케이션의 보안 구성을 정의하는 데 사용

configure(AuthenticationManagerBuilder auth) throws Exception

→ 사용자 인증을 설정하는 데 사용. AuthenticationManagerBuilder를 통해 인증 관련 설정을 정의

웹 시큐리티의 주요 기능이 무엇인가에 대해서 물어본다면 비밀번호 암호화 말고는 떠오르지 않는데 여러 기능이 있다는 것을 알게 되었다. 구현을 하기엔 사실 좀 복잡하다... 최근에 한 게시판 프로젝트에 암호화를 한 번 적용시켜도록 하자.

프레임워크, Spring과 Spring Boot

001cloudid — Fri, 4 Oct 2024 15:44:32 +0900

프레임워크

"프레임워크가 무엇인가요?"라고 물어본다면 "애플리케이션을 만드는 데 기본적인 골격을 제공하는 소프트웨어"라고 대답할 것 같다. 정보처리기사에서 프레임워크라는 용어가 나오기 때문에 이렇게 외운 적 있다. 뭔가 부족한 답변인 것도 안다. 그렇다면 프레임워크란 무엇인지에 대해 정리해 보도록 하겠다.

프레임워크는 소프트웨어 개발을 위한 일종의 틀이나 구조로, 특정한 문제를 해결하기 위해 미리 설계된 클래스와 라이브러리의 집합이다. 개발자는 이 틀을 기반으로 애플리케이션을 개발하면서 일관성과 생산성을 높일 수 있다.

프레임워크의 특징으로는 재사용성, 구조 제공, 기능의 확장성이 있다.

재사용성 : 이미 정의된 코드를 재사용하여 개발 시간을 단축
구조 제공 : 일관된 코드 작성을 위해 규칙과 구조를 제공
기능의 확장성 : 필요에 따라 기능을 추가, 수정 가능

Spring과 SpringBoot

자바 프레임워크의 종류

스프링 프레임워크, 스프링 부트, 자바 서버 페이스스(JavaServer Faces, JSF), 하이버네이트, 스트럿츠 등 다양하게 존재한다.

국내에서 가장 많이 사용되는 것이 스프링과 스프링 부트가 아닐까 싶다. 취업 현황을 보더라도 스프링과 스프링 부트를 사용할 수 있는 개발자를 많이 뽑는 것으로 봐서는... 그렇다면 스프링과 스프링 부트는 무엇이며 둘의 공통점과 차이점은 무엇일까? 에 대해 알아보고자 한다. 그 전에 내가 생각하는 차이점은(실제로 스프링 부트를 사용한 경험은 없어 그 차이를 잘 모르지만) '스프링을 경량화한 것이 스프링 부트'라고 대답할 것이다. 자세히 알아보자

공통점

자바 기반
의존성 주입 : 의존성 주입을 활용하여 코드의 모듈성을 높이고, 테스트 용이성을 향상
모듈화 : 스프링의 다양한 모듈(Spring MVC, Spring Data(사용해본적없음))을 사용할 수 있어 다양한 기능을 지원
POJO 중심 : Plain Old Java Object를 활용하여 비즈니스 로직을 구현

차이점(스프링 - 초록색, 스프링 부트 - 파란색)

설정 방식
-XML이나 Java Configuration 클래스를 사용해 설정
-자동 설정 기능을 통해 대부분의 설정을 자동으로 처리
기본 제공 기능
-기본적으로 핵심 기능만 제공되며, 필요한 라이브러리나 설정을 직접 추가
-내장 웹 서버를 포함하고 있어, 별도의 서버 설정 없이도 애플리케이션을 바로 실행 가능
프로젝트 시작
-새로운 프로젝트를 시작할 때 필요한 설정이 많고, 초기 설정이 복잡
-Spring Initializr와 같은 도구를 통해 간편하게 시작할 수 있고, 기본적인 프로젝트 구조가 자동으로 생성
의존성 관리
-의존성 관리를 수동으로 해야 할 경우가 많음
-스타터 의존성을 제공하여 필요한 라이브러리를 쉽게 관리
배포
-WAR 파일로 배포하거나 외부 서버에 배포
-JAR 파일로 패키징하여 독립 실행형 애플리케이션으로 쉽게 배포

요약하자면 "스프링 부트는 스프링의 장점을 더욱 쉽게 활용할 수 있게 해준다."라고 할 수 있다.

참고교재 : 정보처리기사 실기_시나공, 코드로 배우는 스프링 웹 프로젝트_남가람북스

redirect, redirect와 RequestDispatcher

001cloudid — Thu, 3 Oct 2024 13:40:07 +0900

redirect

redirect가 붙고 안 붙고의 차이에 대해서 알아보고자 한다.

	@GetMapping("/insert")
	public String insert() {
		System.out.println("BoardController insert()");
		return "board/insert";
	}
	
	@PostMapping("/insertPro")
	public String insertPro(BoardDTO boardDTO) {
		System.out.println("BoardController insertPro()");
		boardService.insert(boardDTO);
		
		return "redirect:/board/list";
	}

그냥 게시판을 만들 때 리턴값을 redirect를 붙이고 안 붙이고 차이가 있다. 사실 전부터 이해가 될 듯 말 듯한 내용이다.

현재 list페이지이다. 여기서 글쓰기를 누른다면

insert페이지로 이동한다. 위의 코드대로 작성하기를 누르면?

글이 작성되고 list 페이지로 넘어간다. 그렇다면 insertPro() 메소드에서 redirect를 없앤다면?

	@PostMapping("/insertPro")
	public String insertPro(BoardDTO boardDTO) {
		System.out.println("BoardController insertPro()");
		boardService.insert(boardDTO);
		
//		return "redirect:/board/list";
		return "board/list";
	}

이와 같이 코드를 변경하고 똑같은 작업을 해보자

list페이지로 넘어가지 않고 위의 화면이 나타난다. 그렇다면 글은 작성되었을까?

글은 작성된 것이 확인된다.

즉 redirect가 붙고 안 붙고의 차이를 정리하면,

redirect가 붙은 경우
클라이언트에게 다른 URL로 이동하도록 지시함. "redirect:/board/list"라고 한다면 서버는 클라이언트에게 /board/list로 새로운 요청을 보내라는 응답을 함. 이 방식은 보통 폼 제출 후에 사용되며, 페이지 새로 고침 시 동일한 요청이 다시 발생하는 것을 방지한다.
redirect가 붙지 않은 경우
지정한 뷰의 이름을 반환하고, 해당 뷰를 렌더링하여 클라이언트에게 직접 보내줌. "board/insert"라고 하면, 해당 JSP 페이지를 서버가 렌더링하여 클라이언트에게 응답으로 전달함. 주로 데이터를 입력받는 폼을 표시할 때 사용됨.

즉, redirect는 클라이언트를 다른 URL로 이동시키고, redirect가 붙지 않는 경우는 지정된 뷰를 직접 보여주는 차이가 있다.

redirect와 RequestDispatcher

JSP에서는 forward보다는 주로 RequestDispatcher를 통해 내부적으로 요청을 포워딩하는 방식으로 처리됨

예시)

redirect방식

고객이 고객센터로 상담원에게 123번으로 전화를 건다.
상담원은 고객에게 "해당 문의 사항은 124번으로 다시 문의해주시겠어요?
고객은 통화를 끊고 124번으로 전화를 걸어 일을 처리한다.

forward(RequestDispatcher)

고객이 고객센터로 상담원에게 123번으로 전화를 건다.
상담원은 해당 문제를 해결하지 못 해 슈퍼바이저에게 답을 얻는다.
상담원은 슈퍼바이저에게 얻은 답을 가지고 문제사항을 처리해준다.

참고 : https://doublesprogramming.tistory.com/63

차이)

redirect

정의 : 클라이언트에게 새로운 URL로 이동하라고 지시
작동 방식 : 서버가 클라이언트에게 HTTP 상태 코드를 포함한 응답을 보내며, 새로운 URL로 요청을 보냄
클라이언트 URL : 클라이언트의 URL이 변경. 사용자가 보게 되는 URL이 실제로 리다이렉트된 주소로 바뀜
세션/속성 : 리다이렉션 후에는 요청 속성을 잃어버림. 필요한 데이터는 세션이나 파라미터 등을 통해 전달해야함
사용 예 : 폼 제출 후, 결과 페이지로 이동할 때 많이 사용

RequestDispatcher(Forward)

정의 : 요청을 다른 리소스로 내부적으로 전달
작동 방식 : 서버가 요청을 다른 서블릿이나 JSP 페이지로 포워딩하여 해당 리소스를 처리하도록 함
클라이언트 URL : 클라이언트의 URL이 변경되지 않음. URL은 원래 요청한 URL을 그대로 유지
세션/속성 : 요청 속성과 세션 속성을 모두 공유 할 수 있어 같은 요청 내에서 데이터 전달에 용이
사용 예 : 같은 요청 내에서 다른 뷰를 렌더링할 때 사용

→ 요약

URL의 변화
redirect - URL이 변경
Forward - URL이 유지
데이터 전달
redirect - 요청 속성을 잃음
Forward - 속성을 공유
용도
redirect - 주로 요청 후 결과 페이지로 이동할 때
Forward - 같은 요청 내에서 뷰를 전환할 때

CSS

001cloudid — Thu, 3 Oct 2024 12:40:07 +0900

목차

1. CSS

2. 스타일

3. 선택자

4. 우선순위

1. CSS

Cascading style sheets의 약자로 HTML태그로 작성한 웹 문서 내용에 디자인으로 옷을 입혀주는 것

형식은 선택자(태그){속성1:값1; 속성2:값2;....}이다.

2. 스타일

스타일은 3가지가 있다.

인라인 스타일 : 태그에 바로 넣기
내부 스타일 시트 : head 태그 안에 <style>태그 안에 선택자,태그를 이용해서 스타일 넣기
외부 스타일 : 외부에 파일을 만들어 가져다 쓰는 방법으로 공통적으로 스타일 적용하기 유용함.

3. 선택자

전체 선택자 : *
태그 선택자 : id=id이름 #id이름 혹은 class=class이름 .class이름

4. 우선순위

!important
인라인 스타일
id 스타일
class 스타일
태그 스타일

중복된다면 마지막에 쓴 것이 적용됨

페이지 처리

001cloudid — Wed, 2 Oct 2024 12:50:19 +0900

페이지 처리 또는 페이징 처리와 검색

※페이징 처리 기법 X

page에 필요한 객체 → pageDTO

접근 제어자를 private를 해줌으로써 객체에 직접적으로 접근하지 못하게 함. lombok을 사용하면 어노테이션을 이용해서 getter/setter, 생성자를 작성 안해줘도 된다고 하지만, lombok을 제대로 사용해본적이 없으므로

public class PageDTO {

	private int pageSize; //글의 개수
	private int currentPage; //현재 페이지
	private String pageNum;
	
	private int startRow; //시작하는 행 번호
	private int endRow; //끝나는 행 번호
	
	private int pageBlock; //한 화면에 보여줄 페이지 개수
	private int startPage; //시작 페이지
	private int endPage; //끝 페이지
	
	private int count; //전체 글의 개수
	private int pageCount; //전체 페이지 개수
	
	private String search; //검색어

	public int getPageSize() {
		return pageSize;
	}

	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}

	public int getCurrentPage() {
		return currentPage;
	}

	public void setCurrentPage(int currentPage) {
		this.currentPage = currentPage;
	}

	public String getPageNum() {
		return pageNum;
	}

	public void setPageNum(String pageNum) {
		this.pageNum = pageNum;
	}

	public int getStartRow() {
		return startRow;
	}

	public void setStartRow(int startRow) {
		this.startRow = startRow;
	}

	public int getEndRow() {
		return endRow;
	}

	public void setEndRow(int endRow) {
		this.endRow = endRow;
	}

	public int getPageBlock() {
		return pageBlock;
	}

	public void setPageBlock(int pageBlock) {
		this.pageBlock = pageBlock;
	}

	public int getStartPage() {
		return startPage;
	}

	public void setStartPage(int startPage) {
		this.startPage = startPage;
	}

	public int getEndPage() {
		return endPage;
	}

	public void setEndPage(int endPage) {
		this.endPage = endPage;
	}

	public int getCount() {
		return count;
	}

	public void setCount(int count) {
		this.count = count;
	}

	public int getPageCount() {
		return pageCount;
	}

	public void setPageCount(int pageCount) {
		this.pageCount = pageCount;
	}

	public String getSearch() {
		return search;
	}

	public void setSearch(String search) {
		this.search = search;
	}
	
}

Controller

목록이 많은 곳에 작성한다. 예를 들어 게시판이 대표적일 것이다.

	@GetMapping("/list")
	public String main(HttpServletRequest request, Model model, PageDTO pageDTO) {
		System.out.println("BoardController main()");
		
		String search = request.getParameter("search"); //검색어 가져오기
		
		//페이지
		int pageSize = 5; //화면에 보여줄 글의 개수
		String pageNum = request.getParameter("pageNum");
		if(pageNum ==null) {
			pageNum = "1";
		}
		int currentPage =Integer.parseInt(pageNum);	//int형 currentPage 변수명에 pageNum을 정수형으로 변경	
		
		//pageDTO에 저장
		pageDTO.setPageSize(pageSize);
		pageDTO.setPageNum(pageNum);
		pageDTO.setCurrentPage(currentPage);
		pageDTO.setSearch(search);
		
		List<BoardDTO> boardList = boardService.getBoardList(pageDTO); //게시물
		
		int count = boardService.getBoardCount(pageDTO); //전체 글의 개수 구하기
		int pageBlock = 5; //한 화면에 보여 줄 페이지 개수 설정
		int startPage = (currentPage - 1) / pageBlock * pageBlock + 1; //한 화면에 보여 줄 시작 페이지(1~10 -> 1, 11~20 -> 11,...)
		int endPage = startPage + pageBlock - 1; //한 화면에 보여 줄 끝 페이지
		int pageCount = count / pageSize + (count%pageSize==0? 0:1); //전체 페이지 개수
		if(endPage>pageCount) {
			endPage = pageCount;
		}
		
		pageDTO.setCount(count);
		pageDTO.setPageBlock(pageBlock);
		pageDTO.setStartPage(startPage);
		pageDTO.setEndPage(endPage);
		pageDTO.setPageCount(pageCount);
		
		model.addAttribute("boardList",boardList);
		model.addAttribute("pageDTO",pageDTO);
		
		return "board/list";
	}

Service

	public List<BoardDTO> getBoardList(PageDTO pageDTO) {
		System.out.println("BoardService getBoardList()");
		
		//시작하는 행 번호 구하기(currentPage,pageSize)
		int currentPage = pageDTO.getCurrentPage();
		int pageSize = pageDTO.getPageSize();
		int startRow = (currentPage - 1) * pageSize + 1;
		int endRow = startRow + pageSize - 1;
		
		pageDTO.setStartRow(startRow - 1);
		pageDTO.setEndRow(endRow);
		
		return boardDAO.getBoardList(pageDTO);
	}

DAO

	public List<BoardDTO> getBoardList(PageDTO pageDTO) {
		System.out.println("BoardDAO getBoardList()");
		return sqlSession.selectList(namespace+".getBoardList", pageDTO);
	}

mapper

	<select id="getBoardList" resultType="com.mystory001.domain.BoardDTO">
		select *
		from board
		<if test="search != null">
		where `subject` like concat('%',#{search},'%')
		</if>
		order by `no` desc
		limit #{startRow}, #{pageSize}
	</select>

HTML

001cloudid — Wed, 2 Oct 2024 11:20:45 +0900

목차

1. HTML이란?

2. HTML 구조

3. 태그

1. HTML이란?

웹 문서를 만드는 언어이다.

HTML은 Hyper Text Markup Language의 약자이다.

HyperText란? 문서를 서로 연결해주는 링크를 의미한다. 인터넷에서 링크만 클릭하면 다른 페이지나 사이트로 쉽게 연결할 수 있다.

Markup이란? 웹 브라우저에 내용을 보여주는 텍스트, 이미지, 영상 등의 위치를 표시한다는 의미이다.

2. HTML 구조

<!DOCTYPE html> : 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻
<html>~</html> : 웹 문서의 시작과 끝을 나타내는 태그. 웹 브라우저가 <html>태그를 만나면 </html>까지 소스를 읽어 화면에 표시
<head>~</head> : 웹 브라우저가 웹 문서를 헤석하는 데 필요한 정보를 입력하는 부분
<title>~</title> : 웹 문서의 타이틀
<body>~</body> : 실제로 웹 브라우저 화면에 나타나는 내용

3. 태그

제목을 나타내는 태그
h1이 가장 큰 제목이고, 점점 작아짐.

ex)
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>

hn 태그

텍스트 단락을 만드는 태그

내용

ex)
본문의 내용은 여기에1
본문의 내용은 여기에2
본문의 내용은 여기에3

p 태그

줄 바꿈

편집기에서 줄을 바꾸더라도 웹 브라우저에서는 한 줄로 표시

brake를 뜻한다.
ex)
HTML(Hyper Text Markup Language) : 웹 문서를 만드는 언어 
안녕하세요 
안녕하세요

br 태그

인용할 때 쓰는 태그

사용빈도는 그리 높지 않음.

<blockquote> 인용문 내용 </blockquote>

ex)
<blockquote>인용문 내용1 인용문 내용2</blockquote>

blockquote 태그

글자 진하게 태그

내용

글자 진하게 강조 태그

내용

기울기 태그

내용

밑줄 태그

내용

취소선 태그

<s> 내용 </s>

위첨자 태그

내용

아래첨자 태그

내용

영역 표시 태그 : <div> 내용 </div>

작은 영역 표시 태그 : 내용

※ 주로 영역 표 시작은 영역 표시로 쓰인다.

<div>영역 표시 작은 영역 표시</div>

텍스트 굵게 강조

굵게 강조할 텍스트

주석 달기

Ctrl + Shift + C
Ctrl + Shift + /

모양 정렬

Ctrl + Shift + F

공백

 

※공백과 띄어쓰기 차이

공백(\&nbsp\;)를 여러 번 작성하면 여러 번 작성한 만큼 공백이 생기지만, 띄어쓰기(space bar)는 여러 번 작성해도 한 번만 인식

목록에는 순서가 있는 것과 순서가 없는 것이 있다.

목록 태그는 <li></li>인데, 단독으로 사용할 수 없다. 부모 태그가 있어야 하는데 ,

부모 태그로는 '순서가 있는 목록 태그 : <ol> </ol> / 순서가 없는 목록 태그 : <ul> </ul>'이다.

<ol>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ol>

순서가 있는 목록

<ol>태그의 속성으로는 type과 start가 있다.

<ol>태그 안에 type="A", type="a", type="I", type="i"를 써준다면 순서목록의 타입을 바꿀 수 있다.

기본적으로는 숫자이다.

<ol type="A">
<li>목록1</il>
<li>목록2</il>
<li>목록3</il>
</ol>

순서가 있는 목록

또한 시작점도 바꿀 수 있는데,

<ol type="A" start="4">
<li>목록4</li>
<li>목록5</li>
<li>목록6</li>

순서가 있는 목록 시작점 변경

순서가 없는 목록 태그

<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>

순서가 없는 목록

ul 속성(type)을 이용하여 타입을 변경해 줄 수 있다.

<ul type="circle">
<ul type="square">

설명 목록을 만드는 태그

용어와 그에 대한 설명 리스트 형식으로 정의 때 사용하는 태그 : <dl> 내용 </dl>

용어나 이름을 나타내는 태그 : <dt> 내용 </dt>

요소와 해당 용어에 대한 설명을 나타내는 태그 : <dd> 내용 </dd>

<h1>설명 목록</h1>
<dl>
<dt>이름</dt>
<dd>설명1</dd>
<dd>설명2</dd>
</dl>

dl, dt, dd 태그

표를 만드는 태그

표 만들기 위해서 필요한 태그는 기본적으로 <table>,<caption><tr>,<td>,<th>으로 있다.

표의 시작과 끝을 알려주는 태그 : <table></table>

표 제목을 알려주는 태그 : <caption></caption>

행을 만드는 태그 : <tr>

셀을 만드는 태그 : <td></td>, <th></th>

※tr은 table row, td는 table date, th는 table head

<table>
<caption>표 제목</caption>
<tr><th>1열 제목</th><th>2열 제목</th></tr>
<tr><td>1행 1열</td><td>1행 2열</td></tr>
<tr><td>2행 1열</td><td>2행 2열</td></tr>
</table>

표

그림 13과 같이 행이 합쳐진 경우를 만들고 싶다면, rowspan, colspan 속성을 사용한다.

표 예시

<table border="2">
<caption>선물용과 가정용 상품 구성</caption>
<tr><th>용도</th><th colspan="3">중량, 개수, 가격</th></tr>
<tr><td rowspan="2">선물용</td><td>3kg</td><td>11~16과</td><td>35,000원</td></tr>
<tr> <td>5kg</td><td>18~26과</td><td>52,000원</td></tr>
<tr><td rowspan="2">가정용</td><td>3kg</td><td>11~16과</td><td>30,000원</td></tr>
<tr> <td>5kg</td><td>18~26과</td><td>47,000원</td></tr>
</table>

colspan과 rowspan을 이용해서 합쳐주면 된다.

표의 구조를 지정하는 태그

표의 제목 태그 : <thead></thead>

표의 본문 태그 : <tbody></tbody>

표의 요약 태그 : <tfoot></tfoot>

이미지 삽입

웹에서 사용하는 이미지 형식은 jpg/jpeg, gif, png를 가장 많이 사용할 것이다.

html에 이미지를 삽입해 보자. <img>태그를 사용하면 된다.

<img src="이미지 파일 경로" alt="대체용 텍스트">

<img>태그에 쓰이는 속성은 이미지 파일 경로를 나타내는 src 속성과 이미지를 텍스트로 대신 설명하는 alt 속성,

이미지 크기를 조절하는 width, height 속성이 있다.

이미지가 html파일과 같은 경우에는 <img>태그 안에 폴더명/파일명으로 어렵지 않게 찾을 수 있을 것이다.

<img src="1.jpg" width="400" height="400">
<img src="2.jpg" width="40%" height="40%">
px : 이미지 크기를 픽셀단위로 지정, 고정값
% : 이미지 크기를 % 지정, 웹 브라우저 너비, 높이 기준으로 이미지 크기를 표시.

하지만 이미지 경로가 같은 폴더에 없는 경우에는 하나하나 찾아줘야 한다.
../폴더명/파일명 같은 경우에는 상위(부모) 폴더로 가기
../폴더명/폴더명/파일명 : 좀 더 상위 폴더에 이미지가 있는 경우

※절대참조

이미지 파일을 절대 참조로 찾고자 한다면, <img src="프로젝트/폴더/내부폴더1/내부폴더2/.../찾고자하는이미지>로 하면 된다.

webProject/src/main/webapp/Html1 안의 1.jpg 이미지 파일을 찾고자 한다.

그렇다면 <img src="/webProject/Html1/ 1.jpg"> 이렇게 작성하면 된다.

※<img src="/webProject/src/main/webapp/Html1/1.jpg"> 이렇게 작성하지 않는 이유는 Dynamic Web Project 생성 시 Content directory로 세팅되어 "src/main/webapp"이 기본적으로 세팅되어 있기 때문이다.

<http://localhost:8080/webProject/Html1/1jpg

/프로젝트/폴더1/폴더2/.../이미지.이미지형식

<img src="/webProject/src/main/webapp/Html1/1.jpg" alt="경로가 잘못됨">


<img src="/webProject/Html1/1.jpg">
<img src="/webProject/Html1/2.jpg">
<img src="/webProject/Html1/img/3.jpg">
<img src="/webProject/Html1/img/4.jpg">
<img src="/webProject/imgs/5.jpg">
<img src="/webProject/imgs/6.jpg">
<img src="/webProject/imgs/img/7.jpg">
<img src="/webProject/imgs/img/8.jpg">

멀티미디어 파일 삽입

다양한 멀티미디어 파일(오디오, 비디오, 자바 애플릿, PDF 등)을 삽입할 때는 <object>태그를 사용함.

<object width="너비" height="높이" date="파일"></object>

date 속성에 보여줄 멀티미디어 파일을 지정하고, width, height 속성을 사용해 플레이어의 크기를 지정함

오디오, 비디오, 이미지 등 다양한 멀티미디어를 삽입할 수 있는 태그는 <embed>이다.

<embed src="파일 경로" width="너비" height="높이">

src 속성을 사용해 삽입할 멀티미디어 파일을 지정하고, width, height 속성을 사용해 플레이어의 크기를 지정함.

<audio>, <video>, <object> 태그를 지원하지 않는 웹 브라우저를 고려해야 하면 <embed>태그를 사용하여 멀티미디어 파일을 삽입함.

PDF 파일 삽입

<object width="900" height="800" data="medias/product.pdf"></object>

오디오, 비디오, 이미지 멀티미디어 파일 삽입

<embed src="medias/spring.mp3">-

<audio src="medias/spring.mp3" controls></audio>

<video src="medias/salad.mp4" controls width="700"></video>
<video src="medias/flower.mp4" controls width="640" muted autoplay loop></video>

※멀티미디어 파일의 종류
비디오 : mp4(모든 브라우저에서 동작), webm
오디오 : mp3(모든 브라우저에서 동작), mp4, m4a

하이퍼링크

다양한 파일 형식을 넣을 수 있음.

링크를 삽입하는 태그 <a>태그와 href 속성

<a href="링크할 주소">텍스트 또는 이미지</a>

네이버

<a href="test1.html">test1</a> 
<a href="ex1.html">ex1</a> 
<a href="../imgs/img/7.jpg">7.jpg</a> 
<a href="medias/product.pdf">product.pdf</a>

하이퍼링크 새로운 창에서 연결하기

target="_blank"를 a태그에 넣어주면 된다.
<a href="
https://www.naver.com" target="_blank">네이버

<a href="test1.html"target="_blank">test1</a> 
<a href="ex1.html"target="_blank">ex1</a> 
<a href="../imgs/img/7.jpg"target="_blank">7.jpg</a> 
<a href="medias/product.pdf" target="_blank">product.pdf</a>

이미지에 하이퍼링크 삽입하기

a태그+img태그
<a href="test2.html" target="_blank"><img src="1.jpg"></a> 
<a href="test3.html" target="_blank"><img src="img/3.jpg"></a>

하이퍼링크에 걸린 파일을 다운로드하기

a태그 href="파일명" download" 
<a href="../imgs/5.jpg" download>5.jpg</a> 
<a href="medias/product.pdf" download>product.pdf</a>

<ol>
<li><a href="ex2.html">ex2.html 연결</a></li>
<li><a href="ex3.html" target="_blank">ex3.html 새창으로 연결</a></li>
<li><a href="2.jpg" download>2.jpg 다운로드</a></li>
</ol>

<dt>
<dd><a href="ex2.html">ex2.html 연결</a></dd>
<dd><a href="ex3.html" target="_blank">ex3.html 새창으로 연결</a></dd>
<dd><a href="2.jpg" download>2.jpg 다운로드</a></dd>

문서 내 하이퍼링크

문서 내에 특정 위치를 찾아가는 하이퍼링크 페이지 안에 페이지 찾기

<ul>
<li><a href="#m1">메뉴1(href="#1")</a></li>
<li><a href="#m2">메뉴2(href="#2")</a></li>
<li><a href="#m3">메뉴3(href="#3")</a></li>
</ul>

 
 
 
 
 
<h2 id="m1">메뉴 1</h2>
id='m1'표시 
<a href="#top">맨 위로</a>
 
 
 
 
 
<h2 id="m2">메뉴2</h2>
id='m2'표시 
<a href="#top">맨 위로</a>
 
 
 
 
 
<h2 id="m3">메뉴3</h2>
id='m3'표시 
<a href="#top">맨 위로</a>

폼 태그

<form [속성="속성값"]>여러 폼 요소</form>

form 태그의 속성

method="get" : 주소 표시줄에 사용자가 입력한 내용이 그대로 드러남

method="post" : 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않음.

name=" " : 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정(백엔드에서는 반드시 써줘야 함.

action=" " : form태그 안의 내용을 처리해 줄 서버 프로그램을 지정

target: action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함.

autocomplete="on/off" : 자동 완성 기능. 기본값은 on.

폼 요소를 그룹으로 묶는 태그

<fieldset> 태그는 하나의 폼 안에서 여러 구역을 나누어 표시할 때 사용

<fieldset [속성="속성값"]> </fieldset>

<legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙일 수 있음

<fieldset>
<legend> 그룹 이름 </legend>
</fieldset>

여러 줄을 입력하는 텍스트 영역 태그

<textarea>태그는 게시판에 글을 입력하거나 회원 가입 양식에서 사용자 약관을 표시할 때 자주 사용

<textarea>내용</textarea>

속성으로는 텍스트 영역의 가로 너비를 문자 단위로 지정하는 cols, 텍스 영역의 세로 길이를 줄 단위로 지정하는 rows가 있음.

드롭다운 목록을 만들어주는 태그

사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택하게 하려면 드롭다운 목록이나 데이터 목록을 사용.

<select>태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 <option>태그를 사용해 원하는 항목을 추가.

<option> 태그에는 value 속성을 이용해 서버로 넘겨주는 값을 지정

<select>
<option value="값1">내용1</option>
<option value="값2">내용2</option>
</select>

<select>태그의 속성

size : 화면에 표시할 드롭다운 항목의 개수를 지정

multiple : 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용

<option>태그의 속성

value : 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정

selected : 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정

버튼을 만들어주는 태그

<button type="submit">내용</button>
<button type="reset">내용</button>
<button type="button">내용</button>

폼 요소에 레이블을 붙이는 태그

<label>태그는 <input>태그와 같은 폼 요소에 레이블을 붙일 때 사용.

레이블이란 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트를 말함.

<lable>태그를 사용하면 폼 요소와 레이블 ㅌ텍스트가 서로 연결되었다는 것을 웹 브라우저가 알 수 있음.

<label>레이블명<input></label>

웹 폼의 다양한 곳에서 사용하는 태그

아이디나 검색어를 입력하는 검색 상자나 로그인 버튼처럼 사용자가 입력할 부분은 주로 <input>태그를 이용.

<input>태그의 type과 속성

텍스트와 비밀번호를 나타내는 type 속성

<input type="text">
<input type="password">

size : 텍스트와 비밀번호 필드의 길이를 지정

value : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용, 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시, 비밀 번호 필드에서 사용하지 않는 속성

maxlength : 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정

자동으로 입력 커서를 갖다 놓는 속성

<input type="텍스트입력 필드" autofocus required>

페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있음.

힌트를 표시해 주는 속성

<input type="텍스트입력필드" placeholder=텍스트 필드에 표시될 내용">

읽기 전용 필드를 만들어주는 속성

<input type="텍스트입력필드" readonly">

사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드를 만들 수 있음. readonly 속성은 해당 필드를 읽기 전용으로 바꿈

필수 입력 필드를 지정하는 속성

반드시 입력해야 하는 내용에는 required 속성을 지정해 필수 필드로 만들 수 있음.

<input type="텍스트입력 필드" autofocus required>

다양한 용도에 맞게 입력하는 type 속성

<input type="search">
<input type="url">
<input type="email">
<input type="tel">

체크 박스와 라디오 버튼을 나타내는 type 속성

<input type="checkbox"> : 주어진 여러 항목에서 2개 이상을 선택할 수 있는 체크 박스를 넣음
<input type="radio"> : 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣음

value : 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정. 이 값은 영문 또는 숫자여야 하며 필수 속성

checked : 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용. 속성값은 따로 없음

숫자 입력 필드를 나타내는 type 속성

<input type="number">
<input type="range">

min : 필드에 입력할 수 있는 최솟값을 지정. 기본값 0

max : 필드에 입력할 수 있는 최댓값을 지정. 기본값 100

step : 숫자 간격을 지정. 기본값 1

value : 필드에 표시할 초깃값

날짜 입력을 나타내는 type 속성

<input type="date | month | week">

min : 범위를 제한할 때 사용

max : 범위를 제한할 때 사용

step : 스핀 박스의 화살표를 클릭했을 때 증감시킬 크기를 지정

value : 기본적으로 표시할 날짜 지정

시간 입력을 나타내는 type 속성

<input type="time | datetime | datetime-local">

min : 범위를 제한할 때 사용

max : 범위를 제한할 때 사용

step : 스핀 박스의 화살표를 클릭했을 때 증감시킬 크기를 지정

value : 기본적으로 표시할 시간 지정

전송, 리셋 버튼을 나타내는 type 속성

<input type="submit" value="버튼에 표시할 내용">
<input type="reset" value="버튼에 표시할 내용">

submit은 폼에 입력한 정보를 서버로 전송. 전송된 정보는 <form>태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨짐

reset은 <input> 요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 지우는 역할을 함. value 속성을 사용해서 버튼에 표시할 내용을 지정

이미지 버튼을 나타내는 type 속성

<input type="image" src="이미지 경로" alt="대체 텍스트">

submit 버튼과 같은 기능을 하는 이미지 버튼을 나타냄

기본 버튼을 나타내는 type 속성

<input type="button" value="버튼에 표시할 내용">

파일을 첨부할 때 사용하는 type 속성

<input type="file">

히든 필드 만들 때 사용하는 type 속성

<input type="hidden" name="이름" value="서버로 넘길 값">

히든 필드는 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소. 사용자에게 굳이 보여 줄 필요는 없지만 관리자가 알아야 하는 정보는 히든 필드로 입력

justBoard10 마무리

001cloudid — Mon, 30 Sep 2024 14:55:20 +0900

이전글 justBoard9에서 어제 몇 시간동안 왜 오류가 발생하는지에 대해서 이유를 찾지 못했다. 심지어 두 시간동안 고민해보고 gpt에도 물어보았다. 오류가 날 부분에 대해서만 코드를 보여주지 말고 이유만 알려달라고.. 그럼에도 내가 작성한 코드에서는 문제가 없다고 답을 해줬다.

문제를 해결하기 위해 명령 프롬프트에서 다음과 같이 데이터 삽입을 시도해보았다.

이 곳에서도 들어가지 않는 것을 발견할 수 있었다. 이걸보고 오늘에서야 문제를 발견할 수 있었다. 이유는 컬럼명 때문에 발생한 문제였다. no와 subject는 MySQL 예약어였기 때문에 board 테이블을 만들 때 백틱을 이용해서 만들었다. 때문에 컬럼을 찾을 수 없어서 데이터가 입력되지 않았다.

즉, 문제 원인은 컬럼명 입력을 예약어로 만들었고 당시 백틱을 이용했다. 따라서 컬럼명을 작성할 때 정확하게 백틱안에 컬럼명을 넣어줘야한다.

MySQL 예약어는 https://dev.mysql.com/doc/refman/5.0/en/reserved-words.html 여기서 사용하는 버전에 맞게 확인할 수 있다.(생각보다 예약어가 너무 많아서 정리하기 힘들다. 자바 라이브러리와 마찬가지로 필요할 때 수시로 확인하는 것이 좋은 방법인 것 같다.)

현재 내가 사용하고 있는 예약어들을 찾아보았다.

그렇다면 여기에 맞춰서 수정을 해보도록 하자. DAO는 건드릴 필요없이 mapper만 수정해주면 될 것 같다.

boardMapper

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.mystory001.mappers.boardMapper">

	<select id="getBoardList" resultType="com.mystory001.domain.BoardDTO">
		select *
		from board
	</select>
	
	<insert id="insertBoard">
		insert into board(`no`, id, `subject`, content, writetime, readcount)
		values(#{`no`}, #{id}, #{`subject`}, #{content}, #{writetime}, #{readcount})
	</insert>
	
	<select id="getMaxNo" resultType="java.lang.Integer">
		select max(`no`) from board
	</select>
	
</mapper>

이렇게 바꿨음에도

오류가 뜬다. SQL문이 잘못 된 것이 확실하다.

백틱을 사용한 테이블은 있었지만, 백틱을 이용한 컬럼 사용은 처음이기 때문에 MySQL Workbench를 이용해서 넣는 것을 시도해보았다.

values에 백틱을 사용하는 컬럼은 백틱으로 묶어줘야하나?, 아니면 리터럴인 부분은 백틱안에 또 작은 따옴표로 묶어줘야하나? 생각했는데 아무리 해도 안됨. 그래서 그냥 백틱은 빼고 시도해보았다.

컬럼에만 백틱을 사용하고 values에는 그냥 데이터 넣듯이 넣으면 된다.

boardMapper 수정

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.mystory001.mappers.boardMapper">

	<select id="getBoardList" resultType="com.mystory001.domain.BoardDTO">
		select *
		from board
	</select>
	
	<insert id="insertBoard">
		insert into board(`no`, id, `subject`, content, writetime, readcount)
		values(#{no}, #{id}, #{subject}, #{content}, #{writetime}, #{readcount})
	</insert>
	
	<select id="getMaxNo" resultType="java.lang.Integer">
		select max(`no`) from board
	</select>
	
</mapper>

과연?

주소 매핑을 잘못해서 404가 뜬 것이지 데이터는 제대로 들어간 것을 확인할 수 있다. 제대로 했다고 생각했는데 안될 때 '이게 외않돼?'하면서 짜증나는데 막상 해결하고나면 뿌듯함.

이제 main에서 게시글 목록이 나타나게해보자

데이터는 들어가있는데 목록에서 나타나지 않음

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<%-- 반응형 웹 viewport → head태그 사이에 작성 --%>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}

.header{
	float : right;
	width: 1200px;
	height: 0px;
}

.sidebar{
	float : left;
	width: 200px;
	height: 500px;

}

.content{
	width: 1000px;
	height: 600px;
}

.footer{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="inc/top.jsp" />

<jsp:include page="inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>게시물 목록</h1>
<table border="1">
<tr>
	<th>번호</th><th>제목</th><th>작성자</th><th>작성일</th><th>조회수</th>
</tr>
<c:forEach var="boardDTO" items="${boardList }">
<tr onclick="location.href='${pageContext.request.contextPath}/board?${boardDTO.no }'">
	<td>${boardDTO.no }</td><td>${boardDTO.subject }</td><td>${boardDTO.id }</td><td>${boardDTO.writetime }</td><td>${boardDTO.readcount }</td>
</tr>
</c:forEach>
<%-- 게시글 목록 --%>
</table>
<%-- 로그인이 되어 있을 때만 버튼이 보이게--%>
<c:if test="${! empty sessionScope.id }">
	<a href="${pageContext.request.contextPath }/board/insert"><button>글쓰기</button></a>
</c:if>
<%-- 페이지 목록 10개씩 10개의 페이지 --%>
<!-- <form method="get"> -->
<!--  <input type="text" name="search" value="검색"> -->
<!--  <input type="submit" value="검색하기"> -->
<!--  </form> -->

</div> <%-- content영역 div --%>
<jsp:include page="inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

BoardController

	@GetMapping("/")
	public String main(HttpServletRequest request, Model model) {
		System.out.println("BoardController main()");
		
		List<BoardDTO> boardList = boardService.getBoardList(); //게시물
		model.addAttribute("boardList",boardList);
		return "/";
	}

메인 화면에서 모든 것을 해결하려고 했으나 조금 복잡해서 글 목록은 list.jsp를 만들어서 그곳에서 확인할 수 있게 변경

board/list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<%-- 반응형 웹 viewport → head태그 사이에 작성 --%>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}

.header{
	float : right;
	width: 1200px;
	height: 0px;
}

.sidebar{
	float : left;
	width: 200px;
	height: 500px;

}

.content{
	width: 1000px;
	height: 600px;
}

.footer{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>게시물 목록</h1>
<table border="1">
<tr>
	<th>번호</th><th>제목</th><th>작성자</th><th>작성일</th><th>조회수</th>
</tr>
<c:forEach var="boardDTO" items="${boardList}">
<tr onclick="location.href='${pageContext.request.contextPath}/board/content?no=${boardDTO.no }'">
	<td>${boardDTO.no }</td><td>${boardDTO.subject }</td><td>${boardDTO.id }</td><td>${boardDTO.writetime }</td><td>${boardDTO.readcount }</td>
</tr>
</c:forEach>
<%-- 게시글 목록 --%>
</table>
<%-- 로그인이 되어 있을 때만 버튼이 보이게--%>
<c:if test="${! empty sessionScope.id }">
	<a href="${pageContext.request.contextPath }/board/insert"><button>글쓰기</button></a>
</c:if>
<%-- 페이지 목록 10개씩 10개의 페이지 --%>
<!-- <form method="get"> -->
<!--  <input type="text" name="search" value="검색"> -->
<!--  <input type="submit" value="검색하기"> -->
<!--  </form> -->

</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

Controller

	@GetMapping("/list")
	public String main(HttpServletRequest request, Model model) {
		System.out.println("BoardController main()");
		List<BoardDTO> boardList = boardService.getBoardList(); //게시물
		model.addAttribute("boardList",boardList);
		return "board/list";
	}

Service, DAO, mapper는 동일. 주소만 바꿈 + 사이드바에 li태그를 이용해서 글 목록을 추가

이렇게 하니 잘 나옴. 번호가 오름차순이라 작성일이 오래된 것(번호가 낮은 것)이 아래로 가게 수정

mapper

	<select id="getBoardList" resultType="com.mystory001.domain.BoardDTO">
		select *
		from board
		order by `no` desc
	</select>

이제 글 읽기와 관련된 작업

BoardController

	@GetMapping("/content")
	public String content(BoardDTO boardDTO, Model model) {
		System.out.println("BoardController content()");
		boardDTO = boardService.getBoard(boardDTO); //글에 대한 정보
		boardService.readCount(boardDTO); //조회수
		model.addAttribute("boardDTO",boardDTO);
		return "board/content";
	}

BoardSerivce

	public BoardDTO getBoard(BoardDTO boardDTO) {
		System.out.println("BoardService getBoard()");
		return boardDAO.getBoard(boardDTO);
	}

	public void readCount(BoardDTO boardDTO) {
		System.out.println("BoardService readCount()");
		int readcount = boardDTO.getReadcount() + 1;
		boardDTO.setReadcount(readcount);
		boardDAO.readCount(boardDTO);
	}

BoardDAO

	public BoardDTO getBoard(BoardDTO boardDTO) {
		System.out.println("BoardDAO getBoard()");
		return sqlSession.selectOne(namespace+".getBoard",boardDTO);
	}

	public void readCount(BoardDTO boardDTO) {
		System.out.println("BoardDAO readCount");
		sqlSession.update(namespace+".readCount", boardDTO);
	}

boardMapper

	<select id="getBoard" resultType="com.mystory001.domain.BoardDTO">
		select * 
		from board
		where `no` = #{no}
	</select>
	
	<update id="readCount">
		update board
		set readcount = #{readcount}
		where `no` = #{no}
	</update>

http://localhost:8080/justboard/board/content?no=과 http://localhost:8080/justboard/board/content?의 차이에 대해 알아보자

http://localhost:8080/justboard/board/content?no= 는 no라는 쿼리 파라미터를 사용하여 값을 전달하고 있음. 서버 측에서 no라는 이름의 파라미터를 읽어 해당 게시물의 id를 참조하는 데 사용할 수 있다.

반면 http://localhost:8080/justboard/board/content? 는 일반적으로 서버 측에서 처리할 수 있는 유효한 쿼리 파라미터 형식이 아니기 때문에 해석하지 못함

board/content.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table>
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td>${boardDTO.writetime}</td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

지금 같은 경우에는 글쓴이와 로그인된 아이디가 같을 경우 글 수정, 글 삭제, 목록보기 버튼이 생겨야하며, 글쓴이와 로그인 된 아이디가 같지 않을 경우나 로그인이 안된 경우에는 목록보기 버튼만 보이게 설정해주자.

어찌저찌 페이지가 생기고했지만 글 읽기까지 왔다. 이제 버튼, 페이징 처리, 검색까지만 하면 어느 정도의 게시판이 완료된다. 조금만 더 힘내서 해보자.

content.jsp 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td>${boardDTO.writetime}</td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<input type="button" value="글 수정" onclick="${pageContext.request.contextPath}/board/update"> <input type="button" value="글 삭제" onclick="${pageContext.request.contextPath}/board/delete">
	</c:if>
</c:if>
<input type="button" value="글 목록" onclick="${pageContext.request.contextPath}/board/content">
</div>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

세션이 있고, 세션 아이디와 글쓴이가 같을 때 글 수정, 글 삭제 버튼이 보이게 만약 세션이 없으면 글 목록만 보이게 함

글 수정

update.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>게시 글 수정</h1>
<form action="${pageContext.request.contextPath }/board/updatePro" method="post">
<input type="hidden" name="no" value="${boardDTO.no }">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br>
<input type="text" name="subject" value="${boardDTO.subject }"><br>
<textarea rows="10" cols="50">${boardDTO.content }</textarea><br>
<input type="submit" value="수정하기"> <a href="${pageContext.request.contextPath }/board/content?no=${boardDTO.no}"><input type="button" value="뒤로가기"></a>
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

BoardController

	@GetMapping("/update")
	public String update(BoardDTO boardDTO, Model model) {
		System.out.println("BoardController update()");
		boardDTO = boardService.getBoard(boardDTO);
		
		model.addAttribute("boardDTO", boardDTO);
		return "board/update";
	}

이렇게 했는데 글에 대한 정보가 들고오지 못하고 있다. 글 번호에 대한 정보가 없기 때문이라고 생각이 든다.

content.jsp를 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td>${boardDTO.writetime}</td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/content"><input type="button" value="글 목록"></a>
</div>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

그렇게하니까

잘된다...

글 수정과 글 삭제 처리

BoardController

	@PostMapping("/updatePro")
	public String updatePro(BoardDTO boardDTO) {
		System.out.println("BoardController update()");
		boardService.update(boardDTO);
		return "board/content";
	}
	
	@GetMapping("delete")
	public String delete(BoardDTO boardDTO) {
		System.out.println("BoardController delete()");
		boardService.delete(boardDTO);
		return "redirect:/board/list";
	}

BoardService

	public void update(BoardDTO boardDTO) {
		System.out.println("BoardService update()");
		boardDAO.update(boardDTO);
	}
	
	public void delete(BoardDTO boardDTO) {
		System.out.println("BoardService delete()");
		boardDAO.delete(boardDTO);
	}

BoardDAO

	public void update(BoardDTO boardDTO) {
		System.out.println("BoardDAO update()");
		sqlSession.update(namespace+".update", boardDTO);
	}
	
	public void delete(BoardDTO boardDTO) {
		System.out.println("BoardDAO delete()");
		sqlSession.delete(namespace+".delete", boardDTO);
	}

boardMapper

	<update id="update">
		update board
		set `subject`=#{subject}, content=#{content}
		where `no`=#{no}
	</update>
	
	<delete id="delete">
		delete from board
		where `no`=#{no}
	</delete>

수정, 삭제도 깔끔하게 잘 된다.

글 작성 후 주소 매핑 변경

	@PostMapping("/insertPro")
	public String insertPro(BoardDTO boardDTO) {
		System.out.println("BoardController insertPro()");
		boardService.insert(boardDTO);
		
		return "redirect:/board/list";
	}

페이지 처리와 검색

board/list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<%-- 반응형 웹 viewport → head태그 사이에 작성 --%>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}

.header{
	float : right;
	width: 1200px;
	height: 0px;
}

.sidebar{
	float : left;
	width: 200px;
	height: 500px;

}

.content{
	width: 1000px;
	height: 600px;
}

.footer{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>게시물 목록</h1>
<table border="1">
<tr>
	<th>번호</th><th>제목</th><th>작성자</th><th>작성일</th><th>조회수</th>
</tr>
<c:forEach var="boardDTO" items="${boardList}">
<tr onclick="location.href='${pageContext.request.contextPath}/board/content?no=${boardDTO.no }'">
	<td>${boardDTO.no }</td><td>${boardDTO.subject }</td><td>${boardDTO.id }</td><td>${boardDTO.writetime }</td><td>${boardDTO.readcount }</td>
</tr>
</c:forEach>
<%-- 게시글 목록 --%>
</table>
<%-- 로그인이 되어 있을 때만 버튼이 보이게--%>
<c:if test="${! empty sessionScope.id }">
	<a href="${pageContext.request.contextPath }/board/insert"><button>글쓰기</button></a>
</c:if>
<%-- 페이지 목록 10개씩 10개의 페이지 --%>
<form method="get" action="${pageContext.request.contextPath}/board/list">
 <input type="text" name="search" placeholder="검색">
 <input type="submit" value="검색하기">
 </form>
<c:if test="${pageDTO.startPage > pageDTO.pageBlock }">
<a href="${pageContext.request.contextPath}/board/list?pageNum=${pageDTO.startPage - pageDTO.pageBlock}&search=${pageDTO.search}">Prev</a>
</c:if>

<c:forEach var="i" begin="${pageDTO.startPage }" end="${pageDTO.endPage }" step="1">
<a href="${pageContext.request.contextPath}/board/list?pageNum=${i}&search=${pageDTO.search}">${i}</a>
</c:forEach>

<c:if test="${pageDTO.endPage < pageDTO.pageCount}">
<a href="${pageContext.request.contextPath}/board/list?pageNum=${pageDTO.startPage + pageDTO.pageBlock}&search=${pageDTO.search}">Next</a>
</c:if>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

BoardController

	@GetMapping("/list")
	public String main(HttpServletRequest request, Model model, PageDTO pageDTO) {
		System.out.println("BoardController main()");
		
		String search = request.getParameter("search"); //검색어 가져오기
		
		//페이지
		int pageSize = 5; //화면에 보여줄 글의 개수
		String pageNum = request.getParameter("pageNum");
		if(pageNum ==null) {
			pageNum = "1";
		}
		int currentPage =Integer.parseInt(pageNum);	//int형 currentPage 변수명에 pageNum을 정수형으로 변경	
		
		//pageDTO에 저장
		pageDTO.setPageSize(pageSize);
		pageDTO.setPageNum(pageNum);
		pageDTO.setCurrentPage(currentPage);
		pageDTO.setSearch(search);
		
		List<BoardDTO> boardList = boardService.getBoardList(pageDTO); //게시물
		
		int count = boardService.getBoardCount(pageDTO); //전체 글의 개수 구하기
		int pageBlock = 5; //한 화면에 보여 줄 페이지 개수 설정
		int startPage = (currentPage - 1) / pageBlock * pageBlock + 1; //한 화면에 보여 줄 시작 페이지(1~10 -> 1, 11~20 -> 11,...)
		int endPage = startPage + pageBlock - 1; //한 화면에 보여 줄 끝 페이지
		int pageCount = count / pageSize + (count%pageSize==0? 0:1); //전체 페이지 개수
		if(endPage>pageCount) {
			endPage = pageCount;
		}
		
		pageDTO.setCount(count);
		pageDTO.setPageBlock(pageBlock);
		pageDTO.setStartPage(startPage);
		pageDTO.setEndPage(endPage);
		pageDTO.setPageCount(pageCount);
		
		model.addAttribute("boardList",boardList);
		model.addAttribute("pageDTO",pageDTO);
		
		return "board/list";
	}

BoardService

	public List<BoardDTO> getBoardList(PageDTO pageDTO) {
		System.out.println("BoardService getBoardList()");
		
		//시작하는 행 번호 구하기(currentPage,pageSize)
		int currentPage = pageDTO.getCurrentPage();
		int pageSize = pageDTO.getPageSize();
		int startRow = (currentPage - 1) * pageSize + 1;
		int endRow = startRow + pageSize - 1;
		
		pageDTO.setStartRow(startRow - 1);
		pageDTO.setEndRow(endRow);
		
		return boardDAO.getBoardList(pageDTO);
	}
    
    	public int getBoardCount(PageDTO pageDTO) {
		System.out.println("BoardService getBoardCount()");
		return boardDAO.getBoardCount(pageDTO);
	}

BoardDAO

	public List<BoardDTO> getBoardList(PageDTO pageDTO) {
		System.out.println("BoardDAO getBoardList()");
		return sqlSession.selectList(namespace+".getBoardList", pageDTO);
	}

	public int getBoardCount(PageDTO pageDTO) {
		System.out.println("BoardDAO getBoardCount()");
		return sqlSession.selectOne(namespace+".getBoardCount", pageDTO);
	}

boardMapper

	<select id="getBoardList" resultType="com.mystory001.domain.BoardDTO">
		select * 
		from board
		<if test="search != null">
		where subject like concat('%',#{search},'%')
		</if>
		order by num desc
		limit #{startRow}, #{pageSize}
	</select>
    
    <select id="getBoardCount" resultType="java.lang.Integer">
		select count(*)
		from board
		<if test="search != null">
		where `subject` like concat('%',#{search},'%')
		</if>
	</select>

결과물

1) 로그인 안했을 때

메인

글 목록

글 읽기

여기서 글 목록 버튼을 클릭하면

오류가 발생하는데 이는 아무래도 content.jsp에서 글 목록 href를 잘 못 준 것 같다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>글 읽기</h1>
<table >
<tr><td>글번호</td><td>${boardDTO.no}</td></tr>
<tr><td>글쓴이</td><td>${boardDTO.id}</td></tr>
<tr><td>조회수</td><td>${boardDTO.readcount}</td></tr>
<tr><td>작성일</td><td>${boardDTO.writetime}</td></tr>
<tr><td>글제목</td><td>${boardDTO.subject}</td></tr>
<tr><td>글내용</td><td>${boardDTO.content}</td></tr>
</table>
<div style="display: center">
<c:if test="${!empty sessionScope.id }">
	<c:if test="${sessionScope.id eq boardDTO.id}">
<a href="${pageContext.request.contextPath}/board/update?no=${boardDTO.no}"><input type="button" value="글 수정"></a> <a href="${pageContext.request.contextPath}/board/delete?no=${boardDTO.no}"><input type="button" value="글 삭제"></a>
	</c:if>
</c:if>
<a href="${pageContext.request.contextPath}/board/list"><input type="button" value="글 목록"></a>
</div>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

글 목록으로 잘 돌아간다.

2) 로그인 했을 때

메인

글 수정

글 수정 후 주소줄에 http://localhost:8080/justboard/board/updatePro 이를 수정

BoardController에 return을 수정

	@PostMapping("/updatePro")
	public String updatePro(BoardDTO boardDTO) {
		System.out.println("BoardController update()");
		boardService.update(boardDTO);
		return "redirect:/board/list";
	}

글 삭제

글 작성

다른 아이디 로그인 시

정보 확인에서 비밀번호를 입력하지 않거나 틀리게 작성했을 경우

내 정보

비밀번호 변경

탈퇴

3)회원가입

아이디 중복확인

※

중복확인 할 때 네트워크

회원가입

느낀점

확실히 많은 도움이 되었다. 여기서 조금조금씩 더 추가해서 유지보수하는 방향으로 나아가야겠다.

한 일주일 정도 작업했고 하루 3시간 정도 했으니 시간으로 24시간 소요되었는데 생각보다 빨리 끝난 것 같기도 하다.

전반적으로 많은 공부가 되었다...

내일부터는 이 프로젝트를 하면서 정리해놓은 것들을 더 보기 쉽게 정리하는 시간을 가져볼까한다.

justBoard9

001cloudid — Sun, 29 Sep 2024 15:25:24 +0900

main.jsp 조회수 추가

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<%-- 반응형 웹 viewport → head태그 사이에 작성 --%>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}

.header{
	float : right;
	width: 1200px;
	height: 0px;
}

.sidebar{
	float : left;
	width: 200px;
	height: 500px;

}

.content{
	width: 1000px;
	height: 600px;
}

.footer{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="inc/top.jsp" />

<jsp:include page="inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>게시물 목록</h1>
<table border="1">
<tr>
	<th>번호</th><th>제목</th><th>작성자</th><th>작성일</th><th>조회수</th>
</tr>
<%-- 게시글 목록 --%>
</table>
<%-- 로그인이 되어 있을 때만 버튼이 보이게--%>
<c:if test="${! empty sessionScope.id }">
	<a href="${pageContext.request.contextPath }/board/insert"><button>글쓰기</button></a>
</c:if>
<%-- 페이지 목록 10개씩 10개의 페이지 --%>
<form method="get">
 <input type="text" name="search" value="검색">
 <input type="submit" value="검색하기">
 </form>

</div> <%-- content영역 div --%>
<jsp:include page="inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

DBMS에는 조회수 컬럼이 없음. 추가하기

BoardDTO에도 int형 readcount 및 getter, setter 추가

package com.mystory001.domain;

import java.sql.Timestamp;

public class BoardDTO {
	
	private int no;
	private String id;
	private String subject;
	private String content;
	private Timestamp writetime;
	private int readcount;
	
	public int getNo() {
		return no;
	}
	public void setNo(int no) {
		this.no = no;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getSubject() {
		return subject;
	}
	public void setSubject(String subject) {
		this.subject = subject;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}
	public Timestamp getWritetime() {
		return writetime;
	}
	public void setWritetime(Timestamp writetime) {
		this.writetime = writetime;
	}
	public int getReadcount() {
		return readcount;
	}
	public void setReadcount(int readcount) {
		this.readcount = readcount;
	}

}

글 쓰기 작업

BoardController

(...생략...)
	
	/* 글쓰기 */
	@GetMapping("/insert")
	public String insert() {
		System.out.println("BoardController insert()");
		return "board/insert";
	}
	
	@PostMapping("/insertPro")
	public String insertPro(BoardDTO boardDTO, Model model) {
		System.out.println("BoardController insertPro()");
		boardService.insert(boardDTO);
		
		return "redirect:/";
	}

Controller는 화면과 관련된 작업이므로 글 번호, 작성 시간, 조회수는 로직을 처리하는 Service에서 메소드를 호출하고 처리하게 한다.

BoardService

	public void insert(BoardDTO boardDTO) {
		System.out.println("BoardService insert()");
		//글번호, 날짜, 조회수 작업
		boardDTO.setNo(boardDAO.getMaxNo()+1); //글 번호 -> 기본 글 번호 메소드 생성 후 호출 -> 글 번호 + 1로 처리
		boardDTO.setWritetime(new Timestamp(System.currentTimeMillis())); 
		boardDTO.setReadcount(0);
		
		boardDAO.insert(boardDTO);
	}

BoardDAO

	public void insert(BoardDTO boardDTO) {
		System.out.println("BoardDAO insert()");
		sqlSession.insert(namespace+".insert", boardDTO);
	}

	public int getMaxNo() {
		System.out.println("BoardDAO getMaxNo()");
		return sqlSession.selectOne(namespace+".getMaxNo");
	}

boardMapper

	<insert id="insert">
		insert into board(no, id, subject, content, writetime, readcount)
		values(#{no}, #{id}, #{subject}, #{content}, #{writetime}, #{readcount})
	</insert>
	
	<select id="getMaxNo" resultType="java.lang.Integer">
		select max(no) from board
	</select>

글 제목과 내용을 작성하고 작성하기를 눌러보았다.

오류 발생. 일단 이 오류가 왜 발생하는지에 대해 이유를 알아보았다. 이 경우(NullPointerException)는 쿼리 조건 중에 Null값이 들어갔기 때문이다. 일단 다시 점검해 보았는데 딱히 문제 될만한 상황은 찾아보지 못했다.

콘솔창을 확인해보았는데

예외가 발생하면 진행 중이던 것이 종료되고 예외처리가 진행되기 때문에 문제가 될만한 것을 생각해 보자면

BoardDAO의 getMaxNo() 메소드에서 문제가 있다.
BoardDAO insert() 메서드가 문제가 있다.

두 가지로 생각해 볼 수 있다. BoardDAO에 문제가 있다고 생각해 보자면, 어노테이션이 붙었는가? namespace에 오타가 있는가? 가 가장 먼저 생각해 볼 만한 사항이다.

package com.mystory001.dao;

import java.util.List;

import javax.inject.Inject;

import org.apache.ibatis.session.SqlSession;
import org.springframework.stereotype.Repository;

import com.mystory001.domain.BoardDTO;

@Repository
public class BoardDAO {

	@Inject
	private SqlSession sqlSession;
	
	private static final String namespace = "com.mystory001.mappers.boardMapper";

	public List<BoardDTO> getBoardList() {
		System.out.println("BoardDAO getBoardList()");
		return sqlSession.selectList(namespace+".getBoardList");

	}

	public void insert(BoardDTO boardDTO) {
		System.out.println("BoardDAO insert()");
		sqlSession.insert(namespace+".insertBoard", boardDTO);
	}
	
	public int getMaxNo() {
		System.out.println("BoardDAO getMaxNo()");
		return sqlSession.selectOne(namespace+".getMaxNo");
	}
	
}

spring 폴더 안에 있는 root-context.xml, servlet-context.xml을 확인해 봐도 문제 될 만한 사항이 없다.

justBoard8 게시판 클래스 작업

001cloudid — Sat, 28 Sep 2024 12:47:02 +0900

게시판의 클래스 작업을 진행할 것이다.

BoardDTO

package com.mystory001.domain;

import java.sql.Timestamp;

public class BoardDTO {
	
	private int no;
	private String id;
	private String subject;
	private String content;
	private Timestamp writetime;
	public int getNo() {
		return no;
	}
	public void setNo(int no) {
		this.no = no;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getSubject() {
		return subject;
	}
	public void setSubject(String subject) {
		this.subject = subject;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}
	public Timestamp getWritetime() {
		return writetime;
	}
	public void setWritetime(Timestamp writetime) {
		this.writetime = writetime;
	}

}

다음으로 Controller와 Service, DAO 그리고 mapper 파일에 어노테이션부터 넣고 시작하려고 한다.

BoardController

package com.mystory001.controller;

import javax.inject.Inject;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import com.mystory001.service.BoardService;

@Controller
@RequestMapping("/board/*")
public class BoardController {
	
	@Inject
	private BoardService boardService;

}

@RequestMapping

MemberController와 달리 @RequestMapping 어노테이션이 추가되었다. 이 어노테이션이 무엇인지 먼저 찾아보자.

docs.spring.io에서 찾을 수 있었다. @RequestMapping을 사용하여 요청을 컨트롤러 메소드에 매핑할 수 있다. URL, HTTP, 메소드, 요청 매개 변수, 헤더 및 미디어 유형별로 일치시킬 수 있는 다양한 속성이 있다. 클래스 수준에서 공유 매핑을 표현하거나 메소드 수준에서 특정 엔드 포인트 매핑으로 좁힐 수 있다.

내가 이해한 것을 설명하자면 경로가 같고 파일명이 다른 파일을 한 번 경로를 설정함으로써 또 작성하지 않게 해줄 수 있다?로 볼 수 있을까 @RequestMapping("/board")를 써줌으로써 @GetMapping/@PostMapping에()안에 "board/"를 작성해주지 않아도 된다.

더 자세히 정확히 하나라도 알아가야 하므로 열심히 블로그들을 찾아보았다. 그 결과 아주 정리가 잘 된 블로그를 찾았다. https://backendcode.tistory.com/227 여기를 참고하였다. 위치에 따라 역할이 조금 다르다. 메소드와 클래스에 붙일 수 있다. 지금처럼 클래스에 붙였을 때는 공통되는 URL이 있을 때 메소드에 중복되는 value 값을 없앨 수 있다.

BoardService

package com.mystory001.service;

import javax.inject.Inject;

import org.springframework.stereotype.Service;

import com.mystory001.dao.BoardDAO;

@Service
public class BoardService {
	
	@Inject
	private BoardDAO boardDAO;

}

BoardDAO

package com.mystory001.dao;

import javax.inject.Inject;

import org.apache.ibatis.session.SqlSession;
import org.springframework.stereotype.Repository;

@Repository
public class BoardDAO {

	@Inject
	private SqlSession sqlSession;
	
	private static final String namespace = "com.mystory001.mappers.boardMapper";
	
}

boardMapper

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.mystory001.mappers.boardMapper">


</mapper>

기본적인 클래스 작업은 끝났다.

글쓰기 주소 매핑하고 insert 페이지를 봤는데(따로 확인은 안 함.. 대략적으로 이런 느낌이겠지 하고 만들어만 둠) 생각보다 만족스러움

제목이랑 내용이 너무 붙어 있어 한 칸이나 두 칸 줄 바꾸기 하고 placeholder 속성을 이용하고 제목 : 내용 : 을 삭제

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>게시 글 작성</h1>
<form>
<input type="text" name="subject" placeholder="제목을 작성해주세요"><br><br>
<textarea rows="10" cols="50" name="content" placeholder="내용을 입력해주세요."></textarea><br><br>
<input type="submit" value="작성하기">
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

작성하기를 누르면 글 번호가 매겨지고 작성 시간은 알아서 매겨질 것이다. 글 번호를 어떻게 매겨야 할까? 떠오르는 방법은 사실 DB에 board 테이블에 no를 auto-increment 속성을 넣어주면 될 것 같다는 생각이 든다. 교육받을 때는 다른 방법으로 한 것 같은데 기억이 안 난다. 프로젝트 때도 auto-increment속성을 사용해서 그런 것 같다. 교육받을 때는 HttpSession 객체와 Model 객체를 이용해서 나타냄. Model 객체도 좀 알아보고 넘어가야 할 것 같다.

Model 객체

MVC 아키텍처에서 View와 Controller 간 데이터 전달을 담당하는 객체. 로직의 결과를 담아 View에 전달하거나, 사용자 입력을 받아 Controller에 전달하는 역할을 함.

K-V 쌍의 컨테이너로 사용됨. Controller에서 데이터를 Model에 저장하고, 이를 View에 전달하여 동적으로 생성되는 웹 페이지를 생성함.

//Controller
@GetMapping("/main")
public String main(Model model){
	String str = "Model 객체";
    model.addAttribute("str", str);
    return "main";
    }
    
//main.jsp
(...생략...)
<h1>${str}</h1>
(...생략...)

${str} 표현식을 이용해 Model에 저장된 데이터를 사용할 수 있을 것이다. main.jsp에서 "Model 객체"라는 것이 표시될 것이다.

즉, Model 객체는 Controller과 View 간의 데이터 전달을 쉽게 처리하기 위한 중간 매개체로 사용됨

출처 : https://iknowandyouknow.tistory.com/entry/JAVA-spring-model-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

BoardController

package com.mystory001.controller;

import java.util.List;

import javax.inject.Inject;
import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.mystory001.domain.BoardDTO;
import com.mystory001.service.BoardService;

@Controller
@RequestMapping("/board/*")
public class BoardController {
	
	@Inject
	private BoardService boardService;
	
	/* 게시판 글 들고오기 */
	@GetMapping("/")
	public String main(HttpServletRequest request, Model model) {
		System.out.println("BoardController main()");
		
		List<BoardDTO> boardList = boardService.getBoardList(); //게시물
		
		
		return "/";
	}
	
	/* 글쓰기 */
	@GetMapping("/insert")
	public String insert() {
		System.out.println("BoardController");
		return "board/insert";
	}
	
	@PostMapping("/insertPro")
	public String insertPro() {
		return "";
	}

}

BoardService

package com.mystory001.service;

import java.util.List;

import javax.inject.Inject;

import org.springframework.stereotype.Service;

import com.mystory001.dao.BoardDAO;
import com.mystory001.domain.BoardDTO;

@Service
public class BoardService {
	
	@Inject
	private BoardDAO boardDAO;

	public List<BoardDTO> getBoardList() {
		System.out.println("BoardService getBoardList()");
		return boardDAO.getBoardList();
	}

}

BoardDAO

package com.mystory001.dao;

import java.util.List;

import javax.inject.Inject;

import org.apache.ibatis.session.SqlSession;
import org.springframework.stereotype.Repository;

import com.mystory001.domain.BoardDTO;

@Repository
public class BoardDAO {

	@Inject
	private SqlSession sqlSession;
	
	private static final String namespace = "com.mystory001.mappers.boardMapper";

	public List<BoardDTO> getBoardList() {
		System.out.println("BoardDAO getBoardList()");
		return sqlSession.selectList(namespace+".getBoardList");
	}
	
}

boardMapper

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.mystory001.mappers.boardMapper">

	<select id="getBoardList" resultType="com.mystory001.domain.BoardDTO">
		select *
		from board
	</select>
</mapper>

남은 작업 insert, update, delete 마무리 하기

justBoard7 member 마무리, board 준비

001cloudid — Thu, 26 Sep 2024 10:42:57 +0900

남은 작업은

member
회원수정
회원탈퇴
board
글 목록
페이지처리
검색
글 생성
글 삭제
글 수정
글 조회

작업을 시작하기 전

원래 내가 이 프로젝트를 혼자서 하는 이유에 대해서 정리하고자 함.

데이터
데이터의 흐림 이해
원하는 데이터를 어떻게 DB에서 들고 올 것인가/어떻게 DB에 넣을 것인가
데이터를 어떻게 처리할 것인가
객체, 어노테이션
교육받을 때 팀 프로젝트 때는 여유 없이 객체, 어노테이션이 어떻게 쓰이는지 자세히 알고 지나가지 않아 여유롭게 잘 알고 지나가기 위함

크게 2가지로 나눌 수 있는데 어느 순간 그건 모르겠고 마무리 지어야 해라는 생각으로 하고 있었나 봄.

목표는 충분히 고민하고 혼자서 해답을 찾을 수 있는 검색 능력과 이해하기이다.

이유와 목표를 다시 정리했으니 이제 다시 프로젝트를 시작해 보자

내 정보 확인에서 비밀번호를 올바르게 작성했다면 마이페이지로 넘어간다.

위의 사진과 같이 id가 보이지 않는다. id의 경우 readonly로 되어 있기 때문에 문제가 생긴다.

session이 남아있기 때문에 mypage.jsp에

<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>

작성해 주면 된다.

회원 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>내 정보</h1>
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"><br> <%-- 한글, 영문만 입력 가능 --%>
<sub>회원 수정은 비밀번호와 이름을 바꿀 수 있습니다.<br>
'비밀번호'를 변경하기 위해서는 변경할 비밀번호와 변경할 비밀번호 재확인을 입력하고 이름도 입력해주길 바랍니다.</sub><br>
<a href="${pageContext.request.contextPath }/member/updatePro"><button>수정</button></a>
<a href="${pageContext.request.contextPath }/member/deletePro"><button>탈퇴</button></a>
<a href="${pageContext.request.contextPath }/"><button>돌아가기</button></a>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

이렇게 작성하고 나니 form태그도 없는데 수정할 때 데이터가 넘어갈까?라는 의문이 들어 검색해 보았다.

가능한데 자바스크립트를 이용해 야한 다고 한다.

그렇다면 form태그를 2개 사용하는 방법은 될까? 거기에 대한 답변은 https://okky.kr/questions/796732 여기서 확인할 수 있었다.

그렇다면 어떻게 어떤 방식으로 회원탈퇴와 회원수정을 한 화면에서 처리할 수 있을까에 대해 검색해 보니 가장 마음에 드는 답변을 찾았다. https://developerjm.tistory.com/23 form태그 하나에 두 개 이상의 submit 버튼으로 각기 다른 요청을 보내는 방법이다. formaction이라는 속성은 한 번도 사용해보지 않아서 어떻게 될지 모르겠지만 한 번 도전해 보기로

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>내 정보</h1>
<form method="post">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"><br> <%-- 한글, 영문만 입력 가능 --%>
<sub>회원 수정은 비밀번호와 이름을 바꿀 수 있습니다.<br>
'비밀번호'를 변경하기 위해서는 변경할 비밀번호와 변경할 비밀번호 재확인을 입력하고 이름도 입력해주길 바랍니다.</sub><br>
<button type="submit" formaction="${pageContext.request.contextPath }/member/updatePro">수정</button>
<button type="submit" formaction="${pageContext.request.contextPath }/member/deletePro">탈퇴</button>
</form>
<a href="${pageContext.request.contextPath }/"><button>돌아가기</button></a>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

MemberController

	@PostMapping("member/updatePro")
	public String updatePro(MemberDTO memberDTO) {
		System.out.println("MemberController updatePro()");
		memberService.update(memberDTO);
		return "redirect:/";
	}

MemberService

	public void update(MemberDTO memberDTO) {
		System.out.println("MemberService update()");
		memberDAO.update(memberDTO);
	}

MemberDAO

	public void update(MemberDTO memberDTO) {
		System.out.println("MemberDAO update()");
		sqlSession.update(namespace+".update", memberDTO);
	}

memberMapper

	<update id="update">
		update `member`
		set pw = #{pw}
		where id=#{id}
	</update>

id가 d인 회원의 비밀번호를 바꿔보자

성공적으로 바뀐 것을 알 수 있다.

회원탈퇴

MemberController

	@PostMapping("member/deletePro")
	public String deletePro(MemberDTO memberDTO, HttpSession session) {
		System.out.println("MemberController deletePro()");
		memberService.delete(memberDTO);
		session.invalidate();
		return "redirect:/";
	}

MemberService

	public void delete(MemberDTO memberDTO) {
		System.out.println("MemberService delete()");
		memberDAO.delete(memberDTO);
	}

MemberDAO

	public void delete(MemberDTO memberDTO) {
		System.out.println("MemberDAO delete()");
		sqlSession.update(namespace+".delete", memberDTO);
	}

memberMapper

	<delete id="delete">
		delete from `member`
		where id=#{id}
	</delete>

test라는 아이디를 생성 → 삭제

생성과 삭제

큰 틀은 만들어 놓았다. 이제 사소하지만 중요한 것들을 생각해 보면

mypage에서 유효성 검사가 빠짐.
→ 어제 작성한 회원가입 시 비밀번호가 틀리면 페이지가 안 넘어가게 하면 됨
mypage에서 이름이 회원가입 했을 때 이름과 달라도 회원수정, 탈퇴가 될 것
→ 로그인할 때 session에 name을 추가하면 될 것
http://localhost:8080/justboard/member/check 이 페이지를 주소창에 작성하면 들어가 짐
→ 로그인되지 않았을 때는 접근 못하게 제어
join에서 아이디 중복확인
→ ajax를 이용해서 아이디 중복확인. 아이디 중복 시 회원가입 불가
inc 사이드바 수정
→ 현재 게시판, 내 정보가 있는데 이를 그냥 홈 화면으로 수정하고 클릭 시 main으로 이동

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>내 정보</h1>
<form method="post">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" id="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" id="pw2" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"><br> <%-- 한글, 영문만 입력 가능 --%>
<sub>회원 수정은 비밀번호와 이름을 바꿀 수 있습니다.<br>
'비밀번호'를 변경하기 위해서는 변경할 비밀번호와 변경할 비밀번호 재확인을 입력하고 이름도 입력해주길 바랍니다.</sub><br>
<button type="submit" onclick="return passwordPass()" formaction="${pageContext.request.contextPath }/member/updatePro">수정</button>
<button type="submit" onclick="return passwordPass()" formaction="${pageContext.request.contextPath }/member/deletePro">탈퇴</button>
</form>
<a href="${pageContext.request.contextPath }/"><button>돌아가기</button></a>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
<script type="text/javascript">
function passwordPass(){
	var pw = document.getElementById("pw");
	var pw2 = document.getElementById("pw2");
	
	if(pw && pw2){
		var pass = pw.value;
		var passConfirm = pw2.value;
		
		if(pass !== passConfirm){
			alert("비밀번호가 일치하지 않습니다.");
			pw.focus();
			return false;
		}
	}
	return true;
}
</script>
</body>
</html>

form 태그 안에 onClick 속성을 넣으니 비밀번호 입력란에 비밀번호를 입력하고 포커스를 이동할 때마다 알림 창이 떠서 버튼에 onClick 속성을 넣으니 문제없이 잘 됨!

이름을 아무렇게나 작성하고 해도 문제없이 비밀번호가 수정됨. 2번에서 수정해 보자

MemberController 일부

	/* 로그인 → 회원 확인 */
	@PostMapping("/loginPro")
	public String loginPro(MemberDTO memberDTO, HttpSession session) {
		System.out.println("MemberController loginPro()");
		MemberDTO memberDTO2 = memberService.userCheck(memberDTO); //폼에서 입력받은 데이터가 존재하는지 확인
		
		if(memberDTO2 != null) {
			session.setAttribute("id", memberDTO2.getId());
			session.setAttribute("name", memberDTO2.getName());
			return "redirect:/";
		} else {
			return "member/loginmsg";
		}
	}

mypage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>내 정보</h1>
<form method="post">
<input type="text" name="id" value="${sessionScope.id }" readonly="readonly"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" id="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" id="pw2" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" value="${sessionScope.name}" required="required"><br> <%-- 한글, 영문만 입력 가능 --%>
<sub>회원 수정은 비밀번호를 바꿀 수 있습니다.<br>
'비밀번호'를 변경하기 위해서는 변경할 비밀번호와 변경할 비밀번호 재확인을 입력해주길 바랍니다.</sub><br>
<button type="submit" onclick="return passwordPass()" formaction="${pageContext.request.contextPath }/member/updatePro">수정</button>
<button type="submit" onclick="return passwordPass()" formaction="${pageContext.request.contextPath }/member/deletePro">탈퇴</button>
</form>
<a href="${pageContext.request.contextPath }/"><button>돌아가기</button></a>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
<script type="text/javascript">
function passwordPass(){
	var pw = document.getElementById("pw");
	var pw2 = document.getElementById("pw2");
	
	if(pw && pw2){
		var pass = pw.value;
		var passConfirm = pw2.value;
		
		if(pass !== passConfirm){
			alert("비밀번호가 일치하지 않습니다.");
			pw.focus();
			return false;
		}
	}
	return true;
}
</script>
</body>
</html>

MemberController

	@GetMapping("member/check")
	public String check(HttpSession session) {
		System.out.println("MemberController check()");
		
		if(session.getAttribute("id")==null) {
			return "/member/loginmsg2";
		}
		return "/member/check";
	}

loginmsg2

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<body>
<script type="text/javascript">
	alert("로그인을 해주세요.");
	history.back(); //뒤로 이동
</script>
</body>
</html>

로그인을 하지 않고 주소를 입력했을 때는 위와 같이 경고창이 뜬다.

여기서 Redirect와 Forward 차이를 한 번 살펴보고 가자

redirect : 클라이언트가 새로운 요청을 보내게 한다. URL이 변경되며, 브라우저에서 새로운 요청을 함
forward : 서버 내에서 요청을 다른 JSP로 전달. URL은 변경되지 않음

문법이 엄격한 자바에 비해 자바스크립트는 아주 자유롭다 못해 내가 IDE에서는 코드를 작성해도 문법 오류를 알려주지 않으니 이게 외않되? 하며 페이지 검사를 하게 한다. 중괄호, 소괄호 누락된 거 찾는 것보다 다시 작성하는 게 더 편할 정도로 괄호를 많이 쓴다.

먼저 AJAX(에이잭스, 아잭스, 아작스,... 나는 에이잭스라고 읽긴 하는데) 이에 대해 알아보자

AJAX는 Asynchronous JavaScript And Xml의 약자이다. 가장 쉽게 이해하기 좋은 게 웹 광고이다.

네이버

사진에서 원을 쳐놓은 부분은 시간이 지나면 다른 광고로 바뀐다. 즉 화면 전환 없이 일부만 바뀌는 것이 AJAX이다.

뜻을 살펴보면 비동기적인 웹 애플리케이션 제작을 위해 웹을 개발하는 기법이다.

장점과 단점을 살펴보면

장점으로는 페이지 이동 없이 화면 전환이 가능하고, 서버 처리를 기다리지 않고 비동기 요청이 가능하다.

단점으로는 AJAX를 사용하지 못하는 브라우저가 있으며, http 클라이언트의 기능이 한정되어 있고, 보안상의 문제가 있다는 점을 들 수 있다.

좀 더 자세한 설명은 위키백과 ajax를 참고하면 좋을 것 같다.

AJAX의 문법에 대해 알아보자

$.ajax({
    type : '', // get, post 등을 지정
    url : '/url', // 대상 URL을 지정
    async : true, // 비동기화 여부(생략 시 true가 기본값)
    dataType : 'text', // html, xml, json, text 등등
    data : JSON.stringify({ // 보낼 데이터 (Object , String, Array)
    }),
    success : function(result) { // 성공 시
        console.log(result);
    },
    error : function(request, status, error) { // 에러 시
        console.log(error)
    }
})

jquery를 사용할 jsp에

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> //url을 입력해서 사용할 경우
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script> //파일을 넣어 준 경우

이를 작성해줘야 사용할 수 있다.

jquery의 핵심 기능 중 하나가 ajax이다. jquery를 사용하면 ajax요청을 간편하게 생성하고 처리할 수 있다.

join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
.formstyle{
	width : 400px;
	
}
.label{
	width : 200px;
}
.validation{
	width: 200px;
	height: 30px;
}
</style>
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>회원가입</h1>
<form action="${pageContext.request.contextPath}/member/joinPro" method="post" id="join" onsubmit="return formCheck()">
<div class="formstyle">
<input type="text" name="id" id="id" required="required" placeholder="아이디"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" id="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" id="pw2" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"> <%-- 한글, 영문만 입력 가능 --%>
</div>
<div class="validation"></div> <%-- 유효성 검사 시 유효성에 일치않을 때 --%>
<input type="submit" value="회원가입"> 
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>

<script type="text/javascript">
<%-- 아이디 중복확인 --%>


<%-- 비밀번호와 비밀번호 재확인 --%>
function passwordPass() {
    var pw = document.getElementById("pw");
    var pw2 = document.getElementById("pw2");

    if (pw && pw2) {
        var password = pw.value;
        var confirmPassword = pw2.value;

        if (password !== confirmPassword) {
            alert("비밀번호가 일치하지 않습니다.");
            pw2.focus(); // 비밀번호 재확인 필드에 포커스
            return false; // 검증 실패
        }
    }
    return true; // 검증 성공
}

<%-- 정규표현식(RegExp). RegExp() : 정규표현식 표시 함수. RegExp(/정규표현식내용/) --%>
function regExp() {
    var id = document.getElementById("id");
    var idRegExp = /^[a-z0-9]{2,20}$/; // 영소문자 + 숫자가 하나 이상 포함되며 2~20자

    if (!idRegExp.test(id.value)) {
        alert("아이디 형식은 영소문자, 숫자로만 가능하며 2~20자까지 가능");
        id.focus(); // 아이디 필드에 포커스
        return false; // 검증 실패
    }
    return true; // 검증 성공
}

function formCheck(){
    var validId = regExp();
    var validPw = passwordPass();

    if(validId && validPw) {
        return true; // 모든 검증 통과, 폼 제출
    } else {
        alert("형식에 맞게 작성해주세요");
        return false; // 검증 실패, 폼 제출 중지
    }
}

$(function(){
    $('#id').on('blur', function() { // 'id' 입력 필드에 blur 이벤트 추가
        $.ajax({
            url : '${pageContext.request.contextPath}/member/idCheck',
            data : {'id': $('#id').val()}, // $('.id')에서 $('#id')로 수정
            success : function(result){
                if(result == "iddup"){
                    result = "이미 사용 중인 아이디입니다.";
                    $('.validation').css("color", "red");
                } else {
                	result = "사용이 가능한 아이디입니다.";
                    $('.validation').css("color", "green");
                }
                $('.validation').html(result); // 결과 메시지를 표시
            }
        });
    });
});

</script>
</body>
</html>

MemberController

	/* 아이디 중복확인 */
	@GetMapping("member/idCheck")
	public String idCheck(MemberDTO memberDTO, HttpServletResponse response){
		System.out.println("MemberController idCheck()");
		MemberDTO memberDTO2 = memberService.idCheck(memberDTO.getId());
		String result = "";
		if(memberDTO2!=null) {
			result = "iddup";
		} else {
			result = "idnotdup";
		}
		System.out.println(result);
		return result;
	}

MemberService

	public MemberDTO idCheck(String id) {
		System.out.println("MemberService idCheck()");
		return memberDAO.idCheck(id);
	}

MemberDAO

	public MemberDTO idCheck(String id) {
		System.out.println("MemberDAO idCheck()");
		return sqlSession.selectOne(namespace+".idCheck", id);
	}

memberMapper

	<select id="idCheck" resultType="com.mystory001.domain.MemberDTO">
		select * 
		from `member`
		where id = #{id}
	</select>

30분간 이거 고쳐보고 저거 고쳐보고 했는데 문제를 발견했다. 문제는 Controller에서 @ResponseBody 어노테이션을 빼먹고 왜 안될까 하면서 바보같이 고민했다는 것이다.

join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
.formstyle{
	width : 400px;
	
}
.label{
	width : 200px;
}
.validation{
	width: 400px;
	height: 30px;
}
</style>
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>회원가입</h1>
<form action="${pageContext.request.contextPath}/member/joinPro" method="post" id="join" onsubmit="return formCheck()">
<div class="formstyle">
<span class="validation"></span> <%-- 유효성 검사 시 유효성에 일치않을 때 --%>
<input type="text" name="id" id="id" class="id" required="required" placeholder="아이디"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" id="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" id="pw2" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"> <%-- 한글, 영문만 입력 가능 --%>
</div>
<input type="submit" value="회원가입"> 
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>

<script type="text/javascript">
<%-- 아이디 중복확인 --%>
$(function() {
    $("#id").on('blur', function() {
        $.ajax({
            url: '${pageContext.request.contextPath}/member/idCheck',
            data: {'id': $('.id').val()},
            success: function(result) {
                var message;
                if (result == "iddup") {
                    result = "이미 사용 중인 아이디입니다.";
                    $('.validation').css("color", "red");
                } else {
                	result = "사용이 가능한 아이디입니다.";
                    $('.validation').css("color", "green");
                }
                $('.validation').html(result);
            }
        });
    });
});

<%-- 비밀번호와 비밀번호 재확인 --%>
function passwordPass() {
    var pw = document.getElementById("pw");
    var pw2 = document.getElementById("pw2");

    if (pw && pw2) {
        var password = pw.value;
        var confirmPassword = pw2.value;

        if (password !== confirmPassword) {
            alert("비밀번호가 일치하지 않습니다.");
            pw2.focus(); // 비밀번호 재확인 필드에 포커스
            return false; // 검증 실패
        }
    }
    return true; // 검증 성공
}

<%-- 정규표현식(RegExp). RegExp() : 정규표현식 표시 함수. RegExp(/정규표현식내용/) --%>
function regExp() {
    var id = document.getElementById("id");
    var idRegExp = /^[a-z0-9]{2,20}$/; // 영소문자 + 숫자가 하나 이상 포함되며 2~20자

    if (!idRegExp.test(id.value)) {
        alert("아이디 형식은 영소문자, 숫자로만 가능하며 2~20자까지 가능");
        id.focus(); // 아이디 필드에 포커스
        return false; // 검증 실패
    }
    return true; // 검증 성공
}

function formCheck(){
    var validId = regExp();
    var validPw = passwordPass();

    if(validId && validPw) {
        return true; // 모든 검증 통과, 폼 제출
    } else {
        alert("형식에 맞게 작성해주세요");
        return false; // 검증 실패, 폼 제출 중지
    }
}

</script>
</body>
</html>

MemberController

	/* 아이디 중복확인 */
	@GetMapping("member/idCheck")
	@ResponseBody
	public String idCheck(MemberDTO memberDTO, HttpServletResponse response){
		System.out.println("MemberController idCheck()");
		MemberDTO memberDTO1 = memberService.idCheck(memberDTO.getId());
		String result = "";
		if(memberDTO1!=null) {
			result = "iddup";
		} else {
			result = "idOk";
		}
		System.out.println(result);
		return result;
	}

@ResponseBody : 웹 응답 본문에 바인딩해야하는 메소드 반환값을 나타내주는 어노테이션. 서블릿 환경에서 주석이 있는 핸들러 메소드에 대해 지원. 스프링 비동기 통신, API 통신을 구현하기 위한 어노테이션.

클라이언트 → 서버 요청 : @RequestBody : json 기반의 Http Body를 자바 객체로 변환

서버 → 클라이언트 응답 : @ResponseBody : 자바 객체를 json 기반의 Http Body로 변환

참고 : https://velog.io/@nomonday/Spring-RequestBody-ResponseBody-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

읽어보기 : https://findmypiece.tistory.com/191

웹 개발자 도구 Network에서 볼 수 있는 내용들이다. 사실 Elements, Console, Sources는 자주 봤지만 이 곳은 처음 자세히 보는데 이곳에 대한 내용도 한 번 정리해야 할 것 같다.

웹 개발자 도구 Network 탭

웹 페이지가 서버와 통신하는 모든 요청과 응답을 모니터링 할 수 있다.

Name
요청한 리소스의 이름이나 경로를 나타냄. 일반적으로 URL이 표시
Status
서버가 요청을 처리한 결과로 반환한 HTTP 상태 코드를 표시. 각 상태 코드는 각각의 의미를 가지고 있음
200 : 성공적으로 처리됨
404 : 요청한 리소스를 찾을 수 없음
500 : 서버 오류
Type
요청한 리소스의 유형을 나타냄. 일반적으로 MIME 타입이나 리소스의 종류를 보여줌
Document : HTML 문서
Script : 자바스크립트 파일
XHR : XMLHttpRequest의 약자. Ajax 요청을 뜻함
Image : 이미지 파일
Initiator
요청을 시작한 원인을 나타냄. 일반적으로 요청을 트리거한 스크립트나 리소스를 보여줌
Size
요청한 리소스의 크기를 바이트 단위로 표시. 서버에서 반환된 데이터의 크기를 나타냄
Time
요청이 완료되기까지 소요된 시간을 ms로 표시. 요청과 응답의 전체 시간을 나타냄
Waterfall
요청의 타이밍을 시각적으로 나타낸 그래프. 요청이 발생한 시점, 응답을 받기까지의 대기 시간, 데이터가 다운로드 되는 시간 등을 보여줌

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
.sidebar{
	float : left;
	width: 200px;
	height: 500px;
}
</style>
<body>
<div class="sidebar"> <%-- sidebar 영역 div --%>
<ul>
<li><a href="${pageContext.request.contextPath }/">홈 화면</a></li> 
</ul>
</div> <%-- sidebar 영역 div --%>
</body>
</html>

다음과 같이 board와 관련된 클래스와 xml을 만들어 놓고 시작

main.jsp에

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<%-- 반응형 웹 viewport → head태그 사이에 작성 --%>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}

.header{
	float : right;
	width: 1200px;
	height: 0px;
}

.sidebar{
	float : left;
	width: 200px;
	height: 500px;

}

.content{
	width: 1000px;
	height: 600px;
}

.footer{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="inc/top.jsp" />

<jsp:include page="inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>게시물 목록</h1>
<table border="1">
<tr>
	<th>번호</th><th>제목</th><th>작성자</th><th>작성일</th>
</tr>
<%-- 게시글 목록 --%>
</table>
<%-- 페이지 목록 10개씩 10개의 페이지 --%>
<form method="get">
 <input type="text" name="search" value="검색">
 <input type="submit" value="검색하기">
 </form>
<%-- 로그인이 되어 있을 때만 버튼이 보이게--%>
<c:if test="${! empty sessionScope.id }">
	<a href="${pageContext.request.contextPath }/board/insert"><button>글쓰기</button></a>
</c:if>
</div> <%-- content영역 div --%>
<jsp:include page="inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

이와 같이 만들어 놓고 글이 작성될 때마다 th아래 번호로 내림차순으로 글의 목록이 쌓이게 구현할 것

justBoard6 member

001cloudid — Wed, 25 Sep 2024 12:01:22 +0900

Controller → Service → DAO → Mapper

DTO

MemberDTO

package com.mystory001.domain;

import java.sql.Timestamp;

public class MemberDTO {
	
	private String id;
	private String pw;
	private String name;
	private Timestamp date;
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPw() {
		return pw;
	}
	public void setPw(String pw) {
		this.pw = pw;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	
	public Timestamp getDate() {
		return date;
	}
	public void setDate(Timestamp date) {
		this.date = date;
	}
	
}

참조자료형 java.sql.Timestamp는 A thin wrapper around java.util.Date that allowsthe JDBC API to identify this as an SQL TIMESTAMP value.It adds the abilityto hold the SQL TIMESTAMP fractional seconds value, by allowingthe specification of fractional seconds to a precision of nanoseconds.A Timestamp also provides formatting andparsing operations to support the JDBC escape syntax for timestamp values.라고 설명되어 있음. SQL의 timestamp 타입에 대응하기 위해 만들어진 클래스이다.

내가 프로젝트를 진행하면서 가장 애를 먹었던 것 중 하나가 Timestamp형을 String형으로 서로 변환하는 과정이었다. 이와 관련되어 볼만한 자료는 https://www.devkuma.com/docs/java/timestamp/이다. 이곳에 깔끔하게 정리가 잘 되어있다.

package com.mystory001.controller;

import javax.inject.Inject;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import com.mystory001.domain.MemberDTO;
import com.mystory001.service.MemberService;

@Controller
public class MemberController {
	
	//public @interface Controller {
		/**
		 * The value may indicate a suggestion for a logical component name,
		 * to be turned into a Spring bean in case of an autodetected component.
		 * @return the suggested component name, if any
		 */
		//String value() default "";
	//}
	
	@Inject
	private MemberService memberService;
	
	/* 회원가입 */
	@GetMapping
	public String join() {
		System.out.println("MemberController join()");
		return "member/join"; //주소 변경 없이 이동하는 방식(forward)
	}
	
	/* 회원가입처리 */
	@PostMapping
	public String joinPro(MemberDTO memberDTO) {
		System.out.println("Membe rController joinPro()");
		memberService.joinPro(memberDTO); //join.jsp에서 입력한 데이터 → request → memberDTO 변수에 전달 → DB 작업 
		return "redirect:/main"; //main으로 주소 변경하면서 이동
	}
	
	
	
}

package com.mystory001.service;

import java.sql.Timestamp;

import javax.inject.Inject;

import org.springframework.stereotype.Service;

import com.mystory001.dao.MemberDAO;
import com.mystory001.domain.MemberDTO;

@Service
public class MemberService {

	@Inject
	private MemberDAO memberDAO;
	
	public void joinPro(MemberDTO memberDTO) {
		System.out.println("MemberService joinPro()");
		memberDTO.setDate(new Timestamp(System.currentTimeMillis())); //가입 날짜 설정
		memberDAO.joinPro(memberDTO);
	}
	
}

package com.mystory001.dao;

import javax.inject.Inject;

import org.apache.ibatis.session.SqlSession;

import com.mystory001.domain.MemberDTO;

public class MemberDAO {
	
	@Inject
	private SqlSession sqlSession;
	
	private static final String namespace = "com.mystory001.mappers.memberMapper";

	public void joinPro(MemberDTO memberDTO) {
		System.out.println("MemberDAO joinPro()");
		sqlSession.insert(namespace+".joinPro",memberDTO);
	}
	
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.mystory001.mappers.memberMapper">

	<insert id="joinPro">
		insert into member(id, pw, name, time)
		values(#{id}, #{pw}, #{name}, #{time})
	</insert>


</mapper>

오류 발생함

코드를 봤을 때 어노테이션이 빠진 것 같아 보이는데 memberDAO에 어노테이션이 빠져있었다.

package com.mystory001.dao;

import javax.inject.Inject;

import org.apache.ibatis.session.SqlSession;
import org.springframework.stereotype.Repository;

import com.mystory001.domain.MemberDTO;

@Repository
public class MemberDAO {
	
	@Inject
	private SqlSession sqlSession;
	
	private static final String namespace = "com.mystory001.mappers.memberMapper";

	public void joinPro(MemberDTO memberDTO) {
		System.out.println("MemberDAO joinPro()");
		sqlSession.insert(namespace+".joinPro",memberDTO);
	}
	
}

어노테이션을 다시 살펴보자

@Controller : Controller에 작성. 웹 요청과 응답을 처리
@Service : Service에 작성. 내부에서 자바 로직을 처리
@Repository : DAO에 작성. DB나 파일 같은 외부 Input/Output 작업을 처리

DB처리를 할 DAO 클래스에 @Repository 어노테이션을 붙여줘야 함. 그렇게 되면 DAO 클래스는 루트 컨테이너에 빈 객체로 생성됨. 루트 컨테이너의 객체는 어디서든 공유가 가능하기 때문에 자동 의존성 주입 어노테이션을 이용해 객체를 받아올 수 있다. (참고 : https://codevang.tistory.com/258)

DAO에 어노테이션을 붙이면 오류가 없어지고 페이지가 뜬다.

회원가입을 진행해보자

오류가 뜬다.

뭔가 오류를 보니 DTO에서 time의 자료형을 Timestamp로 했는데 일치하지 않는다인 것 같음.

DB는 time 컬럼의 데이터타입을 datetime으로 했어서 문제가 생긴 것 같음. datetime을 timestamp로 바꿨을 때도 에러가 날까? 시도해 보자

데이터 타입이 변경된 것을 알 수 있음. 프로젝트할 때 timestamp를 사용하지 않고 DTO에 날짜를 사용할 변수에 [ String으로 했을 때 잘 들어간 것이 갑자기 생각난다.

그럼에도

문제는

DTO에 date로 만들었는데 이러니 찾지 못해서 오류가 난 것 같음. 위에 굳이 데이터타입을 변경할 필요가 없었던 것 같다.

이러면 에러 안 나겠지? 했는데

이번에는 문법 오류가 났는데 백틱(`)을 안 넣어서 그런가? 굳이 오류를 안 찾아보는 이유는 이런저런 오류 접하면서 해결 방법에 대해서 스스로 알아보고 해결하는 것이 기억에 더 많이 남기 때문이다.

DB에 member 테이블이 아니라 `member`테이블이고 time 컬럼이 `time`컬럼이라 생긴 문제인 것 같다.

DB에서 조회해 보니

잘 들어가긴 했다. 회원가입을 완료하면 주소만 main으로 바뀌고 화면은 회원가입 화면이다. 이를 수정해 보자

MemberController 일부만 수정

	/* 회원가입처리 */
	@PostMapping
	public String joinPro(MemberDTO memberDTO) {
		System.out.println("Membe rController joinPro()");
		memberService.joinPro(memberDTO); //join.jsp에서 입력한 데이터 → request → memberDTO 변수에 전달 → DB 작업 
		return "redirect:/"; //main으로 주소 변경하면서 이동
	}

이러면 회원가입에서 정보를 작성하고 회원가입을 눌렀을 때 회원가입이 완료되고 화면이 main으로 바뀐다.

일단 join.jsp에서 할 일은 정규표현식을 이용해서 정보의 유효성 검사와 ajax를 이용한 아이디 중복 검사를 먼저 처리해야 할 것 같다.

jquery.js를 resources폴더에 넣어주고 jsp에서 이를 사용하기 위해 경로 설정(body 태그 위에) 작성하고, 자바스크립트 내용은 닫히는 body 태그 위에 작성. 교육받을 때 가끔씩 자바스크립트가 잘 인식이 안 되는 버그? 같은 게 있다고 해서 가장 아래에 작성해 준다고 들었다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
.formstyle{
	width : 400px;
	
}
.label{
	width : 200px;
}
.validation{
	widows: 200px;
	height: 30px;
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/jquery-3.7.1.min.js"></script>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>회원가입</h1>
<form action="${pageContext.request.contextPath}/member/joinPro" method="post">
<div class="formstyle">
<input type="text" name="id" required="required" placeholder="아이디"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"> <%-- 한글, 영문만 입력 가능 --%>
</div>
<div class="validation"><b></b></div> <%-- 유효성 검사 시 유효성에 일치않을 때 --%>
<input type="submit" value="회원가입"> 
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>

<script type="text/javascript">
<%-- 이곳에 자바스크립트 내용 작성 --%>

</script>
</body>
</html>

현재 비밀번호가 틀릴 경우 회원가입이 된다는 것 자체가 문제이므로 비밀번호와 비밀번호 재확인이 같을 때 페이지가 넘어가도록 제어해 보자

그전에 DOM 요소에 접근하는 것을 알아보자. 많이 있지만 여기서 사용할 것은 id 선택자로 접근, class값으로 접근하는 방법에 대해서만 알아보자

id 선택자로 접근 getElementById()
요소명.getElementById("id이름")
id속성은 html 안에서 동일한 id 속성이 존재하면 안 됨
class 값으로 접근 getElementsByClassName()
요소명. getElementsByClassName(("class이름")

이 외에도 태그나 쿼리셀럭터로 접근하는 방법이 있다.

※매번 혼란스러운 것을 잠시 정리하자면 id 해시 기호(#), class 마침표(.)

지금은 id로도 해보고 class로도 해보고 무슨 차이가 있는지에 대해서도 찾아보자

id 선택자로 접근하였을 때는 되었는데, class 값으로 접근하면 되지 않는 것을 확인했다. 이유는 getElementsByClassName()은 컬렉션 객체를 반환하므로 for문을 사용하거나 특정 인덱스를 반환받아 사용할 수 있다.

따라서

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
.formstyle{
	width : 400px;
	
}
.label{
	width : 200px;
}
.validation{
	widows: 200px;
	height: 30px;
}
</style>
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>회원가입</h1>
<form action="${pageContext.request.contextPath}/member/joinPro" method="post" onsubmit="return passwordPass()">
<div class="formstyle">
<input type="text" name="id" class="id" required="required" placeholder="아이디"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" id="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" id="pw2" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"> <%-- 한글, 영문만 입력 가능 --%>
</div>
<div class="validation"><b></b></div> <%-- 유효성 검사 시 유효성에 일치않을 때 --%>
<input type="submit" value="회원가입"> 
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>

<script type="text/javascript">
<%-- 비밀번호와 비밀번호 재확인 --%>
function passwordPass(){
	var pw = document.getElementById("pw");
	var pw2 = document.getElementById("pw2");
	
	if(pw && pw2){
		var password = pw.value;
		var confirmPassword = pw2.value;
		
		if(password !== confirmPassword){
			alert("비밀번호가 일치하지 않습니다.");
			return false; //페이지 넘어가는 것을 막음
		}
		return true;
	}  else{
		console.error("에러");
		return false;
	}
}

</script>
</body>
</html>

다음으로 현재 아이디가 공백이라도 회원가입이 가능함. 정규표현식을 사용하여 제어

정규식 기호

a-zA-Z	영 대소문자(-으로 범위 지정 가능)
ㄱ-ㅎㅎ가-힣	한글 문자(-으로 범위 지정 가능)
0-9	숫자(-으로 범위 지정 가능)

더 다양하게 많지만 여기서 사용할 기호는 3가지 밖에 없다.

정규식 검색 기준 패턴

[]	대괄호 안 문자들 중 하나. or 처리 묶음
[^문자]	대괄호 안의 문자를 제외
^문자열	특정 문자열로 시작
문자열$	특정 문자열로 끝

정규식 개수 반복 패턴

?	없거나 최대 한 개
*	없거나 여러 개 있음
+	최소 한 개 또는 최소 여러 개
*?	없거거나 있거나 최대 한 개
+?	최소 한 개 있거나, 없거나 최대 한 개

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%95%EA%B7%9C%EC%8B%9D-RegExp-%EB%88%84%EA%B5%AC%EB%82%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%A0%95%EB%A6%AC 참고해서 정리해 보았다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
.formstyle{
	width : 400px;
	
}
.label{
	width : 200px;
}
.validation{
	widows: 200px;
	height: 30px;
}
</style>
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>회원가입</h1>
<form action="${pageContext.request.contextPath}/member/joinPro" method="post" onsubmit="return passwordPass()" id="join">
<div class="formstyle">
<input type="text" name="id" class="id" required="required" placeholder="아이디"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" id="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" id="pw2" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"> <%-- 한글, 영문만 입력 가능 --%>
</div>
<div class="validation"><b></b></div> <%-- 유효성 검사 시 유효성에 일치않을 때 --%>
<input type="submit" value="회원가입"> 
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>

<script type="text/javascript">
<%-- 비밀번호와 비밀번호 재확인 --%>
function passwordPass(){
	var pw = document.getElementById("pw");
	var pw2 = document.getElementById("pw2");
	
	if(pw && pw2){
		var password = pw.value;
		var confirmPassword = pw2.value;
		
		if(password !== confirmPassword){
			alert("비밀번호가 일치하지 않습니다.");
			return false; //페이지 넘어가는 것을 막음
		}
		return true;
	}  else{
		console.error("에러");
		return false;
	}
}

<%-- 정규표현식(RegExp). RegExp() : 정규표현식 표시 함수. RegExp(/정규표현식내용/) --%>
$(function(){
	<%-- 대상.함수 --%>
	$('#join').submit(function(){
		var idRegExp = RegExp(/^[a-z0-9]{2,20}$/); <%-- 영소문자+숫자가 하나 이상 포함되며 2~20자 --%>
		if(!idRegExp.test($('.id').val())){
			alert("아이디 형식은 영소문자, 숫자로만 가능하며 2~20자까지 가능");
			$('.id').focus();
			return false;
		}
	})
})

</script>
</body>
</html>

이와 같이 코드를 작성했는데 비밀번호와 비밀번호 재확인은 되는데, 정규표현식은 안된다. 어떻게 검색을 해야 내가 원하는 정보를 찾을 수 있을지 고민해 봐도 되지 않아 어쩔 수 없이 gpt를 사용해서 왜 안되는지만 찾아보았다.

이벤트 핸들링의 순서
현재 코드에서 onsubmit 속성으로 비밀번호를 검사를 수행한 후, jQuery의 submit 이벤트 핸들러가 실행됨. 이로 인해 정규표현식 검사가 진행되지 않을 수 있다.
submit 이벤트 핸들러의 return
jQuery의 submit 핸들러에서 return false;를 사용해도 페이지 전송을 막을 수 있지만, 이를 어떻게 처리하는지에 따라 결과가 다를 수 있다.
비밀번호 확인 기능과 ID 검증이 별도의 흐름에서 처리됨
비밀번호 확인이 이미 페이지 전송을 차단했을 경우, ID 검증이 실행되지 않을 수 있다.

이벤트 핸들링이 잘못되었는데 자바스크립트의 개념이 부족한 것인지 사실 잘 모르겠다.

생각한 해결방법으로는 아이디 정규표현식, 비밀번호와 비밀번호 재확인을 포커스가 이동했을 때 정보에 문제가 있을 때 알림 창이 뜨게 바꾸면 되지 않을까?

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
.formstyle{
	width : 400px;
	
}
.label{
	width : 200px;
}
.validation{
	widows: 200px;
	height: 30px;
}
</style>
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>회원가입</h1>
<form action="${pageContext.request.contextPath}/member/joinPro" method="post" id="join">
<div class="formstyle">
<input type="text" name="id" id="id" required="required" placeholder="아이디" onblur="return regExp()"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" id="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" id="pw2" required="required" placeholder="비밀번호재확인" onblur="return passwordPass()"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"> <%-- 한글, 영문만 입력 가능 --%>
</div>
<div class="validation"><b></b></div> <%-- 유효성 검사 시 유효성에 일치않을 때 --%>
<input type="submit" value="회원가입"> 
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>

<script type="text/javascript">
<%-- 비밀번호와 비밀번호 재확인 --%>
function passwordPass(){
	var pw = document.getElementById("pw");
	var pw2 = document.getElementById("pw2");
	
	if(pw && pw2){
		var password = pw.value;
		var confirmPassword = pw2.value;
		
		if(password !== confirmPassword){
			alert("비밀번호가 일치하지 않습니다.");
			return false; //페이지 넘어가는 것을 막음
		}
		return true;
	}  else{
		console.error("에러");
		return false;
	}
}

<%-- 정규표현식(RegExp). RegExp() : 정규표현식 표시 함수. RegExp(/정규표현식내용/) --%>
function regExp(){
		var id = document.getElementById("id");
		var idRegExp = RegExp(/^[a-z0-9]{2,20}$/); <%-- 영소문자+숫자가 하나 이상 포함되며 2~20자 --%>
// 		if(!idRegExp.test($('.id').val())){
// 			alert("아이디 형식은 영소문자, 숫자로만 가능하며 2~20자까지 가능");
// 			$('.id').focus();
// 			return false;
		if(!idRegExp.test(id.value)){
			alert("아이디 형식은 영소문자, 숫자로만 가능하며 2~20자까지 가능");
			$('.id').focus();
			return false;
		}
		return true;
}
</script>
</body>
</html>

정규표현식을 사용하라고는 되어있어서 아 되는구나 싶어서 회원가입을 알림 창을 무시하고 해 봤음

... 뭐지? 뭐가 문제일까... 아무리 고민하고 해 봐도 답이 나오지 않았다. 처음 다짐했을 때는 gpt를 절대 사용하지 않도록 생각했는데 검색 기술이 형편없어서인지 아무리 찾아봐도 답이 나오지 않음... 그래서 해결 방법에 대해 검색해 보았다.

폼 제출 이벤트 가로채기
onsubmit 이벤트를 사용하여 폼이 제출되기 전에 모든 검증을 수행한다.
각 검증 함수의 결과를 확인
모든 검증이 통과해야만 폼이 제출되도록 한다.

즉 onsubmit 이벤트를 form 태그에 넣어주고, 유효성검사를 하게 해야 한다라는 것 같다.

function formCheck(){
    var validId = regExp();
    var validPw = passwordPass();

    if(validId && validPw) {
        return true; // 모든 검증 통과, 폼 제출
    } else {
        alert("형식에 맞게 작성해주세요");
        return false; // 검증 실패, 폼 제출 중지
    }
}

넣어주어도 계속 알림 창만 뜰뿐 가입은 가능했다. 그래서 전반적으로 조금씩 바꿔서 원하는 결과를 만들어 낸 것 같다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
.formstyle{
	width : 400px;
	
}
.label{
	width : 200px;
}
.validation{
	widows: 200px;
	height: 30px;
}
</style>
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>회원가입</h1>
<form action="${pageContext.request.contextPath}/member/joinPro" method="post" id="join" onsubmit="return formCheck()">
<div class="formstyle">
<input type="text" name="id" id="id" required="required" placeholder="아이디"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" id="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" id="pw2" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"> <%-- 한글, 영문만 입력 가능 --%>
</div>
<div class="validation"><b></b></div> <%-- 유효성 검사 시 유효성에 일치않을 때 --%>
<input type="submit" value="회원가입"> 
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>

<script type="text/javascript">
<%-- 비밀번호와 비밀번호 재확인 --%>
function passwordPass() {
    var pw = document.getElementById("pw");
    var pw2 = document.getElementById("pw2");

    if (pw && pw2) {
        var password = pw.value;
        var confirmPassword = pw2.value;

        if (password !== confirmPassword) {
            alert("비밀번호가 일치하지 않습니다.");
            pw2.focus(); // 비밀번호 재확인 필드에 포커스
            return false; // 검증 실패
        }
    }
    return true; // 검증 성공
}

<%-- 정규표현식(RegExp). RegExp() : 정규표현식 표시 함수. RegExp(/정규표현식내용/) --%>
function regExp() {
    var id = document.getElementById("id");
    var idRegExp = /^[a-z0-9]{2,20}$/; // 영소문자 + 숫자가 하나 이상 포함되며 2~20자

    if (!idRegExp.test(id.value)) {
        alert("아이디 형식은 영소문자, 숫자로만 가능하며 2~20자까지 가능");
        id.focus(); // 아이디 필드에 포커스
        return false; // 검증 실패
    }
    return true; // 검증 성공
}

function formCheck(){
    var validId = regExp();
    var validPw = passwordPass();

    if(validId && validPw) {
        return true; // 모든 검증 통과, 폼 제출
    } else {
        alert("형식에 맞게 작성해주세요");
        return false; // 검증 실패, 폼 제출 중지
    }
}
</script>
</body>
</html>

자바스크립트는 처음 배울 땐 와 엄청 쉽다 이랬는데 손 놓고 있다 보니까 하나도 모르겠다. 이거 끝나면 자바스크립트를 다시 학습하도록 해야겠다.

로그인

아이디와 비밀번호가 일치하면 로그인이 되고, 그렇지 않으면 경고창

먼저 아이디, 비밀번호가 일치하지 않았을 때 msg창

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
	alert("존재하지 않는 아이디이거나 비밀번호가 틀렸습니다.");
	history.back(); //뒤로 이동
</script>
</body>
</html>

로그인 처리 과정을 살펴보면

사용자에게 로그인 정보(아이디, 비밀번호)를 입력받는다.
입력받은 정보를 DB에서 찾는다.
1) 가입된 정보가 있으면 로그인이 된다.
2) 가입된 정보가 없으면 로그인이 안된다.

여기서 입력받은 정보를 조회하기 위해서는 return 값이 존재해야 함

MemberController

	/* 로그인 → 회원 확인 */
	@PostMapping
	public String loginPro(MemberDTO memberDTO, HttpSession session) {
		System.out.println("MemberController loginPro()");
		MemberDTO memberDTO2 = memberService.userCheck(memberDTO); //폼에서 입력받은 데이터가 존재하는지 확인
		
		if(memberDTO2 != null) {
			session.setAttribute("id", memberDTO2.getId());
			return "redirect:/";
		} else {
			return "member/loginmsg";
		}
	}

MemberService

	public MemberDTO userCheck(MemberDTO memberDTO) {
		System.out.println("MemberService userCheck()");
		return memberDAO.userCheck(memberDTO);
	}

MemberDAO

	public MemberDTO userCheck(MemberDTO memberDTO) {
		System.out.println("MemberDAO userCheck()");
		return sqlSession.selectOne(namespace+".userCheck", memberDTO);
	}

memberMapper

	<select id="userCheck">
		select *
		from `member`
		where id=#{id} and pw=#{pw}
	</select>

오류 발생 → java.lang.IllegalStateException: Ambiguous mapping

→ Controller에서 RequestMapping이 충돌하는 경우 에러가 발생. 동일한 value값이 지정되어 있어 핸들러 매핑이 불가능함.

package com.mystory001.controller;

import javax.inject.Inject;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import com.mystory001.domain.MemberDTO;
import com.mystory001.service.MemberService;

@Controller
public class MemberController {
	
	//public @interface Controller {
		/**
		 * The value may indicate a suggestion for a logical component name,
		 * to be turned into a Spring bean in case of an autodetected component.
		 * @return the suggested component name, if any
		 */
		//String value() default "";
	//}
	
	@Inject
	private MemberService memberService;
	
	/* 회원가입 */
	@GetMapping
	public String join() {
		System.out.println("MemberController join()");
		return "member/join"; //주소 변경 없이 이동하는 방식(forward)
	}
	
	/* 회원가입처리 */
	@PostMapping
	public String joinPro(MemberDTO memberDTO) {
		System.out.println("MemberController joinPro()");
		memberService.joinPro(memberDTO); //join.jsp에서 입력한 데이터 → request → memberDTO 변수에 전달 → DB 작업 
		return "redirect:/"; //main으로 주소 변경하면서 이동
	}
	
	/* 로그인 → 회원 확인 */
	@PostMapping
	public String loginPro(MemberDTO memberDTO, HttpSession session) {
		System.out.println("MemberController loginPro()");
		MemberDTO memberDTO2 = memberService.userCheck(memberDTO); //폼에서 입력받은 데이터가 존재하는지 확인
		
		if(memberDTO2 != null) {
			session.setAttribute("id", memberDTO2.getId());
			return "redirect:/";
		} else {
			return "member/loginmsg";
		}
	}
	
	
}

? 단순히 메소드이름만 문제였던 것은 아니었다. 경로가 명시되지 않아 발생된 오류였다. 각 메소드에 대한 명확한 URL 경로를 지정해줘야 했었던 것 추가적으로 RequestMapping 어노테이션도 빠져있었다.

package com.mystory001.controller;

import javax.inject.Inject;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.mystory001.domain.MemberDTO;
import com.mystory001.service.MemberService;

@Controller
@RequestMapping("/member/*")
public class MemberController {
	
	//public @interface Controller {
		/**
		 * The value may indicate a suggestion for a logical component name,
		 * to be turned into a Spring bean in case of an autodetected component.
		 * @return the suggested component name, if any
		 */
		//String value() default "";
	//}
	
	@Inject
	private MemberService memberService;
	
	/* 회원가입 */
	@GetMapping("/join")
	public String join() {
		System.out.println("MemberController join()");
		return "member/join"; //주소 변경 없이 이동하는 방식(forward)
	}
	
	/* 회원가입처리 */
	@PostMapping("/joinPro")
	public String joinPro(MemberDTO memberDTO) {
		System.out.println("MemberController joinPro()");
		memberService.joinPro(memberDTO); //join.jsp에서 입력한 데이터 → request → memberDTO 변수에 전달 → DB 작업 
		return "redirect:/"; //main으로 주소 변경하면서 이동
	}
	
	/* 로그인 → 회원 확인 */
	@PostMapping("/loginPro")
	public String loginPro(MemberDTO memberDTO, HttpSession session) {
		System.out.println("MemberController loginPro()");
		MemberDTO memberDTO2 = memberService.userCheck(memberDTO); //폼에서 입력받은 데이터가 존재하는지 확인
		
		if(memberDTO2 != null) {
			session.setAttribute("id", memberDTO2.getId());
			return "redirect:/";
		} else {
			return "member/loginmsg";
		}
	}
	
	
}

이렇게 수정해 주니 오류는 없어졌고 로그인을 해보니 또 다른 오류에 직면했다.

select문 같은 경우 resultType을 작성해줬어야 했는데 누락되어 생긴 오류인 것으로 보인다. memberMapper에서 resultType을 작성해 주면 해결될 문제

memberMapper

	<select id="userCheck" resultType="com.mystory001.domain.MemberDTO">
		select *
		from `member`
		where id=#{id} and pw=#{pw}
	</select>

작성해 주니 되긴 되는데, 로그인이 되는 건 아니다. top.jsp에서 taglib를 이용해서 세션을 유지시키도록해보자

top.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
.header{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<div class="header"> <%-- header 영역 div --%>
<form method="post" action="${pageContext.request.contextPath}/loginPro">  <%-- post방식 --%>
<span style="float: right;">
<c:if test="${empty sessionScope.id }">
아이디 : <input type="text" name="id">
비밀번호 : <input type="password" name="pw">
<button type="submit">로그인 </button><a href="${pageContext.request.contextPath}/member/join"><button type="button">회원가입</button></a>
</c:if>
<c:if test="${! empty sessionScope.id }">
${sessionScope.id } 님 반갑습니다. | <a href="${pageContext.request.contextPath }/member/check">내 정보</a> | <a href="${pageContext.request.contextPath }/logout">로그아웃</a>
</c:if>
</span>
</form>
</div><%-- header 영역 div --%><br>
<hr>
</body>
</html>

check.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>정보 확인</h1>
<form method="post" action="${pageContext.request.contextPath }/member/mypage">
${sessionScope.id } 님 비밀번호를 입력해주세요.<br>
<input type="password" name="pw"> <input type="submit" value="확인">
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

mypage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>내 정보</h1>
<input type="text" name="id" readonly="readonly"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"> <%-- 한글, 영문만 입력 가능 --%>
<button>수정</button><button>탈퇴</button>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

로그아웃 memberController

	/* 로그아웃 */
	@GetMapping("/logout")
	public String logout(HttpSession session) {
		System.out.println("MemberController logout()");
		session.invalidate();
		return "redirect:/";
	}

check.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>정보 확인</h1>
<form method="post" action="${pageContext.request.contextPath }/member/mypage">
${sessionScope.id } 님 비밀번호를 입력해주세요.<br>
<input type="password" name="pw"> <input type="submit" value="확인">
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

	@GetMapping("member/check")
	public String check(HttpSession session) {
		System.out.println("MemberController check()");
		
		return "/member/check";
	}
	
	@PostMapping("member/mypage")
	public String mypage(HttpSession session) {
		System.out.println("MemberController mypage()");
		return "/member/mypage";
	}

정보 확인에서 아무것도 입력하지 않아도 내 정보로 갈 수 있음. 비밀번호가 맞는지 확인하는 로직이 필요함.

Controller

	@GetMapping("member/check")
	public String check(HttpSession session) {
		System.out.println("MemberController check()");
		return "/member/check";
	}
	
	@PostMapping("member/checkPro")
	public String checkPro(HttpSession session) {
		System.out.println("MemberController checkPro()");
		String id = (String)session.getAttribute("id");
		String inputPw = (String)session.getAttribute("pw");
		String pw = memberService.pwCheck(id);
		
		if(pw!=null && pw.equals(inputPw)) {
			return "/member/mypage";
		} else {
			return "/member/checkmsg";
		}
	}

Service

	public String pwCheck(String id) {
		System.out.println("MemberService userPw()");
		return memberDAO.pwCheck(id);
	}

DAO

	public String pwCheck(String id) {
		System.out.println("MemberDAO pwCheck()");
		return sqlSession.selectOne(namespace+".pwCheck", id);
	}

Mapper

	<select id="pwCheck" resultType="String">
		select pw
		from `member`
		where id=#{id}
	</select>

checkmsg만 뜰뿐..이었다

		String inputPw = (String)session.getAttribute("pw");

현 페이지에서 입력받은 pw이라고 생각하고 했는데, 세션에 저장된 비밀번호를 뜻함. 따라서 원하는 동작이 아님...

@RequestParam을 사용함. HTTP 요청 파라미터를 메소드 매개변수로 매핑할 때 사용하는 어노테이션. 사용자가 입력한 데이터를 서버 측에 쉽게 받아올 수 있도록 해줌.

	@PostMapping("member/checkPro")
	public String checkPro(@RequestParam("pw") String inputPw, HttpSession session) {
		System.out.println("MemberController checkPro()");
		String id = (String)session.getAttribute("id");
		String pw = memberService.pwCheck(id);
		
		if(pw!=null && pw.equals(inputPw)) {
			return "/member/mypage";
		} else {
			return "/member/checkmsg";
		}
	}

해결됨..

마이페이지에서 회원수정, 탈퇴와 게시판하기

justBoard5 화면(view)2

001cloudid — Tue, 24 Sep 2024 14:49:20 +0900

화면 구성을 대략적으로 만들어 봤음

화면 구성을 하다보니 중복되는 부분이 있다는 것을 알 수 있음 → innclude 액션 태그 사용해서 수정에 용이하게 변경

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%-- 반응형 웹 viewport → head태그 사이에 작성 --%>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}

.header{
	float : right;
	width: 1200px;
	height: 0px;
}

.sidebar{
	float : left;
	width: 200px;
	height: 500px;

}

.content{
	width: 1000px;
	height: 600px;
}

.footer{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<div class="header"> <%-- header 영역 div --%>
<form method="post" action="${pageContext.request.contextPath}/loginPro">  <%-- post방식 --%>
<span style="float: right;">
아이디 : <input type="text" name="id">
비밀번호 : <input type="password" name="pw">
<button type="submit">로그인 </button><a href="${pageContext.request.contextPath}/member/join"><button type="button">회원가입</button></a>
</span>
</form>
</div><%-- header 영역 div --%><br>
<hr>

<div class="sidebar"> <%-- sidebar 영역 div --%>
<ul>
<li><a href="#">게시판</a></li> 
<li><a href="#">내 정보</a></li>
</ul>
</div> <%-- sidebar 영역 div --%>

<div class="content"> <%-- content영역 div --%>
 내용은 여기에
</div> <%-- content영역 div --%>
<hr>
<div class="footer"> <%-- footer 영역 div --%>
<span style="float: right;">시작 날짜 : 2024.09.19 / 끝낸 날짜 : 2024.?.? / 만든이 : 001cloudid</span>
</div> <%-- footer 영역 div --%>
</div> <%-- container 영역 div --%>
</body>
</html>

주석을 작성해놔서 어렵지 않아보임. top sidebar, footer로 각각 정리

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%-- 반응형 웹 viewport → head태그 사이에 작성 --%>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}

.header{
	float : right;
	width: 1200px;
	height: 0px;
}

.sidebar{
	float : left;
	width: 200px;
	height: 500px;

}

.content{
	width: 1000px;
	height: 600px;
}

.footer{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="inc/top.jsp" />

<jsp:include page="inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
 내용은 여기에
</div> <%-- content영역 div --%>
<jsp:include page="inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

inc/top

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
.header{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<div class="header"> <%-- header 영역 div --%>
<form method="post" action="${pageContext.request.contextPath}/loginPro">  <%-- post방식 --%>
<span style="float: right;">
아이디 : <input type="text" name="id">
비밀번호 : <input type="password" name="pw">
<button type="submit">로그인 </button><a href="${pageContext.request.contextPath}/member/join"><button type="button">회원가입</button></a>
</span>
</form>
</div><%-- header 영역 div --%><br>
<hr>
</body>
</html>

inc/sidebar

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
.sidebar{
	float : left;
	width: 200px;
	height: 500px;
}
</style>
<body>
<div class="sidebar"> <%-- sidebar 영역 div --%>
<ul>
<li><a href="#">게시판</a></li> 
<li><a href="#">내 정보</a></li>
</ul>
</div> <%-- sidebar 영역 div --%>
</body>
</html>

inc/footer

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
.footer{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<hr>
<div class="footer"> <%-- footer 영역 div --%>
<span style="float: right;">시작 날짜 : 2024.09.19 / 끝낸 날짜 : 2024.?.? / 만든이 : 001cloudid</span>
</div> <%-- footer 영역 div --%>

</body>
</html>

main.jsp에서 바로 게시판 게시물 목록을 볼 수 있으면 편하겠다는 생각이 듦.

화면 구성을 이와 같이 할 것이며, 설명 board폴더는 게시판과 관련된 작업 insert 글 쓰기, update 글 수정. member폴더는 회원과 관련된 작업 join 회원가입, mypage 회원 수정(또는 삭제),check 회원 확인

member폴더

join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
.formstyle{
	width : 400px;
	
}
.label{
	width : 200px;
}
.validation{
	widows: 200px;
	height: 30px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>회원가입</h1>
<form action="${pageContext.request.contextPath}/member/joinPro" method="post">
<div class="formstyle">
<input type="text" name="id" required="required" placeholder="아이디"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"> <%-- 한글, 영문만 입력 가능 --%>
</div>
<div class="validation"><b></b></div> <%-- 유효성 검사 시 유효성에 일치않을 때 --%>
<input type="submit" value="회원가입"> 
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>

</body>
</html>

check.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>정보 확인</h1>
<form method="post" action="#">
비밀번호를 입력해주세요.<br>
<input type="password" name="pw"> <input type="submit" value="확인">
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

mypage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>내 정보</h1>
<input type="text" name="id" readonly="readonly"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"> <%-- 한글, 영문만 입력 가능 --%>
<button>수정</button><button>탈퇴</button>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

include 액션 태그를 사용한 것을 보면 어느 것은 /로 시작하고 또 어떤 것은 ../로 시작하는 것을 알 수 있다. 여기서 경로에 대한 정리를 한 번 하고 지나가자.

경로는 상대 경로와 절대 경로가 있다.

상대 경로는 지금 파일의 위치에서 상대적으로 가르키는 위치이고, 절대 경로는 지금 파일의 위치와 상관없이 프로젝트에서 가리키는 위치이다.

내가 main에서 inc에 있는 jsp를 include하기 위해서

상대경로의 경우 현재 내가 있는 폴더(views)보다 아래의 폴더인 inc안에 있는 파일을 쓰는 것이다.

절대경로의 경우 src-main-views-inc-top.jsp(sidebar.jsp, top.jsp)이다.

내가 정리를 하면서 당장은 이해가 쉽게 가지만 다시 볼 때 이해하기 어려울 것 같다는 생각이 들어서 검색을 해보았다.

https://sschoi1994.tistory.com/272 이 곳을 참조하였다.

절대경로 : 프로젝트의 전체 경로
상대경로 : 현재 위치에서 다른 파일의 경로를 참조 ../로 한 단계 위 폴더로 올라감을 뜻함

board 폴더

insert.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>게시 글 작성</h1>
<form>
제목 : <input type="text" name="subject"><br>
내용 : <textarea rows="10" cols="100" ></textarea><br>
<input type="submit" value="작성하기">
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

update.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}
.content{
	width: 1000px;
	height: 600px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<jsp:include page="../inc/top.jsp" />

<jsp:include page="../inc/sidebar.jsp" />

<div class="content"> <%-- content영역 div --%>
<h1>게시 글 수정</h1>
<form>
제목 : <input type="text" name="subject"><br>
내용 : <textarea rows="10" cols="100" ></textarea><br>
<input type="submit" value="수정하기">
</form>
</div> <%-- content영역 div --%>
<jsp:include page="../inc/footer.jsp" />
</div> <%-- container 영역 div --%>
</body>
</html>

화면 구성은 전반적으로 끝났다. 주소매핑과 클래스 작업을 이용해서 마무리 지어보자. 추가적으로 화면 구성 수정까지

목표는 이번주 내에 완성하기

justBoard4 화면(view)1

001cloudid — Mon, 23 Sep 2024 16:51:26 +0900

화면 구성 main에서 회원가입을 클릭하면 Get 방식으로 회원가입 페이지로 이동 → 아이디, 비밀번호, 비밀번호 재확인, 이름을 입력 받고 회원가입 버튼을 클릭하면 회원가입이 가능하게 하기 회원가입 과정은 Post 방식을 이용

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<body>
<h1>회원가입</h1>
<form action="${pageContext.request.contextPath}/member/joinPro" method="post">
아이디 : <input type="text" name="id" required="required"><br>
비밀번호 : <input type="password" name="pw" required="required"><br>
비밀번호 재확인 : <input type="password" name="pwre" required="required"><br>
이름 : <input type="text" name="name" required="required"><br>
<input type="submit" value="회원가입"> 
</form>
</body>
</html>

화면 구성이 너무 없어보임. input 태그가 정렬 안된 느낌.. 물론 화면이 주는 아니지만 기본적으로 그냥 예의가 없는 화면...

최소한 정보를 입력받는게 정렬되게 바꿔봄

input 태그에 placeholder로 각 항목에 제약사항을 넣어봤는데 짤리는 부분이 있음. 우리나라 최고의 포털사이트 중 하나인 네이버 회원가입을 살펴보면

네이버 회원가입

따로 텍스트가 없고, placeholder를 사용하고, jQuery ajax를 이용한다는 것을 알 수 있음.

최대 포털에서 이렇게 사용한다는 것은 회원 가입을 원하는 이용자가 불편함을 느끼지 않는다는 뜻이라고 생각된다.

처음부터 저렇게 만들면 좋겠지만, 조금조금씩 추가하는 방향으로 하는게 과부하를 방지할 수 있을 것 같음

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.formstyle{
	width : 400px;
	
}
.label{
	width : 200px;
}
.validation{
	widows: 200px;
	height: 30px;
}
</style>
<body>
<h1>회원가입</h1>
<form action="${pageContext.request.contextPath}/member/joinPro" method="post">
<div class="formstyle">
<input type="text" name="id" required="required" placeholder="아이디"><br> <%-- 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능 --%>
<input type="password" name="pw" required="required" placeholder="비밀번호"><br> <%-- 영문 대/소문자, 숫자, 특수문자를 사용 --%>
<input type="password" name="pwre" required="required" placeholder="비밀번호재확인"><br> <%-- 비밀번호를 다시 입력 --%>
<input type="text" name="name" required="required" placeholder="이름"> <%-- 한글, 영문만 입력 가능 --%>
</div>
<div class="validation"><b></b></div> <%-- 유효성 검사 시 유효성에 일치않을 때 --%>
<input type="submit" value="회원가입"> 
</form>
</body>
</html>

비밀번호 재확인에 name을 넣어줬는데, 이 정보는 DB에 저장하는 용도가 아닌 정보 확인용이기 때문에 해당 input 태그에 name이 필요없음 → 즉 <input type="password" required="required" placeholder="비밀번호재확인">

프로젝트하면서는 전혀 신경쓰지 않았던 것 → 어노테이션, 언제쓰는지는 아는데 안에 어떻게 생긴건지 살펴 볼 시간이 없었음.

대표적으로 @Controller 어노테이션을 살펴보면

/*
 * Copyright 2002-2007 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package org.springframework.stereotype;

import java.lang.annotation.Documented;
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;

/**
 * Indicates that an annotated class is a "Controller" (e.g. a web controller).
 *
 * <p>This annotation serves as a specialization of {@link Component @Component},
 * allowing for implementation classes to be autodetected through classpath scanning.
 * It is typically used in combination with annotated handler methods based on the
 * {@link org.springframework.web.bind.annotation.RequestMapping} annotation.
 *
 * @author Arjen Poutsma
 * @author Juergen Hoeller
 * @since 2.5
 * @see Component
 * @see org.springframework.web.bind.annotation.RequestMapping
 * @see org.springframework.context.annotation.ClassPathBeanDefinitionScanner
 */
@Target({ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
@Documented
@Component
public @interface Controller {

	/**
	 * The value may indicate a suggestion for a logical component name,
	 * to be turned into a Spring bean in case of an autodetected component.
	 * @return the suggested component name, if any
	 */
	String value() default "";

}

@interface Controller{} 로 되어 있는 것을 알 수 있는데, 이는 커스텀 어노테이션을 정의하는 방법으로 정의되어있음

※ 커스텀 어노테이션 정의 @interface 어노테이션 이름

Controller 클래스

아키텍처에서 컨트롤러를 정의할 때 사용

@Controller MVC
해당 클래스가 웹 애플리케이션의 컨트롤러임을 표시. HTTP 요청을 처리하고 응답을 생성하는 역할을 담당
@Inject
종속성 주입을 수행하는 데 사용. 클래스의 필드, 생성자, 메소드 등에 적용할 수 있음. 클래스에 필요한 종속성을 자동으로 주입할 수 있음

public @interface Inject {}
@GetMapping
HTTP Get 요청을 처리하는 메소드

@RequestMapping(method = RequestMethod.GET)
public @interface GetMapping {

/**
* Alias for {@link RequestMapping#name}.
*/
@AliasFor(annotation = RequestMapping.class)
String name() default "";

/**
* Alias for {@link RequestMapping#value}.
*/
@AliasFor(annotation = RequestMapping.class)
String[] value() default {};

/**
* Alias for {@link RequestMapping#path}.
*/
@AliasFor(annotation = RequestMapping.class)
String[] path() default {};

/**
* Alias for {@link RequestMapping#params}.
*/
@AliasFor(annotation = RequestMapping.class)
String[] params() default {};

/**
* Alias for {@link RequestMapping#headers}.
*/
@AliasFor(annotation = RequestMapping.class)
String[] headers() default {};

/**
* Alias for {@link RequestMapping#consumes}.
* @since 4.3.5
*/
@AliasFor(annotation = RequestMapping.class)
String[] consumes() default {};

/**
* Alias for {@link RequestMapping#produces}.
*/
@AliasFor(annotation = RequestMapping.class)
String[] produces() default {};
PostMapping
HTTP Post 요청을 처리하는 메소드

@RequestMapping(method = RequestMethod.POST)
public @interface PostMapping {

/**
* Alias for {@link RequestMapping#name}.
*/
@AliasFor(annotation = RequestMapping.class)
String name() default "";

/**
* Alias for {@link RequestMapping#value}.
*/
@AliasFor(annotation = RequestMapping.class)
String[] value() default {};

/**
* Alias for {@link RequestMapping#path}.
*/
@AliasFor(annotation = RequestMapping.class)
String[] path() default {};

/**
* Alias for {@link RequestMapping#params}.
*/
@AliasFor(annotation = RequestMapping.class)
String[] params() default {};

/**
* Alias for {@link RequestMapping#headers}.
*/
@AliasFor(annotation = RequestMapping.class)
String[] headers() default {};

/**
* Alias for {@link RequestMapping#consumes}.
*/
@AliasFor(annotation = RequestMapping.class)
String[] consumes() default {};

/**
* Alias for {@link RequestMapping#produces}.
*/
@AliasFor(annotation = RequestMapping.class)
String[] produces() default {};
@ResponseBody
컨트롤러의 메소드에 적용되어 해당 메소드가 HTTP 응답의 본문을 직접 반환함. 메소드가 반환하는 객체가 HTTP 응답 본문에 직접 포함되어 클라이언트로 전송됨. 일반적으로 컨트롤러의 메소드가 String, JSON, XML 등의 데이터를 반환 할 때 사용

아무리 봐도 DI(의존성 주입)이란걸 정리해둔걸 한 줄로 요약이 되는데, 진짜 이해가 안됨. A가 B를 이용하면 A는 B에 의존한다? 그래서 검색도 해보고 유튜브 검색도 해봤음. 유튜브 5분개발지식님이 올려둔 의존성 주입 설명을 캡쳐해보았다.

출처 : 5분개발지식 - 의존성 주입 3분만에 이해하기

위의 그림을 본다고해도 이해되는 건 아닌데, 대략적으로 이러이러한 것이다 라고 이야기는 할 수 있지 않을까?

결론은 의존성 주입이라는게 너무 추상적이다... 계속하다보면 되겠지라는 생각으로 꾸준히 이해하려고 노력해보자

여담으로 나는 프로젝트를 진행할 때 큰 틀을 만들어 놓고 → 페이지 작업 → DB 작업(스키마, 테이블, 컬럼 만들기) → 클래스 작업으로 하는 것을 선호한다.

이유는 첫째는 페이지를 만들면서, 큰 틀에서 생각해둔 DB를 수정하고 클래스 작업(Controller - Service - DAO - Mapper)을 진행하는 것이 내 입장에서는 편함. 둘째 페이지를 만들면서 이런 기능을 넣으면 좋겠는데? 넣어보자하는게 생기기 때문에 클래스 작업하거나 자바스크립트 사용해 즉각적으로 할 수 있기 때문이다.

기본적으로 수요일까지 화면 구성을 끝 마치고 DB작업 후 클래스 작업하는 순서로 진행하고자한다.

만들어야하는 페이지(view)

member
회원가입 -> 정규표현식을 이용해서 유효성검사, ajax를 이용하여 중복확인
내 정보 → 정보 수정(이름, 비밀번호), 탈퇴
board
게시판 리스트 + 글 조회
글 쓰기(회원만)
글 수정, 글 삭제(작성자만)

앞으로 4개의 페이지를 수요일 전까지 만들고 이어서 DB 수정하는 식으로 하자.

※

두 개의 차이 → 접근 제어자 왼쪽은 default, 오른쪽은 public 이 경우 패키지가 다를 경우 접근을 못해서 해당 객체를 사용하지 못 함.

justBoard3 xml설정, 프로그램 설치

001cloudid — Sat, 21 Sep 2024 13:55:52 +0900

프로그램 설치(Maven), JDBC, xml 설정하기

xml 설정

들어가기 앞서 프로젝트의 구조에 대해 정리, 사실 매 번 정리하지만 할 때마다 새롭고 익숙해지지 않는 것인지 모르겠음

src/main/java : 작성되는 코드의 경로
src/main/resource : 실행할 때 참고하는 기본 경로(주로 설정 파일들을 넣음)
src/test/java : 테스트 코드를 넣는 경로
src/test/resources : 테스트 관련 설정 파일 보관 경로
servlet-context.xml : 웹과 관련된 스프링 설정 파일
root-context.xml : 스프링 설정파일
views : 템플릿 프로젝트의 jsp 파일 경로
web.xml : Tomcat의 web.xml 파일
pom.xml : Maven이 사용

xml파일을 설정하기 앞서 각각의 xml파일에 대해서 깊게 정리해야할 필요가 있는 것 같음

web.xml
배포 서술자(Deployment Descriptor, DD) Java 웹 애플리케이션의 기본적인 설정을 위해 작성하는 파일
JSP와 서블릿으로만 구성된 경우에 web.xml을 사용
web.xml은 WAS에서 톰캣이 최초로 구성될 때 WEB-INF 폴더에 존재하는 web.xml 파일을 읽고 그에 해당하는 웹 애플리케이션을 설정

<?xml version="1.0" encoding="UTF-8"?> <!-- xml 파일이고, 버전 1.0, UTF-8로 인코딩 -->
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <!-- web.xml의 루트 엘리먼트. 모든 웹 애플리케이션 설정은 web-app 태그 사이에 존재해야함 -->

	<!-- The definition of the Root Spring Container shared by all Servlets and Filters -->
	<context-param> <!-- context는 이름이나 객체를 바인딩하는 집합의 역할을 담당. 어떠한 객체를 핸들링하기 위한 접근 수단. 사용자가 직접 컨트롤하는 xml파일을 지정해주는 역할 --> <!-- context-param 태그에 설정되어 있는 root-context.xml은 모든 서블릿 필터에서 사용되는 루트 스프링 컨테이너 설정 -->
		<param-name>contextConfigLocation</param-name> <!-- param-name 파라미터 이름 -->
		<param-value>/WEB-INF/spring/root-context.xml</param-value> <!-- param-value 파라미터 값 -->
	</context-param>
	
	<!-- Creates the Spring Container shared by all Servlets and Filters -->
	<listener> <!-- 모든 서블릿과 필터에 의해 공유되는 스프링 컨테이너를 생성 -->
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> <!-- ContextLoaderListener 클래스가 생성하는 WebApplicationContext는 웹 애플리케이션에서 루트 컨텍스트가 되며, 자식은 루트가 제공하는 객체(bean)을 사용할 수 있음 -->
	</listener>

	<!-- Processes application requests -->
	<servlet> <!-- 애플리케이션의 요청을 처리. 클라이언트가 요청을 보내면 그에 따라 요청을 처리할 수 있는 곳으로 넘겨주고, 결과를 서버쪽 응답을 통해 클라이언트에게 넘겨주는 곳을 지정. 이를 진행하는 것이 DispatcherServlet -->
		<servlet-name>appServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
		
	<servlet-mapping>
		<servlet-name>appServlet</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>
	
	<!-- 추가 -->
	<filter> <!-- filter 웹 애플리케이션 전반에 걸쳐 특정 URL이나 파일 요청 시 미리 로딩되어 사전에 처리할 작업을 필터링하고 해당 요청을 처리 -->
		<filter-name>encoding</filter-name>
		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>UTF-8</param-value>
		</init-param>
	</filter>
	
	<filter-mapping> <!-- 필터를 적용할 name,servlet, url-pattern등을 지정 -->
		<filter-name>encoding</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>


</web-app>

root-context.xml
스프링 MVC 설정과 관련된 여러 처리를 담당
JSP와는 관련없는 객체(Bean)을 설정
DB에 접속하기 위한 설정

<?xml version="1.0" encoding="UTF-8"?> <!-- 스프링 MVC설정과 관련된 여러 처리를 담당. JSP와 관련 없는 객체(Bean)을 설정. 비즈니스 로직을 위한 설정을 하고 공통 Bean을 설정. DB에 접속하기 위한 설정 -->
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd">
	
	<!-- Root Context: defines shared resources visible to all other web components -->
	<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		<property name="driverClassName" value="com.mysql.cj.jdbc.Driver"></property>
		<property name="url" value="jdbc:mysql://localhost:3306/test?serverTimezone=Asia/Seoul"></property>
		<property name="username" value="root"></property>
		<property name="password" value="1234"></property>
	</bean>

	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dataSource"></property>
		<property name="configLocation" value="classpath:/mybatis-config.xml"></property>
		<property name="mapperLocations" value="classpath:mappers/**/*Mapper.xml"></property>
	</bean>

	<bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate" destroy-method="clearCache">
		<constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory"></constructor-arg>
	</bean>
		
</beans>

위와 같이 작성함. 현재 Maven 프로그램이 설치가 안되어 있어 에러가 뜸. pom.xml에 Maven을 추가해두면 없어질 듯

servlet-context.xml
web.xml에서 DispatcherServlet의 설정을 기록

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:beans="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd
		http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

	<!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
	
	<!-- Enables the Spring MVC @Controller programming model -->
	<annotation-driven /> <!-- 스프링 MVC에서 @사용가능하게 함 -->

	<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
	<resources mapping="/resources/**" location="/resources/" /> <!-- 정적 html 문서 리소스들의 정보를 기술 -->

	<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
	<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <!-- InternalResourceViewResolver : JSP와 name을 매핑시켜주는 여할 -->
		<beans:property name="prefix" value="/WEB-INF/views/" />
		<beans:property name="suffix" value=".jsp" />
	</beans:bean>
	
	<context:component-scan base-package="com.mystory001.justboard" /> <!-- context:component-scan : 해당 패키지에 있는 파일들의 어노테이션을 스캔해서 빈으로 등록하는 역할 -->
	
	
	
</beans:beans>

xml 정리 참고 : https://m.blog.naver.com/zzang9ha/222069787161, https://kijuk.tistory.com/142

솔직히 정리를 한다고해서 머리속에 정리가 되는 느낌을 받지는 못하는 것 같다. 반복적으로 읽는고 이해하려고 하자.

어느 정도 xml 설정이 끝난 것 같다. servlet-context에 클래스 파일 context:component-scan으로 추가해주는 것만 남은 것 같은데, 하다보면 또 추가해야할 게 많을 수도 있을 것 같음. 설정이 더 필요한 부분은 하면서 추가하도록 할 예정

프로그램 설치

https://mvnrepository.com/ 여기서 필요한 리파지토리를 복사해서 pom..xml에 붙여주면 된다. 교육 받을 때 분명히 스프링 버전마다 지원하는 것이 조금씩 다르다고 했던 것 같은데... 아무튼 확인이 필요함 대표적으로 사용할 mybatis의 경우

https://mybatis.org/spring/

스프링과 mybatis 버전, java버전도 다 함께 맞춰줘야함.

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.mystory001</groupId>
	<artifactId>justboard</artifactId>
	<name>justBoard</name>
	<packaging>war</packaging>
	<version>1.0.0-BUILD-SNAPSHOT</version>
	<properties>
		<java-version>11</java-version>
		<org.springframework-version>4.3.8.RELEASE</org.springframework-version>
		<org.aspectj-version>1.6.10</org.aspectj-version>
		<org.slf4j-version>1.6.6</org.slf4j-version>
	</properties>
	<dependencies>
		<!-- Spring -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
			<version>${org.springframework-version}</version>
			<exclusions>
				<!-- Exclude Commons Logging in favor of SLF4j -->
				<exclusion>
					<groupId>commons-logging</groupId>
					<artifactId>commons-logging</artifactId>
				 </exclusion>
			</exclusions>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>
		
		<!-- https://mvnrepository.com/artifact/com.mysql/mysql-connector-j -->
		<dependency>
		   	<groupId>com.mysql</groupId>
		   	<artifactId>mysql-connector-j</artifactId>
		   	<version>8.0.33</version>
		</dependency>
			
		<!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc -->
		<dependency>
		    <groupId>org.springframework</groupId>
		    <artifactId>spring-jdbc</artifactId>
		    <version>${org.springframework-version}</version>
		</dependency>
			
		<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis -->
		<dependency>
		    <groupId>org.mybatis</groupId>
		    <artifactId>mybatis</artifactId>
		    <version>3.4.1</version>
		</dependency>
					
		<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring -->
		<dependency>
		    <groupId>org.mybatis</groupId>
		    <artifactId>mybatis-spring</artifactId>
		    <version>1.3.1</version>
		</dependency>

		<!-- 데이터를 json 형태로 변경하는 프로그램 jackson-databind 설치 -->
		<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
		<dependency>
    		<groupId>com.fasterxml.jackson.core</groupId>
    		<artifactId>jackson-databind</artifactId>
    		<version>2.15.2</version>
		</dependency>
				
	(...생략...)

pom.xml에 추가한 것들이 Maven Dependencies에 추가됨을 알 수 있음

+ root-context를 다시 확인해보면 에러가 없어짐

동작하는지 확인을 위해 실행 시켜봄

프로젝트하면서 워낙 많이 본 화면인데, 이는 전체 스캔? 확인하면서 xml에 적혀진 파일이 누락되어 있어서 발생하는 경우가 많았다. 아마 root-context.xml에서 Mapper가 있어서 문제가 생긴걸로 판단됨

<?xml version="1.0" encoding="UTF-8"?> <!-- 스프링 MVC설정과 관련된 여러 처리를 담당. JSP와 관련 없는 객체(Bean)을 설정. 비즈니스 로직을 위한 설정을 하고 공통 Bean을 설정. DB에 접속하기 위한 설정 -->
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd">
	
	<!-- Root Context: defines shared resources visible to all other web components -->
	<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		<property name="driverClassName" value="com.mysql.cj.jdbc.Driver"></property>
		<property name="url" value="jdbc:mysql://localhost:3306/test?serverTimezone=Asia/Seoul"></property>
		<property name="username" value="root"></property>
		<property name="password" value="1234"></property>
	</bean>

<!-- 	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> -->
<!-- 		<property name="dataSource" ref="dataSource"></property> -->
<!-- 		<property name="configLocation" value="classpath:/mybatis-config.xml"></property> -->
<!-- 		<property name="mapperLocations" value="classpath:mappers/**/*Mapper.xml"></property> -->
<!-- 	</bean> -->

<!-- 	<bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate" destroy-method="clearCache"> -->
<!-- 		<constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory"></constructor-arg> -->
<!-- 	</bean> -->
		
</beans>

주석 처리 함.

역시 맞았음.. 교육 받은 거 많이 잊어버렸지만.. 진짜 너무 접해본 상황이라 그런지 아직도 기억하고 있네...

설정에 맞는 파일을 생성

mybatis-config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
 
</configuration>

이거 없으면 안된 걸로 기억함. 이에 대해 자세히 알아보자

mybatis에서 사용될 DB를 연동하기 위한 설정값을 작성. mybatis 실행 시 필요한 설정 정보를 담고 있으며, mybatis 프로젝트에서 가장 기본적인 설정파일임.

→ DB 연동은 root-context에서 설정해뒀기 때문에 따로 해줄 필요가 없는 것 같아보임

이제 본격적으로 페이지 만들고 주소 매핑하는 작업을 하면 될 듯..

늘 그렇지만 처음부터 완벽한 웹 애플리케이션이면 좋겠지만, 나 같은 초심자에겐 너무 어렵기도 하고 매 번 수정할 일이 생겨서.. 일단은 차근차근해보도록하자..

src/main/java안의 클래스도 하나하나 수정해야함! 일단 만들어 두기만 했음

justBoard2 DB구축

001cloudid — Fri, 20 Sep 2024 11:58:23 +0900

2024.09.20

이 전 글에서 정리한 해야할 일

1. DB 구축

2. 게시판

3. 내 정보

4. 프로그램 설치(Maven), JDBC, xml 설정

에서

DB구축

먼저 DB구축을 먼저해야겠다고 생각함. 대략적인 테이블과 컬럼을 만들어 놓고 필요하면 추가하는 식으로 하면 되니까.. 테이블을 수정하는 일은 어렵지 않은데, 처음부터 DB만큼은 완벽하게 해놓고 시작하고 싶은 마음에 항상 나중으로 미뤄놓는 습관이 생김. 이유는 전에 프로젝트하면서 날짜 데이터가 제대로 안들어가서 varchar로 바꿨다가 datetime으로 바꿨다가 최종적으로 varchar 타입으로 여러 번 바꾼 적이 있었기 때문..

먼저 Oracle과 MySQL을 사용할 줄 알지만, Oracle의 경우 user로 들어가서 하는 게 조금 번거롭기도 하고, 두 번의 프로젝트에서 MySQL을 연동해서 하다보니 그게 편함. 그냥 편한거 사용하자는 생각으로 DBMS는 MySQL로 선정

MySQL Workbench 켜고 먼저 기존에 있던 스키마 말고 처음부터 다시 하자는 생각으로..

스키마 생성과 사용

일단은 두 개의 테이블이 존재해야함. 회원 테이블, 게시판 테이블

회원 테이블

컬럼명	타입	크기	Key
id	varchar	20	PK
pw	varchar	20	NN
name	varchar	20	NN
time	varchar? datetime?		default 현재시간, NN

여기서 time은 가입한 시간

게시판 테이블

컬럼명	타입	크기	Key
subject	varchar	50	NN
content	varchar	500
id	varchar	50	FK(회원 테이블 id 참조)
writetime	datetime		default 현재시간

만들려고 했더니 에러가 생김

뭐가 문제인가 했더니 크기에는 () 안에 넣어줘야함.

게시판 테이블을 먼저 만드려고 하니 문제가 있음.

1. id는 회원테이블의 컬럼을 참조하는 외래키인데 회원 테이블을 먼저 만들지 않아서 오류가 날 것임. 또한 FK의 경우 테이블 레벨 문법을 사용해야함.

2. 게시판 테이블에는 PK가 없다. 분명 교육받을 때 PK를 써주는 것이 좋다 라고 배운 것 같기도하고 아닌 것 같기도하고 곰곰히 생각해보니 PK를 넣어주는 게 좋아보인다. 인덱스나 join을 사용할 때 등 여러 가지 경우에 유리하기 때문에 그와 관련된 것을 검색해보니

출처 : https://jongsky.tistory.com/20

이걸 보니 DBMS를 사용하는 이유는 정보를 저장의 목적도 있지만, 정보를 잘 저장하기 위해서도 있다.

회원 테이블은 그대로 가면 될 것 같고, 게시판 테이블을 조금 수정해야할 것 같다.

게시판 테이블

컬럼명	타입	크기	Key
no	int		PK
subject	varchar	50	NN
content	varchar	500
id	varchar	50	FK(회원 테이블 id 참조)
writetime	datetime		default 현재시간

no라는 글 번호 컬럼을 추가해주기로 했다.

먼저 회원 테이블

member를 그대로 사용하기엔 예약어가 있는 것 같아서 생성이 안됨. '`'를 사용해서 강제적?으로 만들었음

time 컬럼도 마찬가지

물론 테이블 조회할 때 member를 사용하면 나타나지 않음. '`'를 감싸줘야함

time 컬럼에 기본값을 현재 시간으로 해두는 것이 편할 것 같다는 생각이 들었음

수정 ㄱㄱ

수정하는건 매번 헷갈린다...

그래서 뒤에 진도 나가기 전에 외워질때까지 정리해보자

테이블 수정(alter table)

컬럼 추가 : alter table 테이블명 add 컬럼명 타입[(크기)]
default 값 수정 : alter table 테이블명 add 컬럼명 타입[(크기)] default '값'
컬럼 가장 앞 추가 : alter table 테이블명 add 컬럼명 타입[(크기)] frist
특정 컬럼 뒤에 컬럼 추가 : alter table 테이블명 add 컬럼명 타입[(크기)] after 앞에 올 컬럼

컬럼수정

데이터 타입 : alter table 테이블명 modify 컬럼명 변경할데이터타입
컬럼 사이즈 : alter table 테이블명 modify 컬럼명 타입(변경할컬럼사이즈)
default값 변경 : alter table 테이블명 modify 컬럼명 타입[(크기)] default 변경값
단, 기존 default 값이 변경되는 것이 아니라 이후에 입력되는 default값이 변경됨
컬럼명 변경 : alter table 테이블명 rename column 기존컬럼명 to 바꿀컬럼명
컬럼 삭제 : alter table 테이블명 drop 삭제할컬럼명
단, FK 제약조건이 참조하는 부모 컬럼인 경우 제약조건을 먼저 삭제해야함

이제 게시판 테이블을 생성

Error Code: 1215. Cannot add foreign key constraint 0.016 sec

결과 에러남

왜 에러가 났는지 검색해보았다.

Error Code 1215는 외부키를 생성하는 중 오류가 발생되는 거라는데 이를 해결하기 위해서는 오타, 문법오류, 외부키로 지정하는 컬럼이 기본키인지 여부

→ 오타? 어찌보면 가장 하기 쉬우면서도 가장 찾기 힘든게 아닐까 싶다. 내가 봤을 때는 오타가 없다

→ 문법오류? 만약 문법 오류가 난다면 테이블 레벨 문법과 컬럼 레벨 문법일텐데 외래키는 테이블 레벨 문법이라 이게 맞는데

→ member의 id가 PK이니 외부키로 지정하는 컬럼이 기본키 맞는데?

테이블이 다르면 컬럼 이름이 중복되어도 괜찮은걸로 아는데

create table board( `no` int primary key, `subject` varchar(50) not null, content varchar(1000), id varchar(20) not null unique, writetime datetime not null default current_timestamp, foreign key(id) references`member`(id))

교재를 찾아봄

create table 테이블명(컬럼명1 타입[(크기)] [제약조건][,...]);

제약조건

not null : null을 허용하지 않음
unique : 중복값을 허용하지 않음 단, null값은 중복 허용
primary key : 테이블의 행을 고유하게 식별해 줄 수 있는 대표컬럼, not null+unique
foreign key
두 테이블 사이의 관계를 선언함으로써 데이터의 무결성을 보장해주는 외래키 제약조건,
자기 자신 테이블이나 다른 테이블의 특정 컬럼을 참조하는 제약조건,
pk또는 unique 제약조건이 선언된 컬럼만 참조 가능
FK가 선언된 컬럼을 자식컬럼이라고 함 ↔ FK가 참조하는 컬럼 부모컬럼
자식 컬럼에는 부모 컬럼에 있는 데이터 중 하나만 삽입, 수정될 수 있음
테이블 레벨 문법 사용
check : 해당 컬럼이 만족해야하는 조건을 지정

이거 저거 다 찾아봤는데 → 문제는 오타였다... (생략)references`member`(id));라고 작성되어있는데 띄어쓰기 실수...

오타가 진짜 가장 어려운 것 같다.

추가적으로 테이블에 필요한 컬럼이 있거나 수정해야 할 경우 수시로 수정

한 두 달전에는 이거 만드는데 10분도 안 걸렸겠지만..

테이블 수정도 까먹어서 truncate 했다가 delete했다가 별의 별 쇼를 다함.

문뜩 truncate, delete가 나왔으니 다시 한 번 정리하고 가야겠다

면접에서도 빈출이라는데 truncate, delete, drop의 차이

일단 DML, DDL이라 Auto-commit 유무 테이블의 데이터 삭제, 테이블 삭제 이렇게 되는 걸로 기억한다.

나머지는 기억이 잘 안 나는데 사실 기억 안난다. 정리하자

delete	drop	truncate
DML로 commit, rollback할 수 있음	DDL로 auto-commit을 내포하고 있어 한 번 실행하면 되돌릴 수 없음
테이블의 특정 행 삭제 where 절 생략 시 모든 행 삭제	테이블을 삭제	테이블의 모든 행 삭제
delete from 테이블명 [where 조건]	drop table 테이블명	truncate table 테이블명
롤백 가능	롤백 불가

delete

truncate

drop

내일은 프로그램 설치(Maven), JDBC, xml 설정을 하도록해야겠다.

내가 생각했을 때 진짜 프로젝트를 시작할 때 가장 까다로운 작업이라고 생각든다.

justBoard1 아주 간단한 기능 명세서, 스프링 버전 설정, 화면 구성

001cloudid — Thu, 19 Sep 2024 17:55:36 +0900

만들면서 혼잣말로 질문하고 대답하고 해결하기

기능 및 주의사항

2024.09.19 시작

1일차 기본적인 화면 구성

1. 프로젝트 생성

우클릭 - New - Spring Legacy Project(Project Name : justBoard, Templates : Spring MVC Project) - com.mystory001.justboard

2. 버전 변경

Properties

pom.xml

3. Run as Server

잘 동작함

4. main 페이지 만들기

진짜 간만에 하려니까 하나도 기억이 잘 안남.. 하나하나 기억을 떠올리면서 30분간 만들기 시작..

문제는 세로줄 긋기에서 막힘.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.vl{

}
</style>
<body>
<div style="float: right;"> <!-- form태그를 오른쪽으로 -->
<form method="post">  <!-- post방식 -->
아이디 : <input type="text" name="id">
비밀번호 : <input type="password" name="pw">
<button type="submit">로그인 </button><a href="#"><button type="button">회원가입</button></a>
</form>
</div><br>
<hr>
<div class="vl">
<a href="#">게시판</a><br> 
<a href="#">내 정보</a>
</div>
dfdfdf
</body>
</html>

해결방법은 여러개 떠오르는데

div태그를 이용해서 영역을 잡고 그 영역안에 게시판, 내 정보를 넣고
본문 내용은 오른쪽에 div 태그를 이용하는 방법
→ 가장 보편적이고 쉬운 방법
table 태그를 이용하는 방법
→ 어쨌든 table 태그를 이용한다고해도 div 태그로 감싸야하니까 1번을 이용해야함
hr 태그를 세로로 바꾸는 방법
→ 그런건 없단다 애송아..

목록만들기

순서 있는 목록을 만들 때 ordered list : ol 태그와 li 태그

순서 없는 목록을 만들 때 unordered list : ul 태그와 li 태그

해결방법부터 잘못됨을 인지 → 전체 영역을 만들고, 전체 영역 안에서 헤더, 사이드 바, 본문, 푸터 이런식으로 가야함

div태그 class="container" → 전체 영역
div태그 class="header" → 로그인 영역
div태그 class="sidebar" → 게시판 영역
div태그 class="content" → 본문 영역
div태그 class="footer" → 푸터 영역

결국 완성함

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}

.header{
	float : right;
	width: 1200px;
	height: 0px;
}

.sidebar{
	float : left;
	width: 200px;
	height: 500px;

}

.content{
	width: 1000px;
	height: 600px;
}

.footer{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<div class="container"> <!-- container 영역 div -->

<div class="header"> <!-- header 영역 div -->
<form method="post">  <!-- post방식 -->
<span style="float: right;">
아이디 : <input type="text" name="id">
비밀번호 : <input type="password" name="pw">
<button type="submit">로그인 </button><a href="#"><button type="button">회원가입</button></a>
</span>
</form>
</div><!-- header 영역 div --><br>
<hr>

<div class="sidebar"> <!-- sidebar 영역 div -->
<ul>
<li><a href="#">게시판</a></li> 
<li><a href="#">내 정보</a></li>
</ul>
</div> <!-- sidebar 영역 div -->

<div class="content"> <!-- content영역 div -->
 내용은 여기에
</div> <!-- content영역 div -->
<hr>
<div class="footer"> <!-- footer 영역 div -->
<span style="float: right;">시작 날짜 : 2024.09.19 / 끝낸 날짜 : 2024.?.? / 만든이 : 001cloudid</span>
</div> <!-- footer 영역 div -->
</div> <!-- container 영역 div -->
</body>
</html>

<!-- 이 주석을 사용하면 우클릭-검사 했을 때 다 나타나니 보이지 않게 주석을 달면 괜찮겠다는 조언을 들음

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}

.header{
	float : right;
	width: 1200px;
	height: 0px;
}

.sidebar{
	float : left;
	width: 200px;
	height: 500px;

}

.content{
	width: 1000px;
	height: 600px;
}

.footer{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<div class="header"> <%-- header 영역 div --%>
<form method="post">  <%-- post방식 --%>
<span style="float: right;">
아이디 : <input type="text" name="id">
비밀번호 : <input type="password" name="pw">
<button type="submit">로그인 </button><a href="#"><button type="button">회원가입</button></a>
</span>
</form>
</div><%-- header 영역 div --%><br>
<hr>

<div class="sidebar"> <%-- sidebar 영역 div --%>
<ul>
<li><a href="#">게시판</a></li> 
<li><a href="#">내 정보</a></li>
</ul>
</div> <%-- sidebar 영역 div --%>

<div class="content"> <%-- content영역 div --%>
 내용은 여기에
</div> <%-- content영역 div --%>
<hr>
<div class="footer"> <%-- footer 영역 div --%>
<span style="float: right;">시작 날짜 : 2024.09.19 / 끝낸 날짜 : 2024.?.? / 만든이 : 001cloudid</span>
</div> <%-- footer 영역 div --%>
</div> <%-- container 영역 div --%>
</body>
</html>

만들고 나니 페이지 크기가 아쉽다.. 반응형 웹을 추가한다면 괜찮아보일지 한 번 코드를 추가해봄. form 태그에 action 속성이 빠짐을 추가

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%-- 반응형 웹 viewport → head태그 사이에 작성 --%>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>그냥 게시판</title>
</head>
<style>
.container{
	align-content : center;
	width: 1200px;
	height: 600px;
}

.header{
	float : right;
	width: 1200px;
	height: 0px;
}

.sidebar{
	float : left;
	width: 200px;
	height: 500px;

}

.content{
	width: 1000px;
	height: 600px;
}

.footer{
	float : right;
	width: 1200px;
	height: 0px;
}
</style>
<body>
<div class="container"> <%-- container 영역 div --%>

<div class="header"> <%-- header 영역 div --%>
<form method="post" action="">  <%-- post방식 --%>
<span style="float: right;">
아이디 : <input type="text" name="id">
비밀번호 : <input type="password" name="pw">
<button type="submit">로그인 </button><a href="#"><button type="button">회원가입</button></a>
</span>
</form>
</div><%-- header 영역 div --%><br>
<hr>

<div class="sidebar"> <%-- sidebar 영역 div --%>
<ul>
<li><a href="#">게시판</a></li> 
<li><a href="#">내 정보</a></li>
</ul>
</div> <%-- sidebar 영역 div --%>

<div class="content"> <%-- content영역 div --%>
 내용은 여기에
</div> <%-- content영역 div --%>
<hr>
<div class="footer"> <%-- footer 영역 div --%>
<span style="float: right;">시작 날짜 : 2024.09.19 / 끝낸 날짜 : 2024.?.? / 만든이 : 001cloudid</span>
</div> <%-- footer 영역 div --%>
</div> <%-- container 영역 div --%>
</body>
</html>

결과를 확인해보니 그다지 큰 차이가 없다. → 아마도 div영역에 너비(width)와 높이(height)를 고정해서 작성해서 그런 것 같다. 일단은 내용을 꾸미면서 크기 조정을 하도록 할 예정

해야할 일

1. DB 구축 → 사실 DB 구축을 먼저하고 해야하는데 워낙 계획없이 했기 때문에 수시로 DB도 수정해야할 것 같아서 일단 내일 만들기

2. 게시판 → 게시판 내용을 보는 페이지, 게시판 목록을 보는 페이지(페이징 처리 필요)

3. 내 정보 → 아무래도 내 정보는 로그인을 했을 때 우측 상단에 로그아웃 버튼 옆에 만들기 위치 변경

→ 내 정보보기, 내 정보 수정, 회원 탈퇴 등...

4. 프로그램 설치(Maven), JDBC, xml 설정