2022.12.12 ~ 2022.12.22 약 2주에 걸친 FASTFIVE 팀프로젝트가 끝났다.
나는 프론트엔드 개발로 참여했다.

• 팀원 : 프론트 3명 / 백엔드 2명
• 내 포지션 : 프론트엔드 개발

---

프로젝트 설명

주제

• FASTFIVE 기업협업 프로젝트입니다. 저스트코드를 통해 전달받은 기획문서를 바탕으로 웹페이지를 구현합니다.

담당 기능

• 상세페이지
  • 회사 상세 정보
    • 이메일 클릭 시 클립보드 복사 & 토스트 문구 노출
    • 게시글 삭제
  • 댓글
    • 댓글, 답글(대댓글) 구현

선택 이유

다른 기능은 1,2차에서 구현했던 기능들과 비슷하다는 인상을 받았기 때문에 한번도 구현해보지 못한 댓글기능을 구현해보고 싶었다.

협업 방식 및 개발환경

협업 방식

• 노션에서 칸반보드와 타임라인을 이용하여 티켓으로 일정관리
  
• Daily Stand Up Meeting : 오전 11시 반
  • 어제까지 작업한 사항 공유 및 오늘 작업계획 공유
• Slack으로 공지사항 전달
• VSCode Live Share : 실시간 코드 공유 및 피드백

기능 구현 방식

• git, github, google meet, zoom을 사용하여 실시간으로 팀원간의 코드 리뷰를 진행하고 에러 및 충돌 해결

개발환경

• OS : Windows, Ubuntu
• 언어 및 기술 스택 : HTML, CSS, TypeScript, SCSS, React
• 형상관리 : Git/Github
• 문서관리 : Notion
• 협업 : Slack, VSC(Live Share)

---

후기 및 느낀 점

결과물

• 전체 화면
  

• 이메일 복사
  

• 댓글 작성(비밀댓글 버전)
  

• 대댓글 작성
  

기획문서..?

기획문서를 받았다.
현업에서 사용하는 기획문서를 처음봐서 그런지 굉장히 대단해보였다. 시작도 하기 전에 다 구현할 수 있을까? 하는 걱정이 들었다. 이번 프로젝트 전까지는 단순한 팔로우 기능이라던가, 회원가입과 로그인, 간단한 필터링과 검색기능 정도밖에 안해봐서 그런지.. 이번 문서에 있던 기능들은 훨씬 난이도가 있어보였다.

문서에 나와있는 기능을 간단하게 소개하자면 다음과 같다.

• 주제 : 패스트파이브 멤버(회사) 소개 커뮤니티
• 페이지 및 기능
  • 서브 홈 : 캐러셀, 카테고리 별 필터링, 각 회사 카드
  • 리스트 : 회사 전체 목록, 페이지네이션, 지역>카테고리>상세분야 필터링
  • 게시글 상세 : 회사 상세 정보, 댓글(페이지네이션)
  • 게시글 작성/수정 : 자동저장 등

이번 프로젝트에서는 게시글 상세 페이지를 맡아서 구현하게 되었다.

메인 기능 === 댓글(특히 대댓글)

담당한 페이지인 게시글 상세페이지에서 가장 보여줄 게 많은 기능은 댓글 부분이라고 생각했다.
단순히 댓글을 달고, 수정하고, 삭제하는 것이 아닌, 대댓글도 달 수 있고 페이지네이션도 들어가 있었으며, 무엇보다 대댓글 기능에 관심이 컸다. 대댓글 입력 창은 해당 댓글의 대댓글 목록 제일 하단에 떠야 했는데, 이 부분을 구현하는 게 재미있어 보였다.

---

(실제로 구현한 대댓글 입력 창)

---

구현 과정이 쉽지만은 않았는데.. 처음엔 댓글,대댓글,작성칸 모두 한 페이지에 넣었다. 하지만 아무리 봐도 이걸 map을 돌리기에는 불가능해보여서 컴포넌트로 모두 빼기로 했다.

• Comment : 댓글 전체 부분
• CommentList : 댓글과 댓글에 달려있는 대댓글까지의 한 묶음
• Reply>NestedReply : 대댓글
• Reply>Reply : 댓글
• WriteNestedReply : 대댓글 입력창

처음에는 CommentList가 없었다. 단순히 댓글 목록들을 하나의 div로 감싸고, 그 div아래에 WriteNedtedReply 컴포넌트를 넣었더니 어떤 답글쓰기 버튼을 누르든 같은 위치에 대댓글 입력창이 나타났다..

이걸 어떻게 해결할지 고민을 정말 많이 했지만, 로직이 떠오르지 않아 멘토님께 도움을 요청했다. 멘토님께서는 댓글과 대댓글을 한 묶음으로 보면 될 것 같다! 라고 하셨고, 깨달음을 얻어 CommentList 컴포넌트를 추가해서 구현할 수 있게 되었다.

레이아웃 짜는데 시간이 많이 걸리던 나에게는 어렵다고 느껴졌다. 하지만 회고록을 쓰면서 다시 돌이켜보니 많이 어렵지 않은 로직인데.. 처음에 괜히 걱정하고 겁먹어서 어렵게 느껴진 것 같다.

첫 타입스크립트

자바스크립트가 아닌 타입스크립트를 적용한 첫 프로젝트이다. 자바스크립트였다면 순식간에 넘길 수 있는 props를 넘기는데 한세월이 걸렸다..

//Comment.tsx (댓글 영역 컴포넌트)

//댓글 데이터 안에 배열로 들어가있는 대댓글 데이터
export interface ReplyType {
  reply_id: number;
  feed_id: number;
  feed_user_id: number;
  is_private: boolean;
  is_deleted: boolean;
  comment: string | boolean;
  parent_reply_id: number;
  parent_user_id: number | null;
  reply_group: number;
  rnk: number;
  reply_user_id: number;
  company_name: string;
  nickname: string;
  email: string;
  position_name: string;
  is_admin: number;
  created_at: string;
}

//댓글 데이터
export interface CommentType {
  reply_id: number;
  feed_id: number;
  feed_user_id: number;
  is_private: boolean;
  is_deleted: boolean;
  is_fake: boolean;
  comment: string | boolean;
  parent_reply_id: number;
  parent_user_id: number | null;
  reply_group: number;
  rnk: number;
  reply_user_id: number;
  company_name: string;
  nickname: string;
  email: string;
  position_name: string;
  is_admin: number;
  created_at: string;
  reply: Array<ReplyType>;
}

//props로 넘길 데이터
export interface PropsType {
  comment: CommentType;
  setTotalPages: Function;
  setComments: Function;
}

return(
<CommentList
  comment={comment}
  key={comment.reply_id}
  setTotalPages={setTotalPages}
  setComments={setComments}
/>
  )

//CommentList.tsx(댓글,대댓글 묶음 컴포넌트)
import { PropsType } from '../Comment';

const CommentList: React.FC<PropsType> = ({
  comment,
  setTotalPages,
  setComments,
}) => {}

백에서 받는 데이터 양이 많아서 interface를 만드는데 시간이 오래 걸렸다. 처음 만들어보는 interface여서 어떤 일이 일어날 지 모르니 일단 모든 데이터 타입을 다 집어넣었다.. 세션 때 과제에서도 props는 넘겨보았지만, 막상 프로젝트에서 적용시키려고 하니 머리가 터질것(?)같았다.
분명 부모컴포넌트에서 넘길 props 타입을 지정을 해줬는데도 계속 오류가 발생했고.. 자식 컴포넌트에서 타입을 지정하지 않았다는 사실을 깨닫기 전까지 오랜 시간이 걸렸다. 프로젝트 시작 전에 타입스크립트를 조금 더 공부하고 시작했으면 시간이 훨씬 단축되었을 것 같다는 후회를 조금 하였다.

느낀 점

최선을 다했다. 이번 프로젝트때는 다른 프론트 팀원분과 같이 며칠동안 밤을 새고 오전 6시~7시에 자기도 했다🤣 팀원들에게 질문도 많이 하고 반대로 질문도 많이 받으면서 다같이 성장할 수 있었던 프로젝트였던 것 같다.

백엔드에서 이번에 배려를 많이 해줘서 통신할 때 굉장히 편했다. 프론트에서 처리해야 한다고 생각하고 있던 부분들을 백엔드에서 처리해준 덕분에 정해진 시간동안 이만큼이나 구현할 수 있었다.
예를 들면 댓글 작성일자 같은 경우에 데이터를 받아와서 프론트에서 형식에 맞게 바꿔서 화면에 뿌릴 생각이었는데, 백엔드 팀원분이 백에서 다 처리해뒀다고 하셔서 코드도 짧아지고 편했다.
이 이외에도 소소하지만 수많은 백엔드의 배려가 있었다. 너무 많아서 다 적지 못하는게 아쉽다 ;)

전 보다 실력이 많이 늘었다고 생각한다. 이번 프로젝트를 하면서 로직을 짤 때 걸리는 시간이나, 어떤 경우에 어떤 개념을 응용해야 하는지 등의 부분에서 전보다 나아졌다는 느낌을 받았다.
그리고.. 아무것도 없던 화면에 레이아웃이 나타나고, 백엔드와 통신해서 DB에 있는 데이터들이 화면에 나타날 때 굉장히 즐겁다. 프론트엔드를 공부하길 잘했다는 생각이 든다.
같이 2주 넘게 고생한 팀원 분들께 감사를 전하고 싶다.