클라이언트 설계

0. 필요한 기능 살펴보기

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

5. index.html 작성

src > main > resources > static에 index.html 만들기

html + css + javascript + jquery

1. 생성

- 사용자가 입력한 내용 확인하기

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

- 작성 내용 길이 등 조건 확인하기

function isValidContents(contents) {
	if (contents == '') {
    	alert('내용을 입력해주세요');
        return false;
    }
    if (contents.trim().length > 140) {
        alert('공백 포함 140자 이하로 입력해주세요');
        return false;
    }
    return true;
 }
if (isValidContents(contents) == false) {
	return;
}

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

2. 조회

기존 구성 제거

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

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

$.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 만들고 붙이는 함수

function addHTML(id, username, contents, modifiedAt){
	// 1. HTML 태그를 만듭니다.
    let tempHtml = ` ~~~ `
    
    // 2. #cards-box 에 HTML을 붙인다.
	$('#cards-box').append(tempHtml);
}

- Timestamped, 프로젝트이름Application 수정하기

• Timestamped에는 @Getter를
• 프로젝트이름Application에는 @EnableJpaAuditing를 수정