새롭게 시작한 팀프로젝트 드림인
드림인은 순수 예술인들을 위한 플랫폼으로 프론트엔드 3명, 백엔드 1명, 디자이너 1명으로 구성되어 있다. 나는 처음부터 함께 시작한 것은 아니고, 약 한달간 진행하던 프로젝트에서 기존의 프론트엔드 개발자의 취업으로 공백이 생겼고, 새롭게 함께 할 멤버를 찾는 글을 보고 함께하게 되었다.
이 프로젝트에 참가하게 된 이유는 주변의 순수예술을 전공한 친구들이 있었기 때문에 순수예술인들의 고충도 공감하기도 했지만, 단발성으로 진행하는 단순한 포트폴리오가 아닌, 지속적으로 수정하고 디벨롭하는 퀄리티있는 프로젝트를 만든다는 점에서 참가하게 되었다. 기존 프로젝트들은 단발성으로 끝난 것이 대부분이라, 이런 의지가 있는 사람들과 함께 한다면 퀄리티있는 포트폴리오는 물론이고 여러 경험과 실력도 쌓을 수 있을 것이라 생각했다.
1주차: 미완성된 회원가입/로그인 기능 구현하기
나는 온보딩 겸, 이전에 계셨던 프론트엔드 분이 하시던 로그인 파트를 담당하게 되었다. 기존 팀원분들은 코드를 지우고 새로 작성해도 된다고 하셨지만(이방법을 더 추천하는 것 같았다) 지금까지 누군가의 코드를 수정할 일이 없었기 때문에 새로운 경험을 쌓는다 생각하고 최대한 기존코드를 이용해서 기능을 완성시키려 하였다
새로운 기술 적응과정
드림인의 프론트엔드는 타입스크립트, 리액트, Next.js,리액트쿼리, 리코일을 사용하고 있었는데, 여기서 가장 큰 어려움이 있었다. 타입스크립트와 리액트를 제외한 기술들을 사용해본 적이 없었기 때문에 코드를 읽기도, 수정하기에도 에로사항이 컸다. 때문에 대부분의 시간을 새로운 기술을 공부하고 코드가 어떤 구조인지 파악하는 것에 사용하게 되었다.
새로운 기술을 공부하면서 기존 개발자가 작업하던 것을 맡은 것이 엄청난 행운이라고 생각되었는데, 첫번째로는 기존 로직을 살펴보며 기술을 공부한 덕분에 새로운 기술에 빠르게 적응할 수 있었고, 두번째로는 ‘왜 이렇게 코드를 사용했을까?’ 하며 코드를 읽었기 때문에 각 기술들의 장단점이 더 와닿았다.
점점 눈에 보여지는 기존 코드의 단점
처음에는 완벽해보였던 코드들이 몰랐던 기술을 알아갈수록 부족함이 보였고, 코드구조를 개선하기 위해 리팩터링을 하다보니 새롭게 작성하는 것 만큼 시간이 들었다.
잦은 리렌더링과 전역객체 사용
기존 코드에는 두가지 문제점이 있다고 생각했는데, 첫번째는 리액트쿼리와 리코일을 사용하지 않는 것이 더 좋았을거라 생각되었다.
드림인의 회원가입 방식은 소셜로그인을 통해 회원가입을 하면 자동으로 이메일과 닉네임이 주어지고 첫 로그인 시 프로필설정을 하는 방식이다. 그리고 기존의 코드는 첫 로그인 시 프로필설정창을 띄우고 리액트쿼리를 통해 매 타이핑마다 서버정보를 업데이트 하면서 리코일을 이용하여 전역객체에 유저정보를 담아 한꺼번에 프로필정보를 보내는 방식이었다.
하지만 onChange와 리액트쿼리를 이용하여 모든 데이터마다 업데이트 하는 방식은 적게는 4번, 많게는 8번의 리렌더링을 불러오고 있었고, 닉네임변경과 관심분야 변경이 함께 진행되기 때문에 이후 정보수정 시 닉네임과 관심분야를 한꺼번에 변경해야만 문제점이 있었다.
때문에 나는 useState와 useEffect로 닉네임 변경 컴포넌트와 관심분야 변경 컴포넌트 각각의 컴포넌트에 api를 적용하도록 하였고, 디바운스를 이용하여 api를 호출하는 빈도를 줄였다. 이로인해 필요없는 리렌더링을 최소화하였고 전역객체 사용으로 인한 사이드이펙트도 방지할 수 있었다.
독립적이지 못한 hook 사용
두번째 문제는 코드 사용구조에 있었는데, hook으로 사용되는 useModal에서 모달 버튼 클릭 시 정보를 받아오게 한 후 버튼의 이름이 “프로필 설정완료” 일 시 모달창을 닫고 Api를 적용하려 만들어져 있었다. 이는 useModal 훅의 독립성을 크게 해치는 것이라 생각하였고, useModal에서 사용되던 프로필설정 로직을 프로필설정 버튼으로 옮겨 useModal훅과 프로필설정의 코드를 분리하였다.
드림인 1주차 소감
일단 모두가 좋은 개발실력을 가지고 계셨고, 개발에 대한 열정 역시 뛰어나 보였다. 오랜만에 사람들과 개발 이야기를 하는 것도 재밌었고, 팀원분들 역시 지식공유에도 적극적이였기 때문에 앞으로도 많은 것을 배울 수 있을 것 같았다. 다들 정말 뛰어나신 것 같으니 팀원들의 코드도 살펴보고 질문하면서 팀원들만큼 성장하는 것이 이번 프로젝트의 목표!
