[스파르타 코딩 클럽] Spring 3주차 개발일지 - Spring 을 사용해 Memo 웹페이지 구현

1. Memo 클라이언트 설계

타임라인 API

기능	Method	URL	Return
메모 생성	POST	/api/memos	Memo
메모 조회	GET	/api/memos	List<Memo>
메모 변경	PUT	/api/memos/{id}	Long
메모 삭제	DELETE	/api/memos/{id}	Long

필요 기능

1. 메모 생성

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

2. 메모 목록 조회

GET API 사용해서 메모 목록 호출
메모 마다 HTML 생성

3. 메모 변경

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

4. 메모 삭제

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

2. 메모 생성 - wirtePost 함수

개발 스펙 확인

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

사용자가 메모칸에 입력한 메모 내용 확인

let contents = $('#contents').val();

작성 내용 확인

if (isValidContents(contents) == false) {
    return;
}

랜덤한 유저 이름 생성

let username = genRandomName(10);

전달할 data 를 JSON 으로 만들기

let data = {'username': username, 'contents': contents};

POST API 사용해서 메모 신규 생성

$.ajax({
    type: "POST",
    url: "/api/memos",
    contentType: "application/json", // JSON 형식으로 전달함을 알리기
    data: JSON.stringify(data),
    success: function (response) {
        alert('메시지가 성공적으로 작성되었습니다.');
        window.location.reload();
    }
});

wirtePost 함수 완성

// 메모를 생성합니다.
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();
        }
    });
}

2. 메모 목록 조회 - getMessages 함수

개발 스펙 확인

GET API 사용해서 메모 목록 호출
메모마다 HTML 만들고 붙이는 함수 생성

메모 조회

아래의 붉은 상자 영역이 div#cards-box, 메모 목록을 담는 div 이다.

GET API 사용해서 메모 목록 호출

$.ajax({
    type: 'GET',
    url: '/api/memos',
    success: function (response) {
        console.log(response);
    }
})

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

// 메모 하나를 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);
}

반복문 안에서 addHTML 호출

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

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

3. 메모 변경 - submitEdit 함수

개발 스펙 확인

작성 대상 메모의 username 과 contents 확인
작성한 메모가 올바른지 확인
전달할 data 를 JSON 으로 변경
PUT /api/memos/{id} 에 data 전달

작성 대상 메모의 username 과 contents 확인

let username = $(`#${id}-username`).text().trim();
let contents = $(`#${id}-textarea`).val().trim();

작성한 메모가 올바른지 확인

if (isValidContents(contents) == false) {
    return;
}

전달할 data 를 JSON 으로 변경

let data = {'username': username, 'contents': contents};

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

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

4. 메모 삭제 - deleteOne 함수

개발 스펙 확인

DELETE API 사용해서 메모 삭제

DELETE API 사용해서 메모 삭제하기

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

클라이언트 완성 코드는 위의 코드를 합치면 됩니당

이상 끝 ٩( ᐛ )و

'스파르타 코딩클럽 > Spring' 카테고리의 다른 글

[스파르타 코딩 클럽] Spring 4주차 개발일지 - 네이버 API 를 사용해 셀렉샵 구현 (0)	2021.08.19
[스파르타 코딩 클럽] Spring 2주차 개발일지 (0)	2021.08.05

1. Memo 클라이언트 설계

2. 메모 생성 - wirtePost 함수

2. 메모 목록 조회 - getMessages 함수

3. 메모 변경 - submitEdit 함수

4. 메모 삭제 - deleteOne 함수

'스파르타 코딩클럽 > Spring' 카테고리의 다른 글

티스토리툴바