본문 바로가기
Front End

Utils 폴더 정리하기

by 코딩파이 2024. 10. 1.
똑똑한개발자 내부 코드리뷰의 외부 공개용 재정리 파일입니다. @23.12.14

 

코드 재사용성을 위해 공통 로직을 분리합니다. 이를 utils 폴더에 모아놓고 추후 사용하게 되는데,

프로젝트 진행기간이 길어질수록 재사용을 위해  분리한 코드들이 어지럽게 나열되어 사용하기 더 어려울 때가 많았습니다.

 

그래서 이번엔 기존 보일러플레이트의 폴더 구조와는 다른 규칙을 적용하여 폴더를 정리해봤습니다.

다른 분들의 의견이 궁금합니다.

 

0. 이전 구조의 유틸파일 살펴보기

 

보일러 플레이트에 적용되어있던 로직과 추가된 로직들이 어지럽게 섞여있어, 매우 복잡하게 느꼈습니다.

그래서 이를 해소하기 위해 다음과 같은 순서로 진행되었습니다

 

1. 기존 로직과 분리하기

기존 보일러플레이트에는 여러 유틸 함수들이 존재합니다.

나름의 규칙을 갖고 분류된 폴더이지만 이 규칙에 맞게 제가 짠 코드들을 추가하다보니 기존 규칙이 깨지거나 추가한 함수를 찾기 어려웠습니다.

사용하지 않는 유틸은 과감하게 삭제하거나 외부 라이브러리 분리하는 것도 방법이겠지만, 우선 현재 파일을을 유지하면서 바꾸기 위해 제제가 추가한 로직들을 @common 이라는 폴더 안에 분리하기로 했습니다.

 

2.  UI, Business 목적별로 구분하기

아무리 추가된 함수를 분리해도 현재 그대로 사용하는건 무리가 있어 보입니다.

때문에 이번에 목적별로 한번 더 분류해기로 했습니다.

 

보통 제가 사용하는 유틸 함수들은 크게

화폐 단위나 콤마를 추가하는 넣어주는 UI 관련 함수

서버에서 전달받는 여러 데이터를 가공하여 로직을 구현하기 위한 함수,

추가로 위 두개의 유형으로 분리하기 애매한 것들은 주제로 묶었습니다.

 

썩 완벽한 분류는 아니었지만, 이번 개선에는 이정도면 충분했습니다.

 

3.. 결과물

 

최종적으로 위와 같은 구조로 변경되었습니다.

다 분류하고 보니 분류 기분이 애매한 것들이나, 주제로 묶은 것들의 경계가 애매해지는 등..문제는 발생했으나

적어도 이전보다는 찾기 쉽고, 해당 함수를 좀 더 쉽게 파악할 수 있게 되었습니다.

 

이 구조는 하나의 예시라, 여러분의 의견이나 노하우를 공유해주세요