웹 프론트엔드 프레임워크
웹 프론트엔드 프레임워크(Frontend web framework 또는 Client-side web framework)는 웹 애플리케이션의 사용자 인터페이스를 조직적으로 개발하고 화면 상태와 상호작용을 관리하는 기능을 제공하는 웹 프레임워크다. 일반적으로 HTML·CSS·JavaScri...
| 영문명 | Frontend web framework / Client-side web framework |
|---|---|
| 분류 | 웹 프레임워크, 사용자 인터페이스 개발 기술 |
| 실행 환경 | 주로 웹 브라우저와 클라이언트 런타임 |
| 기반 기술 | HTML, CSS, JavaScript, TypeScript, DOM |
| 주요 기능 | 컴포넌트, 반응형 상태, 렌더링, 이벤트, 클라이언트 라우팅 |
| 대표적인 프레임워크 | Angular, Vue.js, Svelte, Ember.js |
| 연관 UI 라이브러리 | React |
| 연관 기술 | 웹 백엔드 프레임워크, 단일 페이지 애플리케이션, 서버 측 렌더링 |
웹 프론트엔드 프레임워크(Frontend web framework 또는 Client-side web framework)는 웹 애플리케이션의 사용자 인터페이스를 조직적으로 개발하고 화면 상태와 상호작용을 관리하는 기능을 제공하는 웹 프레임워크다. 일반적으로 HTML·CSS·JavaScript에 기반하며 DOM과 브라우저 이벤트, 접근성 인터페이스를 이용해 사용자에게 표시되는 화면을 구성한다. 여러 페이지와 상태를 갖는 응용 프로그램을 작은 구성 요소로 분할하고 공통 규칙에 따라 재사용하도록 하는 것이 핵심 목적이다.[1]
프론트엔드 프레임워크는 데이터 상태의 변경을 화면에 반영하는 반응성 또는 렌더링 모델과 컴포넌트의 속성, 이벤트 및 생명주기를 정의한다. 일부는 선언적 템플릿을 컴파일하고, 일부는 JavaScript 함수나 전용 문법을 통해 화면을 기술한다. 응용 프로그램이 커지면 라우팅, 전역 상태 관리, 비동기 데이터 요청, 폼 처리 및 테스트 체계를 별도로 조합하거나 프레임워크 생태계의 도구를 사용할 수 있다.
Angular는 컴포넌트 중심 응용 프로그램 구조와 의존성 주입, 라우팅 등 광범위한 기능을 제공하고, Vue.js는 선언적 템플릿과 반응형 데이터 모델을 중심으로 UI를 구성한다. Svelte는 빌드 과정의 컴파일을 적극 활용하며 Ember.js는 장기적인 응용 프로그램 개발을 위한 관례와 통합된 도구 구성을 중시한다. 반면 React는 공식적으로 UI 라이브러리로 분류되므로 프레임워크와 라이브러리의 범주를 구별하면서 관련 기술로 함께 다룬다.[2][3]
클라이언트 측 렌더링에서는 서버가 전달한 기본 HTML과 스크립트를 브라우저가 실행한 뒤 DOM을 구성한다. 단일 페이지 애플리케이션은 이 방식과 클라이언트 라우팅을 조합하여 문서 전체를 다시 로딩하지 않고 여러 화면을 제공할 수 있다. 그러나 프론트엔드 기술은 서버에서 HTML을 미리 생성하는 서버 측 렌더링이나 정적 생성 방식과도 결합할 수 있으며, 특정 프레임워크가 반드시 클라이언트에서만 실행되어야 하는 것은 아니다.
프론트엔드에서 서버로 데이터를 전송할 때는 Fetch API, WebSocket 등 웹 플랫폼의 네트워크 인터페이스를 사용한다. 이때 클라이언트의 입력 검증은 사용자 경험을 개선하지만 서버 측 인증과 권한 검사를 대체하지 않는다. 화면에 표시할 외부 데이터를 처리할 때에는 스크립트 삽입 공격과 접근성 문제를 고려하고, 라우팅이 브라우저의 탐색 기록과 URL 의미를 유지하도록 설계해야 한다.
프레임워크의 실행 비용은 JavaScript 다운로드 크기와 초기화, 상태 변경에 따른 렌더링, 네트워크 요청 및 브라우저 메모리 사용 등에 영향을 받는다. 성능 최적화에는 코드 분할, 지연 로딩, 구성 요소 재사용, 캐싱과 서버 렌더링 등이 활용된다. Next.js와 Nuxt처럼 프론트엔드 기반 구성 요소를 사용하면서 서버 기능까지 제공하는 도구는 풀스택 범주에도 해당하므로 기술의 중심 역할과 전체 제품의 지원 범위를 구별할 필요가 있다.