Spring 3주차(메모장 완성하기)

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. 화면 새로고침하여 업데이트 된 메모 목록 확인하기

- 메모생성(작성)

 

index.html

// 메모를 생성합니다.
function writePost() {
// 1. 작성한 메모를 불러옵니다.
let contents = $('#contents').val();
// 2. 작성한 메모가 올바른지 isValidContents 함수를 통해 확인합니다.
if (isValidContents(contents) == false) {
return;
}
// 3. genRandomName(입력한값을 받아 임의의 값 생성) 함수를 통해 익명의 username을 만듭니다.

// 메모를 전달하기 위해 서버로 username과 contents를 전달

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) { // 서버가 성공적으로 응답한다면 reponse에 넣어준다는 뜻
alert('메시지가 성공적으로 작성되었습니다.');
window.location.reload();
}
});

}

- 메모 조회하기(getMessage)

개발스펙확인

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

index.html

// 메모를 불러와서 보여줍니다.
function getMessages() {
// 1. 기존 메모 내용을 지웁니다.
$('#cards-box').empty();
// 2. 메모 목록을 불러와서 HTML로 붙입니다.
$.ajax({
type: 'GET',
url: '/api/memos',
success: function (response) { // response안에 저장되어 있는 내용을 하나씩 꺼내 addHtml에 호출하는 과정
for (let i = 0; i < response.length; i++) { // 
let message = response[i]; //response의 i번째를 꺼낸 것에 message 라는 이름을 붙여줌
let id = message['id']; // 정보를 꺼냈으니 addHtml 호출
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);
}

 

+tip

Timestamped를 사용하려면 Application.java에 @EnableJpaAuditing 추가

Timestamped.java에 Getter를 꼭 넣어줘야지만 정상적으로 시간 값이 삽입된다.

shift + ctrl + alt + j : 다중선택

 

- 메모 변경하기(submitEdit)

개발스펙확인

1. 작성 대상 메모의 username과 contents 를 확인
2. 작성한 메모가 올바른지 확인
3. 전달할 data 를 JSON으로 바꾸기
4. PUT /api/memos/{id} 에 data를 전달

index.html

// 메모를 수정합니다.
function submitEdit(id) {
// 1. 작성 대상 메모의 username과 contents 를 확인합니다.
let username = $(`#${id}-username`).text().trim(); // 고정되어있는 값은 .text로
let contents = $(`#${id}-textarea`).val().trim(); // 바뀌는 값은 .val로
// 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();
}
});}

메세지 변경에 성공하고 날짜도 바뀐 값이 최신순으로 들어감

 

- delete

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