배경
최근에 TTS만을 위한 웹 에디터를 개발하면서 contentEditable 속성을 가진 태그를 다루며, 많은 이슈들을 겪었다.
특히 유저의 액션에 따라 태그를 동적으로 생성하는 로직을 짜야 했다.
그 중에서 현재 위치한 커서 또는 현재 선택된 텍스트의 바로 뒤 공백에 태그를 추가하는 로직을 작성했다.
아무래도 처음부터 클리한 코드를 생각하면서 짜기에는 난이도가 제법 있는 로직이라고 생각했고 처음에는 동작하는 코드만을 위한 목적으로 코드를 써내려가기 시작했다.
기능 개발을 마친 뒤, 다른 팀원들도 이해할 수 있도록 코드를 정리하며, 리팩토링 2판 책으로 공부했던 개념들을 하나 둘씩 적용하려고 시도했다.
리팩토링 시작!
먼저 함수 추출하기부터 적용했다. 가장 만만한 리팩토링 기법이다. 나는 이 녀석이 리팩토링 책 후반부에 나오는 기법들의 뿌리 역할을 하는 것 같다고 생각했다.
그러나 생각보다 쉽지가 않았다.
지역 변수는 어떻게 처리해야 하고, TypScript를 사용하고 있었기에 null check를 해야하는 변수마저 추출하게 되면 추출한 함수에서 null check를 다시 한번 써야하는건지 여러 고민을 하기 시작했다.
가장 기본적인 리팩토링 기법이라고 생각했었지만, 확실히 실무에서 편하게 사용하려면 숙련도를 끌어올려야 한다는 것을 많이 느꼈다.
다시 리팩토링 책으로
따라서 리팩토링 책을 처음부터 다시 공부하기로 마음먹었다. 애초에 1번 읽고 끝내려던 것은 아니었지만 다시 공부하기까지 제법 일찍 돌아온 것 같다.
프런트엔드의 기술 트렌드 변화는 매우 빠른 편이고, 그러기에 빨리 빨리 기술을 학습해야하지만 리팩토링과 같이 모든 기술의 베이스를 담당하는 개념, 기술에 투자하는 것은 확실히 가치가 있다고 생각한다. (또한 나는 이게 실력이라고 생각하기 시작했다. 프레임워크, 라이브러리를 사용하는 것은 사실 직접 몇 번 사용해보면 감이 오지만, 그 내부에서 좋은 코드는 어떻게 사용하는지, 디렉토리 구조는 어떻게 나눠야하는지, 모듈화는 어떻게 시켜야하고 이 상황에서 적절한 디자인 패턴은 어떤 것인지와 같은 개념들은 오랜 기간 내공이 쌓여야 하기 때문이다.)
결론
리팩토링 책에 있는 기법들을 실무에서도 능숙하게 다룰 수 있도록 하자. (그러면 코드리뷰에서도 할 말이 제법 많아질 것 같다.)
