💻 코딩 일기 : [스프링 게시판 with React] '게시판 만들기' 편

ybk·2024년 5월 21일

React Spring

spring

목록 보기

36/55

🔔'게시판 만들기'에 대해서 알아보자!

💟 게시물 CREATE (게시글 작성)

BoardWrite.jsx(React)

export function BoardWrite() {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [writer, setWriter] = useState("");

  function handleSaveClick() {
    axios.post("/api/board/add", {
      title,
      content,
      writer,
    });
  }

  return (
    <Box>
      <Box>글 작성 화면</Box>
      <Box>
        <Box>
          <FormControl>
            <FormLabel>제목</FormLabel>
            <Input onChange={(e) => setTitle(e.target.value)} />
          </FormControl>
        </Box>
        <Box>
          <FormControl>
            <FormLabel>본문</FormLabel>
            <Textarea onChange={(e) => setContent(e.target.value)} />
          </FormControl>
        </Box>
        <Box>
          <FormControl>
            <FormLabel>작성자</FormLabel>
            <Input onChange={(e) => setWriter(e.target.value)} />
          </FormControl>
        </Box>
        <Box>
          <Button colorScheme={"blue"} onClick={handleSaveClick}>
            저장
          </Button>
        </Box>
      </Box>
    </Box>
  );
}

제목, 본문, 작성자 값을 받아서 저장 버튼을 누르면 POST 요청으로 서버에게 title, content, writer 값을 넘깁니다.
서버에게 title, content, writer 값을 넘겨야 하기 때문에 상태를 설정합니다.

Board.java

@Data
public class Board {
    private Integer id;
    private String title;
    private String content;
    private String writer;
    private LocalDateTime inserted;
}

게시물에서 사용할 프로퍼티를 정의합니다.

BoardController.java

@RestController
@RequestMapping("/api/board")
@RequiredArgsConstructor
public class BoardController {

    private final BoardService service;

    @PostMapping("add")
    public void add(@RequestBody Board board) {
        service.add(board);
    }
}

/api/board/add 경로로 들어오는 POST 요청을 처리합니다.
@RequestBody 애너테이션을 사용하여 JSON 형식의 요청 본문을 자동으로 Board 객체로 변환합니다.
클라이언트로부터 받은 Board 객체를 service.add(board)를 호출하여 BoardService로 전달하고 게시물을 저장합니다.

BoardService.java

@Service
@Transactional(rollbackFor = Exception.class)
@RequiredArgsConstructor
public class BoardService {
    private final BoardMapper mapper;

    public void add(Board board) {
        mapper.insert(board);
    }
}

Mapper에서 작성한 쿼리문에 맞게 게시물을 저장하도록 처리합니다.

BoardMapper.java

@Mapper
public interface BoardMapper {
    @Insert("""
            INSERT INTO board (title, content, writer)
            VALUES (#{title}, #{content}, #{writer})
            """)
    int insert(Board board);
}

Board를 저장하기 위해 board 테이블에 삽입하도록 쿼리문을 작성합니다. (@Insert)

🟦 게시글 작성에 대한 부가적인 기능 추가

📢 만약 게시글이 잘 작성되었다면 200 코드를 반환하고 게시글에 제목, 본문, 작성자가 비어있다면 400 코드를 반환합니다.
📢 Service에서 유효성 검사를 하고 그것을 Controller에게 넘겨줘 해당 응답 코드에 맞게 화면에 표시합니다.

BoardController.java

@RestController
@RequestMapping("/api/board")
@RequiredArgsConstructor
public class BoardController {

    private final BoardService service;

    @PostMapping("add")
    public ResponseEntity add(@RequestBody Board board) {
        if (service.validate(board)) {
            service.add(board);
            return ResponseEntity.ok().build();
        } else {
            return ResponseEntity.badRequest().build();
        }
    }
}

BoardController는 클라이언트로부터 받은 게시글을 BoardService를 통해 등록하고, 유효성 검사를 통해 적절한 HTTP 응답을 반환합니다.
만약 BoardService에 한 유효성 검사가 true라면 게시글에 등록이 잘 되어 200번 응답을 반환하고 그렇지 않으면 400번 응답을 반환합니다.

BoardService.java

@Service
@Transactional(rollbackFor = Exception.class)
@RequiredArgsConstructor
public class BoardService {
    private final BoardMapper mapper;

    ~~~~~~

    // 제목, 내용, 작성자 유효성 검사(작성되었는지)
    public boolean validate(Board board) {

        if (board.getTitle() == null || board.getTitle().isBlank()) {
            return false;
        }

        if (board.getContent() == null || board.getContent().isBlank()) {
            return false;
        }

        if (board.getWriter() == null || board.getWriter().isBlank()) {
            return false;
        }

        return true;
    }
}

Board 객체를 매개변수로 받아 제목, 본문, 작성자 입력 값이 null이거나 비어 있다면 유효하지 않기 때문에 false 를 반환하고 그렇지 않으면 true를 반환합니다.

BoardWrite.jsx(React)

export function BoardWrite() {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [writer, setWriter] = useState("");
  const toast = useToast();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);

  function handleSaveClick() {
    setLoading(true);
    axios
      .post("/api/board/add", {
        title,
        content,
        writer,
      })
      .then(() => {
        toast({
          description: "새 글이 등록되었습니다.",
          status: "success",
          position: "top-right",
          duration: 1000,
        });
        navigate("/");
      })
      .catch((error) => {
        const code = error.response.status;

        if (code === 400) {
          toast({
            status: "error",
            description: "등록되지 않았습니다. 입력한 내용을 확인해주세요.",
            position: "top-right",
            duration: 1000,
          });
        }
      })
      .finally(() => setLoading(false));
  }

  // 제목, 본문, 작성자 작성하지 않으면 활성화가 되지 않는다.
  let disableSaveButton = false;
  if (title.trim().length === 0) {
    disableSaveButton = true;
  }
  if (content.trim().length === 0) {
    disableSaveButton = true;
  }
  if (writer.trim().length === 0) {
    disableSaveButton = true;
  }

  return (
    <Box>
		~~~~      
          <Button
            isLoading={loading}
            isDisabled={disableSaveButton}
            colorScheme={"blue"}
            onClick={handleSaveClick}
          >
            저장
          </Button>
		~~~~
    </Box>
  );
}

저장 버튼 클릭 시, axios.post("/api/board/add") 경로로 요청 본문에 title, content, writer 값을 담고 요청합니다.
요청 성공(.then()) : "새 글이 등록되었습니다." 메시지를 토스트로 표시하고 메인 페이지로 이동(navigate("/"))합니다.
요청 실패(.catch()) : 400 상태 코드에 따라 "등록되지 않았습니다. 입력한 내용을 확인해주세요." 메시지를 토스트로 표시합니다.
disableSaveButton() : 만약에 title, content, writer 입력 값이 비어있다면 저장 버튼을 비활성(true)합니다.
loading : 버튼 클릭 시 로딩중으로 변화되며 post 요청 보내기 전에 true로 설정하고 보낸 후에는 요청 성공, 실패에 따르지 않고 무조건 로딩이 끝나야 하기 때문에 false로 설정합니다.

💟 게시물 READ(게시글 조회)

🟦 게시글 전체 보여주기(Home)

BoardList.jsx(React)

export function BoardList() {
  const navigate = useNavigate();
  const [boardList, setBoardList] = useState([]);

  // const boardList = [
  //   { id: 5, title: "title1", writer: "who1" },
  // ];

  useEffect(() => {
    axios.get("/api/board/list").then((res) => setBoardList(res.data));
  }, []);

  return (
    <Box>
      <Box>게시물 목록</Box>
      <Box>
        <Table>
          <Thead>
            <Tr>
              <Th>NO</Th>
              <Th>제목</Th>
              <Th>
                <FontAwesomeIcon icon={faUserPen} />
              </Th>
            </Tr>
          </Thead>
          <Tbody>
            {boardList.map((board) => (
              <Tr
                cursor={"pointer"}
                _hover={{ bgColor: "gray.200" }}
                onClick={() => navigate(`/board/${board.id}`)}
                key={board.id}
              >
                <Td>{board.id}</Td>
                <Td>{board.title}</Td>
                <Td>{board.writer}</Td>
              </Tr>
            ))}
          </Tbody>
        </Table>
      </Box>
    </Box>
  );
}

axios.get(/api/board/list) 호출에서 응답으로 받은 데이터를 setBoard(res.data)를 통해 board 상태에 저장합니다.
boardList.map((board) => () : boardList를 순회하면서 각 board 객체에 대한 속성(id, title, writer)들의 값을 렌더링합니다.
useEffect() : axios를 사용하여 GET 요청으로 요청을 보내고 서버로부터 게시물 목록을 가져오고, 그 목록을 boardList 상태에 저장합니다.

BoardController.java

@GetMapping("list")
public List<Board> list() {
    return service.list();
}

/api/board/list로 요청이 들어오면 BoardService의 list() 메서드를 호출하여 게시물 목록을 처리합니다.

BoardService.java

public List<Board> list() {
    return mapper.selectAll();
}

mapper에서 조회된 게시글 목록을 반환합니다.

BoardMapper.java

@Select("SELECT id, title, writer FROM board ORDER BY id DESC")
List<Board> selectAll();

board 테이블에 있는 전체 게시글을 조회하는 쿼리를 작성합니다.

🟦 게시물 클릭 시 해당 게시물 보기

BoardView.jsx(React)

export function BoardView() {
  const { id } = useParams();
  const [board, setBoard] = useState(null);
  const toast = useToast();
  const navigate = useNavigate();

  useEffect(() => {
    axios
      .get(`/api/board/${id}`)
      .then((res) => setBoard(res.data))
      .catch((err) => {
        if (err.response.status === 404) {
          toast({
            status: "info",
            description: "해당 게시물이 존재하지 않습니다.",
            position: "top-right",
          });
          navigate("/");
        }
      });
  }, []);

  if (board === null) {
    return <Spinner />;
  }

  return (
    <Box>
      <Box>{board.id}번 게시물</Box>
      <Box>
        <FormControl>
          <FormLabel>제목</FormLabel>
          <Input value={board.title} readOnly />
        </FormControl>
        <Box>
          <FormControl>
            <FormLabel>본문</FormLabel>
            <Input value={board.content} readOnly />
          </FormControl>
        </Box>
        <Box>
          <FormControl>
            <FormLabel>작성자</FormLabel>
            <Input value={board.writer} readOnly />
          </FormControl>
        </Box>
        <Box>
          <FormControl>
            <FormLabel>작성일시</FormLabel>
            <Input type={"datetime-local"} value={board.inserted} readOnly />
          </FormControl>
        </Box>
      </Box>
    </Box>
  );
}

axios로 /api/board/${id} 경로로 get 요청을 보내고 요청에 성공하면 board에 있는 데이터(title, content, writer)을 board 상태에 저장하고 요청에 실패하면 실패 코드가 404라면 토스트로 화면에 표시하고 home('/')으로 이동합니다.
board가 null 이라면 Spinner 처리를 해줍니다.
const { id } = useParams(): URL의 경로 파라미터에서 id 값을 추출합니다.
board 객체는 axios.get(/api/board/${id}) 호출에서 응답으로 받은 데이터를 setBoard(res.data)를 통해 board 상태에 저장합니다.

BoardController.java

// /api/board/5
@GetMapping("{id}")
public ResponseEntity get(@PathVariable Integer id) {
    Board board = service.get(id);

    if (board == null) {
        return ResponseEntity.notFound().build();
    }
    
    return ResponseEntity.ok().body(board);
}

/api/board/id로 GET 요청이 들어오면 BoardService의 list() 메서드를 호출하여 게시물 목록을 반환합니다.
만약 요청된 게시물이 존재하면 반환하고 그렇지 않으면 404 Not Found 응답을 반환합니다.
@PathVariable : URL 경로에서 {id} 부분을 추출하여 메서드 매개변수 id에 바인딩합니다.
ResponseEntity는 HTTP 응답을 나타내는 객체로, 상태 코드와 응답 본문을 포함할 수 있습니다.

BoardService.java

public Board get(Integer id) {
    return mapper.selectById(id);
}

mapper에서 조회한 id에 해당하는 게시물을 조회합니다.

BoardMapper.java

@Select("SELECT * FROM board WHERE id = #{id}")
Board selectById(Integer id);

해당 id에 해당 하는 게시물만 조회하도록 쿼리를 작성합니다.

💟 게시물 Delete(게시글 삭제)

BoardView.jsx(React)

export function BoardView() {
  const { id } = useParams();
  const [board, setBoard] = useState({});
  const toast = useToast();
  const navigate = useNavigate();
  const { isOpen, onClose, onOpen } = useDisclosure();

	~~~

  function handleClickRemove() {
    axios
      .delete(`/api/board/${id}`)
      .then(() => {
        toast({
          status: "success",
          description: `${id}번 게시물이 삭제되었습니다.`,
          position: "top-right",
        });
        navigate("/");
      })
      .catch(() => {
        toast({
          status: "error",
          description: `${id}번 게시물 삭제 중 오류가 발생하였습니다.`,
          position: "top-right",
        });
      })
      .finally(() => {
        onClose();
      });
  }

  return (
    <Box>
 	~~~~~
        <Box>
          <Button colorScheme={"purple"}>수정</Button>
          <Button colorScheme={"red"} onClick={onOpen}>
            삭제
          </Button>
          <Modal isOpen={isOpen} onClose={onClose}>
            <ModalOverlay />
            <ModalContent>
              <ModalHeader></ModalHeader>
              <ModalBody>정말로 삭제하시겠습니까?</ModalBody>
              <ModalFooter>
                <Button onClick={onClose}>취소</Button>
                <Button colorScheme={"red"} onClick={handleClickRemove}>
                  확인
                </Button>
              </ModalFooter>
            </ModalContent>
          </Modal>
        </Box>
    </Box>
  );
}

삭제 버튼 클릭 시 모달이 오픈되고 모달에서 취소 버튼과 학인 버튼이 보이며 확인 버튼 클릭 시 handleClickRemove 메서드가 호출됩니다.
handleClickRemove() : axios로 /api/board/${id} 경로로 delete 요청을 보내고 요청 성공하면 토스트 표시와 home(/)으로 경로 이동합니다.

BoardController.java

@DeleteMapping("{id}")
public void delete(@PathVariable Integer id) {
    service.remove(id);
}

@PathVariable : URL 경로에서 {id} 부분을 추출하여 메서드 매개변수 id에 바인딩합니다.
BoardService에서 해당 id 게시글을 삭제합니다.
/api/board/id로 Delete 요청이 들어오면 BoardService의 remove() 메서드를 호출하여 해당 게시물을 삭제합니다.

BoardService.java

public void remove(Integer id) {
    mapper.deleteById(id);
}

mapper에서 id에 해당하는 게시글을 삭제합니다.

BoardMapper.java

@Delete("DELETE FROM board WHERE id=#{id}")
int deleteById(Integer id);

해당 id의 게시글을 삭제하기 위해 쿼리문을 작성합니다.

💟 게시물 Update(게시글 수정)

BoardView.jsx(React)

<Button
  colorScheme={"purple"}
  onClick={() => navigate(`/edit/${board.id}`)}
>
  수정
</Button>

수정 버튼 클릭 시 해당 아이디의 수정 게시물(/edit/${board.id} 경로)로 이동합니다.

BoardEdit.jsx(React)

export function BoardEdit() {
  const { id } = useParams();
  const [board, setBoard] = useState(null);
  const toast = useToast();
  const navigate = useNavigate();
  const { isOpen, onClose, onOpen } = useDisclosure();

  useEffect(() => {
    axios.get(`/api/board/${id}`).then((res) => setBoard(res.data));
  }, []);

  function handleClickSave() {
    axios
      .put("/api/board/edit", board)
      .then(() => {
        toast({
          status: "success",
          description: `${board.id}번 게시물이 수정되었습니다.`,
          position: "top-right",
        });
        navigate(`/board/${board.id}`);
      })
      .catch((err) => {
        if (err.response.status === 400) {
          toast({
            status: "error",
            description: `게시물이 수정되지 않았습니다. 작성한 내용을 확인해주세요.`,
            position: "top-right",
          });
        }
      })
      .finally(() => {
        onClose();
      });
  }

  if (board === null) {
    return <Spinner />;
  }

  return (
    <Box>
      <Box>{board.id}번 게시물 수정</Box>
      <Box>
        <Box>
          <FormControl>
            <FormLabel>제목</FormLabel>
            <Input
              defaultValue={board.title}
              onChange={(e) => setBoard({ ...board, title: e.target.value })}
            />
          </FormControl>
        </Box>
        <Box>
          <FormControl>
            <FormLabel>본문</FormLabel>
            <Textarea
              defaultValue={board.content}
              onChange={(e) => setBoard({ ...board, content: e.target.value })}
            ></Textarea>
          </FormControl>
        </Box>
        <Box>
          <FormControl>
            <FormLabel>작성자</FormLabel>
            <Input
              defaultValue={board.writer}
              onChange={(e) => setBoard({ ...board, writer: e.target.value })}
            />
          </FormControl>
        </Box>
        <Box>
          <Button colorScheme={"green"} onClick={onOpen}>
            저장
          </Button>
        </Box>
      </Box>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader></ModalHeader>
          <ModalBody>저장하시겠습니까?</ModalBody>
          <ModalFooter>
            <Button onClick={onClose}>취소</Button>
            <Button onClick={handleClickSave} colorScheme={"blue"}>
              확인
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </Box>
  );
}

axios.get(/api/board/${id}) 호출에서 응답으로 받은 데이터를 setBoard(res.data)를 통해 board 상태에 저장합니다. board에 저장된 값을 수정 페이지에 들어갔을 때 화면에 보여주기 위해서 defaultValue로 저장해줍니다.
onChange={(e) => setBoard({ ...board, 프로퍼티: e.target.value })} : <Input/> 태그의 입력 값에 글을 입력한다면 setBoard() 함수를 호출하여 board 상태를 업데이트합니다. 이때 이전 board 상태를 복사하고, 새로운 값으로 프로퍼티(title, content, writer)를 업데이트합니다. e.target.value는 사용자가 입력한 새로운 프로퍼티 값입니다.
글 수정 후 저장 버튼을 누르면 모달이 나타나고 모달에서 확인 버튼을 누르면 handleClickSave 메서드를 호출합니다.
handleClickSave 메서드 : board 객체를 담아 서버에게 axios.put(/api/board/edit) 요청을 합니다. 요청 성공 시, toast로 성공 메시지를 화면에 표시하고 해당 게시물(/board/${board.id} 경로)로 이동하고 요청 실패 시, 응답 코드가 400이라면 toast로 에러 메시지를 화면에 표시합니다.

BoardController.java

@PutMapping("edit")
    public ResponseEntity edit(@RequestBody Board board) {
        if (service.validate(board)) {
            service.edit(board);
            return ResponseEntity.ok().build();
        } else {
            return ResponseEntity.badRequest().build();
        }
    }
}

/api/board/edit로 요청이 들어오면 BoardService에서 해당 id 게시글을 수정합니다.
유효성 검사를 하여 해당 하는 응답 코드를 반환합니다.

BoardService.java

public void edit(Board board) {
    mapper.update(board);
}

mapper에서 id에 해당하는 게시글을 수정한 것을 저장합니다.

BoardMapper.java

@Update("""
        UPDATE board SET title=#{title}, content=#{content}, writer=#{writer}
        WHERE id=#{id}
        """)
int update(Board board);