2023. 11. 23

한달간 프로젝트 후기

HR Screening service를 구축하면서 경헙했던 후기를 간단하게 기록한다. 기존에 퍼블리싱만 되어있던 페이지가 이미 있었으며 대부분의 컴포가 HTML pure element, 기능 구현 없음 상태로 제작되어 있었다.
해당 프로젝트를 Nextjs로 마이그레이션 하면서, 작업했던 후기를 남긴다.

짧은 기간

총 3주 정도의 기간이 있었으며, 기능 및 인프라 구축이 전혀 되어있지 않던 상황이라 다양한 내용을 동시에 정해야하는 상황이 발생했다. 작업자는 4명 정도가 진행했고, Web front를 처음 접하는 엔지니어가 2명 있었다.

기존 엔지니어들의 code convention이나, 작업 방식을 통일하는데 어려움이 있었으며 결국 전체적으로 통일된 작업을 구성하는데 어려움이 있어 각자 개발 가능한 파트를 결정하고 해당 부분을 전적으로 담당하여 개발하는 방식을 선택했다.

데이터 관리 및 전체적인 프로젝트 관리를 내가 맡아서 진행하게 되었는데, 배포 관리하는과정에서 커밋이 꼬여버리거나 빌드가 되지 않는 등의 여러 사건들이 있었다.

해당 경험을 통해서 작업 기간이 많지 않더라도 컨벤션 관리를 꼭 하고 진행해야 한다는 교훈을 다시한번 다짐하게 되었다.

잦은 수정

어느정도 처음 문제와 귀결되는 내용인데, 작업자 마다 컴포넌트의 구현 방식이 다르다보니 스타일 방식에도 차이가 있었고 디자인이 확정되지 않은 상황에서 퍼블리싱 화면을 그대로 복사하는 방식의 작업을 진행하면서 디자인이 달라지는 경우 어디서 달라지는 찾아다니는 일이 굉장히 피로도가 높았다.

이후 디자인이 결정된 상황에서는 테마를 이용해 적용한 값과 하드코딩을 통해 스타일을 조정한 컴포넌트들이 혼재하는 상황이 발생해 테마를 변경해야하는지 혹은 테마가 잘못 적용된건지, 아니면 하드코딩 된 데이터인지 찾아다니는데 어려움이 있었다.

UI 프레임워크(Material ui)를 이용해서 베이스 component를 잡아두고 필요한 컴포넌트 형태로 커스텀하는 방법으로 서비스용 컴포넌트를 구성했다. 해당 방식을 사용하면서 테마로 조정하기 어려운 값도 있다는 걸 알게되었으며, material ui는 생각보다 더 커스텀이 귀찮았다. 대표적인 케이스로는 select input이 있었으며, library component의 속성을 추가해도 root box에는 적용되지 않는 상황이 발생해서 결국 해당 클래스를 찾아서 클래스 값에 스타일을 추가하는 경우가 더러 발생했다.

이러한 이유로 작업 방식이 파편화되고 복잡도가 올라가게 되었으며, 해당 컴포넌트의 구현부를 해석하는데 시간이 많이 소요되었다.

가장먼저 리팩토링 작업을한다면 구현부가 아닐까 싶다.

Table & table

서비스 특성상 (HR screening) 많은 사람의 데이터를 보고 싶어하는 뷰가 많았는데, 해당 부분을 효과적으로 표현하기 위해서는 chart, table 요소가 많이 배치되어 있었다.

해당 컴포넌트는 간단하게 구현도 가능하지만 복잡해지면 시간에 비해 많은 기능을 지원하기 어려웠다. Table에 요구하는 기능은 excel수준의 기능이 었고, chart는 여전히 html에서는 표현하기 어려운 element였다.

외부 라이브러리의 기능을 많이 의지하여 구성했지만, 유료 라이브러리의 비중이 많은 기능이다보니 무료 버전을 통해 구성하는 현재 프로토타입상 구현하는게 쉽지 않았고, 기획과 다르게 생성되는 컴포넌트 기능도 많이 발생했다. 덕분에 수정을 더 자주한 감이 있다..

개인적인 느낀점

다른 사람의 소스를 보고 수정을 요청하는게 굉장히 어려운 일이라고 생각한다. covention이 정확하지 않은 상황에서 nemespace, function, hook등의 기능을 규정하고 범위를 정하는것이 까다로웠고 생각보다 큰 function을 만나게 되었을 때 소스를 분리하는 작업을 지금 요청할지, 이후에 시간을 내어 작업을 해야할지 결정하는일이 더 어려운 일로 느껴졌다.

이후에도 다른 개발자와 많은 일을하게 될텐데, 이후에도 다른 사람에게 도움을 줄 수 있는 리뷰를 하려면 더 정확하게 내용을 이해하고 피드백 할 수 있도록 해야겠다.