728x90 반응형 vscode13 [HTML5] - 13 - 로컬 스토리지 삭제 기능 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 혹시나 하는 마음에 각 기능별로 주석을 달아서 왔다. 혼자 보고 이해하며 공부하는데 도움이 될 것이다. 참고로 로컬 스토리지에 게시글이 쌓여 지우는 버튼을 추가해보았다. 로컬 스토리지 비우기 한번 넣어두고 쓰면 좋을 듯 하다. 아래는 전체적으로 주석을 넣은 코드이다. 그대로 따라왔다면 복붙해서 공부하는 것도 나쁘지 않다고 생각한다. 이리의 맥 이야기 컴온!!!! 제목 내용 로컬 스토리지 비우기 로컬 스토리지 비우기 버튼을 만들고 눌러보자. 그럼 아래와 같이 깔끔하게 삭제될 것이다. 개발 이야기/[HTML5] 2023. 5. 5. 더보기 ›› [HTML5] - 12 - 페이지네이션 기능 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 이번에는 좀 어려울 수 있지만 따라오면 괜찮을 것이다. 한 페이지에 게시글을 4개로 한정하고, 자동으로 다음페이지에 넘어가게 만들 것이다. 우선 addPost 함수를 수정해야한다. 여기에서 게시글이 추가될 때마다 게시글 수를 체크하여 페이지를 추가한다. 페이지 번호에 따라 보여지는 게시글을 조절하도록 수정해야한다. 또한, 페이지 번호를 나타내는 링크를 클릭할 때마다 해당 페이지에 해당하는 게시글만 보여지도록 해야한다. 마지막으로, 페이지 로딩 시 첫 페이지를 보여주도록 만들어 볼 것이다. 에 아래의 코드를 넣어준다. // 게시글.. 개발 이야기/[HTML5] 2023. 5. 5. 더보기 ›› [HTML5] - 11 - 삭제 기능 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 이번에는 삭제기능을 추가해볼 것이다. 우선 전에 만들었던 버튼과는 다른 방식으로 코딩할 것이다. 이유는 자바스크립트를 통해 만들면 자동적으로 게시글마다 삭제버튼이 붙는다. 초반에는 하단에 게시글마다 버튼을 달아주었다. 우선 태그에 아래의 코드를 추가한다. // 삭제 버튼 추가 var deleteButton = document.createElement("button"); deleteButton.className = "btn"; deleteButton.innerText = "삭제"; deleteButton.addEventListen.. 개발 이야기/[HTML5] 2023. 5. 5. 더보기 ›› [HTML5] - 10 - 게시글 저장 기능 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 게시글을 저장하고 삭제하는 기능을 깔끔하게 넣기 위해 에 해당하는 부분을 전부 지웠다. 아래는 삭제한 코드이다. 이리의 맥 이야기 컴온!!!! 제목 내용 두번째 페이지 세번째 페이지 네번째 페이지 ``` 코드를 넣은 후 저장하면 이런 모습이다. 이제 게시글이 저장되게 만들어 볼 것이다. 게시글을 서버에 저장 할 수 없는 상태이므로, 로컬 스토리지에 저장하게 만들어보자. 수정된 부분 - `body` 태그의 `onload` 속성에 `getPosts()` 함수를 추가하여 페이지가 로드될 때 로컬 스토리지에서 게시글을 가져오도록 함. .. 개발 이야기/[HTML5] 2023. 5. 4. 더보기 ›› [HTML5] - 9 - 게시글 작성 기능 만드는 법 (2) #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 게시물이 작성이 되려면 역시나 혹시나 하는 마음에 전체적인 코드 내용을 작성해주겠다. 놓친 부분이 있다면 천천히 읽어보고 따라와도 좋다. 이리의 맥 이야기 컴온!!!! 제목 내용 환영합니다. 완성하시면 이런 모습입니다. Read More 할 수 있습니다. 포기하지 마세요. Read More 두번째 페이지 세번째 페이지 네번째 페이지 작성이 완료 되었다면 저장을 누르고 켜보자. 게시물 작성 버튼을 눌러보자. 버튼을 누르고 나면 아래 사진처럼 게시글이 작성된 모습을 볼 수 있다. 여기까지 이해하고 따라오셨다면 html 구조와 원리에.. 개발 이야기/[HTML5] 2023. 5. 3. 더보기 ›› 728x90 반응형 이전 1 2 3 다음
