Spring Boot에서 ajax 사용하기 (항해일지 13일차)

김형준·2022년 5월 21일
0

TIL&WIL

목록 보기
13/45

✔클릭! 구현 코드 GitHub


1. 개발 및 학습 일지


1) API 명세서

  • 오늘은 스프링 입문 강의 3주차 타임라인 웹 구현 강의를 수강했다.
  • 익명의 유저가 메모를 남기면, 최신순의 메모 리스트를 출력하는 메인화면에 추가된다.
  • CRUD 기능 모두 구현하며, 현재 시점을 기준으로 24시간 전 까지의 메모만을 보여준다.
  • Method는 POST/GET/PUT/DELETE 4가지를 사용했다.

2) 구현 과정


domain

  • 이번 웹은 선 구현 후 수강 방식으로 진행했고 아래는 내가 구현했던 과정들을 기술했다.
  • 제일 먼저 main_java 아래 domain, controller, service 패키지를 생성한다.
  • 다음으로 Entity를 설계하며 필요한 멤버변수 및 메서드를 정의하고, @Entity / @Getter / @NoArgsConstructor 등 필수 어노테이션을 붙여준다.
  • 생성 및 수정 시간을 저장해줄 Timestamped 클래스 생성한다.
  • Timestamped에는 @MappedSuperclass / @EntityListeners / @CreatedDate / @LastModifiedDate 등의 생소한 어노테이션들이 있었기 때문에 이전 프로젝트에서 그대로 복사해왔다.
@Getter // private일 때는 Getter 꼭 써줘야한다!
@MappedSuperclass // Entity가 자동으로 컬럼으로 인식합니다.
@EntityListeners(AuditingEntityListener.class) // 생성/변경 시간을 자동으로 업데이트합니다.
public class Timestamped {

    @CreatedDate
    private LocalDateTime createdAt;

    @LastModifiedDate
    private LocalDateTime modifiedAt;
}
  • Memo클래스에서 Timestamped 클래스를 상속받는다.
  • Memo의 정보를 담고 움직일 MemoRequestDto 클래스 생성 후 멤버변수 선언한다.
  • JPA를 사용하기 위해 MemoRepository 클래스를 생성하고 JpaRepository<Memo, Long>를 상속받는다.
  • 여기까지가 domain 패키지의 틀이다.

controller

  • controller 패키지에는 MemoController 클래스를 생성하고 @RestController / @RequiredArgsConstructor를 붙여준다.
  • 후자 어노테이션은 컨트롤러에서 사용할 Repository와 Service를 반드시 생성하기 위해 final을 붙였기 때문에 필수이다!
  • API 명세를 참고하며 @PostMapping / @GetMapping / @PutMapping / @DeleteMapping의 메서드를 구현한다.
  • 이 때, PutMapping의 경우 update 기능은 Service에서 구현할 것이기 때문에 비워둔다.
  • 나머지 메서드는 Repository를 사용하여 JPA 코드로 구현한다.

service

  • MemoService 클래스를 생성하여 update 메서드를 구현한다.
  • 이 때 처음 마주한 고비는, 당연히 JPA를 사용하여 DB의 값을 변경하는줄 알았는데, 강의에서는 @Transactional 어노테이션을 사용하여 해당하는 인스턴스의 변수 값을 바꿔주며 DB에 자동으로 반영되는 방식을 사용했다.
  • 만약 DB의 값을 수정한다고 했을 때에도, 해당 인스턴스를 불러와 Setter를 통해 값을 변경하고 이를 다시 repository.save()를 통해 저장했을 것이다.
  • 단순히 방법의 차이인가 궁금하다!

HTML, CSS, JavaScript

  • 이 부분은 이미 구현된 부분을 가져와서 내부 함수 로직만 구현했다.
  • JQuery, ajax를 사용하여 데이터를 가져오는 코드 구현이 대부분이었다.
  • ARC로 테스트할 때 입력했던 Type, url, Content-Type 등을 코드로 작성한다는 점과, response로 받아온 데이터를 html에 담아주는 정도를 구현했다.

JPA

  • 마지막 구현 과제 중에 현재 시점을 기준으로 24시간 이내의 메모만을 조회하는 부분은 JPA를 통해 구현한다.
  • Repository에 정의한 메서드명에 Between을 추가하여 파라미터로 DateTime을 받아온다.
// Repository interface 메서드 구현 부분
public interface MemoRepository extends JpaRepository<Memo, Long> {
    // Memo class가 Timestamped를 상속받고 있기 때문에 ModifiedAt을 사용할 수 있는 것이다.
    // AtBetween을 추가해줌.
    List<Memo> findAllByModifiedAtBetweenOrderByModifiedAtDesc(LocalDateTime startDate, LocalDateTime endDate);
}
  • Controller의 @GetMapping 메서드에서 현재 시간과 24시간 전 시간을 start, end 시간으로 넘겨 해당 시간대의 메모만을 찾아온다.
@GetMapping("/api/memos")
    public List<Memo> readMemo(){
    // 시작 시간은 24시간 전, 마지막 시간은 현재시점.
        LocalDateTime start =  LocalDateTime.now().minusDays(1);
        LocalDateTime end = LocalDateTime.now();
        // 파라미터로 넘겨준다.
        return memoRepository.findAllByModifiedAtBetweenOrderByModifiedAtDesc(start, end);
    }
  • 구현 끝!!

2. 코멘트

  • 오늘은 개인 사정으로 오후 4시부터 공부를 시작했지만 그래도 3주차까지 내 것으로 만들 수 있었다.👍
  • 내일은 황금같은 일요일이지만 오늘 늦게 공부한만큼은 보충해야지
  • 오늘도 고생 많았고 내일 WIL 작성하며 한 주 마무리 잘하길..
profile
BackEnd Developer

0개의 댓글