19일차_게시판 프로젝트(12)

1. JPA 퀴리 메소드, ResponseEntity

어제 공부했던 부분 중 모르는 개념이 많았다. 

해당 개념에 대하여 공부하여야 겠다. 

어제 게시물 : 2024.03.27 - [취준] - 18일차_게시판 프로젝트(11)

1-1. JPA 쿼리 메소드

commentRepository 인터페이스에서 사용했던

'findAllByBoardEntityOrderByIdDesc' 메소드에 대해 다시 설명해보겠다. 

 

[ 연관관계 ]

CommentEntity에서 BoardEntity를 참조

CommentEntity : BoardEntitiy 는 N : 1 관계로 ManyToOne 어노테이션을 사용

 

CommentEntity 외래키 

>> board_id

 

BoardEntity 기본키

>> id

 

[ 설명 ]

해당 쿼리 메소드를 통해서 아래와 같은 쿼리문을 사용하고 싶었다.

select * from tb_board_comment where board_id = ? order by id desc;

 

commentRepository에서 외래키를 사용하기 위해서는 아래와 같은 메소드 형식을 사용하여야 한다. 

findAllBy{Entity 클래스명}

CommentEntity의 외래키가 아닌 참조하는 Entity의 이름을 사용하여야 한다. 

 

여기서는 BoardEtity를 참조하여야 하기에 findAllByBoardEntity가 된다

 

아래 CommentEntity를 보면 참조키에 대해 설정할때 BoardEntity 형식을 사용하였다. 

이와 같이 Entity 형식을 사용하여 JPA쿼리 메소드를 사용하여야 한다. 

 

 

[ 참고 ] JPA 쿼리 메소드 1

https://bcp0109.tistory.com/305

JPA 메서드의 where 조건에는 Entity 를 사용하자

 

[ 참고 ] JPA 쿼리 메소드 2

https://easthshin.tistory.com/16

findBy*** VS findBy***Id

 

 

1-2. ResponseEntity

HTTPHeader, HTTPBody 를 가지고 있음. 

 

2. 댓글 목록 출력 1

댓글 작성 후, 추가한 댓글을 포함한 댓글 목록 출력 

게시물 조회 시에는 댓글 목록이 출력이 안됨 

해당기능은 3번에서 구현 

 

2-1. 댓글 목록 출력 

detail.html -> JS

1. ajax 방식으로 요청 

2. 응답 받은 댓글목록 데이터 res 변수 사용 

3. table 형식에 댓글 개수만큼 댓글 추가

4. document.getElementById('comment-list').innerHTML = output

• body 태그 쪽에 있는 태그 아이디가 'comment-list'인 값 대체 
• 댓글 biv 부분 초기화 

5. document.getElementById('commentWriter').value = '';

• body 태그 쪽에 있는 태그 아이디가 'commentWriter '인 값 대체 
• 작성자 input 부분 초기화

6. document.getElementById('commentContents').value = '';

• body 태그 쪽에 있는 태그 아이디가 'commentContents '인 값 대체  
• 댓글 input 부분 초기화 

const commentWriter = () => {
    const writer = document.getElementById("commentWriter").value;
    const contents = document.getElementById("commentContents").value;
    console.log("작성자 : ", writer);
    console.log("내용 : ", contents);
    const id = [[${board.id}]];
    $.ajax({
        // 요청방식 : post, 요청주소 : /comment/save, 요청데이터 : 작성자, 작성내용, 게시글 번호
        type : "post",
        url : "/comment/save",
        data : { // json 형태로 데이터 전달 
            "commentWriter" : writer,
            "commentContents" : contents,
            "boardId" : id
        },
        success: function (res) {
            console.log("요청성공", res);
            // 댓글 작성 후, 추가된 댓글 포함하여 댓글 목록 출력
            let output = "<table>";
            output += "<tr><th>댓글id</th>";
            output += "<th>작성자</th>";
            output += "<th>내용</th>";
            output += "<th>작성시간</th></tr>";
            for (let i in res) {
                output += "<tr>";
                output += "<td>" + res[i].id + "</td>";
                output += "<td>" + res[i].commentWriter + "</td>";
                output += "<td>" + res[i].commentContents + "</td>";
                output += "<td>" + res[i].commentCreatedTime + "</td>";
                output += "</tr>";
            }
            output += "</table>";
            document.getElementById('comment-list').innerHTML = output;
            document.getElementById('commentWriter').value = '';
            document.getElementById('commentContents').value = '';
        },
        error : function(err) {
            console.log("요청 실패", err);
        },
    })
}

 

2-2. 결과화면 

 

2-3. 유튜브 영상

https://www.youtube.com/watch?v=NpdT-2UWFO4&list=PLV9zd3otBRt7jmXvwCkmvJ8dH5tR_20c0&index=24

 

 

3. 댓글 목록 출력 2

3-1. BoardController

BoardController.java

게시물 조회 시, 댓글 목록이 출력되어야 하기에 board 컨트롤러 쪽에서 제어한다. 

 

1. 게시물 조회 시 요청 URL : board/{board_id}

2. 추가된 소스 

List<CommentDTO> commentDTOList = commentService.findAll(boardDTO.getId());

model.addAttribute("commentList", commentDTOList);

2-1. commentDTOList에 댓글 목록을 저장한다. 

2-2. 어제 개발하였던 commentService의 findAll 메소드를 사용하여 댓글 목록을 반환한다. 

(참고 : 2024.03.27 - [취준] - 18일차_게시판 프로젝트(11)  >> 1-4 ) 

 

3. model에 값을 추가

이름 : commentList

값 : commentDTOList 변수 (댓글목록)

@GetMapping("/{id}") // board/id
public String findById(@PathVariable Long id, Model model,
                       @PageableDefault(page=1) Pageable pageable) {
    // @PathVariable : 경로 상에 있는 값을 가져올 때 사용
    // Model : spring이 지원하는 기능으로 HashMap (Key, Vaule 존재)

    /*
        게시글 상세 페이지
        1. 해당 게시글의 조회수 +1
        2. 게시글 데이터를 가져와서 detail.html에 출력
     */

    // 1-1. 조회수 +1
    boardService.updateHits(id);
    // 1-2. 데이터 뿌리기
    BoardDTO boardDTO = boardService.findById(id);
    List<CommentDTO> commentDTOList = commentService.findAll(boardDTO.getId());
    model.addAttribute("commentList", commentDTOList);
    model.addAttribute("board", boardDTO);
    model.addAttribute("page", pageable.getPageNumber());

    return "detail";
}

 

 

3-2. detail.html

detail.html

1. commentList 

• 서버 측에서 받아온 데이터 

2. th:each

• commentList의 원소 개수만큼 반복 

3. 데이터 뿌리기 

• id
• commentWriter
• commentContents
• commentCreatedTime

 

3-3. 유튜브 영상

https://www.youtube.com/watch?v=B8X6GgfLZGg&list=PLV9zd3otBRt7jmXvwCkmvJ8dH5tR_20c0&index=25

 

 

 

4. 나의 계획 

유튜브 영상보고 따라하는 게시판 프로젝트 끝끝끝!! 

그동안 나 자신 수고 많았다.... 

그치만 이거하면서 개념에 대한 공부가 전혀 안되어있다는걸 너무 잘 느낌... 

 

단순한 개념도...

이제 이런 부분들을 보완하며 프로젝트를 키워나가야겠다..! 

4-1. 인스타처럼 만들어보자! 

1. 회원제 

>> 카톡, 구글 과 같은 간편 로그인도 해보자!

2. 메신저 기능 

 

MyBatis 사용해서 게시판 다시 만들어보기! 

 

 

 

4-2. 코테 연습도 틈틈이! 

 

4-3. 개념 공부

개념은 잘 모르는거 같아... 

Get... Post... 

 

 

 

[ 공부 리스트 ]

2024.04.01 - [취준/개념] - 20일차_개념공부

- Static
- 생성자
- RestAPI

 

2024.04.02 - [취준/개념] - 21일차_개념공부

- API

- HTTP란? 

 

2024.04.03 - [취준/개념] - 22일차_개념공부

- DataBase

- ORM

- DBMS

- SQL

- SQL vs NoSQL

- MyBatis vs JPA 

 

2024.04.05 - [취준/개념] - 23일차_MVC

- MVC

- Spring vs Spring Boot vs Spring MVC

 

2024.04.08 - [취준/개념] - 24일차_Spring MVC 동작원리

- Spring MVC 동작 원리 

 

2024.04.09 - [취준/개념] - 25일차_복습

- Spring Boot의 SpringApplication.run() 

- 각 자바 클래스 및 인터페이스의 역할 및 기능

 

2024.04.11 - [취준/개념] - 26일차_요청 방식 Get vs Post

- 요청 방식 Get vs Post 

 

2024.04.15 - [취준/개념] - 27일차_HTTP 구조

- HTTP 구조

Get과 Post 방식에 대해 공부하면 HTTP 구조 이해에 대한 필요성 느낌