해당 포스팅은 작성중인 포스팅입니다.
고민의 발단
나는 SI회사에 1년 가까이 재직중이고 여태까지 5~6개의 프로젝트를 경험한 것 같다.
프로젝트들은 처음부터 시작한 프로젝트들도 있으며 프로젝트 중간에 투입한 적도 있고 프로젝트 유지보수를 한 경험들이 있다.
최근들어 드는 고민은 프로젝트 중간에 투입하거나 기존 프로젝트를 유지보수해야하는 경우, 또 프로젝트들이 스파게티 코드와 오류 투성이라면 어떻게 리팩토링을 해내가야하는가에 대한 고민중이다.
유지보수 프로젝트의 문제점
최근에서 회사에 내가 입사하기도 전에 시작되었던 프로젝트(React-native)의 유지보수 업무를 맡게 되었다.
이 프로젝트는 많은 클라이언트들의 많은 오류사항이 있었고 내가 확인해본 결과, 안되는 기능도 많을 뿐 아니라 속도도 느렸다.
뿐만 아니라 코드 또한 문제였다.
대부분 파일당 500~1000줄이 기본이었다.
특정 관심사 로직이 분리되어있지 않고 페이지 컴포넌트에 모두 몰려있기 때문에 길어진 것으로 파악했다.
리액트 네이티브를 해본적이 없고 어떻게 시작해야할지 막막했다.
급한대로 2주동안 클라이언트가 전달한 오류사항을 수정해나갔지만 근본적인 부분들이 해결되지 않았다.
그래서 이러한 프로젝트는 어떻게 리팩토링해야하는가? 또 이러한 프로젝트들이 앞으로 계속 나타났을 때, 어떠한 식으로 대처를 해나가야할까?라는 고민들에 대한 방법론을 내 나름대로 정의해보려한다.
남의 코드를 보는 것에 익숙해지고 이를 빨리 파악하여 올바른 방식으로 리팩토링할 수 있는 나만의 메뉴얼이 있다면 이것은 나의 경쟁력이 될 수 있다는 생각이 들었다.
그렇다면 시작해보자.
리팩토링 포인트
사실 리팩토링을 하기에 앞서서 해당 프로젝트의 문제점을 파악하는게 제일 중요하다.
해당 프로젝트의 문제점에 따라 리팩토링 포인트가 달라질 수 있다.
그리고 오류사항들이 있다면 리팩토링 포인트 중 제일 우선순위에 둬야하는 것은 오류사항에 대한 것들이다.
그렇지만 이 글에서는 나의 경험을 토대로 리팩토링 포인트를 나열해보고자 한다.
- 주석
- 변수명
- axios 설정 파일(api endpoint,header에 token 설정...)
- 컴포넌트 분리
- 스타일 코드와 상수 코드 분리
- 상세 API 구성 및 상세 페이지에서 상세 API 불러오는 것이 필요
- 라우터
주석
컴포넌트,함수,변수 등 왠만하면 주석을 달아놓아야한다.
이것은 협업하는 프로젝트뿐만 아니라 혼자하는 프로젝트이더라도 필요한 리팩토링 포인트이다.
시간이 지나고 봤을 때, 자신이 작성한 코드도 무슨 의도인지 파악하지 못할 때가 많다.
간혹 프로젝트를 맡았을 때, 파일마다 코드가 매우 긴 경우가 있었다.
이번엔 맡은 유지보수 프로젝트 또한 각 파일마다 대략 1000줄가까이되며 페이지 컴포넌트에 모든 로직이 집약되어있다.
또한 변수,함수,컴포넌트명이 Data1,Data2,Data3 이런 식으로 의미가 불분명하게 달려있었으며 변수마다 주석이 안달려있어 해당 변수가 어떤 역할을 하는지 파악하기 어려웠다.
따라서 각 변수,함수,컴포넌트가 어떤 역할을 하는지 파악하여 주석을 달아놓을 필요가 있다.
