메모 조회하기 - GetMessage 함수

개발 스펙 확인

- 기존 메모 제거하기 (전에 로드된 메모 제거)

- GET API 사용해서 메모 목록 불러오기

- 메모마다 HTML 만들고 붙이는 함수 만들기

 

 

기존 메모 제거하기

1. 개발자 도구를 통해 id값 확인

- card-box 임을 확인할 수 있음.

 

2. jQuery를 이용하여 기존 메모를 제거한다.

$('#cards-box').empty();

 

3. 이 함수는 HTML문서를 로드할 때마다 실행해야 하기 때문에 ready 함수 안에 실행되도록 한다.

      $(document).ready(function () {
            // HTML 문서를 로드할 때마다 실행
            getMessages();
        })

 

4. Temp 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>`;

 

5. HTML 넣어주기

$('#cards-box').append(tempHtml);

 

확인

 

getMessage함수 전체코드

        // 메모를 불러와서 보여줌.
        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로 만들어서 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" 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);
        }

            // 메모를 생성합니다.
            function writePost() {
                // 1. 작성한 메모를 불러온다.
                let contents = $('#contents').val();
                // 2. 작성한 메모가 올바른지 isValidContents 함수를 통해 확인
                if (isValidContents(contents) == false) {
                    return;
                }
                // 3. genRandomName 함수를 통해 익명의 username을 만듬.
                let username = genRandomName(10);
                // 4. 전달할 data JSON으로 만듬.
                let data = {'username': username, 'contents': contents};
                // 5. POST /api/memos 에 data를 전달.
                $.ajax({
                    type: "POST",
                    url: "/api/memos",
                    contentType: "application/json", // JSON 형식으로 전달함을 알리기
                    data: JSON.stringify(data), // ARC의 Body 부분
                    success: function (response) {
                        alert('메시지가 성공적으로 작성되었습니다.');
                        window.location.reload();
                    }
                });
            }