seoyun

마지막 댓글 부분이다. 댓글은 ajax를 이용해서 한다. ajax를 사용하면 비동기적으로 통신하기 때문에 페이지를 새로 고침하지 않아도 데이터를 서버로부터 받아오거나 서버에 데이터를 보낼 수 있다. 또 전체 페이지를 다시 로드하지 않고도 특정 부분만 업데이트가 가능하다. detail.html 에 댓글 관련 코드를 추가한다. board.id를 받아오는 것이 중요하다. [ detail.html ] 댓글작성 댓글번호 작성자 내용 작성시간 const commentWrite = () => { const writer = document.getElementById("commentWriter").value; const contents = document.getElementById("commentContents").va..

파일을 첨부하기 위해선 수정하고 생성할 것들이 많다. save.html에서 form에서 file을 첨부할 수 있도록 input 을 추가하고 다중 파일 처리를 위해 multiple도 써준다. [ save.html ] file: 다중 파일 처리를 위한 작업을 한다. boardFile, originalFileName, storedFileName을 List의 형태로 바꿔준다. 첨부된 파일이 있으면 fileAttached 속성을 1로 설정하고, 각 파일의 원본 파일 이릠과 저장된 파일 이름을 리스트에 담아 BoardDTO에 설정한다. 이렇게 하면 파일이 첨부되지 않은 경우에 fileAttached만 설정하고, 첨부된 경우에는 추가로 파일 이름 정보도 설정하는 방식이다. [ BoardDTO ] package tes..

BoardController의 findById 메서드에 페이징 코드를 추가한다. [ BoardController ] @GetMapping("/{id}") public String findById(@PathVariable Long id, Model model, @PageableDefault(page=1) Pageable pageable){ /* 해당 게시글의 조회수를 하나 올리고 게시글 데이터를 가져와서 detail.html에 출력 */ boardService.updateHits(id); BoardDTO boardDTO = boardService.findById(id); model.addAttribute("board", boardDTO); model.addAttribute("page", pageable.g..

index.html의 pagingReq 함수를 추가한다. [ index.html ] 글작성 글작성(링크) 글목록 페이징목록 prev ${boardList.first} boardList는 페이지네이션에 사용되는 spring data의 'Page' 객체이다. 'first' 속성은 현재 페이지가 첫 페이지인지 여부를 나타내는 속성이다. 만약 현재 페이지가 첫 페이지이면 'true'를, 그렇지 않으면 'false'를 반환한다. ? '#' : @{/board/paging(page=${boardList.number})} 삼항 연산자를 사용하여 현재 페이지가 첫 페이지면 '#' (링크가 비활성화됨)를, 그렇지 않으면 다음과 같은 페이지로 이동하는 링크를 생성한다. 타임리프의 반복문 사용하여 startPage부터 en..

[ detail.html ] 목록 수정 삭제 const updateReq = () => { console.log("수정 요청"); const id = [[${board.id}]]; location.href = "/board/update/" + id; } const deleteReq = () => { console.log("삭제 요청"); const id = [[${board.id}]]; location.href = "/board/delete/" + id; } location.href = "/board/delete/" + id; 현재 브라우저창의 위치를 /board/delete/와 서버에서 받은 id로 구성된 URL로 변경한다. BoardController에 delete 메서드를 추가한다. [ BoardC..

[ detail.html ] 목록 수정 삭제 th:inline="javascript": 시작해야 타임리프의 자바스크립트 인라인 모드를 활성화 할 수 있다. updateReq() 함수: "수정 요청"을 콘솔에 출력하고, 현재 게시글의 ID를 사용하여 '/board/update/{id}" 엔드포인트로 페이지 이동하는 함수이다. const id = [[${board.id}]] 를 통해 타임리프의 표현식을 사용하여 서버에서 전달된 게시글의 ID를 가져왔다. [[${board.id}]]: 타임리프 표현식을 사용하여 서버에서 전달된 게시글의 ID를 동적으로 삽입한다. () => {...}: 매개변수가 없는 경우 ( )는 비워둘 수 있다. 중괄호 {...} 안에는 함수의 몸체가 위치한다. 글수정은 아래의 단계로 이루..

BoardController에 findById 메서드를 추가한다. 특정 ID에 해당하는 게시글을 조회하고, 해당 게시글의 조회수를 증가시킨 후에 상세페이지(detail.html)로 이동하는 메서드이다. [ BoardController ] @GetMapping("/{id}") public String findById(@PathVariable Long id, Model model){ /* 해당 게시글의 조회수를 하나 올리고 게시글 데이터를 가져와서 detail.html에 출력 */ boardService.updateHits(id); BoardDTO boardDTO = boardService.findById(id); model.addAttribute("board", boardDTO); return "detai..

BoardController에 findAll 메서드를 추가한다. Get 요청이 / 경로로 즉, http://localhost:8092/board/ 로 들어오면 실행되는 메서드이다. 게시글의 목록을 조회하고 해당 정보를 'list.html' 템플릿에 전달한다. [ BoardController ] @GetMapping("/") public String findAll(Model model) { // DB에서 전체 게시글 데이터를 가져와서 list.html에 보여준다. List boardDTOList = boardService.findAll(); model.addAttribute("boardList", boardDTOList); return "list"; } model.addAttribute은 조회한 게시글 목..

BoardController에 PostMapping으로 게시글을 저장할 수 있게 추가한다. [BoardController] package test.SpringBootBoard.board.controller; import lombok.RequiredArgsConstructor; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.PostMapping; import org...

이제 게시글 작성 페이지를 만들어준다. 먼저 HomeController를 만든다. [ HomeController ] package test.SpringBootBoard.board.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class HomeController { @GetMapping("/") public String index(){ return "index"; } } templates 폴더에 index.html 파일도 만든다. [ index.html ] 글작성 글작성(링크) 글목록 페이징목록 http..