들어가며

좋은 기회로 만들어진 프로젝트를 읽을 기회가 주어졌다. 내가 맡은 역할은 서버로부터 받은 데이터를 엑셀에 뿌리는 역할이었다. 그저 sheetjs 라이브러리를 사용해서 파싱하면 되는 간단한 업무였다. 10분남짓한 시간안에 끝나버린 업무. 나에게는 하루나 되는 길고 지루한 시간이 남았다. 결국 내 본능대로(?) 본격적인 리팩토링에 돌입하였다.

문제점 1. 하드코딩된 스타일링

내 눈에 가장 먼저 띈 내용은 컴포넌트화가 강점인 리액트에서 재사용되는 컴포넌트가 거의 없었다는 점이었다. 모든 버튼들은 하드코딩되어있었고 그랬기에 코드의 양이 상당히 비대해져있었다.

해결법 1-1. 재사용성 증가

코드로 확인하기 전 UI를 먼저 확인하는 것이 직관적으로 리팩토링하기 유리하다. UI를 확인해보니 크게 두 종류의 버튼이 있었고 사이즈로 구분하면 좋아보였다.

각각 BigBtn.js SmallBtn.js로 구분하여 props를 전달했다. 이렇게 하여 색상 외의 사이즈나 폰트사이즈 등의 스타일 값들을 통일시킬 수 있었다.

해결법 1-2. 색상의 상수화

색상역시 하드코딩되어있었다. 이를 Colors.js에 모두 저장하여 주석을 달고 관리하였다.


JAVASCRIPT
1const Colors = {
2  // 브랜드 / 기본
3  primary: "#0e62c1",
4  primaryLight: "#3498db",
5  primaryDark: "#084a9c",
6  //....
7
8  // 회색 계열
9  gray100: "#F3F4F6",
10  gray200: "#E5E7EB",
11  gray300: "#D1D5DB",
12  gray400: "#9CA3AF",
13  gray500: "#6B7280",
14  gray600: "#4B5563",
15};
16export default Colors;

문제점 2. api 엔드포인트 관리

api가 8000번 포트 로컬호스트로 동작하게끔 되어있었으나 임시방편으로 팀장님 ip로 접속하게 되었다. 이를 위해서 10개 정도 되는 localhost:8000을 http://**.***.*.*:8000로 바꾸었다. 물론 버튼 한번에 모든 url을 변경할 수 있었지만 위험한 방식이다.

해결법 2-1. tanstack-query 활용

사실 이 부분은 api라이브러리를 사용하면 간단하게 해결되는 문제이다. api/client.js 파일을 구성하여 사용하는 모든 api를 관리하였다. 총 4종류의 api 호출이 있었고 이를 tanstack-query로 관리하였다.

tanstack-query가 제공해주는 isPending으로 대체하면서 setLoading의 상태를 저장하는 useState는 제거하였다.

문제점 3. 이렇게 하니 파일이 늘어난다.

당연한 말이지만 큰 파일을 쪼갰으니 여러개의 파일로 늘어나게 된다.

해결법 3-1. 폴더구조 관리

이 부분에서는 각각의 탭으로 폴더구조를 분리했고 공통적으로 사용되는 컴포넌트는 common 폴더를 만들어서 관리했다. 예를 들면 아까 설명했던 BigBtn, Sidebar등이 있다.

맺으며

사실 규모가 큰 프로젝트는 아니었고 못짠 코드인것도 아니었다. 그래도 "이렇게 하면 더 읽기 편하지 않을까?" 하는 마음으로 쭉 변경해보았다. 기회가 된다면 프로젝트의 스타일링도 좀 건드려보고싶다.

레거시 코드 수정해보기