<현록/>

위와 같이 게시물에 달린 댓글의 수와 댓글 수가 많이 담긴 게시물을 내림차순으로 정렬하여 화면 우측에 보여주고자 한다. 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..

위와 같이 콘텐츠 영역을 넘어가는 글자 수 일 경우 말 줄임표 표시를 할 수 있다. 자바스크립트의 substr을 활용하여 간단하게 구현해보자. 완성코드 - substr(시작위치, 시작위치로 부터 가져오는 글자수) titleText= titleText.substr(0, length) + "..." - 위의 예제에서는 처음 10글자만 까지만 끊고 이 이상은 '...' 처리하고 있다.

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

문제배경 detail.ejs 페이지에서 쿼리스트링으로 쏴준 writerId, chatName, postId를 chat.js 서버에서 사용하려고 하자 다음과 같은 에러메세지가 등장하였다. 문제원인 문제의 원인은 코드 가독성을 위해 줄바꿈을 해둔 것 때문이었다. 보다시피 a 링크 내의 줄바꿈은 그대로 공백 문자열로 들어가서 오류를 일으켰다. 해결방법 줄 바꿈 없이 사용하자 간단히 문제가 해결되었다!

위와 같이 게시글 목록에서 글 작성자만 수정 및 삭제 기능이 보이게끔 하려고 한다. - 로그인 유저와 글 작성자가 일치하면 버튼을 보이게 하고 - 일치하지 않으면 버튼을 보이지 않게 한다. 는 비교적 간단한 로직이다! (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')..

채팅시 프로필 이미지를 채팅과 함께 불러오는 기능을 구현해보았다. 사고과정 0. 유저는 가입 또는 마이페이지에서 프로필 이미지를 설정한다. (DB에 이미지가 저장된다.) 1. 채팅룸을 생성할 때 DB에 게시글 작성 유저의 프로필이미지도 같이 저장된다. 2. 채팅서버에서 DB의 이미지를 불러와 채팅 ejs로 나의 이미지와 대화한 상대방의 이미지를 보내준다. 3. 1번에서 나의 이미지와 상대방의 이미지를 구분해서 보내는 기준을 정한다. 4. ejs 파일에서도 같은 기준으로 나의 이미지와 상대방의 이미지를 구분하여 렌더링한다. 작성코드 및 해설 (chat.js) router.get('/detail', isLogin, async (req, res) => { let chats = await db .collecti..

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

위와 같이 채팅 목록에서 가장 마지막으로 한 채팅을 띄우고자 한다. 채팅방 별로 가장 최근 채팅을 불러오되, 아직 생성된 채팅이 없다면 채팅룸 자체의 생성시간을 띄우겠다. Part1. 채팅방 별로 가장 마지막 채팅 불러오기 (chat.js) router.get('/list', isLogin, async (req, res) => { // chatroom null 일 경우 대비 예외처리 try { let chatlist = await db .collection('chatroom') .find({ member: req.user._id }) .toArray(); console.log('chatlist', chatlist); let chats = []; // 룸 별로 가장 최근 채팅이 담기는 곳 if (chatl..

채팅 서버의 예외처리 하는 로직 채팅방 생성 및 유저 접근과 관련한 다양한 예외처리 로직을 구현하고자 한다. 다음은 생각할 수 있는 아이디어 몇 가지이다: 1. 신규 채팅방을 생성하고 해당 채팅방에 접근할 때는 또 다른 채팅방을 만드는 것이 아니라 기존 채팅룸으로 유저를 안내한다. 2. 글 작성자 본인과는 채팅할 수 없다. 사고과정 사전에 유저가(detail.ejs) 보내줘야 하는 정보 - writerId, chatName(게시글 이름), postId - 주의할 점은 a 링크 안에 공백 또는 줄바꿈이 없어야 한다. 0. postId 와 채팅방의 멤버를 근거로(조건을 모두 충족하는 것은 하나밖에 없음) 이미 생성된 채팅방이 있는지 DB에서 찾아본다. 1. 만약 이미 생성된 채팅방이 있다면, 해당 채팅룸으로..

위와 같이 탭을 눌렀을 때 이에 대응되는 콘텐츠 내용이 변화하는 탭 전환 기능을 순수 자바스크립트를 활용해 만들어보고자 한다. [첫번째 시도] coffee sandwitch juice bagel Americano BLT sandwitch black tea cheese bagel let t1 = document.querySelector('#tab1'); let t2 = document.querySelector('#tab2'); let t3 = document.querySelector('#tab3'); let t4 = document.querySelector('#tab4'); let c1 = document.querySelector('#content1'); let c2 = document.querySelec..