🎮 게임과 관련된 모든것, GameUs 🕹

[배포 URL]

• URL: https://gameus.web.app/
• 계정
  • ID: gameus@gmail.com
  • PassWord: asdf1234

1. 프로젝트 소개

[개요]

🎮 게임과 관련된 모든 것, 게임어스는 게임 칩, 게임기 등 게임에 관련된 물품을 사고 파는 중고거래 커뮤니티입니다.

게임을 좋아하는 팀원들이 모여, 게임 물품 전용 중고 거래 사이트를 제작하였습니다.

팔고 싶은 게임 관련 물품을 자신의 프로필에 올려 판매 할 수 있습니다.

게임으로 가득찬 나의 일상을 글과 사진이 담긴 게시물을 작성하여 다른 유저에게 공유할 수 있습니다.

나와 취향이 비슷한 여러 유저를 검색후 팔로우하여 피드에서 게시물을 구경할 수 있으며, 댓글을 남기고 좋아요를 누를 수 있습니다.

[링크]

• 🎮 프로젝트 레포지토리
• 📚 팀 스터디 레포지토리
• 📑 팀 워크스페이스
• 🎨 디자인 피그마

2. 팀원 소개

김도희	김보람	여다희	이혜원
github: hee1231	github: boram2445	github: yeodahui	github: donkeeman

3. 역할분담

☺️ 김도희

• 프로젝트 전반적인 디자인 및 스타일링
• 프로필 수정 페이지 마크업
• 채팅 방 페이지 마크업
• 404 페이지 마크업 및 기능 구현

😆 김보람

• 상품 등록 페이지 마크업 및 상품 등록, 수정, 삭제 기능 구현
• 게시글 등록 페이지 마크업 및 게시글 등록, 수정, 삭제, 신고 기능 구현
• 댓글 등록, 삭제, 신고 기능 구현
• 이미지 리사이즈 및 이미지 업로드 기능 구현
• 모달 마크업 및 기능 구현
• 검색 기능 구현

😛 여다희

• 로그인, 검색, 채팅 목록 페이지 마크업
• 홈 피드 페이지 마크업 및 팔로우하는 사용자 게시글 불러오는 기능 구현
• 좋아요 및 좋아요 취소 UI 구현
• 하단 탭 네비게이션 바 마크업 및 기능 구현

😎 이혜원

• Splash 페이지 마크업 및 기능 구현
• 로그인, 로그아웃 기능 및 토큰 검증, 유효성 검사 구현
• 회원가입 기능 및 유효성 검사 구현
• 사용자의 프로필 페이지 마크업 및 프로필 수정 기능 구현
• 팔로잉/팔로워 목록 페이지 마크업 및 팔로우, 언팔로우 기능 구현
• 좋아요, 좋아요 취소 기능 구현

4. 개발환경

[기술]

Front-End	Back-End	버전 및 이슈관리
HTML Living Standard CSS Modules React	API 제공됨	Git Github Notion

📌 Styled components vs CSS Modules

팀원들 모두 이 프로젝트를 통해 리액트를 능숙하게 다루고 싶다는 공통적인 목표가 있었습니다.
하지만 네 명 모두 리액트를 사용해본 경험이 없었기 때문에, 기존의 CSS와 사용법이 유사한 CSS Modules를 사용해 학습비용 줄이기를 선택하였습니다.

📌 Git-flow vs Github-flow

깃 브랜치 전략으로 깃허브 플로우를 채택했습니다.
짧은 호흡으로 개발하기 때문에 적응하는 데 시간이 많이 들지 않았으면 했고, 팀원들 간의 작업 내용을 빨리 주고 받기에 유용할 것 같다는 판단 하에 깃 플로우에 비해 브랜치 구조가 단순한 깃허브 플로우를 사용했습니다.

[패키지 모듈]

• create-react-app : 개발환경 세팅
• eslint, prettier : 코드 포맷팅, 개발단위에서의 코드 품질 관리
• react-router-dom : 라우팅 처리
• browser-image-compression : 대용량 이미지가 서버에 업로드되기 전 리사이징

5. 디렉터리 구조

📌 아토믹 디자인 패턴을 기반으로 하여 디렉터리를 구성하였습니다.

assets : 프로젝트에 사용되는 이미지 및 폰트
common : 여러 컴포넌트가 사용하는 js 파일
contexts : useContext를 이용한 context 파일

컴포넌트 분리
	atoms : button, CommentIcon, ImageBox 등 최소 단위의 컴포넌트
	molecules : atom을 조합해 헤더, 네비게이션 바 등 목적을 가진 UI 컴포넌트
	organisms : 리스트나 폼 등 molecules가 여러 개 모인 컴포넌트
	pages : 라우팅 되는 단위, 아래로 props를 내려주는 페이지 컴포넌트

------------------------------------

📁public
  ├─📄favicon.ico
  └─📄index.html
📁src
  ├─📁assets
  │   ├─📁fonts
  │   ├─📁icons
  │   └─📁images
  ├─📁common
  ├─📁components
  │   ├─📁atoms
  │   │   ├─📁Author
  │   │   ├─📁Button
  │   │   ├─📁Comment
  │   │   └─ ...
  │   ├─📁molecules
  │   │   ├─📁BottomNavigateBar
  │   │   ├─📁ChatRoom
  │   │   └─ ...
  │   └─📁organisms
  │       ├─📁CommentList
  │       ├─📁EmailPasswordForm
  │       └─ ...
  ├─📁pages
  │   ├─📁ChatListPage
  │   ├─📁ChatRoomPage
  │   ├─📁ErrorPage
  │   └─ ...
  ├─📁contexts
  ├─📄App.jsx
  ├─📄index.js
  ├─🎨font.css
  ├─🎨global.css
  └─🎨reset.css
📄.eslintrc
📄.prettierrc
📄package-lock.json
📄package.json
📄README.md

6. 핵심 기능

1) 홈

splash	로그인	회원 가입

홈 피드	검색

채팅	404 페이지

2) 게시글

게시글 작성	게시글 수정	게시글 삭제

게시글 상세 및 댓글	댓글 삭제	댓글 신고

게시글 신고	좋아요, 좋아요 취소

3) 프로필

내 프로필	프로필 수정

팔로워, 팔로잉	타 유저 프로필 및 팔로우, 언팔로우

4) 판매 상품

상품 등록	상품 수정	상품 삭제

7. 핵심 코드

1) 아토믹 디자인 패턴

컴포넌트를 단위별로 쪼갠 후 필요한 부분에 조합하는 형식으로 페이지를 구성했습니다.

atom, molecule, organism을 활용해 UI는 최대한 재활용하고, API로 받아온 정보 등은 page에서부터 아래로 내려주었습니다.

...
return (
    <section>
      <h2 className="a11y-hidden">게시글 상세 페이지</h2>
      <HeaderForm backButton={true} menuButton={true} /> // molecule
      {post && comments ? (
        <div className="wrapper-contents">
          <PostCard post={post} /> // molecule
          <CommentList // organism
            comments={comments}
            handleDelete={handleDelete}
            handleReport={handleReport}
          />
          <MessageInput // molecule
            type="comment"
            src={user.image}
            title="댓글"
            placeholder="댓글 입력하기..."
            buttonText="게시"
            inputRef={inputRef}
            onClick={handleTextInput}
          />
        </div>
      ) : (
        <Loading /> // molecule
      )}
    </section>
  );

2) 데이터가 로드되었는지 상태 확인

useEffect를 통해서 데이터를 가져오는 fetch 함수를 수행하고, 그렇게 받아온 데이터를 컴포넌트에 보여주고자 하였지만, 렌더링보다 늦게 가져와져 컴포넌트에 원하는 데이터가 제대로 표시되지 않거나 화면이 깜빡거리는 이슈가 있었습니다.

이를 해결하기 위해, 아직 데이터를 받아오지 못하였다먼 로딩 컴포넌트를 보여주고, 데이터를 받아왔을 경우에만 원래의 컴포넌트를 보여주도록 하였습니다

const [post, setPost] = useState();
const [comments, setComments] = useState([]);
useEffect(() => {
    getPostComment(user.token, postId, setComments);
    getPostData(user.token, postId, setPost);
  }, [postId]);

return(
	<section>
		<h2 className="a11y-hidden">게시글 상세 페이지</h2>
		<HeaderForm />
		{post && comments ? (
		  <div className="wrapper-contents">
		    <PostCard post={post} />
		    <CommentList comments={comments}/>
		    <MessageInput/>
		  </div>
		) : (
		  <Loading />
		)}
	</section>
)

3) 웹 접근성을 높이기 위한 노력

• 상단에 텍스트가 없는 디자인의 페이지의 경우에는 a11y-hidden 클래스를 이용하여 페이지 설명을 숨겨주었습니다.

• 텍스트가 너무 길 경우 말줄임표로 줄이되 title 속성을 이용하여 마우스를 올리면 전체 텍스트를 보여주도록 하였습니다.

...
<span className={styles["product_name"]} title={product.itemName}>
  {product.itemName}
</span>
...

8. 우리팀의 스페셜 포인트

1) 프로젝트 스터디 진행

프로젝트를 시작하기 전 필요한 지식들에 관해 스터디를 진행했습니다. (📚스터디 디렉토리)

GitHub-flow 브랜치 전략, Github Issues와 Project, React 프로젝트의 디렉터리 구조, 피그마 사용법, StoryBook 사용 방법등의 주제로 실습 위주의 스터디를 진행했습니다.

다른 프로젝트들을 분석해서 발견한 툴이나 전략을 스터디를 통해 직접 사용해보고 그것을 우리 프로젝트에 어떻게 적용시킬 지 의논하였습니다. 그 결과 하나의 주제에 대한 팀원 전반의 이해도를 높일 수 있었습니다.

2) 아토믹 디자인 패턴 사용

아토믹 디자인 패턴을 기반으로 컴포넌트를 분리하였습니다.

아토믹 디자인 패턴은 atoms - molecules - organisms - templates - pages 5단계로 컴포넌트를 분리하지만, 프로젝트 규모에 비해 지나치게 단계를 분리하면 작업 속도가 느려지고 복잡할 것이라 예상해 4단계(atoms - molecules - organisms - pages)로 패턴을 변형해 컴포넌트를 분리하였습니다.

아토믹 디자인 패턴을 적용함으로써 bottom-top 개발 방식에서 어떻게 컴포넌트를 나눌 수 있을지 많이 고민해볼 수 있었습니다.

하지만 atoms를 모두 개발한 뒤 페이지를 구성한 것이 아니라 작업단위를 페이지 단위로 설정해, 팀원간에 같은 컴포넌트를 개발하고 있는 등의 헤프닝이 있었습니다. 이러한 문제를 매일 👩‍👩‍👧‍👧데일리 스크럼을 진행해 서로의 작업상황을 공유함으로써 해결했고, 아토믹 컴포넌트 개발을 진행할 때는 그에 알맞게 컴포넌트 단위의 작업분담이 필요하다는 레슨을 얻었습니다.

3) 적극적인 깃허브 활용

태스크, 이슈, PR 관리 등에 깃허브를 적극적으로 활용하였습니다.

저희의 팀 규칙 중 하나는, 누군가 이슈를 발견했을 때 “해당 이슈를 발견하게 된 상황”, “왜 이 이슈를 해결해야 하는 지” 등 문제에 대해서 팀원들이 이해하고 공감할 수 있도록 최대한 자세히 설명하기입니다.

예를 들어 버그를 발견했을 때는 해당 버그가 나타난 상황에 대해서 공유하고, 자신이 생각했을 때의 해결방법 등 전달받는 사람이 이해하기 쉽게 전달하려고 노력했습니다.

구체적인 이슈 작성
이슈를 생성할 때는 버그 발생 상황에 대해 설명하며 캡쳐나 gif를 첨부하는 등 최대한 정보를 전달하였습니다.

구체적인 PR 작성
PR에는 이슈를 링크해 어떻게 해결했는지, 어떤 글을 참고했는 지에 대한 설명과 중점적으로 봐주었으면 하는 부분을 명시해 효율적인 코드 리뷰를 유도하였습니다.

Issue와 Pull Request에 템플릿을 적용
깃허브의 Issue와 Pull Request에 템플릿을 적용하여 커뮤니케이션에 사용되는 비용을 줄이고자 하였습니다.
BUG, CUSTOM, FEATURE 세 가지 Issue 템플릿을 만들어 사용하였습니다.

깃허브 프로젝트
이슈를 🎮깃허브 프로젝트와 연결하여 진행 상황을 한눈에 볼 수 있도록 하였습니다.

깃허브 위키
📑깃허브 위키에 코딩, 커밋, PR 컨벤션을 정리해 두어 편하게 볼 수 있도록 하였습니다.

디스코드 웹 훅
PR을 작성하면 최소 2명에게 코드 리뷰를 받은 뒤 머지하도록 규칙을 설정해서, 디스코드 채널에 Github 웹훅을 연동해 PR이나 변경사항 커밋이 있을 경우 빠르게 알림을 받을 수 있도록하였습니다.

9. 고생담, 레슨런

1) 아토믹 디자인 패턴은 많은 작업시간과 에너지를 요구한다 😱

• props가 계속 컴포넌트를 타고 전달되기 때문에 여러 컴포넌트를 동시에 관리하기 복잡했고, 각각의 컴포넌트가 잘 동작하는지 확인하기가 까다로웠습니다.
• 기존의 5단계 구조에서 atom, molecules, organisms, pages 4단계 구조로 변형해 사용했지만, 좀 더 단순화할 필요가 있었던 것 같습니다.
• 이러한 문제를 예상해서 프로젝트 전 스터디를 통해서 StoryBook을 사용해봤지만, 리액트에도 익숙하지 않았었기 때문에 학습 비용이 높다고 판단해 도입하지 않았습니다.
• 하지만 이번 프로젝트를 통해서 시각적 테스트의 어려움을 크게 느꼈고*, 아토믹 디자인 패턴을 기반으로 컴포넌트를 분리할 때는 StoryBook이 필수적이라는 것을 깨닳았습니다.

2) 편리한 UI 재사용 vs 기능 추가의 어려움 🌱

• 컴포넌트를 확장성있게, 재사용 가능하게 만들면서 기능을 추가하기가 까다로웠습니다. UI의 재사용은 편리했지만, State를 사용하는 등 동작을 추가하면 기대와 다르게 동작하는 경우가 많았습니다.
• 그래서 이벤트 핸들러나 상태 등은 재사용되지 않는 컴포넌트나, page 단위에서 props로 전달할 수 있도록 만들어주었습니다.
• 하지만 props를 아래로 전달하고 또 전달하는 구조는, 컴포넌트를 사용할 때마다 props의 형식을 매번 확인해야 하는 번거로움이 있었습니다. 이 부분은 props의 타입을 강제하거나 default 값을 정의해줌으로써 개선할 수 있을 것 같습니다.

3) 커뮤니케이션으로 만드는 적극적인 팀 💕

• 개발 프로젝트 경험이 많이 없다보니까 고민도 불안도 많았습니다. 잘하고 싶고, 어떤 논제에 대해 의견을 주고 받고, 실행을 해보고는 싶은데 아이디어가 쉽게 나오지 않았습니다. 오랜만에 처음 프로그래밍 공부를 시작할 때 같은 막막함을 느꼈습니다.
• 저는 이러한 문제가 지식의 격차로부터 발생된다고 생각했습니다. 어떠한 문제에 대해서 의견을 내려면 최소한의 지식이나 경험이 있어야 자신감을 가지고 제시할 수 있을 것 같았습니다.
• 그래서 정보를 긁어모았습니다. 다른 프로젝트들을 분석하고, 협업 주제의 블로그 글을 읽고 다른 개발자분들께 질문을 던져가며 정보를 얻은 다음, 적용할 수 있을 법한 키워드들을 가져와 스터디를 시작했습니다.
• 3~4일에 한번씩 회의하면서 스터디를 진행하기 힘들었지만, 자신이 맡은 주제에 대해서는 팀 내에서 나름의 스페셜리스트가 되어 그 분야를 리드할 수 있게 되었습니다. 부족한 정보들을 채우고 나니 자신감이 생겼고, 자신의 분야가 정해지며 오너십을 나눠가지고 이전보다 활발하게 의견을 주고받았습니다.
• 이 경험으로 우리는 소식을, 문제를 공유하는 것이 곧 적극적인 팀을 만든다는 교훈을 얻었고, 이후로도 노션 워크스페이스 활용, 데일리 스크럼, 깃허브, 페어프로그래밍 등 원활한 커뮤니케이션을 위한 노력을 해나가며 “문제에 대해서 팀원들이 이해하고 공감할 수 있도록 최대한 자세히 설명하기”라는 규칙을 지켜왔습니다.

10. 🚀 앞으로의 도전과제

• 아토믹 디자인 패턴을 적용하며 헤메면서 중복코드가 많이 생겼는데, 제거하는 것에 어려움을 느끼고 있습니다. API 코드를 분리하고 Custom Hook을 만들어 지금의 코드보다 가시적이고 효율적인 코드를 만들 수 있을 것 같습니다.
• setState의 비동기적 실행에 대해 더욱 공부하여 버벅임을 고쳐보도록 하겠습니다.
• 홈 피드, 팔로워/팔로잉 목록, 댓글 등의 데이터를 불러올 때 개수 제한이 있습니다. 무한스크롤 또는 페이지네이션을 추가해 전체 목록을 보여주도록 개선하고 싶습니다.