240216 스프링 프로젝트

로그 확인해보기

스프링에서 자동으로 객체를 생성해주는 모습

 

/board 를 입력했을 때 나오는 로그

 

게시글을 보기 위해 DB 와 연결

SqlSession 을 생성하는 모습

 

입력한 쿼리문을 실행

내가 입력한 SQL 문과 실제 입력된 sql 문을 보여줌

 

요청한 리턴된 개수만큼 ResultSet 이 생성

Select 의 결과로 ResultSet 이 자동으로 반환

 

Autowired 는 객체 생성이 필요한 곳마다 적어줘야 함

@Autowired
private BoardService boardService;

@Autowired
private Util util;

 

어제는... 분명히.. 서비스에서 int 로 변경한다고 했던거같은데,,,

Util 을 int 로 변환을 하고, int 변환이 안되면 

@Component
public class Util {
  public int str2Int(String no) {
    try {
      return Integer.valueOf(no);
    } catch (Exception e){
      return -1;
    }
  }
}

 

Controller 에서 Util @Autowired 하고

@GetMapping("/detail")
public String detail(Model model, String no) {
  if (util.str2Int(no) != -1) {
    System.out.println("정상 입력");
    model.addAttribute("detail", boardService.detail(util.str2Int(no)));
    return "detail";
  } else {
    System.out.println("틀린 입력");
    return "error/error";
  }
}

 

하지만 이렇게 되면 에러 페이지의 url 주소가 detail?no= 로 유지

주소도 /error 로 변경하고 싶다면

@GetMapping("/detail")
public String detail(Model model, String no) {
  if (util.str2Int(no) != -1) {
    System.out.println("정상 입력");
    model.addAttribute("detail", boardService.detail(util.str2Int(no)));
    return "detail";
  } else {
    System.out.println("틀린 입력");
    // return "error/error";
    return "redirect:/error"; // controller 에 있는 error 매핑을 실행 @Getmapping("/error")
  }
}

 

error 를 잡기 위해 에러만 잡는 Controller 생성하기

@Controller
public class ErrorController {

  @GetMapping("/error")
  public String error() {
    return "error/error"; // WEB-INF/views/error/error.jsp 로 이동
  }
}

 

일단 단순 에러 메세지만 출력

Controller 에서 파라미터 값을 받을 수 있는 수 몇가지

public String detail(Model model, @Param("no") int no)
  파라미터의 no= 값을 받아줌, 자동으로 형에 맞게 변환
  만약 입력 값이 int 가 아닐 경우 400 에러 발생

public String detail(Model model, HttpServletRequest request) {
  request.getParameter("no") 로 no= 값을 받아줌
  
public String detail(Model model, String no)
  스프링에서 자동으로 파라미터와 일치하는 값을 받아줌

 

값을 넘길 때에는 꼭 무조건 값 집어넣기

public BoardDTO detail(int no) {
  return sqlSession.selectOne("board.detail", no);
}

 

board-mapper 에 쿼리문 작성해보기

서브쿼리를 이용하여 작성해보고, join 을 이용해서도 만들어보기

<select id="detail" resultType="boardDTO" parameterType="int">
  select board_no, board_title, board_content, 
  (select mname from member where mno=board.mno) as mname,
  board_date, board_count, board_ip, board_del  
  from board where board_no=#{no} and board_del='1'
</select>
    
<select id="detail2" resultType="boardDTO" parameterType="int">
  select board_no, board_title, board_content
  , mname, board_date, board_count 
  from board join member on board.mno = member.mno 
  where board_no=#{no} and board_del='1'
</select>

 

스프링 책에서 나온대로 log 양 조절해보기

src/text/resources > log4j.xml 에 logger 추가

<logger name="jdbc.audit">
  <level value="warn"/>
</logger>

<logger name="jdbc.resultset">
  <level value="warn"/>
</logger>

<logger name="jdbc.connection">
  <level value="warn"/>
</logger>

 

자세한 로그 레벨에 관한 내용은 여기로

Log4j – Custom Log Levels

 

detail.jsp 에 게시글 목록으로 다시 돌아가는 버튼 만들기

<button onclick="location.href='./board'">목록</button>
/board 로 매핑하기

<button onclick="history.back()">목록</button>
페이지 뒤로가기, 이전 페이지로 이동

<button onclick="history.go(-1)">목록</button>
.go() 괄호 안의 숫자만큼 앞으로, 뒤로 이동
양수일 경우 앞으로 가기, 음수인 경우 뒤로가기
-1 이면 back() 과 동일, -2 면 back() 이 2번 진행

 

board.jsp 에 글쓰기 버튼 만들고, 글쓰기 버튼 클릭 시 modal 로 만들기

<!-- 글쓰기 모달 만들기 -->
<div class="modal">
  <h1>모달</h1>
</div>

 

board 에 들어가도 class="modal" 은 화면에 보이지 않음

자동 숨김처리 기능이 되어 있음, Bootstrap 기능

<!-- 글쓰기 버튼, 모달로 띄우기 -->
<button class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#write">글쓰기</button>
	
<!-- 글쓰기 모달 만들기 -->
<div class="modal" id="write">
  <h1>모달</h1>
</div>

 

modal 창 만들기 - 수정중

aria-label 은 없어도 동작 가능, 역할은 해당 기능의 간단한 설명 제공

	<!-- 글쓰기 모달 만들기 -->
	<div class="modal" id="write">
		<div class="modal-dialog modal-xl">
			<div class="modal-content">
				<div class="modal-header">
				  <h4 class="modal-title">글쓰기</h4>
				  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
				  <div class="mt-2">
				    <form action="./write" method="post">
				      <input type="text" name="title" class="form-control mb-2" placeholder="제목 입력하기">
				      <textarea name="content" class="form-control mb-2 vh-500" placeholder="내용 입력하기"></textarea>
				      <button type="submit" class="btn btn-outline-dark">작성하기</button>
				    </form>
				  </div>
				</div>
			</div>
		</div>
	</div>

 

폼 컨트롤에 대한 설명

폼 컨트롤

 

 

BoardController 에서 write 받기

@PostMapping("/write")
public String write(BoardDTO dto) {
  int result = boardService.write(dto);
  System.out.println("결과 : " + result);
  return "redirect:/board";
}

 

form 의 method 가 post 라 어노테이션을 PostMapping 으로 받음

매개변수를 BoardDTO 처럼 담을 수 있는 매개변수로 넣을 경우

해당 DTO 안에 name 을 DTO 의 담을 이름과 같게 맞추면 됨

<input type="text" name="board_title" class="form-control mb-2" placeholder="제목 입력하기">
<textarea name="board_content" class="form-control mb-2 vh-500" placeholder="내용 입력하기"></textarea>

 

서비스는 그냥 retrun 만 있어서 패스

 

Repository 에서는

public int write(BoardDTO dto) {
  return sqlSession.insert("board.write", dto);
}

 

mapper 에 insert 문 추가

<insert id="write" parameterType="boardDTO">
  insert into board (board_title, board_content, mno) 
  values (#{board_title}, #{board_content}, 
  (select mno from member where mid=#{mid}));
    <selectKey resultType="Integer" keyProperty="board_no" order="AFTER">
    select last_insert_id()
    </selectKey>
</insert>

 

selectKey 는 Key 값을 잡아줌

select last_insert_id() -> 는 마지막에 입력한 pk 값을 받아줌

 

@PostMapping("/write")
public String write(BoardDTO dto) {
  int result = boardService.write(dto);
  // 여기서 result 는 executeUpdate 의 결과 값과 같음
  System.out.println("result 결과 : " + result);
  System.out.println("dto no 값 : " + dto.getBoard_no());
//    return "redirect:/board"; // List 로 가기
  return "redirect:/detail?no=" + dto.getBoard_no(); // 작성한 글로 가기
}

 

dto.getBoard_no() 가 되는 이유는 mybatis 에서 값을 넣어줌

DB 가기 전 no 값을 보면 0 이지만, 갔다온 후 no 값을 보면 mybatis 가 넣어주었기 때문에 값이 들어있음

 

신기하네,,

 

자바스크립트로 글 쓸때 체크하기

일단 폼에 onsubmit 과 name 추가

<form action="./write" method="post" onsubmit="return writeCheck()" name="modalform">

 

 

글자 수 제한 걸기

function writeCheck() {
  let title = document.querySelector("#title");
  let content = document.querySelector("#content");
  // alert("title : " + title.value + "\ncontent : " + content.value);
  if (title.value.length < 5) {
    alert("제목은 5글자 이상으로 작성해주세요");
    title.focus();
    return false;
  }
  if (content.value.length < 10) {
    alert("내용은 10글자 이상으로 작성해주세요");
    content.focus();
    return false;
  }
}

 

이거 대신에 input, textarea 에 

maxlength, minlength 로 최대, 최소 글자 수를 지정할 수 있음

 

document.querySelector() 의 역할

Document.querySelector() - Web API | MDN