2. 익명의 메모장 - 클라이언트 구축 (스프링부트)

API설계(CRUD) URL은 복수형으로..

---

클라이언트 구축 ↓

---

클라이언트에서 필요한 기능정리

1. 접속하자마자 메모 전체 목록 조회

• GET API 사용해서 메모 목록 불러오기
• 메모 마다 HTML 만들고 붙이기

2. 메모 생성

• 사용자가 입력한 메모내용 확인
• POST API 사용해서 메모 신규 생성
• 화면 새로고침하여 업데이트 된 메모 목록 확인

3. 메모 변경

• 사용자가 클릭한 메모가 어떤 것인지 확인
• 변경한 메모 내용 확인
• PUT API 사용해서 메모 내용 변경
• 화면 새로고침하여 업데이트 된 메모 목록 확인

4. 메모 삭제

• 사용자가 클릭한 메모가 어떤 것인지 확인
• DELETE API 사용해서 메모 삭제
• 화면 새로고침하여 업데이트 된 메모 목록 확인

---

[메모 생성하는 부분]

1. 사용자가 입력한 메모내용 확인
2. POST API 사용해서 메모 신규 생성
3. 화면 새로고침하여 업데이트 된 메모 목록 확인

index.html

• 사용자가 입력한 메모 내용을 일단 가져오기 #contents = 메모입력 하는 곳의 id // .val() - 불러오기

// 메모를 생성합니다.
function writePost() {
    // 1. 작성한 메모를 불러옵니다.
    let contents = $('#contents').val();
}

---

• isValidContents 함수(아래참고)에서 True 인지 확인 => 내용입력, 글자수 제한 확인

    // 2. 작성한 메모가 올바른지 isValidContents 함수를 통해 확인합니다.
    if (isValidContents(contents) == false) {
        return;
    }
   

// 사용자가 내용을 올바르게 입력하였는지 확인합니다.
        function isValidContents(contents) {
            if (contents == '') {
                alert('내용을 입력해주세요');
                return false;
            }
            if (contents.trim().length > 140) {
                alert('공백 포함 140자 이하로 입력해주세요');
                return false;
            }
            return true;
        }

---

• genRandomName 함수(아래참고) -> 길이값을 받아서 익명의 문자열을 길이값만큼 만들어줌

	// 3. genRandomName 함수를 통해 익명의 username을 만듭니다.
    let username = genRandomName(10);

// 익명의 username을 만듭니다.
        function genRandomName(length) {
            let result = '';
            let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let charactersLength = characters.length;
            for (let i = 0; i < length; i++) {
                let number = Math.random() * charactersLength;
                let index = Math.floor(number);
                result += characters.charAt(index);
            }
            return result;
        }

---

• 전달할 data를 JSON으로 만듬 { key : value }

    // 4. 전달할 data JSON으로 만듭니다.
    let data = {'username': username, 'contents': contents};

---

• Post API 사용해서 신규 메모 생성 ajax -> JQuery 사용 

    // 5. POST /api/memos 에 data를 전달합니다.
    $.ajax({
        type: "POST",
        url: "/api/memos",
        contentType: "application/json",  // 너가 받을 문자열은 json형태니까 그거로 번역해!
        data: JSON.stringify(data), // JSON문자열로 변환(위에서 JSON으로 만들어 준 것)
        success: function (response) {
            alert('메시지가 성공적으로 작성되었습니다.');
            window.location.reload();
        }
    });
}

---

[메모 조회하는 부분]

1. 기존 메모 제거(DB에서 말고 HTML 내용을 지우고 데이터 새로 받아와서 보여주는 의미) 
2. GET API 사용해서 메모 목록 불러오기
3. 메모마다 HTML 만들고 붙이는 함수 만들기

index.html

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'];
                        let username = memo['username'];
                        let contents = memo['contents'];
                        let modifiedAt = memo['modifiedAt'];
                        addHTML(id, username, contents,modifiedAt);
                    }
                }
            })

        }

• html에서 기존 메모가 보이는 div 부분의 id값 = cards-box
• response에 담긴 데이터를 리스트형태이므로 for문을 통해 하나하나 꺼내서 HTML에 붙이기.넘겨주기(아래참고)

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" class="icon-start-edit" src="images/edit.png" alt="" onclick="editPost('${id}')">
                                    <img id="${id}-delete" class="icon-delete" src="images/delete.png" alt="" onclick="deleteOne('${id}')">
                                    <img id="${id}-submit" class="icon-end-edit" src="images/done.png" alt="" onclick="submitEdit('${id}')">
                                </div>
                            </div>`;
            // 2. #cards-box 에 HTML을 붙인다.
            $('#cards-box').append(tempHtml);
        }

 

• modifiedAt이 호출되려면 Timestamped에서 Getter설정을 해줘야 함!!
  (+서버 Application.java에 @EnableJpaAuditing 있어야함 - JPA에 관한 변동사항이 반영)
• HTML태그 만들 땐 `` 백틱 사용, ${} 사용해야 데이터 값 들어감

---

[메모 변경하는 부분]

1. 작성 대상 메모의 작성자와 내용을 확인 (username, contents)
2. 작성한 메모가 올바른지 확인(작성길이)
3. 전달할 data를 JSON으로 바꾸기
4. PUT /api/memos/{id} 에 data 전달

작성된 메모 영역과 편집할 때 메모 영역의 id값이 다름!!!

function submitEdit(id) {
                // 1. 작성 대상 메모의 username과 contents 를 확인합니다.
                let username = $(`#${id}-username`).text().trim();
                let contents = $(`#${id}-textarea`).val().trim();

• username은 읽기모드로 text로 박혀 있는 부분은 .text()로 가져와야 함 , trim() - 앞 뒤 공백제거
• contents에서 가져오는 id값은 편집영역에 있는 id값으로 ...(id-textarea) (상단그림 참고)

---

// 2. 작성한 메모가 올바른지 isValidContents 함수를 통해 확인합니다.
                if (isValidContents(contents) == false) {
                    return;
                }
                // 3. 전달할 data JSON으로 만듭니다.
                let data = {'username': username, 'contents': contents};
                // 4. PUT /api/memos/{id} 에 data를 전달합니다.
                $.ajax({
                    type: "PUT",
                    url: `/api/memos/${id}`,
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    success: function (response) {
                        alert('메시지 변경에 성공하였습니다.');
                        window.location.reload();
                    }
                });
            }

• 메모 올바른지 확인하고 JSON으로 만들고 PUT으로 data 전달 (메모 생성부분과 동일)

---

[메모 삭제하는 부분]

1. DELETE API 사용해서 메모 삭제

function deleteOne(id) {
                // 1. DELETE /api/memos/{id} 에 요청해서 메모를 삭제합니다.
                $.ajax({
                    type: "DELETE",
                    url: `/api/memos/${id}`,
                    success: function (response) {
                        alert('메시지 삭제에 성공하였습니다.');
                        window.location.reload();
                    }
                })
            }
        }

• url 에서 ${id}처럼 id로 구별할 때는 ``백틱으로 꼭!

---

[+ 24시간 이내의 메모만 나오게 하기 설정]

1. spring jpa localtime between
2. 지금시간 LocalDateTime.now(), 하루 전은 LocalDateTime.now().minusDays(1) 

MemoRepository.java

public interface MemoRepository extends JpaRepository<Memo, Long> {
    List<Memo> findAllByModifiedAtBetweenOrderByModifiedAtDesc(LocalDateTime start, LocalDateTime end);       
  

}

• findAllBy ModifiedAtBetween OrderByModifiedAtDesc
• 수정시간 기준으로 (지금시간의 하루전, 지금시간);

MemoController.java

 @GetMapping("/api/memos")
    public List<Memo> getMemos() {
        LocalDateTime start = LocalDateTime.now().minusDays(1);
        LocalDateTime end = LocalDateTime.now();
        return memoRepository.findAllByModifiedAtBetweenOrderByModifiedAtDesc(start, end);
    }

• start, end 변수 설정 (현재시간, 하루전)