프레임워크 대체: HMPL로 Next.js를 교체한 경험

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 프론트엔드 개발자

- 라이트급 웹 애플리케이션 개발에 관심 있는 개발자

- Next.js의 무게감을 느낀 프로젝트 관리자

- 난이도: 중간 (기본적인 HTML/CSS/JavaScript 이해 필요)

핵심 요약

• Next.js의 무게감은 node_modules 폴더와 빌드된 자바스크립트 파일로 인해 500MB 이상까지 증가할 수 있음.
• HMPL 템플릿 언어는 HTMX 및 Alpine.js 대비 더 가볍고 확장성이 높은 클라이언트-서버 간 동기화 메커니즘 제공.
• HMPL 기반 애플리케이션의 파일 크기는 Next.js 대비 100배 이상 감소하며, Express.js 서버와 호환 가능.

섹션별 세부 요약

1. Next.js의 무게 문제

• Next.js 설치 시 기본 프로젝트 크기는 node_modules 없이도 100MB 이상에 달함.
• RTK-Query 등 상태 관리 라이브러리 추가 시 애플리케이션 크기가 1GB까지 증가할 수 있음.
• 중소기업 웹사이트의 평균 크기는 200MB~1GB, 대규모 프로젝트는 10GB 이상에 달함.

2. HMPL 템플릿 언어 도입

• HMPL은 .ejs와 유사한 템플릿 기반 접근법을 사용하지만, 서버에서 동적으로 컴포넌트 생성 가능.
• 예시 코드:

```html

{{#request src="https://api.example.com/data"}}

{{/request}}

```

• HMPL 기반 애플리케이션의 파일 크기는 1MB 이하로 줄어들며, Express.js 서버와 호환됨.

3. HTMX, Alpine.js 대비 HMPL의 장점

• HTMX의 단점:

- 최소한의 JavaScript 통합 (예: htmx.get() 등 기본 메서드만 지원)

- 요청 커스터마이징 제한 (예: fetch API 대신 고정된 요청 방식 사용)

• Alpine.js의 단점:

- .jsx와 유사한 복잡한 문법 사용

- 서버 렌더링 지원 부족

• HMPL의 강점:

- HTML 마크업 기반의 동적 인터페이스 생성

- 서버와 클라이언트 간 실시간 동기화 가능

결론

• HMPL은 Next.js의 무게 문제를 해결하며, 중소규모 웹 애플리케이션 개발에 적합한 대안.
• 실무 적용 시 팁:

- Express.js 서버와 HMPL을 결합하여 CSR(클라이언트 측 렌더링) 대신 SSR(서버 측 렌더링) 활용

- 모듈 federation과 유사한 방식으로 Vue/Angular 등 다양한 프레임워크 혼합 가능

• HMPL 사용 시 애플리케이션 크기 감소 효과: 100배 이상의 성능 향상 가능.