유일한 프론트엔드 개발자로서의 첫 그룹 프로젝트 회고

부스트캠프 그룹 프로젝트가 시작된 지 2주가 지났습니다. 4명의 백엔드 개발자와 함께하는 팀에서 유일한 프론트엔드 개발자로 참여하게 되면서, 많은 고민과 도전 과제들을 마주하게 되었습니다. 이번 회고에서는 프로젝트 초기 단계에서 제가 겪은 경험과 그 과정에서의 배움을 공유하고자 합니다.

프론트엔드 개발자 1명, 그리고 협업에 대한 고민

가장 큰 고민은 '혼자서 프론트엔드 개발을 진행할 것인가, 아니면 백엔드 개발자분들과 함께 할 것인가'였습니다. 팀원분들의 의견을 구했을 때, 두 분이 프론트엔드와 백엔드를 함께 해보고 싶다는 의견을 주셨습니다. 이를 계기로 페어 프로그래밍을 시도해보기로 했습니다.

하지만 실제 진행 과정에서 몇 가지 어려움이 있었습니다. 실질적인 개발 기간이 4주밖에 없다는 점에서 좀 더 빠른 진행이 필요하다고 생각했던 제 입장과, 여유를 가지고 천천히 진행하고 싶어하는 팀원들의 생각 사이에 간극이 있었습니다. 특히 페어 프로그래밍을 진행했던 2,3일차에는 단순한 네비게이터 역할을 넘어서, 프로젝트 세팅부터 라이브러리 선택의 이유를 설명하고, 공통 컴포넌트 구현에 대한 조언을 드리는 방식으로 진행했습니다.

이러한 상황에서 제가 다소 조급하게 접근했다는 것을 깨달았고, 목요일 오프라인 스크럼에서 팀원들과 1시간 가량 깊이 있는 대화를 나누었습니다. 비록 개발 속도는 더뎠지만, 예상치 못한 긍정적인 면도 발견할 수 있었습니다. 오랜만에 리액트를 제대로 복습할 수 있었고, 팀원분들의 질문에 답변하면서 제가 알고 있는 지식을 다시 한번 점검하는 의미 있는 시간이었습니다.

문서화를 통한 협업 기반 다지기

프로젝트를 진행하면서, 유일한 프론트엔드 개발자로서 어떤 부분에 중점을 두어야 할지 깊이 고민했습니다. 특히 실제 회사에서의 경험을 떠올리며, 체계적인 문서화의 중요성을 다시 한번 실감했습니다. 인턴 시절, 이전 개발자들이 작성한 개발 문서를 보며 유지보수 작업을 수행했던 경험이 이러한 판단에 큰 영향을 미쳤습니다.

FE 3,4주차 때 만났던 멘토님께서 추천해주신 TSDoc과, 그동안 설치만 해두고 제대로 활용하지 못했던 스토리북을 본격적으로 적용해보기로 했습니다. 예를 들어, 다음과 같은 방식으로 컴포넌트 문서화를 진행했습니다:

/**
 * @description
 * 자식 요소들을 스타일이 적용된 div로 감싸는 컴포넌트입니다.
 *
 * @example
 * ```tsx
 * <ContentBox>
 *   <p>이것은 ContentBox 안에 있는 내용입니다.</p>
 * </ContentBox>
 * ```
 *
 * @param {ContentBoxProps} props - ContentBox 컴포넌트의 props입니다.
 * @param {ReactNode} props.children - ContentBox 안에 감싸질 내용입니다.
 *
 * @returns {JSX.Element} 자식 요소들을 포함하는 스타일이 적용된 div를 반환합니다.
 */

이러한 문서화 작업은 특히 백엔드 개발자분들과의 페어 프로그래밍 과정에서 큰 도움이 되었습니다. 타입스크립트로 props의 interface를 구성하고, TSDoc으로 주석을 작성하며, 스토리북으로 테스트하는 일련의 과정을 통해, 처음 리액트를 접하시는 백엔드 개발자분들이 컴포넌트 분리의 필요성과 구현 시 고려해야 할 점들을 자연스럽게 이해하실 수 있었습니다.

팀원들과의 이해도 동기화를 위한 노력

프로젝트를 진행하면서 가장 중요하게 생각한 것은 팀원 모두가 같은 이해도를 가지고 진행하는 것이었습니다. 이를 위해 회의 내용을 노션에 꼼꼼히 기록하고, 특히 기획 단계에서는 시각적 자료를 적극 활용했습니다. 이는 팀원들의 적극적인 참여를 이끌어내는 데 큰 도움이 되었고, 특히 에픽-스토리-태스크를 작성하는 과정에서 그 효과가 두드러졌습니다.

또한 개발 환경 구축에도 많은 신경을 썼습니다. husky와 commitlint를 도입하여 커밋 컨벤션을 표준화했고, React와 TypeScript를 기반으로 Vite를 사용하여 개발 환경을 구축했습니다. UI/스타일링을 위해서는 Tailwind CSS와 shadcn/ui를 선택했으며, 이러한 모든 선택의 이유와 사용법을 깃허브 위키에 상세히 기록했습니다.

앞으로의 계획

앞으로는 custom hook 개발에 집중할 예정입니다. 특히 세션 스토리지 관리와 퀴즈 생성/진행을 위한 퍼널 구현에 중점을 둘 것입니다. 이 과정에서도 TSDoc과 스토리북을 활용하여 문서화를 철저히 하고, 팀원들이 쉽게 이해하고 사용할 수 있도록 할 계획입니다.

지난 2주간의 경험을 통해, 혼자만의 빠른 개발보다는 팀 전체의 이해도를 높이고 함께 성장하는 것이 더 중요하다는 것을 깨달았습니다. 앞으로 남은 기간 동안에도 이러한 방향성을 유지하면서, 더 효율적인 협업 방식을 찾아가려고 합니다.

728x90

저작자표시