[Spring] 타임라인 서비스 프로젝트 - 클라이언트(HTML, Javascript, jQuery)

 

 

클라이언트 설계하기

• 필요 기능
  • 메모 조회
    - GET API 사용해서 메모 목록 불러오기
    - 메모마다 HTML 만들고 붙이기
  • 메모 생성 
    - 사용자가 입력한 메모 내용 확인
    - POST API 사용해서 메모 신규 생성
    - 화면 새로고침하여 업데이트 된 메모 목록 확인
  • 메모 변경
    - 사용자가 클릭한 메모가 어떤 것인지 확인
    - 변경한 메모 내용 확인
    - PUT API 사용해서 메모 내용 변경
    - 화면 새로고침하여 업데이트 된 메모 목록 확인
  • 메모 삭제
    - 사용자가 클릭한 메모가 어떤 것인지 확인
    - DELETE API 사용해서 메모 삭제
    - 화면 새로고침하여 업데이트 된 메모 목록 확인

 

함수 작성하기

• 메모 조회 - getMessages, addHTML, makeMessage 함수

  // 메모를 불러와서 보여줌
  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 = makeMessage(id, username, contents, modifiedAt);
  
      // 2. #card-box 에 HTML 붙임
      $('#cards-box').append(tempHtml);
  }
  
  // HTML 태그 생성 함수
  function makeMessage(id, username, contents, modifiedAt, i) {
      return `<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>`;
  }

 

• 메모 생성 - 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 = {'usename': username, 'contents': contents};
  
      // 5. POST /api/memos 에 data 전달
      $.ajax({
          type: "POST",
          url: "/api/memos",
          contentType: "application/json",    // JSON 형식으로 전달함을 알리기
          data: JSON.stringify(data), // JSON을 문자열로 만들어줌
          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();
          }
      });
  }

 

• 메모 삭제 - deleteOne 함수

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

타임라인 서비스 화면