도전하는 얼뚱이

동기 처리는 페이지를 이동하는 시점에 주소(URL)가 변경되어 새로고침 시 파라미터가 유지된다.하지만 Ajax(비동기 처리)는 페이지 번호에 해당되는 데이터를 조회는 하되 주소는 변경되지 않아, 새로고침해도 파라미터가 유지되지 않는다. 그래서 Histroy API를 이용해 URI를 강제로 변경하여 비동기 페이지 처리 새로고침을 유지하도록 해보자.  Ajax 페이징의 새로고침 문제 해결하기 History API 란? 사용자가 어떤 페이지에 접근하면 브라우저에 세션 기록이 쌓임.이 세션에 접근할 수 있도록 하는 것이 브라우저의 history 객체이다.자바스크립트에서 history 객체를 이용하여 페이지를 이동할 수 있게 할 것이다. 아래는 주로 사용되는 메서드이다.// 현재 페이지를 기준으로 뒤로 이동his..

비동기식 댓글 페이징 구현하기  jQuery의 Ajax를 이용해서 화면의 움직임 없이 페이지를 이동하도록 처리해 보자. 1)  댓글 조회용 DTO 클래스 생성 CommentSearchDto.javapackage com.study.domain.comment;import com.study.common.dto.SearchDto;import lombok.Getter;import lombok.Setter;@Getter@Setterpublic class CommentSearchDto extends SearchDto { private Long postId; // 게시글 번호 (FK)} 게시글과 마찬가지로 SearchDto의 멤버 변수들을 이용해 페이징을 적용한다.조금 다른 점은 댓글은 tb_comment ..

댓글 삭제 기능 구현하기 1) 댓글 컨트롤러에 메서드 추가하기 CommentApiController.java // 댓글 삭제 @DeleteMapping("/posts/{postId}/comments/{id}") public Long deleteComment(@PathVariable final Long postId, @PathVariable final Long id) { return commentService.deleteComment(id); } 특정 게시글(postId)에 등록된 모든 댓글 중 PK(id)에 해당되는 댓글을 삭제한다. 삭제 프로세스가 완료되면 삭제된 댓글의 PK(id)를 리턴한다.   2) 상세 페이지에 findAllComment() 함수 수정하기 vie..

기존 댓글 수정 기능 구현하기 모달(Modal)이라고 불리는 레이어 팝업(Layer Popup)을 이용해보자. 1) 댓글 API 컨트롤러에 메서드 추가하기 CommentApiController.java // 댓글 상세정보 조회 @GetMapping("/posts/{postId}/comments/{id}") public CommentResponse findCommentById(@PathVariable final Long postId, @PathVariable final Long id) { return commentService.findCommentById(id); } // 기존 댓글 수정 @PatchMapping("/posts/{postId}/comments/{..

댓글 목록 조회 기능 구현 특정 게시글에 등록된 댓글을 출력하는 기능을 구현해보자. 게시글의 경우, 게시글이 생성/수정/삭제되는 시점에 리스트 페이지로 리다이렉트 하도록 처리했다.이와 달리 댓글은 생성/수정/삭제된 시점에 페이지를 이동하거나 새로고침 하지 않고, 테이블에서 SELECT 한 결과 데이터를 댓글 영역에 다시 렌더링 할 것이다. 1) 댓글 API 컨트롤러 메서드 추가하기 CommentApiController.java // 댓글 리스트 조회 @GetMapping("/posts/{postId}/comments") public List findAllComment(@PathVariable final Long postId) { return commentService.find..

댓글 등록 기능을 구현하기 앞서, @RestController 어노테이션과 jQuery의 Ajax를 이용하여 어떠한 화면 동작 없이 데이터를 주고받는 비동기 처리에 대해 알아보자. REST API 설계 규칙 HTTP 메서드: CRUD 작업은 다음의 HTTP 메서드를 사용하여 수행된다.GET: 자원의 조회POST: 자원의 생성PUT: 자원의 전체 수정PATCH: 자원의 부분 수정DELETE: 자원의 삭제자원(Resource)자원은 REST API의 핵심 개념으로, 특정 데이터를 나타낸다. 예를 들어, 사용자, 게시글, 댓글 등이 자원이 될 수 있다. 각 자원은 고유한 URI로 식별됨.REST API에서는 자원을 표현할 때 꼭 명사를 사용해야 한다. ex)  댓글 등록 - 메서드: POST , 올바른 표현:..

REST API 알아보기  이번에는 동기 방식인 기본 게시글 처리와 달리 REST API를 이용하여 댓글 기능을 구현할 것이다. REST (Representational State Transfer) 란?하나의 URI가 하나의 고유한 리소스를 대표하도록 설계된다는 개념이다. 여기서 리소스는 사용자가 접근하려는 모든 것(예: 사용자, 제품, 주문 등)을 말한다. 여태까지는 게시판을 구현할 때 컨트롤러에서 서비스를 호출하고, 사용자가 요청한 데이터를 화면에 전달한 후 HTML을 리턴하는 방식으로 진행했었다. 이와 달리 REST API는 사용자가 어떤 요청을 했을 때 HTML을 리턴하는 것이 아닌, 자바스크립트를 이용하여 사용자가 필요로 하는 데이터만을 리턴해주는 방식이다. REST 방식의 데이터 처리 테스트 ..

페이징 기능 구현하기 페이징(Paging)이란?사용자에게 데이터를 보일 때, 전체 데이터 중 일부만 보여주는 방식이다. 만약 등록된 게시글이 100,000 개라고 가정할 때, 이 모든 게시글을 한 번에(한 페이지에) 다 출력하려고 하면로딩 속도도 느려지고, 필요한 게시글을 찾기가 매우 어려워질 것이다. 이러한 문제점을 해결하기 위한 기능이 페이징, 검색 기능이다.더보기- GPT가 설명해준 게 도움이 돼서 긁어옴 -페이징은 컴퓨터 메모리 관리 기술 중 하나로, 프로그램이 필요로 하는 데이터를 효율적으로 처리하기 위해 사용됩니다. 이를 아주 쉽게 설명하자면, 큰 책을 읽는 상황을 생각해보세요.큰 책과 작은 책장: 집에 큰 책(프로그램 전체) 하나가 있지만, 책장을 작게 만들어서 책의 일부만 올려놓을 수 있다..

AOP(Aspect Oriented Programming)란? "관점 지향 프로그래밍"을 뜻하며 이는 소프트웨어 개발 방법 중 하나로, 자바와 같은 객체 지향 프로그래밍(OOP)을 더욱 OOP 답게 사용할 수 있도록 도와주는 역할을 한다.  프로그램의 특정 부분에 공통적으로 적용되어야 하는 기능이나 로직을 별도로 분리하여 관리하는 것을 목표로 하는 것! 프로그램에 여러 가지 기능이 있는데 그 각각의 기능마다 로그를 남기거나, 에러를 처리하거나, 보안을 체크하는 등의 공통적인 코드들이 있을 것이다. 이런 공통 기능을 "관점(Aspect)"으로 분리하여 관리하게 된다. 관점도 '핵심적인 관점' 과 '부가적인 관점'으로 나뉘는데, 전자는 주요 기능 부분을 말하고 후자는 공통적으로 발생하는 기능이나 문제, 즉 ..

인터셉터 처리하기  인터셉터란? 스프링에서 제공해주는 기능 중 하나로, 컨트롤러의 메서드에 접근하는 과정에서 무언가를 채갈 때(제어할 때) 사용하는 기능이다.  예를 들어, 회원제 커뮤니티라고 가정하면 로그인 회원만 접근 할 수 있는 권한을 주는 로직이 필요한데이를 인터셉터를 이용하여 효율적으로 처리할 수 있다. 1) HandlerInterceptor를 이용해서 인터셉터 구현하기 인터셉터는 HandlerInterceptor 인터페이스를 implements 하여 구현할 수 있다.  해당 인터페이스는 preHandle( ), postHandle( ),  afterCompletion( ) 총 세 개의 추상 메서드를 포함한다.여기서는 preHandle()과 postHandle() 메서드만 구현한다.  해당 클래..