프로그래머스 데브코스 MIL 한달 회고 (12월~1월)

Intro

벌써 2024!! 데브코스를 시작한 게 엊그제 같은데 벌써 최종 프로젝트만 남았다니.. 감회가 새로운 거 같다. 프로젝트를 진행하면서 어려운 것도 있었지만 좋은 팀원분들을 만나 잘 헤쳐나갈 수 있었던 거 같다 ㅎㅎ 2차 세희팀이 최고입니다 ㅎ

STYLED 배포

👌이전 한달 회고에서의 목표 달성?👌

• 생각보다 내가 typescript에서 type이나 interface에 대한 이해도가 떨어지는 것 같다. 이것에 대해 보완하기
  ➡️ 이에 대해 보완하려고 개발 테스크 중 도메인 타입 작성 테스크를 가져갔다. 덕분에 interface와 type의 차이점에 대해 정확히 알게 되었고, 이렇게하는 게 맞나..? 라는 식으로 api request, response 등의 타입을 지정해서 PR 날렸더니 팀원 분들이 좋게 봐주셔서 뭔가 뿌듯했다 ㅎㅎ

• 읽기 쉬운 코드에 대해 고민하게 되는 것 같다. 일단 짜보자~하고 무작정 코드 쓰지 말고 좀 더 공부해보기!
  ➡️ 나중에 봐도 아하 이런 구조구나~라는 식으로 잘 알아볼 수 있게 코드를 작성하려고 노력했던 거 같다. 아무래도 한 파일에 다 때려넣으면 읽기 어려울 것 같아서 최대한 분리하려고 노력했다 ㅎㅎ

• 리액트, 뷰에 대해 부족한 점 보완하기
  ➡️ 솔직히 팀프로젝트를 시작하기 전에는 리액트의 훅에 대해 잘 모른 채로 약간 얼레벌레? 썼던 거 같은데 팀프로젝트를 시작하고 react-query나 zustand 같은 상태 관리와 같이 쓰다보니 useEffect나 useRef에 대해 잘 알게 된 거 같다. 뷰는.. 앞으로 보완해봐야겠다 ㅎㅎ

• 팀 프로젝트 화이팅하기!!
  ➡️ 화이팅~!

🎁 공용 컴포넌트 🎁

내가 맡은 공용 컴포넌트는 Icon, SearchBar, ImageCard 컴포넌트였는데, 아무래도 공용 컴포넌트라 팀원 분들이 쓸 때 필요한 것들을 prop으로 설정할 수 있도록 하는 것에 집중했다. 그래도 생각하지 못한 자잘한 설정들이 있어서 여러번 수정하기도 했었지만.. ㅎㅎ 다음에는 좀 더 꼼꼼하게 공용 컴포넌트를 만들어야겠다.

🎫 헤더 + 로그아웃 🎫

애증의(?) 헤더... ㅋㅋㅋㅋ 헤더는 기존 구조로 구현했다가 한계점이 보여서 바뀌기도 했고, 헤더에 있는 링크들이 페이지인 것도, 모달인 것도 있어서 해당 아이콘을 눌렀을 때 지금 무슨 페이지 상에 있는지를 표현하는 게 어려웠다.. 모달 창 같은 경우 모달이 닫히면 이전의 페이지로 돌아가야하니까.. 그리고 사용자 아이콘 같은 경우 드롭다운 선택지로 페이지로 갈 수도, 모달이 열릴 수도 있었다..

이전 헤더 같은 경우에는, 로그인 전에 나타나는 아이콘과 로그인 후에 나타나는 아이콘이 따로따로 분리되어 있어서 위 내용을 구현하는 게 어렵지 않았지만, 새로운 구조로 바뀌면서 (따로 분리되어 있지 않고 다같이 묶여있게) 조금 애를 먹었다..

이전 헤더

바뀐 헤더

유저 관리 부분의 3개의 아이콘들이 로그인시 새롭게 나타나는 것들이다.

기존에는 map으로 index를 따로 지정해서 해당 index에 tab의 위치가 있다면 밑에 줄을 긋는 css를 추가하는 식으로 했었다. 그러나 새롭게 바뀌면서 로그인 상태에 따라 로그인 버튼이 나와야하는지, 아이콘들이 나와야하는지 판별해야하고 전체 아이콘들에 대해 현재 어떤 페이지/모달인지 알려줘야하니까 좀 애를 먹었다.. (map안에 삼항 연산자 넣는 게 안되었음)

그래서 하루종일 붙잡고 있다가 팀원 분들에게 SOS를 쳤더니 이전 리액트 과제에서 state로 페이지를 관리했던 것처럼 하는 방법에 대해 말씀해주셔서 (감사합니다 재웅님 ㅜㅜ) 기립박수를 쳤다.

그래서 useState로 tab을 관리하고, tab이라는 현재 tab의 위치를 저장하는 상태와 prev라는 이전 tab 정보를 session storage에 저장하는 식으로 구현했다. 그리고 헤더 파일 외에 다른 곳에서도 tab을 관리해야하는 부분이 있어 zustand로 전역 상태로 만들어두기도 했다.

헤더를 어느정도 끝내고 로그아웃을 들어갔는데 사실 지금까지 팀프로젝트를 하면서 로그인, 회원가입, 로그아웃 등을 구현해본 적이 없기도 했고 (머쓱), 그때 useQuery나 useMutation을 처음 접해서 내 맘가는 대로(?) 구현했더니 잘 안되었다. 약간 이게 되는 건가? 싶은 느낌이었달까.. 이에 대해 useMutation으로 구현했는데 뭔가 되는 거 같지 않아용.. 하고 물어보니 세션 스토리지의 토큰을 삭제 안해서 그렇다고 알려주셨다. (감사합니다 인혁님 ㅜㅜ)

이렇게 헤더와 로그아웃 완료~!

😄 프로필 페이지 + 정보 변경 😄

정보 변경은 프로필 사진이나 비밀번호 변경은 문제 없었지만, 사용자 이름 변경에서 애를 먹었는데 api 상에서 사용자 이름을 변경할 때 fullName과 name을 보내야했다. 그래서 아 당연히 fullName이 기존 이름이겠구나~하고 구현했는데 계속 변경이 안되었다.. 그래서 로직이 문제인가, useQuery 쓰는 방식이 문제인가 하고 계속 뜯어 고치다가 계속 안되어서 속는셈치고 fullName에 새로운 이름을 넣고 요청했는데, ... 바로 되었다... 이거 참.. 뭔가 어이없는데 일단 되어서 감사합니다.;.

그래서 그 뒤부터 읭? 이건 뭘 줘야하는 거지? 이건 뭘 뜻하는 거지? 하는 것은 다 물어보고 했었던 거 같다.

프로필 페이지는 그리드 정렬이나 중앙 정렬? 같은 자잘한 css 외에는 어려운 점이 없었던 거 같다.

그런데 좋아요한 포스트를 불러올 때 좋아요 타입을 보고 아~ 뭐 userId는 포스트 주인 id겠지? 하고 id에 해당하는 사용자의 포스트를 다 들고와서 postId에 해당하는 포스트를 찾아 배열에 넣은 뒤 그걸 다 띄워주는 식으로 구현을 했는데.. 좋아요가 구현되고 살펴보니 제대로 가져오지 못했다..!!!!!!!!

그래서 like 타입을 잘 못 이해한 건가 하고 해당 사항에 대해 물어보니 userId가 좋아요 누른 사람의 id였다.. (익준님 감사합니다.. 안그랬음 삽질 짱 많이 했을..) 그래서 channelList를 가져오고, 모든 채널의 포스트를 가져와서 postId와 같은 id를 가지고 있는 포스트를 찾아 배열에 넣는 식으로 수정했다.

또, 추후에 코드리뷰를 받아보니 프로필 페이지에서 계속 무한 호출이 나타났는데(ㅜㅜ), react-query로 가져온 currentUser와, profileUser를 useEffect상에 넣어서 계속 가져오는 게 문제였다. (현주님 감사합니다 ㅜㅜ) 해당 호출이 정보 변경을 했을 때 바로 반영하려고 넣었던 거라서 그냥 정보 변경이 되는 곳에서만 다시 가져오는 식으로 수정했다.

그리고 프로필 페이지 + 정보변경에서의 반응형도 적용했는데, 반응형을 처음 적용해보는 거라 좀 덜덜 떨었지만, 생각보다 간단해서 반응형도 꽤 수월하게 진행했던 거 같다.

이렇게 프로필 페이지와 정보 변경도 완료~!

⭐ 전체적인 팀프로젝트 회고 ⭐

먼저 팀원분들이 너무너무너무 좋았다고 말하고 싶다. 흑흑.. 정말 감사했습니다 여러분.. 위에 적은 것 외에도 모르는 거 물어보거나 문제점이 있을 때 도움을 요청하면 자신의 일처럼 도와주셔서 너무 감사했다!!

이외에도 다들 둥글게둥글게 말하시구 큰 의견 충돌도 없었고 디스코드나 슬랙으로 커뮤니케이션도 활발하게 되어서 여러모로 좋았던 팀이었다. 따뜻했던 세희 팀.. 최고.. 👍 정말 다시 보면 좋겠어요❤️ 그리워요

그리고 멘토님도 궁금한 것이 있을 때 잘 알려주시고 팀 프로젝트 피드백도 생각하지 못한 부분에서의 부족한 부분을 알려주셔서 너무 감사했다. 세희 멘토님도 최고입니다 👍

코드 컨벤션이나 커밋 컨벤션, git 브랜치 전략 등등을 정하고 진행한 프로젝트는 처음인데 뭔가 아.. 이런게 협업이구나? 하는 생각이 들어서 진짜 팀프로젝트를 한다는 느낌이 있어 좋았다❤️

3차팀과 함께하는 최종 프로젝트도 열심히 해야겠다!

---

목표

• 팀프로젝트에서 팀원 분들이 도움이 필요할 때 이렇다할 도움을 주지는 못했던 거 같다 ㅜ 도움을 줄 수 있을 정도로 실력을 쌓아올리자!!
• 최종 팀프로젝트도 화이팅하기!