서론
첫 프론트엔드 팀 프로젝트를 완주했다. 정말 많은 성장을 이룬 한 달이라고 생각한다. 강의 듣고 공부할 때와 실전은 느낌이 많이 달랐다. 무엇보다 든든한 팀원분들과 함께하는 프로젝트가 나에게 긍정적인 영향을 미쳤다.
지난 회고에서 "두려워도 나를 믿고, 팀원들을 믿고 앞으로 나아가는 한 달을 만들어 가면 좋겠다"고 마무리했었다. 좋은 팀원분들을 만나 잘 마무리한 것 같아서 마음이 한결 가벼워졌다.
프로젝트 설명
채널이 있는 SNS를 주제로 백엔드 API가 주어지고 1주 정도의 기획 단계를 거쳐 3주 간 개발이 진행되었다. 우리 팀은 커뮤니티보다는 쇼핑에 치중되어 있는 기존 패션 SNS를 보완하여 채팅도 할 수 있는 룩북 SNS로 의견이 모아졌다.
프로젝트 개요
- 프로젝트명 : 루키(looky) 룩북 SNS
- 프로젝트 기간 : 2023.12.22 ~ 2024.01.17
- 프로젝트 인원 : 프론트엔드 개발 4명
- 내 역할 : 공통 컴포넌트, 검색 페이지, 프로필 페이지
- 메인 서비스 주소 : https://looky.kr
도메인 만료 시 서비스 주소 https://looky-working.vercel.app
좋았던 경험들
새로운 기술, 라이브러리
- Redux
- TanstackQuery
- React Hook Form 등
나에게는 많은 기술이 새로웠고 심적인 부담으로 다가왔다. 그래도 물어볼 팀원이 있다는 점이 나에게는 든든했고 마음껏 실수하고 부딪혀봐야 겠다는 생각이었다. 공식문서와 팀원의 코드를 보면서 개발을 했었다. 지나고보니 새로운 기술을 적용해보길 잘 했다고 생각한다. 배워가는 것이 많은 프로젝트였다.
라이브 코딩
프로젝트 초반에 진행되어야 하는 라우팅, API 설정에 대해 라이브코딩을 진행했다. 라이브코딩으로 보니 훨씬 흐름이 이해가 잘 됐다. API는 사용할 일이 많았는데 라이브 코딩 덕분에 쉽게 사용할 수 있었다.
페어 프로그래밍
프로젝트 후반에 하루 날잡아 페어 코딩을 진행했다. 검색 결과 페이지에서 이전 검색어를 검색하면 재렌더링이 되지 않는 문제가 있었다. 캐싱 문제일 것 같다고 생각했지만 혼자 해결하는 것이 어려웠다. 먼저 기능 개발을 마무리한 팀원이 감사하게도 페어 코딩을 진행해서 같이 해결해보자고 제안했다. 문제는 예상했던 캐싱 문제로 useEffect의 의존성 배열을 수정하고 useQuery의 staleTime을 0으로 설정하는 것으로 해결했다.
페어 프로그래밍을 진행하면서 다음과 같은 과정을 겪었다.
1. 내 코드를 잘 설명하고 이해시키기
2. 대화로 문제 해결에 대한 아이디어 얻기
3. 예상되는 원인 파악 후 하나씩 제외하기
내 코드를 상대에게 잘 설명하고 이해시키는 것이 참 어려웠다. 그래도 차근차근 코드의 흐름을 따라 설명해보았다. 내 코드를 설명하는 데에도 연습이 많이 필요하다고 느꼈다. 2, 3번은 문제를 혼자 해결할 때보다 훨씬 빠르게 진행되었다. 혼자 해결할 때는 내 생각에 갇히는 경우가 있는데 대화를 통해 빠르게 사고를 전환할 수 있었다.
이번 프로젝트에서 가장 기억에 남는 경험이라면 페어 프로그래밍을 떠올릴 것이다. 먼저 페어 프로그래밍을 제안한 팀원에게 정말 감사하다.
공통 컴포넌트
공통 컴포넌트를 만들고 팀원들이 만든 공통 컴포넌트를 사용해보는 경험이 신선했다. 내가 컴포넌트를 만들 때의 목표는 "어떻게 해야 팀원들이 쉽게 이해하고 사용할 수 있을까?"에 초점을 맞추었다. 리팩토링하면서 필수 props 1개만 남기고 사이즈도 팀원들의 의견을 듣고 세분화했다. 컴포넌트 리팩토링에서 다음과 같은 사항을 생각했다.
- 가독성 높은 변수명
- 필수 속성 최소화
- 값이 없을 때 예외처리
- 확장성을 위한 경우의 수 생각하기
예외처리, 확장성은 아직 나에게 어려운 부분이다. 다음 프로젝트에서도 위와 같은 생각을 많이 해볼 생각이다. 프로젝트가 마무리될 때 즈음 이곳저곳에 공통 컴포넌트가 쓰이는 것을 보니 뿌듯했다. 기회가 된다면 여러 가지 공통 컴포넌트를 만들어보고 싶다.
팀에게 배운 점
이번 팀은 밸런스가 정말 잘 맞는 팀이었다고 생각한다. 나의 성장에 영향을 주었고 모두 배울 점이 있었다.
- 리더 : 계획을 수립하고 추진하는 능력이 뛰어났다. 우리 팀은 항상 마감 기한보다 일찍 제출하고 일정에 쫓기지 않았는데 리더의 역할이 컸다.
- 테크 리더 : 기술적 역량이 뛰어남에도 겸손했다. 내 꼬리 질문에도 적극적으로 답변해주셔서 나의 기술적 성장에 도움을 주었다.
- 분위기 메이커 : 본인만의 방법으로 좋은 컨디션을 유지했다. 개인적으로 긍정적인 마인드를 유지하는 법을 물어본 적이 있을 정도로 배우고 싶었다.
팀에서의 내 주역할은 디자이너/기획자였다고 생각한다. UX/UI 프로젝트를 경험해 보았기 때문에 팀에 도움이 될 수 있을 것 같았다. 그래서 회의에 적극적으로 참여하고 많은 아이디어를 내려고 노력했다. 이 자세를 끝까지 유지했으면 좋겠다.
팀 프로젝트의 자산, 문서화
리더가 기획 초반부터 "프로젝트는 남는 게 문서다"라고 중요성을 강조했었다. 신경을 쓴 만큼 문서를 다른 팀이 많이 참고했다고 한다. 나도 다시 찾아 참고하고 있을 정도로 잘 작성된 문서라고 생각한다. 다음 팀에서도 문서화에 신경을 쓸 예정이다.
KPT 회고
팀에서 중간 회고, 최종 회고로 KPT를 작성했었다. 아쉬운 점은 기억해두었다가 다음 최종 프로젝트에서 반영해 보면 좋겠다. Keep으로 옮겨지는 과정이 좋아서 KPT를 다시 활용할 것 같다.
중간회고와 최종회고 비교하기
중간 회고 이후 Problem, Try를 하나라도 제대로 실천해보면 좋겠다고 생각했는데 최종 회고와 비교해보니 Keep으로 이동한 항목도 있었다. 계속 Try에 남아 있는 개발 이해도는 프로젝트가 끝나고 공식문서를 읽으면서 채워보려고 한다.
최종회고
Keep
- 공통 컴포넌트, 훅 등 사용 높이기
- 좋은 컨디션과 마인드 유지하기
- 모를 때는 질문하기
- 감사는 아낌없이 전하기
Problem
- 생각했던 리팩토링 해보기
- Redux, React 기술 이해도 높이기
- 나에 대한 강점 강화하기
- 코딩테스트 준비 다시 시작하기
Try
- 리액트 공식 문서 읽어보기 & 놓친 부분 공부하기
- 하드 스킬 성장시키기
- 내 의견을 근거와 함께 잘 설명하기
다음 회고까지
다음 달에는 백엔드와의 프로젝트가 진행된다. 어떤 새로운 경험을 하고 나는 또 얼마나 성장해있을지 기대가 된다. 지난 팀 프로젝트의 경험을 잘 녹여내서 다음 달의 성장의 시간을 잘 이겨냈으면 좋겠다.
