기존의 코드는 중복되는 부분이 많이 있기 때문에 코드가 길어지고 가독성이 떨어진 것을 확인할 수 있다. 이렇게 코드의 중복이 많고, 길어지면 코드를 유지 보수할 때 큰 어려움을 겪을 수도 있고, 한눈에 코드를 보기 어려워진다.
우선 코드에서 중복된 부분을 찾아보았다. 코드의 다음 두 부분이 중복되는 것을 확인했다.
중복되는 코드를 함수로 정의한다. 첫번째 중복 코드는 templateHTML로, 두번째 중복 코드는 templateList로 정의했다. return값을 정확히 설정해야 원하는 결과를 만들 수 있다.
작성한 함수는 다음과 같이 호출해준다.
코드의 중복되는 부분들을 함수로 정의하여 코드가 비교적 짧아졌고, 가독성도 좋아졌다.
코드의 오류가 없는지 확인하기 위해 터미널을 통해 구동시킨다.
웹페이지가 정상적으로 로딩된 것을 확인할 수 있다.
코드를 작성할 때 중복되는 부분을 줄이고 함수를 사용하여 해당 코드의 역할 등을 눈에 보이게 만들면 가독성이 좋아지고 유지 보수를 하는데 어려움이 줄어든다.