[MIL-4] 231226 ~ 240123 프론트엔드 데브코스 회고 / 첫 팀 프로젝트

🚀 들어가며

이번 한 달간은 예비 프론트엔드 주니어 개발자들과 팀 프로젝트를 진행했다. 정말 많이 배우고 성장할 수 있었던 기간이었고, 내가 데브코스를 지원한 이유 중 하나인 '협업을 잘하는 개발자'에 한 걸음 더 가까워질 수 있었던 경험이었다. 

한 달간의 경험들을 짧게 회고해보려 한다. 

 

 

✅ 한 달 (12.26 ~ 1.23) 동안의 경험들

😧 한 달 전의 나

• 프로젝트 경험이 없어서 프로젝트 요구사항 분석, 설계, 구현, 테스트 과정을 꼭 제대로 경험해보고 싶었다.

😎 현재의 나

• 팀 프로젝트에 적극적으로 참여하며 프로젝트의 요구사항 분석, 설계, 구현, 테스트 과정을 경험할 수 있었다.

 

✅ 팀 프로젝트

looky

드디어 기다리던 팀 프로젝트가 시작되었다. 나 포함 총 4명이 팀이 되었고, 프로젝트 시작하기 전 나의 목표는 내가 맡은 기능은 꼭 성공적으로 구현해보는 것이었다.

프로젝트 시작 초반에 자유로운 분위기 속에서 어떤 서비스를 만들지, 어떤 기능을 만들지 등을 하나씩 정해나갔다. 각자 머릿속의 아이디어들을 하나씩 꺼내어 얘기했고, 최종적으로 우리 팀은 '패션 룩북 웹 SNS 서비스, Looky(서비스명)'를 만들어 보기로 결정했다.

 

📌 프로젝트 초반, 회의의 연속

프로젝트 초반에는 주제와 코드 컨벤션, 대략적인 기능 플로우, 사용할 기술 스택, 프로젝트 진행 중 팀 규칙 등을 정했다. 각자 아이디어를 내면서 아이디어 간의 싱크를 맞추면서 재미있었고, 서로의 의견을 존중하면서 매끄럽게 회의를 진행할 수 있었다.

플로우 차트

피그마 - 와이어 프레임

사용한 기술 스택

 

📌 내가 맡은 개발 파트 

나는 아이콘 공통 컴포넌트, Top 내비게이션 바, Bottom 내비게이션 바, 포스트 디테일 개발을 맡았다.

▪︎ 아이콘 공통 컴포넌트 개발

우리 팀은 개발 초기에 우선적으로 공통 컴포넌트를 개발했다. 나는 그 중에서 아이콘 컴포넌트를 개발했다. 구글 머티리얼 아이콘, 리액트 아이콘 라이브러리, 페더 아이콘 등 여러 방식이 있었지만 팀원과의 회의 끝에 구글 머티리얼 아이콘을 활용하는 것으로 결정했다. 별도 라이브러리를 설치할 필요도 없고, 아이콘 컴포넌트 개발 목적이 재사용성과 편의성을 고려하여 다른 팀원이 사용하기 편하도록 하는 것에 있다고 생각했기 때문에 간단히 구글 머티리얼 아이콘을 활용하여 아이콘 공통 컴포넌트를 만들었다.

이후에 내가 만든 아이콘 컴포넌트를 팀원들이 필요한 곳에서 import 해서 사용하는 것을 보고 뿌듯함을 느꼈고, 이것이 팀 프로젝트의 참 맛이구나라는 것을 알게 되었다.

▪︎ 내비게이션 바 개발

우리 팀은 PC 뿐만 아니라 모바일에서의 UX를 고려하여 처음부터 반응형 웹으로 레이아웃을 설계했다. 매 페이지에 내비게이션 바가 거의 필수로 존재하게 되고, 또 페이지마다 다른 내비게이션 바가 렌더링되어야만 했다. 내비게이션 바를 개발하면서 리액트의 조건부 렌더링 방식을 많이 응용할 수 있었고, 또 내비게이션 바 안의 요소들을 모듈 단위로 분리하면서 깔끔하게 코드를 구현할 수 있었다. 최선의 방식으로 구현하기 위해 2차팀 팀원들 뿐만 아니라 1차팀 팀원에게도 조언을 구했는데 정말 많은 도움이 되었다. 고맙다는 말을 전하고 싶다.

▪︎ 포스트 디테일 개발

홈 화면에서 포스트 클릭 시 나오는 포스트 디테일 창을 개발했다. 이 부분에서는 좋아요, 팔로우 등 API를 다루는 부분이 많았다. 좋아요, 팔로우의 경우 리액트 쿼리의 onMutate 옵션으로 낙관적 업데이트를 진행하고, API 통신 실패 시 onError 옵션으로 이전 상태로 되돌리는 로직을 구현했다. 또, keyframes을 활용해서 간단한 좋아요 애니메이션을 만들 수 있었다.

 

 

📌 좋았던 점

사실 이번 팀 프로젝트를 진행하며 팀에게 칭찬할 것은 굉장히 많다. 팀 프로젝트를 하면 다들 많이 싸우고 감정이 상한다는데, 우리는 서로를 배려했기 때문에 그럴 일이 없었고 다른 팀원분들과 나의 개발 실력이 많이 차이가 났음에도 나의 부족한 실력을 많이 이해해주고 많이 가르쳐주셨다. 그렇기 때문에 오히려 이번 팀 프로젝트를 진행하면서 마음이 훈훈해졌고, 또 감동도 많이 받았다. 그 덕에 나도 더 즐겁게 개발할 수 있었고 내가 할 수 있는 것은 어떤 것이 있을까 찾아보면서 팀이 더욱 시너지를 냈던 것 같다.

나에게도 칭찬할 수 있는 부분이 아주 많지만 3가지 정도만 골라서 써보려고 한다.

▪︎ 프로젝트에 적극적으로 참여한 점

팀 프로젝트를 진행하기 전, 내가 가장 결핍됐다고 느낀 부분은 경험이었다. 비교적 늦은 나이에 개발자라는 꿈을 가지게 되면서 부족한 경험은 나에게 쉽게 해결되지 않는 숙제였다. 데브코스에는 특히 실력이 뛰어난 분들이 굉장히 많고, 그들의 특징은 전부 '풍부한 경험'을 가지고 있다는 것이었다.  

비록 이번 경험이 사소한 경험이라고 생각하는 사람들도 있겠지만, 나에게는 이번 경험이 굉장히 소중했다. 프로젝트 개발의 사이클을 전부 경험할 수 있었고, 현업에서 많이 사용하는 React, Typescript, Redux-Toolkit, Tanstack-Query 등을 사용하면서 여러 기술 스택과 친해질 수 있었다. 또, 팀원들과 직접 Eslint, Prettier 설정을 통해 코드 포맷팅을 정하고 코드 컨벤션을 정하면서 올바른 협업에 대한 경험도 쌓을 수 있었다. 이러한 경험들이 쌓이면 나도 '풍부한 경험'을 가진 개발자로 성장할 수 있을 것이라 확신한다.

▪︎ 프로젝트의 모든 로직 이해하려고 노력한 점

위에서 말한 것처럼 나에겐 이번 프로젝트의 모든 과정들이 전부 소중했다. 그래서 다른 팀원들의 코드 조차 쉽게 버릴 수 없었다. 내가 맡은 개발 파트가 아니더라도 팀원이 PR한 코드를 리뷰하면서 팀원의 개발 파트와 코드를 이해하려고 노력했다. 비록 완벽하게 이해하기엔 아직 쉽지 않았지만, 모르는 부분이 있으면 팀원에게 물어보면서 이해하려고 노력했다.

▪︎ 쾌적한 UX를 위해 항상 고민한 점

사용자에게 쾌적한 UX를 제공하기 위해 고민했다. 이를 위해 특정 로직을 추가하는 것 뿐만 아니라, 사용자가 특정 동작을 할 때 편의성을 느끼게끔 개발하려고 노력했다.

예를 들면, 나의 경우엔 포스트 디테일 창을 개발하면서 좋아요를 누르면 화면에 하트 애니메이션이 렌더링하는 기능을 구현했는데 여기서 아래와 같은 어려움들이 있었고, 고민 끝에 해결할 수 있었다.

내가 겪은 어려움은 좋아요 버튼을 빠르게 여러 번 클릭했을 때 연속된 하트 애니메이션이 매끄럽게 나오지 않는 것는 것이었다. 나는 하트 애니메이션을 하나의 컴포넌트로 만들었고, 좋아요를 누르면 불리언 값을 가지는 상태를 true로 변경해줌으로써 조건부 렌더링을 통해 하트 애니메이션 컴포넌트를 렌더링하는 방식을 사용했다. 그렇기 때문에 여러 번 좋아요 버튼을 누르게 되면 하트 애니메이션의 duration 안에 눌러진 좋아요에 대한 애니메이션은 정상적으로 렌더링되지 않았는데 '리액트에서 다른 key를 가진 컴포넌트는 새로운 컴포넌트로 인지한다'는 점을 활용해서 이 부분을 해결할 수 있었다. 

또, 댓글을 작성하면 스크롤이 내려가지 않아 댓글 input창이 가려져서 안보이는 문제가 있었고 이를 해결하기 위해 useRef 훅으로 DOM요소에 접근해서 scroll 위치를 조정해주었다. 

뿐만 아니라 좋아요, 팔로우 기능을 구현하면서 낙관적 업데이트를 적용한 부분이나 테스트하며 발생하는 에러를 하나씩 찾으며 방어 코드를 추가하는 등 사용자에게 쾌적한 UX를 제공하기 위해 노력했고, 이 과정에서 자연스럽게 내가 맡은 개발 파트에 대해 자부심을 가지게 되었다.

 

 

📌 아쉬웠던 점 

첫 팀 프로젝트이다 보니 기술적인 부분에서 부족함이 많았다. 당연하기도 하지만 Redux-Toolkit, Tanstack-Query, React-Hook-Form 등 처음 쓰는 기술들이 많다보니 적응하는 데에 어려움이 있었다. 이번 프로젝트를 진행하면서 위의 3가지 기술에 대해 흥미가 더욱 생겼고, 앞으로의 계획은 혼자 사이드 프로젝트를 진행하면서 이 기술들을 좀 더 능숙하게 사용할 수 있도록 공부하는 것이다.

또, 프로젝트 기간이 3주 정도로 타이트했기 때문에 챌린지 개발 요소인 무한 스크롤을 구현하지 못한 것은 아쉬움이 남는다. 이 역시도 사이드 프로젝트를 진행하면서 공부해볼 생각이다.

마지막으로 역시 시간이 타이트했기 때문에 리팩토링을 만족스럽게 하지 못했다. 팀원들과 최종 회고에서 계속해서 리팩토링을 진행하기로 했다. 팀 프로젝트가 끝났어도 리팩토링을 계속해서 할 계획이다. 

 

 

📌 팀 프로젝트 회고

팀 프로젝트 중간에 중간 회고를 작성했고, 팀 프로젝트를 마치고나서 최종 회고를 작성했다. 우리 팀은 KPT(Keep Problem Try) 회고 방식을 사용했다.

▪︎ 중간 회고

▪︎ 최종 회고

팀 프로젝트를 마친 이후에는 내가 부족한 것이 어떤 것들이 있는지 더 잘 파악하게 되었다. 사실, 이번 프로젝트를 통해 어떤 것이든 구현할 수 있다는 자신감을 얻었다. 하지만 아직 컴포넌트 분리가 미숙했고, 정해진 기간 내에 기능 구현을 했어야만 해서 코드 퀄리티 면에서도 만족하지 못했다. 또, 처음 사용했던 기술들이 많아서 공부의 필요성을 느꼈다. 앞으로 차근차근 리팩토링, 공부를 하면서 포스팅할 계획이다.

 

✅ 좋은 협업이란 무엇일까

팀 프로젝트를 진행하면서 협업의 중요성에 대해 다시 깨닫게 되었다. 이번 팀원들과 케미가 굉장히 좋았고, 팀 프로젝트를 진행하는 과정도 트러블 없이 매끄러웠다. 과연 그 이유가 무엇일까?

• 각자 역할에 책임감 갖기
• 내가 할 수 있는 일 찾아서 하기
• 팀원의 훌륭한 점은 아낌없이 칭찬하고 부족한 점은 보완해주기
• 단순히 비지니스를 위한 팀원으로 대하지 않고 인간으로 배려하면서 대하기
• 내 자신이 먼저 긍정적인 에너지 풍기기

좋은 협업을 위한 마음가짐을 몇 가지 적어보았다. 우리팀 팀장님이 재치를 섞어서 각자 팀원에 대해 역할을 지정해주었는데 나는 이번 프로젝트에서 최고 관리 책임자(CAO)라는 역할을 부여받았다. 약간의 장난이 섞인 이 역할이 나에게는 책임감을 더욱 갖게 했고, 팀원들의 멘탈 하나는 내가 관리할 것이라는 책임감을 갖고 팀프로젝트를 진행했다. 긍정적인 에너지를 가지고 팀원들을 대하니 우리 팀원들도 더 나를 좋아해줬던 것 같다.

개발도 결국에는 다 사람이 하는일. 일단 사람이 먼저 행복해야 한다고 생각한다. 앞으로 진행할 팀프로젝트들도 긍정적인 에너지를 가지고 좋은 태도로 임해야겠다. 

 

 

🛸 마치며

이렇게 성공적으로 첫 팀 프로젝트를 끝마칠 수 있었다. 내가 맡은 개발 파트에 책임감을 갖고 기능 구현에 성공했으나, 코드 퀄리티 면에서는 아쉬움이 남기도 한다. 앞으로 리팩토링을 통해 꾸준하게 기능을 개선하고 클린 코드를 작성하기 위해 노력해야겠다. 또, 앞으로 있을 팀 프로젝트도 적극적인 태도로 스스로 만족할 수 있는 팀 프로젝트가 될 수 있도록 최선을 다해야겠다.