💻 코딩 일기 : [스프링 게시판 with React] '게시판 파일 첨부' 편

🔔 '게시판 파일 첨부 CRUD'에 대해서 알아보자!

💟 게시판 파일 첨부하기(CREATE)

BoardWriter.java(React)

  const [files, setFiles] = useState([]);

        <Box mt={"30px"}>
          <FormControl>
            <FormLabel>파일</FormLabel>
            <Input
              multiple={true}
              type={"file"}
              accept={"image/*"}
              onChange={(e) => {
                setFiles(e.target.files);
              }}
            />
            <FormHelperText color={"red"}>
              총 용량은 10MB 한 파일은 1MB를 초과할 수 없습니다.
            </FormHelperText>
          </FormControl>
        </Box>
        <Box>
          <ul>{fileNameList}</ul>
        </Box>

• multiple : 여러 파일 선택 가능합니다.
• accept : 파일 유형 지정합니다.
• onChange{} : 파일을 선택하면 선택된 파일들을 files 상태 변수에 업데이트 합니다.

// file 목록 작성
const fileNameList = [];
for (let i = 0; i < files.length; i++) {
  fileNameList.push(<li>{files[i].name}</li>);
}

• <input type="file">에서 반환되는 FileList 객체에는 map 함수가 없어서 파일 목록 배열(fileNameList)을 새로 작성합니다.
• 파일의 목록을 화면에 표시하기 위해 files안에 있는 파일들을 fileNameList에 넣어줍니다.

    axios
      .postForm("/api/board/add", {
        title,
        content,
        files,
      })

• 파일을 보낼 때 multipart/form-data로 전송해야 하기 때문에 axios.postForm()으로 서버에게 요청해야 합니다.

BoardController.java

@PostMapping("add")
@PreAuthorize("isAuthenticated()")
public ResponseEntity add(Authentication authentication,
                          Board board, @RequestParam(value = "files[]", required = false) MultipartFile[] files) throws IOException {

    if (service.validate(board)) {
        service.add(board, files, authentication);
        return ResponseEntity.ok().build();
    } else {
        return ResponseEntity.badRequest().build();
    }
}

• Board에서 요청 파라미터를 바인딩해주기 때문에 따로 어노테이션을 정의할 필요가 없습니다.
• 파일을 선택하지 않을 수도 있으니 reqired = false로 지정합니다.

BoardService.java

public void add(Board board, MultipartFile[] files, Authentication authentication) throws IOException {
    board.setMemberId(Integer.valueOf(authentication.getName()));
    mapper.insert(board); //게시물 저장 먼저

    if (files != null) {
        for (MultipartFile file : files) {
            //DB에 해당 게시물의 파일 목록 저장
            mapper.insertFileName(board.getId(), file.getOriginalFilename());

            // 실제 파일 저장
            // 부모 디렉토리 만들기
            String dir = STR."C:/Temp/prj2/\{board.getId()}";
            File dirFile = new File(dir);
            if (!dirFile.exists()) {
                dirFile.mkdirs();
            }

            //파일 경로
            String path = STR."C:/Temp/prj2/\{board.getId()}/\{file.getOriginalFilename()}";
            File destination = new File(path);
            file.transferTo(destination);
        }
    }
}

• mapper에서 먼저 게시물을 저장한 후, 생성된 board의 id값을 받아 파일을 저장합니다.
• mapper.insert(board) : Board 객체의 ID 필드가 DB에서 자동 생성된 키 값으로 설정되어 board.getID() 값을 받아올 수 있습니다.
• DB에 저장된 파일을 실제 컴퓨터(disk)에 저장할 수 있도록 경로를 설정해서 저장합니다.
• 부모 디렉토리를 생성해서 board의 id 폴더를 생성하고 파일 경로를 지정하여 MultipartFile 객체를 해당 경로에 저장(transferTo)합니다.

BoardMapper.java

@Insert("""
        INSERT INTO board (title, content, member_id)
        VALUES (#{title}, #{content}, #{memberId})
        """)
@Options(useGeneratedKeys = true, keyProperty = "id")
int insert(Board board);

    @Insert("""
            INSERT INTO board_file (board_id, name)
            VALUES (#{boardId}, #{name})
            """)
    int insertFileName(Integer boardId, String name);

• @Options : 자동 생성된 키(auto-increment)를 사용하도록 설정하고 그것을 id 필드에 설정합니다.

💟 게시물 전체 조회 시 그림 파일 갯수 표시(READ)

Board.java

private Integer numberOfImages;

• 클라이언트와 서버랑 numberOfImages를 바인딩하기 위해서 Board 자바빈에 추가합니다.

@Select("""
        <script>
        SELECT b.id, 
               b.title,
               m.nick_name writer,
               COUNT(f.name) number_of_images
        FROM board b JOIN member m ON b.member_id = m.id 
                     LEFT JOIN board_file f ON b.id = f.board_id
          < ~~~~~ >
        GROUP BY b.id
        ORDER BY b.id DESC
        LIMIT #{offset}, 10
        </script>
        """)
List<Board> selectAllPaging(Integer offset, String searchType, String keyword);

• 게시글을 조회할 때 사진이 몇개 저장했는지 알기 위햇 Count를 사용하여 쿼리문을 작성합니다. board의 id 별로 저장되어야 하기 때문에 GROUP BY를 사용합니다.

                  <Td>
                    {board.title}
                    {board.numberOfImages > 0 && (
                      <Badge>
                        <FontAwesomeIcon icon={faImages} />
                        {board.numberOfImages}
                      </Badge>
                    )}
                  </Td>
                  <Td>{board.writer}</Td>

• 사진의 갯수가 0보다 크다면 icon과 사진의 갯수를 보여줍니다.

💟 게시물 선택 시 그림 파일 보이게 하기(READ)

BoardFile.java

@Data
@AllArgsConstructor
@NoArgsConstructor
public class BoardFile {
    private String name;
    private String src;
}

• BoardFile 클래스를 만들어 파일명과 파일 경로를 정의합니다.

Board.java

private List<BoardFile> fileList;

• 클라이언트와 바인딩하기 위해 Board 자바빈에서 fileList를 선언해줍니다.

BoardService.java

// 게시물 하나 조회
public Board get(Integer id) {
    Board board = mapper.selectById(id);
    List<String> fileNames = mapper.selectFileNameByBoardId(id);
    List<BoardFile> files = fileNames.stream()
            .map(name -> new BoardFile(name, STR."http://~/\{id}/\{name}"))
            .toList();
    board.setFileList(files);

    // http://~/{id}/{name}
    return board;
}

• 파일 이름 목록을 가져와 파일 이름 목록을 이미지 URL 목록으로 변환합니다. 생성된 이미지 URL 목록을 setFiles를 통해 Board 객체에 설정합니다.

BoardMapper.java

@Select("""
        SELECT name FROM board_file
        WHERE board_id=#{boardId}
        """)
List<String> selectFileNameByBoardId(Integer boardId);

• board의 id에 해당하는 파일명을 조회하여 조회된 파일을 모두 List에 담습니다.

BoardView.jsx(React)

        <Box display={"flex"} flexWrap={"wrap"} mt={"30px"}>
          {board.fileList &&
            board.fileList.map((file) => (
              <Box
                boxSize={"310px"}
                border={"2px solid black"}
                m={3}
                key={file.name}
              >
                <Image boxSize={"300px"} src={file.src} />
              </Box>
            ))}
        </Box>

• 저장된 이미지 파일에 있는 사진을 꺼내 출력합니다.

💟 파일 있는 게시물 삭제(DELETE)

파일이 있는 게시물 삭제하기 위해서는 먼저 컴퓨터에 있는 파일을 삭제하고 삭제하려는 board_id에 해당하는 파일 테이블에 있는 파일을 삭제하고 그 다음에 게시물을 삭제합니다.

BoardService.java

public void remove(Integer id) {

    // file명 조회
    List<String> fileNames = mapper.selectFileNameByBoardId(id);

    // disk에 있는 file 삭제
    String dir = STR."C:/Temp/prj2/\{id}/";
    for (String fileName : fileNames) {
        File file = new File(dir + fileName);
        file.delete();
    }
    File dirFile = new File(dir);
    if (dirFile.exists()) {
        dirFile.delete();
    }

    // board_file 삭제
    mapper.deleteFileByBoardId(id);

    // board
    mapper.deleteById(id);
}

• mapper에서 selectFileNameByBoardId(id)를 호출하여 해당 게시물에 첨부된 파일명 목록을 가져오고 가져온 파일 목록을 디스트에서 삭제합니다. 모든 파일이 삭제되면 해당 디렉토리도 삭제합니다.
• 해당 게시물과 관련된 파일 정보(board_file)를 DB에 삭제하고 해당 게시물(board)에서 DB에 삭제합니다.

BoardMapper.java

@Delete("""
        DELETE FROM board_file WHERE board_id=#{boardId}
        """)
int deleteFileByBoardId(Integer boardId);

• 파일을 지우기 위해 board_file 테이블에 해당하는 board_id를 삭제합니다.

회원 탈퇴 할 때도 마찬가지로 파일을 지우고 탈퇴되기 때문에 코드 수정합니다.

public void delete(Integer id) {
    // 회원이 쓴 게시물 조회
    List<Board> boardList = boardMapper.selectByMemberId(id);

    // 각 게시물 지우기
    boardList.forEach(board -> boardService.remove(board.getId()));

    // board 지운 후 member 테이블 지우기
    mapper.deleteById(id);
}

• 특정 회원이 작성한 게시물의 id를 조회합니다.
• 가져온 게시물의 ID 목록을 반복하면서 각 게시물을 삭제합니다.
  boardService.remove()에는 이미 파일을 지우는 과정이 포함되어 있기 때문에 그 메서드를 사용합니다.

BoardMapper.java

@Select("""
        SELECT id FROM board WHERE member_id=#{memberId}
        """)
List<Board> selectByMemberId(Integer memberId);

• member_id에 해당하는 board의 id를 조회합니다.

💟 파일 있는 게시물 수정(UPDATE)

🟦 수정 페이지에서 파일 삭제하기

BoardController.java

@PutMapping("edit")
@PreAuthorize("isAuthenticated()")
public ResponseEntity edit(Board board,
                           @RequestParam(value = "removeFileList[]", required = false)
                           List<String> removeFileList,
                           Authentication authentication) {
    if (!service.hasAccess(board.getId(), authentication)) {
        return ResponseEntity.status(HttpStatus.FORBIDDEN).build();
    }

    if (service.validate(board)) {
        service.edit(board, removeFileList);
        return ResponseEntity.ok().build();
    } else {
        return ResponseEntity.badRequest().build();
    }
}

• 클라이언트로부터 요청을 받을 때 자바빈의 Board와 removeFileList를 받아야 합니다.

BoardService.java

public void edit(Board board, List<String> removeFileList) {
    if (removeFileList != null && removeFileList.size() > 0) {

        // disk의 파일 삭제
        for (String fileName : removeFileList) {
            String path = STR."C:/Temp/prj2/\{board.getId()}/\{fileName}";
            File file = new File(path);
            file.delete();

            // db records 삭제
            mapper.deleteFileByBoardIdAndName(board.getId(), fileName);
        }
    }


    mapper.update(board);
}

• 파일을 삭제하기 위해서는 컴퓨터와 DB에 저장되어 있는 파일을 삭제해야 합니다.
• 만약 삭제할 파일이 있다면 disk 경로를 찾아 파일을 삭제시키고 DB에도 삭제시킵니다.

BoardMapper.java

@Delete("""
        DELETE FROM board_file WHERE board_id=#{boardId} AND name=#{fileName}
        """)
int deleteFileByBoardIdAndName(Integer boardId, String fileName);

• board의 id와 파일명(name)을 삭제하는 쿼리를 작성합니다.

BoardEdit.jsx(React)

function handleRemoveSwitchChange(name, checked) {
  if (checked) {
    // 체크 되면 파일 삭제할 배열에 추가
    setRemoveFileList([...removeFileList, name]);
  } else {
    // 지울 목록에 있었다면 해당 이름 제외
    setRemoveFileList(removeFileList.filter((item) => item !== name));
  }
}

<Switch
    onChange={(e) =>
    handleRemoveSwitchChange(file.name, e.target.checked)
  }
/>

• Switch 버튼을 활성화 시키면 해당 파일을 removeFileList에 넣고 그렇지 않으면 removeFileList 배열을 순회하며, item이 name과 일치하지 않는 요소만 남겨 setRemoveFileList로 상태를 업데이트합니다.

axios.putForm("/api/board/edit", {
        id: board.id,
        title: board.title,
        content: board.content,
        removeFileList,
      })

• 저장 버튼을 누르면 게시물의 id, title, content와 파일 삭제 목록을 서버에게 넘겨줍니다.
• 나중에 새 그림 추가시 JSON 형식으로 넘겨야 하기 때문에 putForm으로 요청합니다.

🟦 수정 페이지에서 새 파일 추가하기

BoardController.java

@PutMapping("edit")
@PreAuthorize("isAuthenticated()")
public ResponseEntity edit(Board board,
                           @RequestParam(value = "removeFileList[]", required = false)
                           List<String> removeFileList,
                           @RequestParam(value = "addFileList[]", required = false) MultipartFile[] addFileList,
                           Authentication authentication) throws IOException {
    if (!service.hasAccess(board.getId(), authentication)) {
        return ResponseEntity.status(HttpStatus.FORBIDDEN).build();
    }

    if (service.validate(board)) {
        service.edit(board, removeFileList, addFileList);
        return ResponseEntity.ok().build();
    } else {
        return ResponseEntity.badRequest().build();
    }
}

• 새로운 파일을 추가 하기 위해서 addFileList를 받아서 서비스에서 파일을 추가하도록 합니다.

BoardService.java

public void edit(Board board, List<String> removeFileList, MultipartFile[] addFileList) throws IOException {
    
		~~~
    if (addFileList != null && addFileList.length > 0) {
        List<String> fileNameList = mapper.selectFileNameByBoardId(board.getId());
        for (MultipartFile file : addFileList) {
            String fileName = file.getOriginalFilename();
            if (!fileNameList.contains(fileName)) {
                // 새 파일이 없을 때만 새 파일 DB에 추가
                mapper.insertFileName(board.getId(), fileName);
            }
            // disk에 쓰기
            String dir = STR."C:/Temp/prj2/\{board.getId()}";
            File dirFile = new File(dir);
            if (!dirFile.exists()) {
                dirFile.mkdirs();
            }

            String path = STR."C:/Temp/prj2/\{board.getId()}/\{fileName}";
            File destination = new File(path);
            file.transferTo(destination);
        }
    }
    mapper.update(board);
}

• 추가된 파일 목록이 있다면 먼저 그 파일이 있는지 조회하고 해당 파일이 없다면 DB에 추가해줍니다.
• 컴퓨터(disk)에 파일을 추가하거나 덮어씁니다.

BoardEdit.jsx(React)의 전체 코드

export function BoardEdit() {
  const { id } = useParams();
  const [board, setBoard] = useState(null);
  const [removeFileList, setRemoveFileList] = useState([]);
  const [addFileList, setAddFileList] = useState([]);
  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
      .putForm("/api/board/edit", {
        id: board.id,
        title: board.title,
        content: board.content,
        removeFileList,
        addFileList,
      })
      .then(() => {
        toast({
          status: "success",
          description: `${board.id}번 게시물이 수정되었습니다.`,
          position: "bottom-right",
        });
        navigate(`/board/${board.id}`);
      })
      .catch((err) => {
        if (err.response.status === 400) {
          toast({
            status: "error",
            description: `게시물이 수정되지 않았습니다. 작성한 내용을 확인해주세요.`,
            position: "bottom-right",
          });
        }
      })
      .finally(() => {
        onClose();
      });
  }

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

  function handleRemoveSwitchChange(name, checked) {
    if (checked) {
      // 체크 되면 파일 삭제할 배열에 추가
      setRemoveFileList([...removeFileList, name]);
    } else {
      // 지울 목록에 있었다면 해당 이름 제외
      setRemoveFileList(removeFileList.filter((item) => item !== name));
    }
  }

  // file 목록 작성
  const fileNameList = [];
  for (let addFile of addFileList) {
    // 이미 있는 파일과 중복된 파일명인지 확인
    let duplicate = false;
    for (let file of board.fileList) {
      if (file.name === addFile.name) {
        duplicate = true;
        break;
      }
    }
    fileNameList.push(
      <li>
        {addFile.name}
        {duplicate && (
          <Badge ml={"10px"} colorScheme={"red"}>
            override
          </Badge>
        )}
      </li>,
    );
  }

  return (
    <Box mt={"30px"}>
      <Box>{board.id}번 게시물 수정</Box>
      <Box>
        <Box>
          <FormControl>
            <FormLabel>제목</FormLabel>
            <Input
              defaultValue={board.title}
              onChange={(e) => setBoard({ ...board, title: e.target.value })}
            />
          </FormControl>
        </Box>
        <Box mt={"30px"}>
          <FormControl>
            <FormLabel>본문</FormLabel>
            <Textarea
              defaultValue={board.content}
              onChange={(e) => setBoard({ ...board, content: e.target.value })}
            ></Textarea>
          </FormControl>
        </Box>
        <Box display={"flex"} flexWrap={"wrap"} mt={"30px"}>
          {board.fileList &&
            board.fileList.map((file) => (
              <Box
                boxSize={"210px"}
                border={"2px solid black"}
                m={3}
                key={file.name}
              >
                <Center>
                  <Box>
                    <Flex>
                      <FontAwesomeIcon icon={faTrashCan} />
                      <Switch
                        ml="10px"
                        onChange={(e) =>
                          handleRemoveSwitchChange(file.name, e.target.checked)
                        }
                      />
                      <Text ml="10px">{file.name}</Text>
                    </Flex>
                  </Box>
                </Center>
                <Center>
                  <Box>
                    <Image
                      sx={
                        removeFileList.includes(file.name)
                          ? { filter: "blur(5px)" }
                          : {}
                      }
                      borderRadius={"full"}
                      boxSize={"180px"}
                      src={file.src}
                    />
                  </Box>
                </Center>
              </Box>
            ))}
        </Box>

        <Box mt={"30px"}>
          <FormControl>
            <FormLabel>파일</FormLabel>
            <Input
              multiple={true}
              type={"file"}
              accept={"image/*"}
              onChange={(e) => {
                setAddFileList(e.target.files);
              }}
            />
            <FormHelperText color={"red"}>
              총 용량은 10MB 한 파일은 1MB를 초과할 수 없습니다.
            </FormHelperText>
          </FormControl>
        </Box>
        <Box>
          <ul>{fileNameList}</ul>
        </Box>
        <Box mt={"30px"}>
          <FormControl>
            <FormLabel>작성자</FormLabel>
            <Input defaultValue={board.writer} readOnly />
          </FormControl>
        </Box>
        <Box mt={"30px"}>
          <Button w={"100px"} 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>
  );
}