정규수업이 마무리되고 팀 프로젝트가 진행되었다.
프론트엔드 4명, 백엔드 3명이 지정되어 프로젝트를 시작하게 되었다.
처음 담당자들과 만나 가장 먼저 고민한 것은 어떤 페이지를 만들 것인지였다.
20가지 이상의 아이디어가 나왔는데, 최종으로 결정된 것은 애견 미용 플랫폼이다.
이번 프로젝트에서 FE 의 주요 수행 과정은 아토믹패턴 / 지도 / 일정관리가 될 것 같다.
1주차에는 사용하는 초기셋팅, 협업에 필요한 과정을 하나씩 정리했다.
1. 초기 셋팅
Next.js : SSR 렌더링 구현
TypeScript : 타입을 지정하여 차후 에러 방지
React : JS 및 컴포넌트 사용 등의 장점이 있는 JS 라이브러리 리액트 사용
GraphQL : rest API의 오버패칭 문제 해결 및 원하는 값만 가져올 수 있는 GraphQL 사용
ESlint : 다양한 플러그인을 사용하거나 새로운 규칙을 추가할 수 있고, 많은 사람들의 가독성을 위해 사용
Recoil : 초기 셋팅이 번거로운 Redux 대신 Recoil 선정
Emotion : css props를 사용할 수 있는 emotion 스타일 사용
2. 협업
Git : 프로젝트 관리
Jira : 업무 분담 및 진행 상황 관리
Figma : UI 및 컴포넌트 디자인 확인
팀원 중 Jira나 Figma를 다뤄본 경험이 있는 팀원분들이 있어 많은 도움을 받았다. 새로운 방법이나 툴을 사용해볼 기회가 생긴 것 같았다.
또한 페이지별로 파일을 구성하는 것이 아니라 실제로 협업에서 사용하는 것처럼 Input, Button, ListBox, Badge등을 만들고 페이지에 적용하는 구조로 FE를 만들 계획이다.
