[Pre-Project] Day 2 - stackoverflow 주요기능,API, 역할 분담,Git flow,브랜치, 파일 세팅
📍Pre-Project, Day 2
오늘은 처음으로 하루종일 온전히 프리 프로젝트를 진행한 첫 날이기도 하다.
아래와 같은 내용들을 계획했으며 모두 진행하였다.
TMI) 하루종일 진행을 하고 많은 분들과 소통을 하다보니 벌써 목이 나가버렸다...
- 프론트엔드 - 각자 맡은 피그마 작업물 확인 후 수정 부분 체크
- 프론트엔드 주요 기능에 집중해보자! (주요 기능 재파악 후 작성)
- 프론트엔드 주요 기능 구현 역할 분담 + UI 작업 역할 분담
- 프론트엔드 페이지와 컴포넌트 구분하기
- 프론트엔드 측에서 API 명세서 확인
- client 파일 - 폴더 세팅 및 프레임워크 설치
- github에 client 파일 push 하기
- Git branch 어떻게 다룰지 정하기
- 프론트엔드 주간 일정 및 목표 세우기
- 백엔드 분들과 각자 진행 상황 파악 후 수정해야하는 부분 공유
- 최종적으로 사용자 요구사항 정의서 수정
✍🏻 주요 기능에 집중하자
→ 프론트엔드 팀원분들과 전일 각자 맡은 Figma 작업물을 같이 확인하며, stackoverflow의 주요 기능 구현에 집중해보면 어떨지 말씀 드렸고, 팀원분들도 Figma 작업을 하시면서 비슷하게 느끼셨는지 모두 동의하셔서 stackoverflow의 주요 기능을 구체적으로 파악하고 이에 집중하기로 하였다.
→ 주요 기능에 집중하여 다시 작성한 사용자 요구사항 정의서이다.
stackoverflow의 핵심이라고 생각한
질의응답과회원가입, 로그인에 집중했으며, 요즘 사용하지 않는 웹사이트가 없는소셜 로그인도 메인 프로젝트 전 공부하는 의미로 도전하기로 하였다.
→ UI / 기능 구현 역할 분담은 위에 표에서 보이는 것처럼 색깔별로 나눠서 하였다.
각자 공부해보고 싶은 부분을 맡아 구현하기로 하였으며, 구현이 빠르게 끝난 팀원분은 중요도 '중'에 해당되는 부분을 작업하시거나 도움이 필요한 팀원분을 도와주기로 하였다.
✍🏻 컴포넌트와 페이지 구분하기
→ 다음으로, stackoverflow 클론 코딩 파일 세팅을 원활하게 하게 위해
컴포넌트와기능별로 묶어서 정리하는 시간을 가졌다.
공통으로 사용하는 형식을 컴포넌트로 묶었으며, 기능별로 폴더를 만들어서 작업하기로 하였다
✍🏻 프론트 측에서 API 명세서 체크하기
→
API 명세서는 백엔드 분들께서 사용자 요구사항 정의서와 전일 회의 내용을 토대로 작성해서 금일 오후 3시 전체 회의 시간에 공유해주시기로 하였지만, 우리 프론트 측이 우리가 작업할 때 필요한 API가 무엇인지 누구보다 잘 알기에 우리 측에서도 확인하는 시간을 가지기로 하였다.
우리 측에서 필요한 API를 확인 후, 이후 전체 회의 시간에 백엔드분들께 공유해주시는 API 명세서에서 누락된 내용이 있으며 요청드리는 방법이 효과적일 것이라 판단했다.
(📝 실제로 전체 회의 시간에 체크할 수 있어 도움이 되었던 부분)
✍🏻 파일 세팅 및 프레임워크 설치
→ 컴포넌트와 페이지로 나눠서 폴더를 세팅하였으며, 필요한 프레임워크들을 설치하였다.
npx create-react-app {원하는 디렉터리 경로}
npm install @reduxjs/toolkit react-redux
npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier
npm install --save styled-components
npx create-next-app@latest
→ 빠르게 될 줄 알았던 부분인데, 생각보다 많은 오류를 만났으며 시간이 오래 걸려서 모두 당황했던 부분이다.
우리는 이번에
Next.js와Redux,React,Styled Component로 작업하기로 하였는데,Next.js에서 Redux 사용하기에서 별도의 작업이 필요하다는 것을 알게 되었고,Styled Component설치에서 어려움을 겪었다.
Next.js에서 Redux 사용하는 부분은 아래 블로그의 도움으로 해결하였지만, Styled Component는 설치 자체가 되지 않아 결국,styled -jsx로 작업하기로 하였다.
✍🏻 Git flow (branch)
→ 이번 프리 프로젝트에서는
Coz Git flow에 맞게 진행하기로 하였으며, 각자 작업할branch명은 이름 이니셜을 따서 만들기로 하였다.
또한 각자 작업 후에는 개인 branch에 push하고, 팀원들끼리 모여서 코드 리뷰를 한 후에 dev branch에 pull request하는 방향으로 작업하여 오류나 충돌을 막아보려고 한다.
✍🏻 일정 세우기
→ 일단 금주에는 중요도 '상'에 해당되는 주요 기능들을 구현하며 백엔드분들과 맞춰보고, 차주에는 최종적으로 맞춰보고 그 과정에서 생기는 오류들을 해결하고 배포하려고 한다.
✍🏻 사용자 요구사항 정의서 최종 수정
→ 전체 회의 시간에 프론트엔드, 백엔드 각자의 진행 상황을 공유하여
최종적으로 위와 같은 사용자 요구 사항 정의서를 완성하게 되었다.
백엔드분들도회원가입,로그인,검색같은 주요 기능에 집중하는 것이 좋다고 말씀하셔서 소통하는데 어려움이 없이 결정되었다.
🔥 각자 맡은 CSS 구현하기
→ 이제 각자 맡은 CSS 작업을 시작한다.
본인은소셜 로그인 창,Header,Footer,SideBar와 같은 컴포넌트 작업을 맡았는데 내일 오전 11시에 팀원분들과 만나 코드 리뷰하고 진행 상황 체크하는 시간을 가지기로 했으니 이제 열심히 달려봐야겠다🔥
