🤍글 상세보기 구현하기 1. Index.jsp 글 상세보기 버튼에 태그 추가 2. BoardController 작성 //글 상세보기 @GetMapping("/board/{id}") public String findById(@PathVariable int id, Model model) { model.addAttribute("board", boardService.글상세보기(id)); return "board/detail"; } 3. BoardService 작성 public Board 글상세보기(int id) { return boardRepository.findById(id) .orElseThrow(()->{ return new IllegalArgumentException("글 상세보기 실패: 아이디를 찾을 ..

✅구현 목표 게시물이 로딩된 이후 화면에서 댓글 수를 클릭하면 해당 게시물에 속한 댓글을 Ajax로 가져와서 화면에 보여줌. 특정 버튼 클릭 시 새로운 댓글을 입력할 수 있는 모달창을 보여주고 Ajax의 POST 방식으로 댓글을 전송함. 댓글 삭제, 수정은 댓글 등록과 동일하게 특정 댓글을 선택하여 모달창에서 처리함. 방식 호출 대상 파라미터 작업 반환 데이터 GET /replies/board/{bno}(게시물번호) 게시물 번호 해당 게시물의 댓글 조회 JSON 배열 POST /replies/ JSON으로 구성된 댓글 데이터 댓글 추가 추가된 댓글 번호 DELETE /replies/{rno} 댓글 번호 댓글 삭제 삭제 결과 문자열 PUT /replies/{rno} 댓글 번호+수정할 내용 댓글 수정 수정 ..

🤍연관 관계와 관계형 데이터베이스 설계 관계형 데이터베이스에서는 개체(entity)간의 관계(relation)라는 것에 대해 고민하게 됨. 일대일(1:1), 일대다(1:N), 다대일(N:1), 다대다(M:N) 관계를 이용하여 데이터가 서로 간에 어떻게 구성되었는지 표현함. 예를 들어, 회원과 게시글의 관계를 정의해보면 한 명의 회원은 여러 게시글을 작성할 수 있다. 하나의 게시글은 한 명의 회원에 의해 작성된다. 🤍게시판 프로젝트 시작 전 테스트 1. 엔티티 클래스 추가 Member Board Reply 하나의 게시글에는 여러 개의 댓글이 달릴 수 있다. -> @ManyToOne 한 명의 사용자는 여러 개의 게시글을 작성할 수 있다. -> @ManyToOne 완성된 테이블 관계도 2. Repository..

🤍방명록 검색 구현 검색을 구현하기 위해 생각해보아야 할 것 검색 기능을 구현하기 위해 PageRequestDTO에 검색 타입(type), 검색어(keyword) 추가 필요 서비스 계층에서 Querydsl 이용해서 검색 처리 검색 타입은 제목(t), 내용(c), 작성자(w)로 검색하는 경우와 제목 혹은 내용(tc), 제목 혹은 내용 혹은 작성자(twc)로 검색하는 경우가 있다. 1. PageRequestDTO 수정 2. 서비스 코드 작성 PageRequestDTO를 파라미터로 받아 검색 조건(type)이 있을 시 conditionBuilder 변수를 생성해서 검색 조건을 or로 연결해서 처리함. 검색 조건이 없을 시 'gno>0'으로만 생성됨. 3. 검색 조건을 처리하기 위해 목록 getList() 메소..

🤍1. 방명록 조회 구현 1. 서비스단 코드 작성 findById를 통해 만일 엔티티 객체를 가져왔다면 entityToDto를 이용해 엔티티 객체를 DTO로 변환해서 반환함. 2. 컨트롤러 코드 작성 Model에 GuestDTO 객체를 담아서 전달하도록 코드를 작성한다. 3. 조회 화면 read.html 작성 읽기만 할 수 있도록 readonly 속성 적용 4. 게시글 목록 클릭 시 조회 페이지로 이동하도록 list.html 수정 [[${dto.gno}]] 5. 조회 구현 완료 🤍2. 방명록 수정, 삭제 구현 수정은 POST 방식으로 처리하고 다시 수정된 결과를 확인할 수 있는 조회(read.html) 화면으로 리다이렉트시킴. 삭제는 POST 방식으로 처리하고 목록 화면으로 리다이렉트시킴. 목록 이동 작..

✅일반 변수의 선언 방식 let num = 1; num = 2; ✅useState 선언 방식 let [num, setNum] = useState(1); setNum(2); ✅useState 사용 시 주의할 점 상단에 정의할 것 바로 실행하지 말 것 반복문 안에 정의하지 말 것 if문 안에 정의하지 말 것 🤍버튼을 눌렀을 때 1씩 증가하는 기능을 구현하고 싶을 때 아래와 같이 코드를 짜고 실행해 보면 버튼을 눌렀을 때 아무런 변화가 없으나 console.log(num); 을 찍어보면 1씩 증가하고 있는 것을 확인할 수 있다. 이때 useState()를 활용할 수 있다. 실행해 보면 버튼을 누를 때마다 1씩 증가하는 것을 확인할 수 있다. useState를 사용하면 -> setNum이라는 함수를 사용했을 때..

🤍React.js 구조 build : 빌드 시 생성되는 디렉토리 node_modules : 리액트 실행에 필요한 모듈 디렉토리 public : 정적 파일 디렉토리 src : 프로젝트 source 디렉토리 🤍React.js 변수 적용 기존 자바스크립트에서 태그 안에 변수를 적용할 때에는 아래와 같은 코드가 필요했다. 하지만 리액트에서 변수를 적용할 때에는 이렇게 {변수명} 간단한 방법으로 변수를 적용할 수 있다. let name = 'hancoding'; {name} 실제 크롬에서 확인해 봐도 태그 안에 hancoding이 들어간 것을 확인할 수 있다.

🤍게시판 글 상세 조회 구현 글 조회 컨트롤러 코드 작성 @GetMapping("/board/view") //localhost:8080/board/view?id=1 public String boardView(Model model, Integer id){ model.addAttribute("bootboard",boardService.boardView(id)); return "boardview"; } 글 조회 화면 boardview.html 작성 제목입니다. 내용입니다. 글 조회 서비스 코드 작성 //특정 게시글 불러오기 public Bootboard boardView(Integer id){ return boardRepository.findById(id).get(); } 글 목록에서 제목을 클릭했을 때 상세..