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

🥹 처음 팀프로젝트를 시작했을 때는 언제 다하지.. 다 할 수 있을까..라는 생각에 끝이 멀게 느껴졌지만,
벌써 4주차가 끝나버렸다!! 시간 왜 이렇게 빠른 건데~! 😭 
정말 얼마 안남았다!! 💪🏻

 

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

https://cyjcyj.tistory.com/189

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

 

 

 

 

---

🏠 Project 방갑고 

 

 

✏️ 4주 차 진행 완료

💁‍♀️ 기능 구현

👉🏻 myPage '신청현황' 페이지네이션 및 컴포넌트 구현
👉🏻 myPage '신청현황' 백엔드 서버 API 연동
👉🏻 1:1 매칭을 위한 '신청, 취소, 승인, 거절, 삭제 redux로 기능 구현 (백엔드 서버 API 연동)
👉🏻 1:1 매칭 이후, 프로필 및 게시글 백엔드 API 연동
👉🏻 @stomp/stompjs, sockJS를 사용한 채팅 구조 코드 작성 (테스트)
👉🏻 채팅 백엔드 연동 성공, 채팅 송/수신 성공

 

 

 

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

❗️ 신청현황 API 연동 시, ‘신청한 형황’, ‘신청받은 현황’ 페이지네이션이 제대로 작동하지 않음
✅ 해결) '신청한 현황’, ‘신청 받은 현황’ page를 구분한 뒤, 백엔드로부터 total 값으로 받아, size=3으로 표시하여 해결

❗️ 신청현황 1:1 매칭 승인, 거절을 redux로 관리하여 실시간 화면 반응은 구현 완료했지만, 1:1 매칭 상대편은 새로고침을 통해 변경된 값을 확인하는 문제 발생 ➡️ 즉, 실시간 양방향 통신이 불가능
✅ Polling 기법을 통해 10초마다 데이터 불러오는 방법으로 해결

❗️ recommendModal.tsx에 구현되어 있는 user profile을 신청현황에서 가져와 사용하니, article이 유/무를 구분하여 속도가 느려짐
✅ 해결) user profile 부분 중 필요한 부분만 새로 구현하여 백엔드 API로 연동

❗️ 구글 로그인 진행 시, 백엔드로부터 받아오는 Email을 로컬 스토리지에 제대로 전달하지 못함 ➡️ 이메일 유/무로 인해 화면 표시가 달라 제대로 기능이 작동하지 X
 ✅ 해결) reducers에 로그인한 Email을 추가하여 로컬 스토리지 함수를 이용하여 추가

❗️ Stomp.Client를 사용 ➡️ Stomp 서버 연결했지만, 함수 내 변수로 인해 외부에서 사용할 시, stompClient null 값 발견
✅ 해결) stompClient를 useState() 상태값으로 관리 ➡️ 할당하여 함수 외에서도 사용하여 해결

 

 

 

🌳 SourceTree 사용

깃허브를 보다 편리하게 이용하기 위해 SourceTree를 사용해서 팀프로젝트를 진행하고 있다.
SourceTree를 사용하기 전까지는 터미널을 이용했는데, 터미널은 명령어를 칠 때마다 잔뜩 긴장한 상태로 했던 기억이 있다 🫠
하지만 SoureTree는 clone해서 폴더를 생성하는 것은 물론 커밋, 풀, 푸시 심지어 페치까지 버튼 하나로 해결할 수 있어서 너무 편리하다!!
브랜치 생성도 간편하게 할 수 있고, 같은 프로젝트를 진행하는 팀원이 어떤 업무를 완료했는지, 어디까지 진행했는지도 한눈에 볼 수 있어 진작 사용하지 않은 것을 후회했다.. 🫠 과거의 나 반성해..! 😤
나.. 이제 조금은 깃허브에 대한 벽을 허물었을지도.. ✨

 

 

 

💪🏻 4주 차 회고

4주차가 심적으로 조금 힘들었던 것 같다. 일단 팀원 한 분이 나가셔서.. 돌아와~~  😭 
함께 으쌰으쌰 했던 제일 마음 잘 맞았던 분이 나가셔서 잠깐 동안 멘탈이 나가있었지만, 그래도 해야지!! 어쩌겠나!! 
처음 맡은 업무에서 +++되어 일이 더 많아졌지만, 이제 거의 막바지이기 때문에 2주 정도만 된다!라는 마인드로 버티고 있다 💪🏻
이런저런 일도 겪어보면서 성장하는 거지!ㅎ
위기를 기회로 만드는 사람이 되도록 더 노력해야겠다 😁
5주 차 주말에 최종본을 들고 멘토링을 진행해야 하는데 벌써부터 떨린다 (후들후들) 남은 기간 파이팅! 💜

 

 

 

---

📝 5주 차 진행 일정

💁‍♀️ 기능 구현
👉🏻 1:1 매칭 사용자로 채팅방 리스트 불러오기
👉🏻 채팅 기능 구현 완료(기존 메시지 가져오기, 메시지 송/수신 후 바로 화면 표시 등)
👉🏻 모바일 반응형 구현 (@media)

💁‍♀️ 리팩토링
👉🏻 신청현황 useActions을 통해 액션 생성 함수를 dispatch 하는 함수로 자동으로 생성 ➡️ useMemo를 통해서 최적화 진행
👉🏻 useFetch(Hook)로 백엔드 서버 연동한 함수 수정
👉🏻 사용자 입장에서 리팩토링을 위한 전체적인 화면 및 CSS 수정