Published on

쓰레기 공유 서비스(wallaby) | 1차 팀프로젝트 후기

프로젝트 깃허브 주소 👉 https://github.com/fun1ty/wallaby
프로젝트 배포 ⚡ https://splendorous-mermaid-6ff969.netlify.app/

Intro

일주일, 그리고 한정된 기술스탯으로 무엇을 구현해야할까 고민이 많았다. 심지어 아이디어를 구상할 수 있는 기간조차 짧았기 때문이였다. 스레드와 todomate라는 어플을 보다가 쓰레기를 공유하는 커뮤니티 서비스 라는 아이디어가 떠올랐고 팀원들의 동의하에 왈라비를 만들게 되었다.

기능구현

css, html, javascript로 구현

교육을 들은지 3주가 지났다. 그동안 css, html, javascrtipt, jquery를 배웠다. 그동안 css, html, javascrtipt에 대해 알지 못해 책과 인터넷을 보고 무지성으로 만들었는데 이번엔 기초부터해서 이론과 실습으로 어느정도 알고나서 진행하니 좀 더 수월했다. 특히 이번엔 javascrtipt를 잘사용하여 게시판 기능을 만드는 것이 목표였고 어느정도 성공했다. 이번 프로젝트에서 글쓰기, 피드게시판, 피드 상세페이지, 상세페이지에서 댓글내역 출력을 맡아 진행하였다.

이미지 첨부 : 첨부된 이미지 미리보기는 찾아보니 FileReader을 이용하는 방식과 URL API를 이용하는 두가지 방식이 존재한다고 한다. 나는 이 중에서 FileReader 방식을 이용하였다. (사실 URL API 방식도 존재한다는 걸 지금 글 쓰면서 알았다.) readAsDataURL 메소드를 이용하여 인자로 전달받은 File 객체를 base64 형태의 문자열로 변환한다. 미리보기 영역의 src 값이 변경되도록 onload 이벤트로 처리하였다.

reader.onload = function (event) {
   const imageUrl = event.target.result;

   // 이미지 태그를 생성하여 에디터에 삽입
   const imageTag = `<img src="${imageUrl}" alt="uploaded image" />`;
   insertHtmlAtCaret(imageTag);

   setImageUrl = imageUrl;

   // 이미지 미리보기를 위해 이미지를 표시
   displayPreviewImage(imageUrl);
};

reader.readAsDataURL(file);
}

피드게시판 : 글쓰기 기능에서 로컬스토리지에 json객체로 넣은 데이터는 피드게시판에 배열로 출력했다. 새로고침을 해도 데이터는 사라지지 않는다. 로컬스토리지에 저장된 데이터는 localStorage.getItem('키')로 불러올 수 있다.

function getPosts() {
var postsJson = localStorage.getItem("posts");
return JSON.parse(postsJson) || [];
}

피드 상세페이지 : 이 부분은 피드게시판에서 클릭이벤트 발생 시 해당 값을 새로운 로컬스토리지에 객체로 만들어 넣었다. 이 부분에서 글이 nn줄 이상 넘으면 '...'으로 처리하고 로컬스토리지에 넣을때는 말줄임 없는 원본 내용을 넣는 것으로 구현하였고 잘 동작하였으나, 프로젝트 막판에 잘 출력이 안되서 그냥 클릭이벤트 발생 시 브라우저에 출력된 내용 그대로 넣는 것으로 구현하였다. (알고보니 로컬스토리지가 용량이 초과되서 잘 안나오는 것이라는걸 뒤늦게 알았다..)

댓글 내역 출력 : 작성자, 댓글내용, 작성일, 좋아요 기능이 한줄에 나오도록 구현하였다. 이 부분은 해당 페이지의 댓글내역만 출력해야 하기 때문에 글쓰기를 할때 idx라는 변수를 추가하여 배열의 인덱스 번호를 나타내고 그것을 URL 쿼리스트링에 붙여 filter메서드로 같은 포스트번호(boardID)인지 검증하였다.(결과화면 붉은 박스부분이 댓글내역) 이 기능은 발표 전날 새벽에 급하게 만들었다. 안될줄 알았는데 구현되서 뿌듯했다.

const currentBoardId = comments.filter(
    (comment) => comment.boardID == boardID
  );

  for (let comment of comments) {
    if (comment["boardID"] == boardID) selected = comment;
  }

결과화면


깃허브

그동안 깃허브는 개인적으로 리포지토리 관리하면서 거의 pull, push정도만 썼었다. (심지어 예전 팀프로젝트에서도..) 때문에 오류가 나도 왜나는지 모르고 깃허브를 어떤식으로 사용해야하는지 깊게 공부해본적은 없다. 이번에 어떻게 사용하는지 구체적으로 알고 사용하니 팀작업 시, 형상관리하기가 좋았고 앞으로 깊게 공부할 목표 또한 생겼다.

  • 로컬스토리지의 한계를 체감

    백엔드를 아직 배우지 않았지만 선택사항으로 DB나 백엔드를 넣고 프로젝트 진행할 수도 있었다. 그러나 일주일밖에 안되는 기간, 그리고 정처리 시험이 바로 코앞이였기 때문에 일일 5시간밖에 투자할수 없는 상황이였다. 따라서 로컬스토리지에 json 객체를 넣어 DB 대신 사용하였다. 그런데 이거, 문제가 많았다. 일단 데이터를 넣고 빼는게 생각보다 간편하고 개발자도구로 확인이 편한건 좋은데.. 문제는 용량이 5MB밖에 안되는 안습적인 크기라서 발표전날 새벽에 갑자기 멀쩡하게 잘 나오던 피드상세페에지가 undefined로 전부 출력되서 미쳐버리는줄 알았다.. 에러를 검색해보니 로컬스토리지가 꽉 차서 DOM이 안뜬다는 거였고 혹시나 해서 엣지에서 돌려보니 잘되더라... 그 오류 원인 찾겠다고 다 완성된 기능 이것저것 다시 수정하고 보느라 몇시간 허비했다. (이거 아니였으면 ppt 만드는데 더 시간을 할애할 수 있었을텐데.)

협업

랜덤으로 만들어진 팀이였으나 다행히도 좋은 사람들을 만나고 의견조율도 잘되어 순조롭게 진행되었다. 그라운드 룰과 나름의 코딩규칙(변수명을 스네이크로 할건지 카멜케이스로 할건지 등.. 우리는 스네이크를 쓰기로 했다.)을 정했으며, 자료공유나 담당업무에 대한 진척도는 주로 노션을 통해 공유되었다. 이 과정에서 구성원의 중요성을 다시 한번 실감한다. 급박한 전쟁터에서 무기를 들고 목표를 향해 서로 함께 싸워야하는데 얼마나 손발이 잘 맞는지 중요한 것은 당연한것이 아닐까.

아래는 내 체크리스트 중 일부. 서로 담당업무를 알수 있으며 현재 어떤기능을 구현중인지 알수 있다.



그래서 1주 프로젝트 한줄 요약:

  • 왈라비의 여정은 앞으로도 계속 될것이다.

    css, 자바스크립트에 대한 이론을 알고 그것을 실제적으로 접목할 수 있었다는 점이 제일 좋았으나, 역시 아쉬운점은 기간과 시간이다. 1주일 밖에 안되는것도 아쉽고 할애할 시간조차 적어서 디자인설계나 주제를 드러내는 부분(쓰레기 공유)에서 많은 생각을 하지 못했다. 쉬운 주제가 아니기 때문에 더욱 직관적으로 메인에 보여줘야 하는건데 그렇지 못해서 아쉽다. 메인에 무엇을 넣어야 하나 이건 아직도 고민이 된다. 또한 '쓰레기'에 맞는 특수한 기능이 있지 않을까(사실 사진인식 기능 역시 얘기를 나눴으나 구현이 오래걸릴것 같다는 말에 관두었다.)라는 생각도 든다. 기능구현에 대해서는 다음과 같은 기능을 구현하지 못했다.

    1. 다중 이미지 첨부 시 로컬스토리지에 전부 저장 후 피드게시판에 나오게
    2. 글쓰기 시, 작성자 프로필 사진이 나오는것
    3. 피드게시판에 작성자 프로필사진이 나오는 것
    4. 피드게시판에 첨부사진의 가로나 세로 중 어느 한쪽이 긴 경우 비례해서 줄어들게 하는 것 등이다.

    따라서 위와 같은 기능을 구현할 생각이다.

참고자료 : https://guiyomi.tistory.com/119