[React] Blog_01. 게시글 상세보기

Spring 서버와 React 프론트 입니다.

목숨이하나

Jul 10, 2024

Contents

JOIN FETCH b.replies r ( INNER JOIN )을 하면 안된다!! LEFT JOIN ( OUTTER JOIN ) 해야한다.게시물 상세보기

인터셉터

게시물 상세보기, / 인증 필요없음.

인증이 필요한 곳에만 api를 붙이면 된다.

/api/users/{id} 같이 인증이 필요한 주소가 하나 더 필요하면 /api/v2/users/{id}로 이름을 지어준다.


public interface BoardJPARepository extends JpaRepository<Board, Integer> {

    @Query("""
            SELECT b
            FROM Board b
            JOIN FETCH b.user u
            LEFT JOIN FETCH b.replies r
            WHERE b.id = :id
            """)
    Optional<Board> findByIdJoinUser(@Param("id") int id);
}

게시글 목록보기에 댓글을 조인한다.

`JOIN FETCH b.replies r` ( INNER JOIN )을 하면 안된다!! LEFT JOIN ( OUTTER JOIN ) 해야한다.

댓글이 있는 게시글만 띄우기 때문

게시물 상세보기

page>Detail.js


import React from "react";
import { Button } from "react-bootstrap";
import { Link } from "react-router-dom";

const Detail = (props) => {
  function fetchDelete(postId) {}

  return (
    <div>
      <Link to={"/updateForm/1"} className="btn btn-warning">수정</Link>
      <Button className="btn btn-danger" onClick={() => fetchDelete(1)}>삭제</Button>
      <br />
      <br />
      <h1>제목1</h1>
      <hr />
      <div>내용1</div>
    </div>
  );
};

export default Detail;

일단 임의의 값 제목1, 내용1 입력

게시물 상세보기를 들어가면 ( http://localhost:8080/api/boards/1/detail )


〃
const [post, setPost] = useState ({
    id      : undefined,
    title   : "",
    content : "",
    userId  : undefined,
    owner   : false,
    replies : [],
});
〃

PostItem의 id를 받아온다.

undefined가 나오네요.

public interface BoardJPARepository extends JpaRepository<Board, Integer> { @Query(""" SELECT b FROM Board b JOIN FETCH b.user u LEFT JOIN FETCH b.replies r WHERE b.id = :id """) Optional<Board> findByIdJoinUser(@Param("id") int id); }

게시물 상세보기

page>Detail.js

import React from "react"; import { Button } from "react-bootstrap"; import { Link } from "react-router-dom"; const Detail = (props) => { function fetchDelete(postId) {} return ( <div> <Link to={"/updateForm/1"} className="btn btn-warning">수정</Link> <Button className="btn btn-danger" onClick={() => fetchDelete(1)}>삭제</Button> <br /> <br /> <h1>제목1</h1> <hr /> <div>내용1</div> </div> ); }; export default Detail;

일단 임의의 값 제목1, 내용1 입력

게시물 상세보기를 들어가면 ( http://localhost:8080/api/boards/1/detail )

〃 const [post, setPost] = useState ({ id : undefined, title : "", content : "", userId : undefined, owner : false, replies : [], }); 〃

PostItem의 id를 받아온다.

undefined가 나오네요.