[JavaScript] 반복되는 코드를 전역 공통 컴포넌트로 개선하기

웹 프로젝트를 진행하다 보면 메인 페이지, 이벤트 페이지 등 여러 화면에서 동일한 HTML 구조가 반복적으로 등장하는 경우가 많습니다. 이런 코드를 그대로 두면 유지보수가 어려워지고, 새로운 요구사항이 생겼을 때 모든 페이지를 수정해야 하는 불편함이 생깁니다.

이번 작업에서는 이러한 문제를 해결하기 위해, 반복되는 코드를 전역 자바스크립트 컴포넌트로 모듈화하여 공통으로 사용할 수 있도록 개선했습니다.

 

📂 목차

 

---

1. 전역 네임스페이스 패턴

window.RentalComponents = window.RentalComponents || {};

• 전역 변수 오염(Global Pollution) 방지.
• window 객체에 RentalComponents라는 네임스페이스를 정의하여 모든 함수를 이 안에 모아 관리
• 이미 선언된 값이 있으면 그대로 사용하고(|| {}), 없으면 새 객체 생성.

2. 함수 정의 방식

RentalComponents.createProductPointHtml = function() { ... };

• 익명 함수(Anonymous Function)를 변수에 할당하는 방식.
• 화살표 함수(=>) 대신 function 키워드를 사용한 이유는 구형 브라우저 호환성 때문
• 반환값은 HTML 문자열(string)로, 필요한 위치에 삽입 가능

3. HTML 문자열 결합

return '<div class="pro_point">' +
       '<span class="pro_point_best"><img src="/images/pro_best.jpg" alt="베스트" /></span>' +
       ...
       '</div>';

• + 연산자를 활용하여 문자열을 이어붙이는 전통적인 방식
• ES6 이후에는 템플릿 리터럴(`)을 사용하면 가독성이 더 좋지만, 구버전 호환을 위해 기존 방식 유지

4. jQuery 활용

$('.pro_point_placeholder').each(function() {
    $(this).html(RentalComponents.createProductPointHtml());
});

• jQuery의 .each()로 반복문 처리
• .html()을 이용해 placeholder 영역을 실제 HTML로 치환
• 결과적으로 페이지 내 특정 위치에 동적으로 UI를 생성

 

5. 데이터 속성(Data Attribute) 활용

var imgPath = $(this).data('img-path') || '';
var imgFileName = $(this).data('img-filename') || '';

• <div data-img-path="/images/" data-img-filename="test.png"></div> data- 속성을 읽어와 이미지 경로 및 파일명을 동적으로 조합
• 값이 없을 경우 ''(빈 문자열)로 처리해 오류 방지

 

6. 초기화 로직

$(document).ready(function() {
    RentalComponents.initializeComponents();
});

• DOM이 준비되면 자동 실행.
• initializeComponents()에서 각 placeholder(.pro_point_placeholder, .thumb_gift_placeholder 등)를 찾아 HTML로 변환
• 페이지 로드 시점에 필요한 UI를 자동으로 렌더링

 

7. 하위 호환성 처리

window.createProductPointHtml = RentalComponents.createProductPointHtml;

• 기존 코드에서 사용하던 createProductPointHtml() 호출 방식을 유지
• 새로운 네임스페이스 기반 구조와 함께 동작하도록 백워드 호환성 확보

8. 문법/설계 포인트 정리

• 모듈 패턴: 네임스페이스 기반으로 함수 관리.
• 동적 HTML 렌더링: 문자열 반환 후 jQuery .html() 삽입.
• 재사용성: 상품 포인트, 사은품, 이미지 등 반복 코드를 함수화하여 중복 제거
• 확장성: 새로운 유형이 생겨도 함수 추가만으로 손쉽게 확장 가능

마무리

이번 개선 작업을 통해 중복된 코드가 하나의 전역 컴포넌트로 통합되면서 유지보수가 훨씬 쉬워졌습니다. 새로운 상품 유형이 추가되더라도 함수만 확장하면 되기 때문에, 확장성과 유연성도 크게 향상되었습니다.

👉 앞으로는 페이지마다 같은 코드를 붙여넣는 대신, 한 곳에서만 관리하고 전체에서 재사용하는 방식으로 생산성과 안정성을 높여 나갈 수 있을 것 같습니다.