타임라인서비스) 메모 조회하기 - getMessages 함수

[개발 스펙 확인]

1. 기존 메모 제거하기
2. GET API 사용해서 메모 목록 불러오기
3. 메모마다 HTML 만들고 붙이는 함수 만들기

빨간 네모 영역이 div#cards-box

ajax에서 데이터를 가져온 결과. response 변수를 콘솔에 출력해보면 이런 식으로 생김. 백단에서 List<memo>를 반환하는 값을 가져온 것

* 하지만, 입력일과 수정일 날짜데이터가 안보인다..!!

어떻게 된거지?!!!!!?!?!??!?!

 

Timestamp와 Week03Applicaion 파일에 뭔가를 빼먹었다

https://nazero.tistory.com/20

타임라인서비스) Repository 만들기

여기에 적은 Timestamped.java에 @Getter를 빼먹어서 데이터를 못 가져오고 있었음!!

/*Timestamped.java*/

package com.sparta.week03.domain;

...

@Getter //private인 멤버변수를 조회하려면 필요함..!!!
@MappedSuperclass
@EntityListeners(AuditingEntityListener.class)
public abstract class Timestamped {
    @CreatedDate
    private LocalDateTime createdAt;

    @LastModifiedDate
    private LocalDateTime modifiedAt;
}

Week03Application.java에서는 @EnableJpaAuditing을 빼먹었음

Spring에게 JPA를 사용한다는 것을 알려줘야함!!

/*Week03Application.java*/

package com.sparta.week03;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.data.jpa.repository.config.EnableJpaAuditing;

@EnableJpaAuditing //데이터 변동이 있으면 JPA가 알아서 반영하도록 해주는 것!!!!!
@SpringBootApplication
public class Week03Application {

    public static void main(String[] args) {
        SpringApplication.run(Week03Application.class, args);
    }

}

 

* Timestamp에 @Getter, Application에 @EnableJpaAuditing 추가하는게 중요함!! *

 

빼먹은 어노테이션을 추가한 뒤 다시 확인해 본 결과 생성일 수정일 데이터가 정상적으로 넘어옴

        function getMessages() {
            // 1. 기존 메모 내용을 지웁니다.
            $("#cards-box").empty();
            // 2. 메모 목록을 불러와서 HTML로 붙입니다.
            $.ajax({
            	type: "GET",
                url: "/api/memos",
                success: function(response) {
                	for(let i=0; i<response.length; i++) {
                    	let memo = response[i];
                        let id = memo.id; //memo["id"]
                        let username = memo.username; //memo["username"]
                        let contents = memo.contents; //memo["contents"]
                        let modifiedAt = memo.lastModified; //memo["lastModified"]
                        addHTML(id, username, contents, modifiedAt);
                        
                    }
                }
            });
        }

        // 메모 하나를 HTML로 만들어서 body 태그 내 원하는 곳에 붙입니다.
        function addHTML(id, username, contents, modifiedAt) {
            // 1. HTML 태그를 만듭니다.
            let tempHtml = 
            `<div class="card">
                <!-- date/username 영역 -->
                <div class="metadata">
                    <div class="date">
                        ${modifiedAt}
                    </div>
                    <div id="${id}-username" class="username">
                        ${username}
                    </div>
                </div>
                <!-- contents 조회/수정 영역-->
                <div class="contents">
                    <div id="${id}-contents" class="text">
                        ${contents}
                    </div>
                    <div id="${id}-editarea" class="edit">
                        <textarea id="${id}-textarea" class="te-edit" name="" id="" cols="30" rows="5"></textarea>
                    </div>
                </div>
                <!-- 버튼 영역-->
                <div class="footer">
                    <img id="${id}-edit" onclick="editPost('${id}')" class="icon-start-edit" src="images/edit.png" alt="">
                    <img id="${id}-delete" onclick="deleteOne('${id}')" class="icon-delete" src="images/delete.png" alt="">
                    <img id="${id}-submit" onclick="submitEdit('${id}')" class="icon-end-edit" src="images/done.png" alt="">
                </div>
            </div>`;
            // 2. #cards-box 에 HTML을 붙인다.
            $("#cards-box").append(tempHtml);
        }