완성된 우리 팀 페이지를 썸네일을 시작으로 팀 프로젝트를 마무리 해보려 한다.

다'육'이

일단 우리 팀 프로젝트의 이름은 다'육'이 였다. 왜 다'육'이냐하면 프로젝트가 내배캠 리액트 6기생들의 커뮤니티 뉴스피드를 만드는 것이 목표였고 육이 들어간 단어를 생각하다가 다육식물이 생각나서 다'육'이가 되었다. 그래서 페이지 컨셉도 다육식물처럼 녹색을 위주로 정하게 되었다. 좀 더 정확한 컬러 컨셉은 녹색을 찾다가 node.js의 로고 색상도 녹색이기에 거기서 본따오게 되었다.

팀 목표

• 실제 사용할 수 있도록 만들기!

일단 슬랙이나 채팅창에다가 최대한 링크를 뿌려서 많은 사람들이 사용하는 것이 목표다. 그러기 위해선 사용할만큼 기능을 구현해야겠지?

담당 구현

우선 내가 맡은 부분은 글 작성, 수정, 상세페이지였다. 여기서 글쓰기를 할 때 알아보니 toast ui editor라는 라이브러리를 발견하게 되었는데 벨로그처럼 똑같이 글을 작성할 수 있는 기능을 가지고 있어서 바로 사용해야겠다! 하고 가져와서 사용했다. 생각보다 사용하기 쉬우면서도 어려웠다.

트러블 슈팅

1.

문제

Toast UI Editor를 사용하면서 이미지를 업로드 할 때 터무늬없이 길게 URL이 표기가 되어 에디터 사용에 불편함이 있었습니다.

해결

이미지를 업로드하기 전에 Supabase의 스토리지에 저장한 후 저장된 이미지의 URL을 다시 가져와서 에디터에 삽입하는 방식으로 해결했습니다.

2.

문제

댓글 수정 작업 중, 22P02라는 에러가 발생하면서 업데이트가 되지 않았습니다.

해결

에러메세지를 보았을 때 UUID가 존재하지 않는다는 것을 확인 후 Supabase에서 UUID를 설정했지만 해결되지 않았습니다. 이후 컬럼의 이름이 기존엔 comments_id로된 UUID의 이름을 UUID로 변경하니 해결이 되었습니다. 이 점은 의문으로 남아있습니다.

3.

문제

해당 게시글의 댓글 총 갯수를 post table에 추가했으나 이후 댓글 추가기능이 동작하지 않는 것을 확인.

{
  code : "42703", 
  details : null, 
  hint : null, 
  message : "column \"id\" does not exist"
}

해당 에러가 발생

해결

ALTER TABLE post
ADD COLUMN comment_count INTEGER DEFAULT 0;

UPDATE post p
SET
  comment_count = (
    SELECT
      COUNT(*)
    FROM
      COMMENT c
    WHERE
      c.post_id = p.uuid
  );

CREATE
OR REPLACE FUNCTION update_comment_count () RETURNS TRIGGER AS $$
BEGIN
  -- Update the comment_count for the post when a comment is added or deleted
  UPDATE post
  SET comment_count = (
    SELECT COUNT(*)
    FROM comment
    WHERE post_id = NEW.post_id
  )
  WHERE uuid = NEW.post_id;

  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER comment_count_trigger
AFTER INSERT
OR DELETE ON COMMENT FOR EACH ROW
EXECUTE FUNCTION update_comment_count ();

supabase의 sql editor를 사용하려 했었는데 WHERE c.post_id = p.uuid
부분과 WHERE uuid = NEW.post_id이 부분이 uuid가 아닌 id로 비교를 해서 생성하는 로직을 만들어 주어 발생한 결과 수정은 되지만 생성이 되지않는 문제가 발생했던 것이었습니다. 뒤늦게 발견하고 수정하여 해결할 수 있었습니다.

결과물

홈페이지

로그인

회원가입

글 상세 페이지

• 글 세부 내용
  
• 댓글
  

글 작성 페이지

글 수정 페이지

마이페이지

내정보 수정 페이지

후기

드디어 길고 길었던 뉴스피드 프로젝트가 끝이 났다. 가뜩이나 인원도 다른팀보다 적은데 중간중간 예비군까지 갔다오니 부족한 시간이었다. 그럼에도 불구하고 완성까지 해낸 우리 팀원들에게 박수를 보내고 싶다. 너무 고생했어요 우리 조원들 ㅜㅜ 이번 프로젝트를 해보면서 아 아직도 useEffect나 렌더링을 내가 제대로 신경을 안쓰거나 잘 모르는 구나 라고 생각이 들었다. 다음 부터는 바쁘더라도 세세하게 신경써가며 코드를 짜도록 노력해야겠다고 생각했다. 이번 프로젝트를 하면서 깃허브에 대한 문제가 단 하나도 없었다 박수~👏👏👏👏👏👏 신경써서 협업한 만큼 충돌도 거의 없고 코드 컨벤션도 내가 제안했던 부분 모두 잘지켜주셔서 잘 진행됐던 것 같다. 조만간 또 팀프로젝트가 진행되겠지만 일단 오늘은 끝났으니 후련한 기분이다.

끝맺으면서 프로젝트 배포 링크와 깃허브 링크 뿌리고 가겠습니다!
다육이 : https://news-feed-da6.vercel.app/
github : https://github.com/Leekee0905/news_feed_da6