Z9 리팩토링

첫 리팩토링이다. 이름은 거창하나 실제론 다듬었다는 게 조금 더 맞는 표현일 듯하다. 논리 구조를 다시 짠 건 사실상 없기 때문이다. 그렇다고 코드를 만지지 않은 것은 아니니 그 과정을 남긴다.

 

1. 타입 정의

제일 먼저 타입스크립트를 만졌다. 그동안 시간내 완성을 목표로 움직이다보니 타입을 제대로 작성하지 못한 부분이 많았다. 안쓰거나 any로 두거나. 이 부분을 최대한 타입 정의했다.

 1) State 타입

(before) 초기값만으로 타입이 추론될 수 있으나,

(after) 위와 같이 적어두면 정확히 명시할 수 있다.

 2) any 없애기

before

after

2. 삼항연산자

단순 if 문은 보기 편하도록 삼항 연산자로 변경했다.

before

after

3. 주석 정리

사용하려고 미리 써둔 함수, 테스트하며 적어 둔 콘솔 및 속성 등 모두 삭제했다.

사용할 줄 알고 만들어둔 함수명

사용하다가 쓸모 없어진 props

4. 모양 정리

 1) 짧은 것에서 긴 순으로

before

after

 2) 같은 기능끼리 모으기

before

after

 3) 사용하지 않는 변수 삭제

before

after

5. 컴포넌트 분리

코드가 길어진다면 같은 기능을 갖는 컴포넌트는 따로 분리하는 것도 좋다. 아래 코드는 값이 바뀔 때마다 바뀐 값만 저장하는 객체다. container-presenter 패턴으로 작업했기에 아래 같은 코드는 쓸떼 없이 코드가 늘어나게 할 뿐이었다. 따라서 별로 컴포넌트로 빼 코드 가독성을 높였다.

before

after

6. 반복 요소 메서드 적용하기

같은 코드가 반복 된다면, 메서드 사용을 고려한다. 5번에서 코드를 별도 컴포넌트로 분리했지만, 여전히 지저분해보인다. 반복문 또는 메서드를 사용하면 코드 가독성이 훨씬 더 높아진다.

before

after

7. 오타 수정

오타는 개발자의 주적인가 싶다. 틀린지도 모르는 오타도 많다. 따라서 발견한다면, 즉시 바꿔주는 게 좋다. 추후 유지보수 시 난해해질 수 있다.

n이 빠진  onChage다. 이 함수는 props로도 넘겨 사용했었기에, 5개 파일을 더 수정해야 했다.

8. 콘솔 삭제

마지막 console.log() 삭제다. 생각보다 이 부분을 놓치기 쉽다. 그리고 실제 운영중인 사이트도 콘솔창을 띄워보면 미쳐 없애지 못한 콘솔들을 많이 볼 수 있을 정도다. 따라서 console.log()는 꼭 한 번 확인할 필요가 있다. 일반 사용자가 볼 일은 적으나, 그렇다고 남겨둘 이유도 없으니까.

 

 

마무리

코드를 다시 정리하다보니, Z9 리팩토링은 크게 이렇게 8가지 정도인 듯하다. 여기에 코드 최적화를 한 게 들어 갔다면 더욱 좋았으렸만, 단순 refetchQuery를 cache를 사용한 update로 바꾸는 작업은 포함하지 않았다. 코드 작성할 때 먼저 적용했기 때문. 그것도 리팩토링에 넣으면 넣을 수 있지만, 이미 한 작업을 다시 리팩토링 시 했다고 할 순 없으니까. 게다가 굳이 캐시로 값을 빠르게 받지 않아도 되는 곳도 많았기에 굳이 더 바꾸지 않은 곳도 있다.

리팩토링한다는 마음으로 다시 코드를 보니, 내가 짠 코드임에도 잘 짠 코드가 보이는 반면, 왜이렇게 했을 지 의문이 드는 것들도 많았다. 리팩토링은 한 번 만들었다고 그대로 끝내면 안된다는 것을 일깨워 주는 작업이다.