자바스크립트 게시판 4

[프로젝트] 게시판 | 8. 게시물 댓글 수 보여주기&댓글 기준으로 인기 게시물 보여주는 법

위와 같이 게시물에 달린 댓글의 수와 댓글 수가 많이 담긴 게시물을 내림차순으로 정렬하여 화면 우측에 보여주고자 한다. Part1. 게시물 당 달린 댓글 수 보여주는 법 사고과정 1. 하나의 comment 데이터에는 댓글이 속한 게시물을 의미하는 부모 id(parentId)를 포함되어 저장되어 있다. 2. 서버에서 post 데이터를 모두 불러온뒤 각 post의 id가 comment의 parentId와 일치하는 모든 댓글을 가져온다. 3. 단, 댓글이 없는 게시물은 굳이 가져올 필요가 없으므로 2번에서 comment의 length가 1개 이상인 댓글만을 가져온다. 4. 데이터를 ejs 파일로 렌더링 시켜준다. 완성코드 (list.js) router.get('/total', isLogin, async (re..

[프로젝트] 게시판 | 6. 기존 이미지 그대로 저장하기 및 이미지 미리보기(프리뷰) 삭제하는 법

Part1. 기존 저장된 이미지를 그대로 저장하기 트러블 슈팅 (문제배경) 마이페이지에서 기존 저장된 이미지를 삭제하거나 수정하지 않고 다른 정보만 수정하여 서버에 전송하면 기존 저장된 이미지가 그대로 유지되는 것이 아니라 삭제되는 문제가 발생한다. (문제원인) 현재 서버에서는 이미지 파일이 있으면 해당 주소를 저장하고 이미지 파일이 없으면 null을 저장하도록 코드를 구현해놨다. let imageFile = req.file ? req.file.location : null 널리 알려진대로, DB에는 이미지 파일을 저장하는 것보다 이미지를 S3 등 외부에 저장하고 그 저장한 URL을 DB에 저장하는 것이 권장된다. 이 때문에 마이페이지 GET 요청 시 이미지 파일 자체를 불러오는 것이 아니라 이미지 URL..

[프로젝트] 게시판 | 5. 글 작성자만 수정, 삭제 버튼 보이게 만드는 법

위와 같이 게시글 목록에서 글 작성자만 수정 및 삭제 기능이 보이게끔 하려고 한다. - 로그인 유저와 글 작성자가 일치하면 버튼을 보이게 하고 - 일치하지 않으면 버튼을 보이지 않게 한다. 는 비교적 간단한 로직이다! (list.ejs) ✏️ 수정 🗑️ 삭제 let deleteBtns = document.querySelectorAll('.deletePost'); deleteBtns.forEach((btn, index) => { let writerIds = document.querySelectorAll('.listWriterId'); let writerId = writerIds[index].textContent; let editBtns = document.querySelectorAll('.editBtn')..

[프로젝트] 게시판 | 3. 채팅 목록 최신순 정렬하는 법

가장 마지막으로 채팅한 시간을 기준으로 채팅방을 위에서부터 최신순으로 정렬하고자 한다. 사고과정1. 최신 채팅을 포함하는 요소를 모두 가져온 후, 각 요소의 textContext를 읽어 배열로 만든다. 2. 각 요소에 original Index를 붙인다. (=시간 순으로 정렬되지 않은 원래 배열) 3. sort()를 활용하여 각 요소의 순차를 비교하여 새로운 정렬을 만든다. 4. 새로운 정렬에 new Index를 붙인다. (=시간 순으로 정렬된 새 배열) 5. 목록 하나에 해당하는 list-box 요소를 모두 가져온다. 6. 원본배열의 시간과 사본 배열의 시간이 정확히 일치하는 요소를 찾아 원본 list-box의 order를 사본 배열의 new Index로 교체한다. 어려웠던 점간단하게 구현할 줄 알았는..

728x90
LIST