프로젝트 개요
처음으로 하는 팀 프로젝트인 동시에,
백엔드와 함께 작업하는 첫 번째 프로젝트이다
목적:
이미 완성된 사이트를 팀원과 최대한 동일하게 구현해보며
사이트를 구현하는 작업의 흐름을 파악하는 것
클론 대상 사이트:
https://grafolio.naver.com/works/list.grfl
네이버의 창작물 관련 커뮤니티 사이트로,
컴포넌트를 사용한 리액트 구조를 잡는 연습을 하기 좋아보였고,
캐러샐, 페이지네이션, CRUD 등
웹사이트의 중요 기능들을 연습할 수 있을 것 같아 선택하게 되었다
프로젝트 팀 노션:
https://www.notion.so/wecode/PhotoFolio-330fe6e36a4a4a6ebbc0648dd5194403
프로젝트를 시작하며,
프로젝트를 통해 얻을 수 있을거라고 예상하는 경험은 아래와 같다
- 사이트의 레이아웃 구조와 기능을 분석하는 것
- 사이트에서 자주 사용되는 기능들을 직접 구현해 보는 것
- 팀원과 소통하며 협업을 진행하는 것
- 깃허브를 통해 협업하는 것
진행도 및 느낀점
1일차:
예상한 것 보다 훨신 미팅 시간이 많이 필요했다
주말에 사전 미팅을 했음에도, 오전부터 저녁까지 회의를 하는데에 시간을 보냈다
모두가 첫 프로젝트이므로, 전체적인 흐름을 알지 못하기 때문에
정리된 느낌의 회의는 아니었으나
팀원 모두가 서로 배려하며 소통하여, 전체적인 프로젝트의 틀을 잡을 수 있었다
전체 미팅 > 파트별 미팅 > 전체 미팅 순서로 진행되었고
파트별 미팅 이후 가닥이 잡히는 것 같았다
사이트를 컴포넌트와 기능 단위로 분석한 뒤,
파트를 분배하고, 작업의 우선도를 고려하여 예상 기한을 정했다
작업 기한을 관리를 위하여, 노션의 타임라인을 사용하였다
이틀 정도를 레이아웃 위주로 작업 후,
세부적인 기능들을 백엔드와 소통하여 구현할 예정이다
간단해보이는 컴포넌트도 생각보다 구현이 어려워서
시간을 잘 써야 할 것 같다는 생각이 들었다
프론트 미팅 정리 노션:
https://www.notion.so/codject/c275c0de25ef4d0996540da033625b98
2일차:
어제보다는 덜했지만 오늘도 회의가 꽤 길었다
오늘 본격적으로 작업을 시작하면서 느낀 점은
JS, 리액트의 기초적인 개념들은 정리가 됐기 때문에
당장 손도 못 쓸 정도의 어려움은 없는 것 같고,
내가 어물쩡 거리지 않고 작업을 하면
보류하기로 한 부분까지도 구현할 수 있을 것 같다는 생각이 들었다
내 태도에 따라, 이번 프로젝트에서
내가 구현할 수 있는 영역이 결정되지 않을까
팀원의 협조가 요구되는 상황이 종종 있는데 연락하기 전 미리 알아보고,
준비해서 도움을 요청하고, 소통하여 빠르게 해결하는 것과,
크고 작은 문제로 지체될 때, 빠르게 검색하고 답을 찾으려는 태도가
생산성에 큰 영향을 미칠 것 같다
그리고 팀원들과 맞춰가야 하다보니
내가 기다려야 할 때도 있고, 팀원이 나를 기다려줘야 할 때도 있다
그런 텀이 생길 때, 시간을 어떻게 사용해야 할지 고민해봐야 할 것 같다
여유가 생긴다면, 우선 팀원이 만든 ERD나 서버 코드를 이해해 보려한다
<오늘 한 작업>
아트워크 레이아웃
클릭된 아트워크 필터 확인하기
카드리스트 레이아웃
회원가입창 레이아웃
회원가입창 인풋 정보 모으기
(useEffect를 왜 쓰는지, 조금 더 정확하게 이해할 수 있었다)
3일차:
오전 세션으로 깃허브를 통한 워크 플로우에 대한 내용을 듣고
이를 적용하기 위하여 하루종일 회의하며
브랜치 관리에 대해 협의하고, 커밋해보며 에러를 해결하였다
에러를 해결할 때, 팀원의 화면을 통해 보는 것과
직접 검색하고 vsc를 조작하는 것에 큰 차이가 있다는 것을 느꼈다
아직 다른 사람의 화면을 보면서 문제를 해결할 능력은 없는 것 같다
회의 후 팀원분이 정리해주신 커밋 규칙은 다음과 같다
1. 브랜치는 기능별로 분리한다(feature/컴포넌트명)
2. develop 브랜치로 모든 작업물을 관리한다
3. 개인 브랜치에서 develop 브랜치로 pr한다
로컬 develop 브랜치 업데이트 순서
1. 저장한 작업물을 개인 브랜치로 commit(코드 변경 사항이 있으면 checkout이 안됨)
2. 로컬 develop 브랜치로 이동
3. git pull origin develop(깃허브에 저장된 최신 코드를 가져온다)
4. 작업물을 저장한 브랜치로 이동
5. git merge develop (commit한 작업물과 최신상태의 develop 브랜치 코드를 병합한다)
6. 이어서 작업관련 포스팅:
https://velog.io/@yopi27/git-명령어
4일차:
점점 피곤하고 예민해져서
스스로 여유가 없어지는게 느껴진다
팀원과 소통 할 때,
서로 힘든 만큼 조심해서 말하고,
배려해주는 태도를 유지하도록 신경써야 할 것 같다
<오늘 한 작업>
git/gitjub 내부 구조 정리
프론트 작업물을 합친 뒤 팀원 확인 후 develop 브렌치에 merge
로그인/회원가입 기능 구현 후 백엔드 팀원과 통신 확인
로그인/회원가입 페이지 노출 로직 구현
로그인/회원가입 레이아웃 수정
merge 후 충돌 처리 방법 확인
5일차:
하루종일 앉아 있었는데도 한게 없는 하루였다
이미지 업로드에 대해 알아보다
서버 통신에 대한 내용을 다시 복습할 필요성을 느껴
프론트 작업 후 통신 확인에 사용할 서버를 만들어 보았다
<오늘 한 작업>
간단한 레이아웃 수정
6일차:
집안 행사 참여
7일차:
오후부터 공부 시작
업로드 관련해서 계속 찾아보고 백엔드 팀원과 연락하여 테스트해보았다
테스트 결과 이미지 전송이 잘 안돼서 더 찾아봐야 한다
업로드에 필요한 정보를 이틀간 찾고보니, 필요한 정보가 몇 줄 되지 않아서
이틀간 뭘 한건지 허무한 기분이 들었다
혼자 작업할 때, 서버 통신이 잘 되는지 확인이 어렵다보니 작업에 속도가 나지 않는다
다음 작업 전, 이 부분을 어떻게 해결할지 고민해보려 한다
통신이 필요한 작업을 할 때,
프론트가 어떤 데이터을 보냈을 때, 어떤 응답 데이터를 받아올지
패드에 순서도를 그리며 정리하는 것이 크게 도움 되는 것 같다
