반응형 스프링 (Spring)/Timeline Project8 Timeline Project Timeline Projects 깃허브 SangHun-OH/Sparta-Spring Contribute to SangHun-OH/Sparta-Spring development by creating an account on GitHub. github.com 2021. 7. 20. 메모 삭제하기 - deleteOne 함수 개발 스펙 확인 - DELETE API 사용해서 메모 삭제 Delete API 를 활용하여 메모 삭제 function deleteOne(id) { $.ajax({ type: "DELETE", url: `/api/memos/${id}`, success: function (response) { alert('메시지 삭제에 성공하였습니다.'); window.location.reload(); } }) } 2021. 7. 20. 메모 변경하기 - submitEdit 함수 개발 스펙 확인 - 작성 대상 메모의 username과 contents 를 확인 - 작성한 메모가 올바른지 확인 - 전달할 data 를 JSON으로 바꾸기 - PUT /api/memos/{id} 에 data를 전달 function submitEdit 1. 전과 같은 방법으로, 크롬의 검사를 통해 해당 영역의 id 확인 2. 해당 id로 아래의 코드를 삽입. let username = $(`#${id}-username`).text().trim(); let contents = $(`#${id}-textarea`).val().trim(); 3. 작성한 메모가 올바른지 확인 if (isValidContents(contents) == false) { return; } 4. 전달할 data를 JSON으로 변경 le.. 2021. 7. 20. 메모 조회하기 - GetMessage 함수 개발 스펙 확인 - 기존 메모 제거하기 (전에 로드된 메모 제거) - GET API 사용해서 메모 목록 불러오기 - 메모마다 HTML 만들고 붙이는 함수 만들기 기존 메모 제거하기 1. 개발자 도구를 통해 id값 확인 - card-box 임을 확인할 수 있음. 2. jQuery를 이용하여 기존 메모를 제거한다. $('#cards-box').empty(); 3. 이 함수는 HTML문서를 로드할 때마다 실행해야 하기 때문에 ready 함수 안에 실행되도록 한다. $(document).ready(function () { // HTML 문서를 로드할 때마다 실행 getMessages(); }) 4. Temp HTML 생성 let tempHtml = ` ${modifiedAt} ${username} ${conte.. 2021. 7. 20. 메모 생성하기 - WritePost 함수 생성 개발 스펙 확인 - 사용자가 입력한 메모 내용 확인 - POST API를 사용하여 메모 신규 생성 사용자가 입력한 메모 내용 확인 - 미리 구성해놓은 Html 페이지에서, 사용자가 입력한 메모를 가져와야 한다. - 크롬의 개발자 도구를 통해 텍스트 박스의 id를 가져와서 val을 통해 메모를 가져와보자 POST API를 사용하여 메모 신규 생성 1. jQuery를 사용하여 값을 가져오기 let contents = $('#contents').val(); 2. 메모가 올바른지 판단 if (isValidContents(contents) == false) { // return을 통해 function의 아래 내용을 진행되지 않게 함. return; } 3. genRandomName을 통해 username 부여 -.. 2021. 7. 20. 클라이언트 설계, 구성 클라이언트 설계 접속하자마자 메모 전체 목록 조회하기 GET API 사용해서 메모 목록 불러오기 메모 마다 HTML 만들고 붙이기 메모 생성하기 사용자가 입력한 메모 내용 확인하기 POST API 사용해서 메모 신규 생성하기 화면 새로고침하여 업데이트 된 메모 목록 확인하기 메모 변경하기 사용자가 클릭한 메모가 어떤 것인지 확인 변경한 메모 내용 확인 PUT API 사용해서 메모 내용 변경하기 화면 새로고침하여 업데이트 된 메모 목록 확인하기 메모 삭제하기 사용자가 클릭한 메모가 어떤 것인지 확인 DELETE API 사용해서 메모 삭제하기 화면 새로고침하여 업데이트 된 메모 목록 확인하기 2021. 7. 20. 이전 1 2 다음 반응형
