데브코스에서 처음으로 하는 팀 프로젝트!🤣
드디어 데브코스의 하이라이트!! 팀 프로젝트를 진행했다. 기획부터 디자인, 개발까지 모두 진행해야했고 개발 기간은 17일이였다.
0. 프로젝트를 시작하기전에
프로젝트의 주제는 SNS 서비스였다. 주어진 시간 내에 프로젝트를 수행하는 과정도 중요하기 때문에 프로젝트의 구체적인 요구사항들은 시작일 전에 알려주지 않으셨다. SNS 서비스라는 키워드를 생각하며 팀원들과 프로젝트를 시작하기 전에 아이디어 회의와 기존 SNS 서비스들을 조사하고 팀원들과 공유했다.
- Spiceworks => IT 개발자와 IT 기술 업체들 모두를 위한 커뮤니티
- 재밌었던 점 : 사용자 게시글에 좋아요 버튼이 맵기 버튼이고 좋아요를 많이받은 사용자들은 사용자 아이콘이 점점 빨개지며 진화한다. - Instagram => SNS 서비스
- 참고할 점: UI/UX - Medium => 블로그 SNS 서비스
- 참고할 점: 라우터, 깔끔한 UI, 반응형 UI
조사를 하면서 UI와 SNS 기능들을 정리했고 아이디어 회의를 진행했다.
회의를 하던 중 데브코스와 같은 IT 행사들을 몰라서 참여하지 못했던 불편함과 블로그를 써도 공유할 곳이 마땅치 않은 불편함이 떠올랐다.
그래서 우리는 각종 IT 이벤트들과 본인의 블로그 글을 공유하여 피드백을 받을 수 있는 서비스 DevIn(Development + Information)을 구현하게 되었다.
1. 기획과 코드 컨벤션
프로젝트 시작날이 되었고 필수 요구사항들이 주어졌다.
우선 요구사항에 맞게 page와 router를 구성하고 간단한 와이어프레임을 그리고 팀원들과 생각을 맞추는 작업을 했다.
그 다음엔 기획서를 작성했다. 기획서에는 우리 서비스가 왜 필요한지 설득하는 내용이여야한다는 멘토님의 조언으로 기획의도와 유저스토리를 기획서에 녹였고 와이어프레임과 구현할 기능 요구사항을 정리했다.
👉 DevIn 기획서
본격적으로 개발에 들어가기 전에 팀 규칙을 정했다.
팀 규칙은 기술 스택 정의와 Code Convention, Git 규칙 등을 정리했다.
👉 DevIn Team Convention
2. 역할 분담
역할은 페이지에 따라 4가지로 나눴다.
- auth 페이지 (로그인, 회원가입, 알림)
- post 페이지 (CRUD, 댓글, 좋아요)
- event 페이지 (Event 필터링)
- search 페이지 (user, post 검색)
나는 여기서 search 페이지를 맡았고 4일차부터 본격적으로 개발에 들어갔다.
3. 개발
내가 구현한 기능은 다음과 같다.
1. 사용자 목록 불러오기 (10명씩)
2. 사용자, 게시물 검색 기능
3. 사용자 프로필
4. 팔로우, 팔로워 기능
프로젝트를 진행하면서 생겼던 문제와 해결방법은 Notion에 정리했다.
👉 프로젝트 문제와 해결방법
구현 결과
👉 DevIn 보러가기
👉 DevIn 깃허브
느낀 점😭
React를 써서 처음으로 만들어 본 프로젝트다 보니 부족한 점도 많았고 깨달은 것도 많았다. 개인적으로 개발이 제일 재미없을 때는 문제가 생겨서 막히고 그 문제가 며칠이 지나도 해결되지 못할 때인데 팀원들 덕분에 문제가 금방 해결되고 기능이 원하는 대로 구현돼서 너무 재미있는 프로젝트였다.(물론 막판엔 밤새 코딩해서 힘들긴했지만...)
추가로 프로젝트의 API를 구축해주신 개발자 선협님이 인상적인 프로젝트가 있으시냐는 질문에 몇 가지를 말씀해주셨는데 우리 프로젝트도 말씀해 주셔서 너무 기분 좋았다ㅠ API 요구사항을 충족해서 구현하려고 많이 노력했는데 그 부분을 좋게 봐주셨고 인상깊으셨다고 한다! 부족한 코드지만 데브 코스가 끝난 후 다시 코드를 보면서 내가 더 많이 성장했다고 느낄 수 있었으면 좋겠다.
배운 점
- atomic 컴포넌트 디자인 패턴에 대해 배웠다.
- react, redux - react와 redux 기본적인 사용법과 생명 주기를 익혔다.
- react-modal, react-cookie와 같은 리액트 라이브러리 사용법에 대해 배웠다.
- API - 주어진 API를 해석하고 그에 맞춰 코드를 짜는 방법을 익혔다.
- github 활용 - pull request, merge 뿐만 아니라 git flow, cherry-pick, 칸반보드 등 다양한 방면으로 깃허브를 활용하며 깃허브를 유용하게 사용할 수 있게 되었다
- 협업 기술 - 팀원들이 말을 너무 예쁘게 해주셔서 팀원들처럼 상냥한 화법을 쓰려고 노력했다
개선할 점
- 클린 코드 짜는 방법 공부하기
- 데이터와 컴포넌트 결합도를 낮추기
- 피그마 사용법 익히기
- custom hook 만들어 활용하기
- 컴포넌트 구조를 개발하기 전에 구상하고 어떤 컴포넌트를 누가 짤 것인지 분배하는 것이 좋았을 것 같다.
