프론트엔드 리팩터링

사내 컴포넌트 및 ENUM 코드 리팩터링

1. 개요

기존 각 팀, 그리고 팀내부에서의 각 개인별로 코드를 작성하며서 기술부채를 쌓아왔습니다.

이제는 서비스 규모가 커져서 점점 유지보수 하기 어려워진 시점에 각 담당자가 개인의 분야가 아니라면 본인 담당 페이지가 아니라며 수정요구, 기능추가개발 등 책임을 회피하는 모습이 종종 보입니다.

 

이를 없애기위해 각자 코드 스타일통일, 코드에 대한 이해, 중복코드 제거를 위해 코드리뷰를 도입하려 하였으나 실패하였고 남은 방법으로는 공통화 할 수 있는 코드는 최대한 통일 시켜서 담당자를 없애는 방법을 생각하게 되었습니다.

 

기존 모노레포를 고려하였으나, 배포 구성까지 전부 바꿔야하는 문제가 있고, 영양사 프로젝트는 별개의 UI를 갖고 있지만 Enum, Text, Util 함수, CustomHook 등 공유하는 코드가 많으니 라이브러리 방식을 채택하였습니다.

 

이번 리팩터링의 주요 목적은 코드 중복 제거와 공통 컴포넌트 및 ENUM 코드의 중앙 집중화를 통해 유지보수성과 관리 효율성을 향상시키는 것입니다. 각 프로젝트(영양사, 업체, 어드민) 간에 중복되는 코드들이 많았고, 이로 인해 코드의 일관성 유지와 버전 관리에 어려움이 있었습니다. 이러한 문제를 해결하기 위해 사내 공통 라이브러리를 도입하고 NPM으로 배포하여 중앙에서 관리할 수 있는 구조로 개선하였습니다.

2. 기존 아키텍처

기존 아키텍처는 각 프로젝트가 각각의 ,컴포넌트, 이미지, Hooks, ENUM, 스토리북을 독립적으로 관리하는 구조로 되어 있었습니다. 이는 아래 이미지에서 확인할 수 있습니다.

 

 

문제점

• 중복된 코드: 각 프로젝트에서 동일하거나 유사한 컴포넌트, ENUM 코드, Hooks가 여러 번 정의되었습니다.
• 유지보수 어려움: 코드 수정이 필요할 때 각 프로젝트별로 수정이 필요하여 시간이 많이 소요되었습니다.
• 일관성 문제: 코드 변경이 여러 프로젝트에 반영되지 않는 경우 일관성 문제가 발생할 수 있었습니다.
• 네이밍 문제: 이미 정의 된 같은 역할을 하는 기능, 변수, 함수라고 하더라도 네이밍이 각 개발자마다 네이밍을 다르게 하는 문제가 발생되었습니다.

3. 개선된 아키텍처

개선된 아키텍처에서는 공통 사내 라이브러리를 도입하여 컴포넌트, 스토리북, Hooks, ENUM 코드를 중앙에서 관리하도록 변경하였습니다. 또한, 이미지 파일은 CDN을 통해 관리하여 파일 중복을 제거하고 관리의 용이성을 높였습니다.

 

 

 

개선된 구조의 장점

• 중앙 집중화된 코드 관리: 공통 라이브러리로 코드가 중앙에서 관리되므로, 모든 프로젝트가 최신 코드를 쉽게 가져올 수 있습니다.
• 중복 제거 및 일관성 유지: 중복된 코드가 제거되었고, 모든 프로젝트에서 동일한 컴포넌트와 ENUM 코드를 사용하므로 코드의 일관성을 유지할 수 있습니다.
• CDN을 통한 효율적 이미지 관리: CDN을 통해 이미지를 중앙에서 관리함으로써 파일의 중복과 관리의 어려움을 해결할 수 있습니다.

4. 변경사항 요약

다음은 기존과 개선된 시스템의 차이점을 요약한 표입니다.

 

 

항목	기존	개선
컴포넌트 중복 문제 및 버전 관리	컴포넌트 중복 문제 존재 및 버전 관리 X	컴포넌트 중복 문제 제거 및 버전 자동 관리 O
Asset 파일 중복 제거 및 관리	Asset 파일 중복, 파일별 개별 관리, CDN 활용 X	Asset 파일 중복 제거 및 통합 관리, CDN 활용 O
ENUM 코드 중복 제거 및 관리	ENUM 코드 중복 O, 버전 관리 X	ENUM 코드 중복 제거, 버전 통합 관리
중복 코드에 대한 정책	중복 코드 정책 X	중복 코드 통합화 O
공통 코드 문서화	공통 코드 문서화 X	공통 코드 자동 문서화 O

 

주요 변경사항

• 컴포넌트 및 ENUM 코드 중복 제거: 모든 프로젝트에서 공통된 코드들은 사내 라이브러리로 통합하여 관리합니다.
• 버전 자동 관리: 버전 관리가 중앙에서 자동으로 이루어지며, 업데이트 시 모든 프로젝트가 일관되게 최신 버전을 사용할 수 있습니다.
• CDN 활용: CDN을 통해 Asset 파일을 효율적으로 관리합니다.
• 공통 코드 문서화 자동화: 공통 코드에 대한 문서를 자동화하여 관리의 효율성을 높였습니다.

5. 구현 및 배포 과정

5.1 라이브러리 프로젝트 생성 및 설정

• 공통 사내 라이브러리 프로젝트를 생성하고, 필요한 컴포넌트, ENUM 코드, Hooks 등을 모듈화하여 배포할 수 있도록 설정합니다.

5.2 NPM 배포 설정

스크립트 실행 순서

1. 공통 코드 작성
2. npm login
3. npm run build
4. tsc
5. package.json 버전확인 및 업데이트
6. npm publish
7. git push

5.3 스토리북 설정 및 커스터마이징

• 스토리북 작성
• npm run chromatic
• git push

6. 결론

이번 리팩터링을 통해 사내 프로젝트 간 코드 중복 문제를 해결하고, 관리 효율성을 크게 향상시켰습니다. 앞으로의 계획은 지속적인 코드 개선 및 라이브러리 업데이트를 통해 팀 내 코드 공유 및 협업의 효율성을 더욱 강화하는 것입니다.

 

더 나아가서 우선 기획단에 요청해서 각 페이지별로 텍스트가 다를 필요가 없는

유효성검사에 대한 안내 메세지, 토스트팝업 메세지, 정규식 등 문서화를 통해 관리하여

 

프론트엔드 백엔드의 유지보수, 기획, 디자인 파일의 공통화까지 진행중에 있습니다.

 

다른팀의 일정을 고려하여 아직 텍스트 공통화가 되지 않아서 잠시 중단되어있지만 기필코 해결 해야 할 과제입니다.