TIL : 리팩토링, 모듈화로 재사용성, 유지보수성 높이기(nestJS, EJS)

Nest.js, ejs 사용 환경. 

 

재사용성과 유지보수성을 높이기 위하여, 기존 코드를 모듈화 하였다. 이를 통해 각 게시판, 게시글 마다 반복적으로 들어가는 날짜 표기 기능에 대한 코드를 대폭 줄일 뿐만 아니라, 유지 보수의 편리성을 얻었다.

 

먼저, 어떤 상황이었는지 정리해본다.

문제상황

- 프로젝트 진행 초기에는 당장 기능 구현을 우선시하다보니, 일단 코드를 짜는데 급급하기만 했다. 그러다보니 동일한 기능에 대해서 조건문이 생기기 시작했고, 결국에 저렇게 코드가 길어져버렸다...

 

- 반복문 코드가 들어가는 게시판 구역(HTML 테이블)은 최소 8개 이상(각 게시판, 인기글, 통합검색 결과, 각 게시판 검색페이지)이다. 

- 게다가 게시글 상세페이지 접속시 게시글 내부 본문의 시간표기, 본문 하단의 이전글, 현재글, 다음글 안내에 대한 시간표기 

댓글에 들어가는 시간 표기까지 고려하면 반복되는 코드 구역은 총 13개로 늘어난다.

 

- 결국, 기존 상태의 가장 큰 문제는 유지보수성에 있다. 코드를 수정할 일이 생길 때면, 이 기능이 적용된 모든 파일에 접근해서, 하나씩 반복작업을 해야하는 것이다! 그래서 어떻게 하면 이것을 좀 더 효과적으로 처리할 수 있을까 의문이 생기기 시작했다.

 

변경 전 상태 코드

날짜/시간이 들어가는 부분들

 

날짜 기재되는 부분은 모두 이런 형태로 들어간다 

변경 전 상태 예시

변경 전

 

filter.js 파일에 함수를 작성하고 reformPostDate라는 자체 제작 함수를 만들어서, module.exports로 내보낼 수 있도록 했다. 위 상태를 아래 사진과 같은 상태로 리팩토링했다. 이를 통해 코드를 모듈화하고, 프로젝트 구조를 체계적으로 관리할 수 있다.

변경 후

변경 후

 

모듈에 구성된 시간 표기 함수

 아래 사진처럼, 각 컨트롤러에서 import()로 함수가 담긴 자바스크립트 파일을 불러와주고 렌더링할 프론트엔드 ejs 파일로 넘겨준다. 그 뒤에 위 파일에서처럼 매개변수를 넣고 사용하였다.

 

리팩토링 작업을 시작하면서 초기엔 좀 헤맸지만, 해놓고 보니 상당히 뿌듯한 경험이 되었다. 

 

 

알게 된 점

반복적으로 코드가 들어가는 곳이 있을 때, 모듈을 제작한 프로그래밍은 큰 도움이 된다.

재사용성이 높아지고, 유지보수가 편리해진다!