PBL-Instagram, 팀 프로젝트
PBL-Youtube 개인 과제가 끝나고
이번 주차부터 새로운 PBL 과제가 시작됐다.과거 과제와 달리 이번에 하는 과제는 스터디로 구성된 팀과 함께
Instagram 클론 코딩을 진행해야한다.
이전에 했던 모든 팀프로젝트의 팀원은 매번 동일했기에 새로운 협업 방식을 정하지 않았어도 됐다.
하지만 이번 프로젝트는 새로운 사람들과 함께하기 때문에 협업 방식을 조율하는 과정이 필요했다.
그래서 이번 주의 프로젝트 진행 과정을 적어나가보자 한다.
[23.07.31] 역할 분담
스터디의 팀장으로서 PM 을 맡게 되었다.
다들 비슷한 경험 역량을 가지고 있었다. 그렇기 때문에 다양한 의견들이 나온다.
그래서 내 역할은 오더와 동시에 다양한 의견들을 듣고
더 나은 방향, 더 효율적인 방향으로 프로젝트가 진행될 수 있도록 의사결정권자라고 생각한다.
PM 이 되고나서 가장 먼저한 일은 프론트엔드 팀과 백엔트 팀을 분리하는 것이었다.
그리고 팀별로 팀장을 선발했다.팀원들에게 팀장을 뽑는 이유들을 다음과 같이 설명했다.
다들 비슷한 경험을 가지고 있기 때문에 다양한 의견들이 나올 것이고 빠른 진행을 위해 의사결정권자가 반드시 필요하다.
우리 모두가 언젠가는 리더가 될 사람들이기 때문에 한 번쯤은 팀장이 되어봐야한다.
앞으로 진행될 팀프로젝트가 3번 정도 있기 때문에 한 번씩 돌아가면서 팀장을 맡아봤으면 좋겠다.
본인이 팀장이 되는게 부담스러울 수 있으니 지금은 경험이 많은 사람이 우선적으로 팀장을 맡았으면 한다.
선발된 팀장들이 어떻게 팀을 이끌어나가는지 배우고 이후에는 꼭 팀장을 맡아봤으면 한다.
나는 PM 이자 프론트엔드 팀 소속이다.
하지만 프론트엔드 팀 내부에서는 팀장을 맡지 않겠다고 했다.
나도 팔로워로서 리더가 더 나은 결정을 내릴 수 있도록 서포팅하는 연습이 필요하다고 생각하기 때문이다.그래서 선발된 프론트엔드 팀장의 선택을 믿고 따라가보자한다.
[23.07.31] Instagram 분석
역할 분담을 완료하고 Instagram 기능 분석에 돌입했다.
페이지 별로 Instagram에 어떤 기능들이 있는지, 그리고 어떤 방식으로 동작하는지
크롬 개발자 도구를 통해서 API 를 간략하게 분석하고 기록했다.
분석 일부
- 인스타 스토리 조회 내부 뜯어 보았을 때
- 조회할 수 있는 모든 스토리 데이터를 한번에 받아오는 것이 아니다.
- 한번에 7개의 스토리 데이터를 받아온다.
- 실제 스토리 데이터는 5개이며 왼쪽, 오른쪽 영역에 더미 스토리 데이터가 2개 더 존재한다.
- 현재 재생되고 있는 스토리 외에는 썸네일로 되어 있는 것 같고,
실제 보고 있는 스토리만 미디어 데이터를 받아온다.- 스토리를 이동하게 되면 재생되는 스토리를 기준으로 9개의 스토리가 동적으로 변경되는 것으로 보인다.
- 즉, 정확한 내부 로직은 알 수 없으나 스토리를 이동할 때 다음 스토리의 정보를 다시 매핑하는 것으로 보인다.
- 스토리는 24시간 뒤에 사라진다.
- 스토리는 수정이 불가능하다.
분석을 마치니 모든 인스타그램의 세부 기능을 구현하기에는 2주라는 시간이 짧다고 판단했다.
그래서 필수적인 기능(로그인, 회원가입, 비밀번호 찾기, 메인페이지, 프로필 페이지, 검색 페이지, 댓글 등)들만 구현하기로 했고 일부 기능들을 걸러냈다.
그래서 특정 데이터(댓글, 피드 등)의 CRUD 일부가 존재하지 않게 되었는데
이 부분이 사실 아쉽다.
[23.08.01] 프론트엔드 팀 할일 배정 1 - 제출물 제작 역할 분담
과제에서 요구하는 제출물은 총 3개이다.
- SWOT 분석
- 프레임워크 또는 와이어프레임
- 코드
구름톤 트레이닝 내부에서 시키진 않았지만,
우리 스터디는 이전 3개의 PBL 개인프로젝트를 완료할때마다
모여서 각자 제출물들을 토대로 리뷰 및 피드백을 했다.
이 때마다 나는 팀원들의 특화된 역량을 파악했고, 각자 어느 부분에 자신 있어하는지 파악했다.
그래서 이 데이터들을 기반으로 SWOT 분석과 프레임워크 또는 와이어프레임 제작을 요청했다.
다행히도 요청받은 팀원들이 좋다고 해줘서
내가 잘 파악한게 맞구나라는 생각을 했다.
[23.08.01] 백엔드 팀 할일 배정 1 - API 처리 시 필요한 데이터 간단 정리
백엔드 팀에게는 API 처리 시 필요한 데이터들을 간단 정리해달라고 했다.
정리한 내용을 토대로 우리가 API 요청을 보낼때 보내 줄 JSON 데이터를 만들어 내기 위함이었다.
[23.08.01] 프론트엔드 팀 할일 배정 2 - 페이지별로 필요한 API 정리
각 팀의 할일 배정 1이 거의 동시에 끝났다.이것도 계산된 상황이었다.
프론트엔드 팀은 백엔드에서 만들어낸 데이터 간단 정리들을 보고
페이지별로 출력할 데이터 목록 및 필요한 API를 만드는 일을 배정했다.
목록 일부
- 메인 피드 영역
피드 목록 가져오기 - 무한 스크롤 10개씩
- 피드
- 작성자
- 작성자 프로필 사진
- 작성자 닉네임
- 피드
- 작성 일자: 년월일시분
- 미디어 목록
- 좋아요 수
- 로그인한 사용자가 좋아요를 눌렸는지 여부 상태 값
- 로그인한 사용자가 보관함에 저장했는지 여부 상태 값
- 좋아요 모달
최근에 좋아요를 누른 100명 사용자 리스트 가져오기
- 사용자
- 사용자 프로필 사진
- 사용자 닉네임
- 사용자 설명
...
[23.08.02] 백엔드 팀 할일 배정 2 - ERD 제작
ERD 제작의 경우 경험 상 오래 걸렸기 때문에
프론트엔드 팀 할일 배정 2가 끝나더라도 진행 중일 것이라 예상했다.또한 ERD 를 만들기 위해서
페이지별로 필요한 API목록이 필요하다.
그래서 미리 진행해달라고 했다.
[23.08.02] 종합 회의 - API 목록 검증
프론트엔트 팀에서 만든 API 목록들을 백엔트 팀과 함께 보면서 검증하는 시간을 가졌다.
이 때 빠뜨린 API들을 발견해서 보충했다.
[23.08.03] 백엔드 팀 할일 배정 3 - 팀장에게 권한 위임
프론트엔드 팀에서 백엔드 팀에게 전달해야할 문서들을 모두 전달했다고 판단했다.
그래서 ERD 제작, API 문서 제작 및
백엔드 팀 단위에서 해야할 일들을 팀장의 오더 하에 진행해달라고 부탁했다.
[23.08.03] 프론트엔드 팀 할일 배정 3 - 팀장에게 권한 위임
프론트엔드 팀도 프론트엔드 팀 만의 해야할 일을 시작해달라고 요청했다.
그래서 프론트엔드 팀장에게 의사결정권을 넘기고 나도 서포트에 들어갔다.
[23.08.03] 종합 회의 - API 문서 검증
백엔드에서 작성해온 API 문서를 검증하는 시간을 가졌다.
이때 프론트엔드와 백엔드 사이에서 사용할 key 값,
즉 식별자의 이름을 조율하는 과정을 거쳤고 빠진 부분들을 보충했다.또한 프론트엔드와 백엔드 간의 의문 사항들을 서로 공유하고 해결하는 시간들을 가졌다.
[23.08.03] 기술 스택 결정
프론트엔드에서 사용할 기술 스택을 정했다.
무턱대고 정한 것이 아니라 왜 이 기술 스택을 사용해야만 하는지 생각하는 과정을 거쳤다.
[23.08.03] GitHub 협업 방식 결정
Commit 컨벤션 및 branch 운영을 어떻게 할지 정했다.
추가적으로 ISSUE, Project 관리도 해보기로했다.
이 부분은 모두가 처음해보는 것들이라 연습하는 시간이 필요했다.이런게 있는 줄도 몰랐다.
현직에서 일하다 오신 분과 다른 교육생의 조언을 듣고 시도하게되었다.
Commit 컨벤션
branch 전략
- main : 배포 전용 브랜치
- develop : 개발 전용 브랜치
- 개발자 1 : 개발자 1이 맡은 기능들을 구현하는 브랜치
- 개발자 2 : 개발자 2가 맡은 기능들을 구현하는 브랜치
- 개발자 3 : 개발자 3이 맡은 기능들을 구현하는 브랜치
ISSUE 및 Project 관리
[23.08.04] 공통 파일 제작
프론트엔드 협업을 처음할 당시, git 역량이 부족한 상태에서 git 협업을 하다가
공통 파일(React Routing 파일, 상태관리 라이브러리 등)을다수의 개발자가 건드리는 상황이 발생해 수많은 충돌을 만들어 내서
이 충돌을 푸는데 많은 시간들이 걸렸던 경험이 있었다.
그래서 React Routing 파일, 아이콘 컴포넌트 제작, Color 값 상수화, font 규격 상수화
하는 과정들을 페어프로그래밍을 통해서 진행했다.
React Routing 파일
function App() {
return (
<Routes>
<Route path="/login" element={<Login />}></Route>
<Route path="/signup" element={<SignUp />}></Route>
<Route path="/help/password" element={<FindPassword />}></Route>
<Route path="/Home" element={<Home />}></Route>
<Route path="/stories/:userName/:storyId" element={<Story />}></Route>
<Route path="/explore/tags/:query" element={<SearchTag />}></Route>
{/* 예비 */}
<Route path="/feed/:feedId" element={<Feed />}></Route>
<Route path="/accounts/:userName" element={<Profile />}></Route>
<Route path="/accounts/:userName/edit" element={<EditProfile />}></Route>
{/* 예비 */}
<Route path="/accounts/:userName/feed/saved" element={<SavedProfile />}></Route>
{/* 삭제 예정 */}
<Route path="/icons-test" element={<IconsTest />}></Route>
</Routes>
);
}아이콘 컴포넌트
다수의 개발자가 사용할 수 있기 때문에
약 30개의 아이콘들을 미리 컴포넌트로 만들어뒀다.
// import ...
interface IconType {
size?: number;
color?: string;
}
// 로고
export const Insta = ({ size, color }: IconType) => (
<BsInstagram size={size} color={color} />
);
export const InstaLogo = ({ size }: IconType) => (
<img src={`/images/logoIcon.png`} width={size}></img>
);
export const InstaText = ({ size }: IconType) => (
<img src={`/images/logoText.png`} width={size}></img>
);
// 홈
export const Home = ({ size, color }: IconType) => <GoHome size={size} color={color} />;
export const HomeFill = ({ size, color }: IconType) => (
<GoHomeFill size={size} color={color} />
);
// ...Color 값 상수화
다수의 개발자가 사용하는 Color 값을 미리 식별자로 정의해서 가독성을 높이기 위함이다.
export const Gray1 = "#F5F5F5";
export const Gray2 = "#A8A8A8";
export const Gray3 = "#737373";
export const Gray4 = "#363636";
export const Blue1 = "#E0F1FF";
export const Blue2 = "#0095F6";
export const Red1 = "#ED4956";
export const Main = "45deg,#fcb045,#fd1d1d,#833ab4";Font 규격 상수화
디자인도 규격이 다 있다.
그래서 크롬 개발자 도구를 통해서 규격을 사용하는지 조사한 후 상수화 했다.
export const XS = "12px";
export const S = "14px";
export const M = "16px";
export const L = "24px";
export const XL = "30px";
export const Medium = "400";
export const Bold = "600";마치며
프론트엔드 팀와 백엔드 팀 사이에서의 협업, 프론트엔드 팀만의 협업들의 일부를 모두 마쳤다.
프론트엔드 팀이 해야할 일을 각자가 맡은 기능들을 구현해내는 것이다.
일주일 간의 과정을 모두 작성해봤다.
몰랐는데 엄청 많은 것들을 해냈다는 것을 느낄 수 있는 시간이어서 좋았다.새벽 2시 30분부터 작성했는데 벌써 새벽 4시 15분이다.
이번주도 시간이 너무 빨리갔다.
잘하고 있다.. 남은 기간도 힘내자!
열정! 열정! 열정!
