Project Overview

Wecode 2차 프로젝트 텀블벅 클론 Tumbluv이 마무리가 되었다.

우리 팀은 세상 사람들의 도전을 응원하는 크라우딩 펀딩사이트 텀블벅을 프로젝트로 진행하게 되었다.

텀블벅 클론 코딩

Team Tumbluv

[tumbluv - 텀블벅 클론 코딩 시현 영상]

Github

프론트엔드: https://github.com/playck/17-2nd-tumbluv-frontend
백엔드: https://github.com/wecode-bootcamp-korea/17-2nd-tumbluv-backend

프로젝트 기간

2021.03.02 ~ 2021.03.12

기술 스택

프론트엔드 2명

• React
• React Hook
• React Router
• styled-Component
• Restful API
• Git
• 카카오톡 소셜 로그인 API

백엔드 3명

• Python
• Django
• MySQL
• Git
• AQueryTool
• Bycrypt / JWT
• RESTful API
• 카카오톡 소셜 로그인
• AWS (RDS, S3)

협업 Tool

• Notion
• Slack
• Trello
• GitHub

구현 페이지 Cycle

Cycle의 경우 펀딩 목적 크리에이터와 후원 목적의 사용자의 입장 2가지를 고려했다.
크리에이터의 경우 로그인 - 프로젝트 업로드 페이지
후원 유저의 경우 로그인 - 메인 페이지 - 프로젝트 디테일 페이지

주요 구현 사항

⚡︎ 내가 구현한 기능!

• 이메일 인증을 통한 회원가입, 로그인 기능
• 카카오 소셜 로그인
• ⚡︎ 공용 Navbar 구현
• 메인 페이지 레이아웃 구현
• QueryString을 활용한 메인 페이지 프로젝트 필터링 기능
• 무한 스크롤 기능
• ⚡︎ 프로젝트 업로드 페이지 레이아웃 구현
• ⚡︎ 프로젝트 내용(텍스트, 사진) 업로드 기능
• ⚡︎ 프로젝트 디테일 페이지 레아아웃 구현
• ⚡︎ 프로젝트 후원(금액 선택) 기능

기억에 남는 코드

이번 프로젝트 업로드 부분에서 사진 파일을 업로드 하는 기능이 있었는데 생각했던 곳보다 좀 더 복잡했었던 부분이었다.

이미지의 경우 formData의 양식으로 백엔드에 전송하여 S3를 거쳐 이미지 파일의 URL을 다시 받는다.
이후 최종 프로젝트 업로드시 URL을 보내면 사진 파일 업로드가 가능하다.

  const onSendImgData = () => {
    const formData = new FormData();
    formData.append('filename', imageValue);

    return axios
      .post('http://172.20.10.5:8000/project/file', formData)
      .then(res => { setImgUrlValue(res.data.thumbnail_url);
      });
  };

최종 결과물

1. 이메일 인증 회원가입과 소셜 로그인

2. 프로젝트 업로드

3. 메인 페이지 및 상세 페이지

Project Review

3.1절로 인해 1차 프로젝트보다 하루가 부족한 기간과 프론트엔드 2명으로 프로젝트를 시작하게 되었다. 꽤 험난하겠군 했지만 생각보다 많이 험난해서 이번 프로젝트 역시 정신없게 진행했던거 같다 ^^;

프로젝트 시작 전에 사실 크라우드 펀딩 사이트 개념에 대해서는 잘 알지 못했다. 이 부분은 잘 파악하지 못하고 업무 분담을 진행하니 우리가 만들고자 하는 cycle이 명확하게 나오지 않았다.
개발자로서 유저를 위한 UX를 고민하기 위해서 내가 만들고자 하는 웹이 유저에게 무엇을 제공하는지 유저는 무엇을 원하는지를 정확하게 파악해야 유저가 찾는 웹으로서 방향을 잡을 수 있음을 배웠다.

배운 점

새로운 기술 스택

이번 프로젝트를 시작하면서 React Hook과 Styled-Components를 배우게 되었는데 프로젝트를 하면서 배우는게 가장 효과적이라고 생각하여 바로 적용해서 진행하게 되었다.
개발자로서 새로운 기술 스택을 빠르게 배우고 적용시키는 능력은 매우매우 중요한 능력이라고 생각한다.

클래스형 컴포넌트를 사용할 때도 React가 정말 좋다고 생각했는데 Hook의 사용은 그 생각을 한층 더 업그레이드 해준거 같다.
코드가 전체적으로 간결해지는것이 좋았다.

Git branch 관리에서는 git rebase를 활용하였는데 commit 내역이 깔끔하게 정리되는 것이 보기 좋았다.

몸으로 배우는 스크럼 방식

이번 프로젝트는 프론트엔드 2명, 기업 협업 준비 등 여러 가지 상황 때문에 더 여유가 부족한 프로젝트였다.
그래서 프로젝트 목표 설정에 있어서 필요없는 부분은 과감히 제외하고 정말 구현할 부분 순차적으로 집중하고자 하였다.

그래서 우리 팀이 스크럼 방식으로 잘 진행되고 있는지 지속적으로 체크하는 것이 중요했다. 상대적으로 적은 팀원인 만큼 구현하는 웹 페이지는 적더라도 구현 기능의 우선 순위를 정하고 차근차근 확장을 하는 방식으로 하였고 덕분에 프론트/백엔드 협업에 있어 더 수월하게 소통을 할 수 있었다.
목표 설정에 있어 작은 단위로 집중을 할 수 있었고 회의에서 빠르고 효율적으로
팀의 목표를 조율할 수 있었다.

아쉬운점

프로젝트 업로드 페이지를 작업하는데 있어 반복을 줄이고 효율적인 코드를 고민하면서 결국 화면은 구현했지만 기능면에서도 너무 부족하고 특히 코드를 짠 방식이 아쉬워서 컴포넌트 재사용에 대해서 더 공부하여 리팩토링을 꼭 해보도록 하겠다.

팀 프로젝트 후기

빡센 만큼 또 많이 재밌게 기억되는 프로젝트 인듯 하다.
특히 내가 자리에서 코딩만 해서 많이 대화해보지 못한 우리 백엔드 동기들 채린님, 지윤님, 정윤님과 같이 프로젝트하면서 많이 친해질 수 있게 되어 너무 좋았다. 다들 너무 유쾌한 분들이다 ㅎㅎ

이번에도 우연히 PM을 맡게 되었는데 팀원들이 케어를 많이 해줘서 별탈 없이 발표까지 마무리 할 수 있었다. 특히 우리 식단 담당 정윤님이 맛집 선정과 단백질 공급에 너무나 열일을 해주셔서 우리팀에 배고픔 키워드는 없었다.

발표날에도 모두 아침 일찍 와서 우여곡절 끝에 프로젝트 발표까지 마치고 나니 뿌듯했다. 다들 너무나 고생했고 특히 나의 꾸준한 구박에도 웃으면서 맡은 부분을 완벽하게 해낸 프론트 팀원 지연님에게 고마움이 크다.

팀원 모두 고맙고 뛰어나신 분들이니 앞으로도 잘 될거라고 믿는다!