7월13일
1.한글 깨짐현상 수정
개발은 영어로 개발을 처음 시작했기 때문에 한글은 오류가될 소지가 많음
그리고 영어는 1바이트고 한글은 2바이트이기 때문에 깨질확률이 높다함.
깨짐은 네트워크를 타고갈때 깨질수 있음
예를 들어 (1)네트워크를 타고 DB로 가는 경로에서도 깨질수 있고,
(2)네트워크를 타고 웹에 전달하거나 또는 웹에서 네트워크를 통해 받을때 문제를 일으킬수 있기때문에 어디서 문제가 생겼는지 먼저 체크해봐야함
지금 하는 프로젝트에 한글 깨짐 현상이 생기는 이유는 웹에서 서버로 데이터를 전송 받을때 UTF-8로 못받았기 때문에 생기는 이유
그럴때는 web.xml에 아래와 같이 설정해주면 됨
<filter>
<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>
<filter-name>encoding</filter-name>
<servlet-name>appServlet</servlet-name>
</filter-mapping>- 모달창 만들기
addFlashAttribute 는 일회성으로 데이터를 사용할때 사용된다.
(1)모달창 list.jsp에 html 추가
이거는 인터넷에 긁어와서 입맛대로 커스터마이징 해서 사용하믄됨
<!-- Modal 추가 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">게시판</h4>
</div>
<div class="modal-body">
처리가 완료되었습니다.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal 끝 -->(2)자바스크립트 작성하기
<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> 3.list에 글쓰기버튼 만들어 register.jsp로 이동
(1)글쓰기 버튼 list.jsp에 추가
<button id="regBtn" type="button" class="btn btn-xs pull-right">
게시글 등록
</button>(2)자바스크립트 작성하기
<script>
$(document).ready(function() {
$("#regBtn").click(function(){
/* self는 window와 같다 */
self.location="/board/register";
});
});
</script> 4.조회 페이지 만들기
(1)get.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" %>
<%@include file="../includes/header.jsp"%>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Board RedePage</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 RedePage
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="form-group" >
<label>bno</label>
<input class="form-control" name="bno" readonly="readonly" value='<c:out value="${board.bno}"/>'>
</div>
<div class="form-group" >
<label>title</label>
<input class="form-control" name="title" readonly="readonly" value='<c:out value="${board.title}"/>'>
</div>
<div class="form-group">
<label>content</label>
<textarea rows="5" cols="50" name="content" class="form-control"><c:out value="${board.content}"/></textarea>
</div>
<div class="form-group">
<label>writer</label>
<input class="form-control" name="writer" readonly="readonly" value='<c:out value="${board.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>
<!-- /.row -->
<%@include file="../includes/footer.jsp"%> (2)lisr.jsp의 제목부분에 링크 걸기
<tbody>
<c:forEach items="${list}" var="board">
<tr class="odd gradeX">
<td>${board.bno}</td>
<td><a href="/board/get?bno=${board.bno}"/> ${board.title}</td>
<td>${board.writer}</td>
<td><fmt:formatDate pattern="yyyy-MM-dd" value="${board.regdate}"/></td>
<td><fmt:formatDate pattern="yyyy-MM-dd" value="${board.updatedate}"/></td>
</tr>
</c:forEach>
</tbody>5.뒤로가기 수정하기
브라우져가 그 이전페이지 데이터를 보관하고 있다.
그래서 뒤로가기 하면 그전에 실행되었던 코드도 똑같이 실행이된다.
그렇다면 wibdow가 기존의 데이터를 보관하지 않도록 바꿔줄 필요가 있다.
그게 바로 history객체를 이용하는것
모달창을 띄우기전에
history.replaceState({},null,null);
이걸 이용하여 써주는데,이거는 현재 브라우져에 보관하고 있는 데이터를 전부다 지워주는 역할을 한다.
아래와 같이 스크립트문을 작성한다.
<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는 window와 같다 */
self.location="/board/register";
});
});
</script> 
좋은개발자가 되기위한 삽질기록 노트