대체 프레임워크 사용 방법을 알아보자!

카테고리

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

서브카테고리

웹 개발

대상자

• 프론트엔드 개발자, 프레임워크 대체를 고려하는 개발자
• 난이도: 중간 (기본적인 JavaScript와 서버 통신 지식 필요)

핵심 요약

• 자바스크립트 네이티브 API(CustomElementRegistry) 활용을 통해 프레임워크 없이 컴포넌트 구현 가능
• HMPL 문법을 사용한 서버 데이터 동적 로딩 기법으로, 도메인 무관한 컴포넌트 재사용 가능
• 정적 사이트 생성기(WordPress, Jekyll) 사용 시, 블로그/문서 사이트 개발에 효율적

섹션별 세부 요약

1. 네이티브 자바스크립트를 활용한 컴포넌트 개발

• customElements.define() API를 통해 커스텀 엘리먼트 정의 가능
• template 태그와 결합해 HTML 구조 재사용 가능
• 프레임워크 의존 없이 장기적으로 유지 가능한 기술

2. HMPL 문법을 통한 서버 데이터 동적 로딩

• {{#request src="/api/..."}} 문법으로 서버 API 호출 가능
• 클릭 이벤트 기반 데이터 동적 로딩(after="click:#btn") 지원
• 서버에서 컴포넌트 생성 후 도메인 무관하게 재사용 가능

3. 정적 사이트 생성기 활용

• WordPress: 비즈니스용 레디메이드 솔루션 제공, 20년 이상 유지 가능
• Jekyll: 정적 블로그/문서 사이트 생성에 적합, Markdown 기반 콘텐츠 관리
• 공통점: 프레임워크 없이도 간단한 구조로 사이트 운영 가능

결론

• 프레임워크 대체 시 HMPL 문법과 정적 생성기(WordPress, Jekyll) 사용을 고려
• 프로젝트 목적에 따라 네이티브 API 또는 정적 사이트 생성기 선택이 중요
• "프레임워크가 필수적이라는 편견을 버리고, 도구 선택의 유연성을 확보해야 한다"는 핵심 메시지