[웹개발의 봄, Spring] 3주차 개발일지(2) - Timeline Service 클라이언트

 

[웹개발의 봄, Spring] 3주차 개발일지(1) - Timeline Service 서버

 

 

 

클라이언트 설계 및 구현

💡 클라이언트 설계

Timeline Service에 필요한 기능은 다음과 같다. 

1. 메모 조회하기
   - 처음 웹사이트에 접속했을 때, 새로고침을 했을 때 작동
   1) GET API 사용해서 메모 목록 불러오기
   2) 메모마다 HTML 만들고 붙이기
2. 메모 생성하기
   - 사용자가 메모 작성 버튼을 클릭했을 때 작동
   1) 사용자가 입력한 메모 내용 확인하기
   2) POST API 사용해서 메모 신규 생성하기
   3) 화면 새로고침하여 업데이트된 메모 목록 확인하기
3. 메모 변경하기
   - 사용자가 특정 메모의 수정 버튼을 클릭했을 때 작동
   1) 사용자가 클릭한 메모가 어떤 것인지 확인하기
   2) 변경한 메모 내용 확인하기
   3) PUT API 사용해서 메모 내용 변경하기
   4) 화면 새로고침하여 업데이트된 메모 목록 확인하기
4. 메모 삭제하기
   - 사용자가 특정 메모의 삭제 버튼을 클릭했을 때 작동
   1) 사용자가 클릭한 메모가 어떤 것인지 확인하기
   2) DELETE API 사용해서 메모 삭제하기
   3) 화면 새로고침하여 업데이트된 메모 목록 확인하기

 

 

💡 메모 생성하기 - writePost 함수

// 메모를 생성합니다.
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",
        data: JSON.stringify(data),
        success: function (response) {
            alert('메시지가 성공적으로 작성되었습니다.');
            window.location.reload();
        }
    });
}

 

 

💡 메모 조회하기 - getMessages, addHTML 함수

// 메모를 불러와서 보여줍니다.
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 message = response[i];
                let id = message['id'];
                let username = message['username'];
                let contents = message['contents'];
                let modifiedAt = message['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);
}

 

💡 메모 변경하기 - submitEdit 함수

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

    // 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();
        }
    });
}

 

 

💡 메모 삭제하기 - deleteOne 함수

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

 

 

💡전체 소스 코드 확인

https://github.com/mjmjmj9840/Sparta-Spring-Basic/tree/main/week03

mjmjmj9840/Sparta-Spring-Basic

 

 

 

 

 

 

 

참고 자료: 스파르타코딩클럽 웹개발의 봄, Spring 3주차 강의자료