배경 최근에 TTS만을 위한 웹 에디터를 개발하면서 contentEditable 속성을 가진 태그를 다루며, 많은 이슈들을 겪었다. 특히 유저의 액션에 따라 태그를 동적으로 생성하는 로직을 짜야 했다. 그 중에서 현재 위치한 커서 또는 현재 선택된 텍스트의 바로 뒤 공백에 태그를 추가하는 로직을 작성했다. 아무래도 처음부터 클리한 코드를 생각하면서 짜기에는 난이도가 제법 있는 로직이라고 생각했고 처음에는 동작하는 코드만을 위한 목적으로 코드를 써내려가기 시작했다. 기능 개발을 마친 뒤, 다른 팀원들도 이해할 수 있도록 코드를 정리하며, 리팩토링 2판 책으로 공부했던 개념들을 하나 둘씩 적용하려고 시도했다. 리팩토링 시작! 먼저 함수 추출하기부터 적용했다. 가장 만만한 리팩토링 기법이다. 나는 이 녀석이 ..