본문 바로가기
반응형

개발이야기/JavaScript5

[VanilaJs] 게시판 만들기 (5) - 댓글 조회 및 등록 1. 댓글 데이터 구조 댓글 데이터 구조는 게시물 1개에서 commentList 배열 형식으로 진행 하였다. { "no":1, "title":"Bird of Paradise", "content":"Change Packing Material on Right Foot", "commentList": [ { "no": 1, "name": "작성자1", "comment": "ㅋㅋ", "date": "2022-02-20" }, { "no": 2, "name": "작성자2", "comment": "ㅎㅎㅎ", "date": "2022-02-20" } ], "date":"2021-07-12" } 2. 댓글 개수 출력 댓글이 존재하면 게시물 제목 옆에 댓글의 개수가 출력되게 된다. //로컬스토리지의 내용을 읽어서 테이블에.. 2022. 7. 7.
[VanilaJs] 게시판 만들기 (4) - 글 상세보기와 수정 1. 글 상세보기 글 상세보기는 mode가 Detail 일때, 수정이 불가능한 화면에서 게시글 내용을 확인 할 수있다. 해당 아이콘을 누르면 detailItem 함수에서 글번호 (no)값을 넘긴다. function detailItem(no) { modalOpen('Detail'); let detail = _storageData.filter((data) => { return data.no == no; }); let title = document.getElementById('title'); let content = document.getElementById('content'); title.value = detail[0].title; content.value = detail[0].content; title.r.. 2022. 7. 3.
[VanilaJs] 게시판 만들기 (3) - 글 삭제와 등록 저번에 만들었던 모달창을 활용하여 글을 삭제하고, 등록 하는 기능을 만들려고 한다. 1. 글 삭제 먼저 삭제버튼을 만들기 위해 각 열마다 삭제 버튼을 추가해 주려고 한다. bootstrap 아이콘을 사용하기 위해 cdn 링크를 추가해 주었다. 기존 boardListAction 함수에 action 영역을 만들어주고, 상세 페이지 아이콘에 상세페이지 동작(detailItem)함수와, 삭제 아이콘에 삭제 동작(deleteItem)함수를 추가하고, 해당 고유값(data.no)를 넘겨 주었다. 열마다 아이콘이 추가된 모습. function deleteItem(no){ if (confirm(no +'번 글을 삭제하시겠습니까?') === true) { _storageData = _storageData.filter(f.. 2022. 7. 1.
[VanilaJs] 게시판 만들기 (2) - Modal창 마크업 및 동작 vue.js를 사용했을 때 처럼 모달창을 재사용이 가능한 단독적인 템플릿으로 작성하고 싶었다. html안에서 html을 부르는 방법은 여러가지가 있었는데, 제일 안정적이라 판단한 js의 XMLHttpRequest객체를 사용해보았다. 먼저 modal.html 파일을 생성하고 마크업 부분은 아래와 같다. 글 등록 Save Close index.html에 모달을 활성화 할수있는 버튼과, 모달이 활성화 됐을때 그림자를 담당하는 영역, 모달창 html을 불러오는, 영역을 추가해 주었다. w3-include-html 속성을 참고하며 js부분을 확인해 보겠다. w3school에서 퍼온 html파일 로드부분을 추가해주었다. function modalOpen() { document.getElementsByClassNam.. 2022. 6. 28.
[VanilaJs] 게시판 만들기 (1) - 글 목록 조회 및 페이징 처리 1. 글 목록 조회 1-1. json 데이터를 localstorage에 저장 //data.json 내용을 로컬스토리지에 문자형식으로 넣는다. async function dataSet() { const data = await fetch("./data.json") .then(response => { return response.json(); }); window.localStorage.setItem('storageList',JSON.stringify(data)); } 개발자도구 -> Application -> Storage -> Local Storage 에 storageList이름의 키로 데이터가 저장된것을 확인 할 수 있다. //data.json 내용을 로컬스토리지에 문자형식으로 넣는다. async func.. 2022. 6. 28.
반응형

티스토리툴바