[TeamProject] '방갑고' 2주차 회고

👋🏻 팀프로젝트를 시작한 지 2주가 지났다. 시간이 왜 이렇게 빠른지.. 
1주 차는 새로운 프로그램에 접하고 사용해 보면서 적응하는데 시간을 보냈다면 2주 차는 본격적인 개발에 들어갔다. 

 

📌 '방갑고' 1주 차 회고 ⬇️

https://cyjcyj.tistory.com/186

[TeamProject] '방갑고' 1주차 회고

 

 

 

 

---

🏠 Project 방갑고 

 

 

✏️ 2주차 진행 완료

💁‍♀️ UI 및 CSS 구현
👉🏻 mypage profile 컴포넌트 UI (RadioButton, CheckBox) 수정

💁‍♀️ 기능 구현
👉🏻 찜하기 기능 구현 및 백엔드 서버 API 연동
👉🏻 mypage '찜한 목록' 백엔드 서버 API 연동
👉🏻 mypage '작성한 글' 백엔드 서버 API 연동
👉🏻 mypage '프로필' 상태관리 
👉🏻 mypage '프로필' 데이터 작성 및 구조 구현

 

 

 

⚠️ 2주 차 트러블 슈팅(Trouble Shooting)

❗️ 프로필에서 룸메이트 성향을 선택하는 checkBox를 두 곳에서 공유하기 때문에 ‘싫어요’에서 선택한 옵션을 ‘좋아요’에서 선택하지 못하도록 설정을 하고 싶었지만, 계속 한 곳에서만 선택한 checkBox가 표시되어 곤란했다.
✅ 해결 시도 1) ‘좋아요’와 ‘싫어요’의 상태값을 분리 후, checkBox를 사용했지만 선택되지 않은 checkBox 옵션을 가져오지 못했다.
✅ 해결 시도 2) 다시 ‘좋아요’와 ‘싫어요’의 상태값을 공유하고, filter & includes를 사용해서 선택되지 않은 checkBox 옵션을 분리하였다.

❗️ 프로필 중 ‘찜한 목록’ 불러오는 기능에서 API 연동할 때, 공통적으로 사용되는 postCard에서 오류가 났다. postCard 자체에서 GET으로 fetch를 사용하고 있기 때문에, 찜한 목록에서 GET으로 postCard를 가져오면 postCard의 GET이 중복해서 불러와져서 문제가 생겼다.
✅ postCard에 props로 link와 token의 유무에 따라 불러오는 fetch API 주소를 다르게 설정하여 해결하였다.
✅ 효과 : favorite.tsx와 board.tsx에서 useEffect()를 사용하여 GET fetch를 하지 않아도 된다. 

 

 

 

📌 깃허브 issues page 활용

🙌🏻 코드를 구현하면서 생긴 버그나 수정사항 같이 팀원이 알아야 하는 사항 등을  깃허브 issues 페이지에서 공유하는데 더욱 익숙해져야 할 것 같다. 
위에 영상은 issues를 추가할 때, commit한 관련 코드 #87번을 태그 해 issues로 정보를 확인하고, 코드로 한눈에 확인할 수 있도록 순서를 담은 영상이다.
해당 commit 코드를 함께 태그해서 issues에 올리는 것이 협업하는데 더 도움이 될 것 같다.
(issues에 commit한 코드 태그하는 법 알려주신 백엔드 장원님 감사합니다,, 🙇🏼‍♀️)

 

 

 

💪🏻 2주차 회고

본격적인 개발을 시작한 지 1주가 지나, 처음 애를 먹었던 깃허브에도 조금씩 익숙해지고, 백엔드 서버에 연동도 해봐서 새로운 경험을 한 것 같아 재밌고, 설렜다 🥹
하루에 한 번씩은 만나 회의를 진행한 덕분에 커뮤니케이션이 원활하여 개발 속도가 생각보다 빠른 것 같다.
전날 개발한 기능 및 화면을 프론트엔드 팀원들과 공유해서 수정할 부분에 대한 피드백을 빠른 시일 내에 주고받아 그때그때 수정하였다 ☺️

팀프로젝트 회의를 하면서 가장 인상 깊었던 말이 있었는데, '욕심 내세요!'와  '원하시는 거 있으면 바로 바로 말해주세요!' 하셨던 말이 제일 기억에 남는다 🥹 시원시원하게 먼저 말씀해 주셔서 회의 때 마음 편히 얘기할 수 있었던 것 같다. 

'방갑고' 팀원 분들이 너무 착하고, 좋은 분들이라 나는 운이 좋은 것 같다 🙌🏻

 

 

 

---

📝 3주차 진행 일정

💁‍♀️ 기능 구현
👉🏻 프로필 '기본 정보' 및 '사용자 성향 정보' 백엔드 서버 API 연동
👉🏻 프로필 '사진' 백엔드 서버 API 연동
👉🏻 마이페이지 '찜한 목록' useCallBack 이용해서 react 렌더링 최소화 적용

💁‍♀️ UI 및 CSS 구현
👉🏻 채팅 화면 구현
👉🏻 구현한 컴포넌트 CSS 수정

💁‍♀️ 학습
👉🏻 React 실시간 채팅 socket.io 서버 학습 및 적용