우리는 괴물을 죽였다: WebForms Core 2.0 출시 및 공포의 프론트엔드 시대의 종말

발행: 1개월 전 (2025년 12월 25일 오전 07:28 GMT+9)

21 분 소요

Source: Dev.to

소개: 현대 악몽의 해부

웹 개발 세계는 길을 잃어버렸습니다. 한때 정보를 표시하기 위한 단순한 도구였던 프런트‑엔드는 괴물로 진화했습니다. 무거운 프레임워크, 끝없는 툴체인, 수 기가바이트에 달하는 node_modules, 그리고 상태 관리의 어지러운 복잡성으로 개발자를 고갈시켰습니다.

Elanat 에서는 이 괴물을 다른 경쟁 툴이 아니라 혁신적인 패러다임 전환으로 물리쳤습니다. WebForms Core 2.0 은 현대 프레임워크(React, Angular 등)와 하이브리드 솔루션(Blazor Server)조차 답하지 못한 질문에 대한 최종 답변입니다.

WebForms Core 기술의 버전 2가 출시되었으며, C#의 WebForms 클래스는 WebFormsJS 라이브러리와 정렬되었습니다.

PHP용 WebForms 클래스도 버전 2에 맞추어 정렬되었으며, 곧 다른 언어(Python, Go, Java 등)의 WebForms 클래스도 WebFormsJS v2에 맞춰 업데이트될 예정입니다.

≈ 99 % 성능 보장

이번 릴리스에서는 새로운 기능을 테스트했을 뿐만 아니라, 처음부터 모든 WebForms Core 기능을 철저히 평가하여 발견된 버그(대부분 사소함)를 수정했습니다. 우리는 회귀 테스트 모델을 사용했습니다: 각 수정 라운드 후에 모든 시스템 기능을 다시 테스트하여 새로운 변경 사항이 기존에 정상 작동하던 것을 깨뜨리지 않았는지 확인했습니다. 성능 테스트를 진행하면서, 우리가 확인한 필요에 따라 여러 새로운 기능도 추가했습니다.

WebForms Core vs. 프론트엔드 프레임워크 (React, Vue, Angular)

WebForms Core 버전 2는 새로운 다양하고 풍부한 기능을 제공함으로써 기존 프론트엔드 프레임워크에 비해 큰 장점을 확보했습니다. 이러한 프레임워크와 비교했을 때 유일한 제한점은 생태계와 개발자 커뮤니티가 작다는 점이며, 따라서 리소스·플러그인·공개 문서가 React나 Vue만큼 방대하지 않습니다. 곧 문서를 정리하고 다양한 모듈 패키지를 만들어 이 부분을 보완할 예정입니다.

WebForms Core 은 풀스택 개발을 위한 가장 포괄적인 플랫폼이며, 서버‑드리븐 UI 개념을 뛰어나게 구현한 사례입니다.

WebForms Core 기술은 어떻게 사용하나요?

두 단계가 필요합니다:

클라이언트 측 – HTML 페이지에 WebFormsJS 스크립트를 추가합니다.
```

```
스크립트는 다음에서 가져옵니다:
서버 측 – 사용하려는 프로그래밍 언어에 맞는 WebForms 클래스를 가져옵니다.

클래스는 다음에서 가져옵니다:

사용 방법 – 서버 측에서 WebForms 클래스의 인스턴스를 생성하고 강력한 기능을 사용합니다.
```
WebForms form = new WebForms();
form.AddTag("", "h3");
form.SetTextColor("", "lightblue");
form.SetText("", "Hello World!");
form.AddState("#state1");
Write(form.Response());
```

왜 현재 모델이 구식인가?

거의 모든 웹은 오늘날 두 가지 모델로 운영됩니다:

모델	설명
데이터 흐름 (JSON/HTML)	원시 데이터가 전송되고, 클라이언트가 이를 어떻게 처리할지 결정합니다.
Diff 흐름 (Virtual DOM)	메모리 내에서 구조를 비교(difffing)하여 변경 사항을 적용합니다.

WebForms Core 2.0은 명령형 Imperative Command Flow 를 도입함으로써 이러한 시간‑소모적이고 리소스‑집약적인 단계를 없앱니다. 전체 데이터 세트나 HTML을 비교하기 위해 보내는 대신, 서버는 직접 명령 을 전송합니다.

Blazor Server에서는 서버가 클라이언트의 DOM 사본을 유지하고 무거운 diff 연산을 수행해야 합니다.
WebForms Core에서는 서버가 무상태이며 단순히 “Main 태그의 색을 초록색으로 바꿔라” 라고 말합니다. 그게 전부입니다! 이로 인해 지연 시간이 거의 없고, 대역폭 소비도 무시할 수준이며, 서버 확장성이 눈부시게 향상됩니다.

Source: …

WebForms Core 2의 가장 중요한 기능

1. 마스터 페이지와 Service Worker

버전 2에서 가장 놀라운 부분은 마스터 페이지 시스템입니다. 클라이언트에서 Service Worker와 routeAlias를 결합하면 애플리케이션의 메인 레이아웃이 영원히 캐시됩니다. 사용자가 링크를 클릭하면 시스템은 해당 레이어가 이미 메모리에 존재함을 인식하고 Post‑Back 헤더를 전송하며, 서버는 “ 섹션에 대한 명령만 전송합니다.

서버의 파워와 네이티브 애플리케이션의 속도를 동시에 얻을 수 있습니다.

2. WasmBack와 FrontBack

우리는 프로그래밍 언어의 경계를 허물었습니다.

WasmBack – Rust, C++, Go, C# 등 다양한 언어가 WebForms 클래스를 브라우저( WebAssembly )에서 직접 사용할 수 있게 합니다.
FrontBack – 순수 클라이언트 로직이 필요한 2 %의 시나리오에서 복잡한 JS 스파게티 코드를 더 이상 작성할 필요가 없습니다. FrontBack은 JS 모듈이 WebForms 명령을 생성하도록 합니다.

WebForms Core는 이제 모든 언어와 대화할 수 있는 “웹을 위한 운영 체제”가 되었습니다.

3. 서버에서 DOM 단위 테스트

프론트엔드 단위 테스트는 보통 깨지기 쉽고 느립니다. WebForms Core를 사용하면 서버‑사이드 테스트에서 서버가 실제로 내보낼 DOM 명령을 정확히 검증할 수 있어, 테스트가 결정적이고 빠르며 유지보수가 용이합니다.

4. 스마트 폼 제출: 실제로 변경된 것만 전송

전통적인 프레임워크는 전체 폼 페이로드를 무차별적으로 재전송하여 서버가 사용자가 전혀 건드리지 않은 데이터를 다시 검증·파싱·처리하도록 강요합니다.

WebForms Core 2.0은 스마트 폼 제출을 도입했습니다. 실제로 변경된 필드만 서버에 전송됩니다. 이는 단순한 외관상의 최적화가 아니라 상태 인식 프로토콜 기능입니다.

프레임워크는 초기 상태와 현재 상태를 추적하고 체크섬을 계산하여, 변경되지 않은 데이터는 절대 재전송되지 않도록 보장합니다.

그 결과

요청 페이로드가 크게 감소
서버 처리 속도 향상
실제 사용자 의도 명확히 감지
대규모 엔터프라이즈 폼을 위한 보안 기반 구축

이것이 처음으로 올바르게 수행되는 폼 제출입니다.

5. TriggerEvent: 사용자 상호작용에 대한 프로그래밍 제어

TriggerEvent를 사용하면 서버가 click, input, submit, change와 같은 DOM 이벤트는 물론 사용자 정의 이벤트까지도 사용자 상호작용 없이 실행할 수 있습니다.

이를 통해

완전 자동화된 UI 흐름 구현
클라이언트‑사이드 스크립트 없이 복잡한 오케스트레이션 가능
결정적이고 테스트 가능한 서버‑주도 UX 로직 구현

서버는 이제 UI에 반응하지 않습니다.
서버가 UI를 오케스트레이션합니다.

6. 사용자 정의 DOM 이벤트: 브라우저 이벤트 모델 확장

WebForms Core 2.0은 개발자가 서버에서 완전히 새로운 DOM 이벤트를 정의하고 이를 클라이언트 요소에 매끄럽게 바인딩할 수 있게 합니다. 이러한 사용자 정의 이벤트는 일류 브라우저 이벤트처럼 동작합니다:

트리거될 수 있다
리스닝될 수 있다
명령 파이프라인을 통해 전달될 수 있다
네이티브 이벤트와 결합될 수 있다

즉, 서버 로직을 이용해 브라우저의 이벤트 시스템을 확장하는 것으로, 이는 주요 프레임워크에서는 제공되지 않는 기능입니다.

7. 비동기 명령 실행: 복잡성 없이 논블로킹 UI

Async Commands는 async/await를 사용해 실행하거나 지연시키거나 독립적으로 실행할 수 있으며, 실행 순서나 UI 무결성을 깨뜨리지 않습니다.

무거운 작업은 격리된다.
가벼운 UI 업데이트는 즉시 반영된다.
레이스 컨디션이 없다.
콜백 헬이 없다.

이는 진정한 비동기 UI 오케스트레이션이며, 서버가 제어하고 결정적입니다.

8. 자동 Gzip: 대역폭을 일급 객체로 다루기

프레임워크는 기본적으로 다음을 지원합니다

송신 데이터에 대한 Gzip 압축
들어오는 폼 데이터와 파일 업로드에 대한 자동 압축 해제

다음에 투명하게 적용됩니다

Action Controls
폼 제출
파일 업로드
대용량 페이로드

개발자는 추가 코드를 전혀 작성할 필요가 없습니다.

9. 의존성 혼란 없는 JavaScript 모듈

WebForms Core 2.0은 ES Modules를 완전히 수용합니다:

네이티브 type="module" 지원
동적 로딩 및 의존성 관리가 간편
서버‑사이드와 클라이언트‑사이드 모듈 간 일관된 인터페이스

이를 통해 복잡한 번들링 없이도 현대적인 모듈 방식을 활용할 수 있습니다.

ic async loading

메서드 존재 여부 안전하게 감지
서버 명령에서 직접 호출

클라이언트 측 프레임워크에 제어를 넘기지 않고 최신 JS 기능을 얻을 수 있습니다.

10. Smart Templates & Deep Replace Engine

Smart Templates 제공

어디서든(텍스트, 속성, 태그 이름) 자리표시자
깊은 탐색 교체
부분적이고 정밀한 업데이트
HTML, JSON, XML, INI 등 외부 템플릿 가져오기

템플릿은 생동하는 구조가 되어

대규모 UI 재사용
초고속 업데이트
렌더링 제로

WebForms Core 2.0 — Technical Reference (Feature List)

Version 2 of WebForms Core technology includes new, more powerful, and extensive features. Below is the complete feature list.

1. Architecture

1.1 Command Execution Model

Optimization Pre‑Runner Queue System
Dynamic Command Queue Management
Preventing Concurrent Request Collisions
Ordered Command Execution
Debounce Delay

1.2 Async & Runtime Model

Fully async WebFormsJS architecture
Async Action Controls
Awaitable Server Commands
Async Cache & Session Access
Async Delay Between Commands
Async JavaScript Module Loading
Async FrontBack Execution
Async WasmBack Response Handling

1.3 Layout & Rendering Strategy

Master Pages architecture
Partial rendering via Post‑Back header
Layout caching
Cached layout reuse across routes
Body onload routing detection
Skip layout rendering on Post‑Back
Combined HTML + ActionControl responses
Comment‑mode rendering

2. Communication

2.1 HTTP & PostBack

PostBack / GetBack / TagBack
Action Control data submission
Submit button support
Form submission detection
Form header injection (form=true)
Change‑only form submission
Serialized event data transport
SendBack (non‑URL‑encoded payloads)
GraphQL‑compatible transport
GET encoding optimization

2.2 WebSocket

Command‑based WebSocket responses
WebSocket form detection
Optimized data transmission
Mixed HTML + Command responses
Retry on WebSocket failure

All features are native, deterministic, and require no external libraries.

WebForms Core 2.0 – 기능 개요

1. Ket Logging

Queue‑Safe WebSocket 실행

2. Server‑Sent Events (SSE)

네이티브 SSE 지원
View / Controller / Model에서 SSE 브로드캐스트
SSE ExportToLineBreak
SSE 재시도 및 재연결 처리
SSE 콘솔 로깅
SSE 구성 옵션
미들웨어 의존성 없이 SSE 사용

3. 네트워크 최적화

자동 GZIP 데이터 압축 (클라이언트 → 서버)
자동 GZIP 파일 압축 (클라이언트 → 클라이언트)
작은 명령 페이로드
변경되지 않은 데이터 전송 건너뛰기

4. DOM & UI 명령

4.1 DOM 선택

고급 태그 선택자
다중 태그 선택 (*)
출력 전반에 걸친 Query‑All 지원
깊은 DOM 순회
외부 HTML 태그 추출

4.2 DOM 조작

교체 (텍스트 / 속성 / 값)
플레이스홀더 기반 교체
깊은 교체 순회
구조 업데이트
숫자 값 증가 / 감소
추가 / 삽입 / 제거 작업
리플렉션 (속성 및 자식 상속)
HTML 부분 삽입
템플릿 기반 렌더링

4.3 UI 상태 및 상호작용

TriggerEvent (인위적인 DOM 이벤트)
사용자 정의 DOM 이벤트
윈도우 수준 이벤트 바인딩
요소 도달 이벤트
스크롤‑to‑bottom 이벤트
InputPlace (윈도우 / 요소)
자동 로더 시스템
깜빡임 방지
요청 중 상호작용 잠금

5. 상태, 저장소 & 보안

5.1 상태 관리

클라이언트‑사이드 캐시 관리
클라이언트‑사이드 세션 관리
캐시 값 추가 / 삽입
세션‑캐시 값 추가 / 삽입
대기 가능한 저장소 작업
변수와 함께 사용하는 FormatStorage
템플릿 저장소
변수 주입을 통한 저장소 활용

5.2 무결성 & 검증

체크섬 생성
SHA‑256 해시 지원
서버‑사이드 체크섬 검증
해시 저장 및 조회
HasHash 조건 검사
실행된 액션 감지 제어
중복 제출 방지
데이터 무결성 검증

5.3 보안 제어

보안 구성 옵션
XSS 완화 레이어
모듈‑실행 제한
메서드‑존재 검증
브라우저‑기능 감지
지원되지 않는 기능 로깅

6. 런타임 확장 & 크로스‑플랫폼

6.1 WasmBack

WebAssembly에서 WebForms 실행
공유 WebForms 클래스 (서버 & WASM)
WASM 응답에서 액션‑제어 감지
다중 언어 지원 (C#, Rust, Go, C++)
HTML에 WASM 명령 적용

6.2 FrontBack

서버‑리스 WebForms 실행
JavaScript‑기반 WebForms 클래스
프론트‑엔드에서 페이지‑로드 실행
JS에서 HTML 및 액션‑제어 생성
하이브리드 프론트 / 서버 시나리오

6.3 JavaScript 모듈

네이티브 ES‑모듈 지원 (type="module" 강제)
동적 모듈 로딩
모듈‑메서드 탐색
DOM 이벤트에 JavaScript‑함수 할당
서버에서 커스텀 JS 함수 호출

7. 툴링, 테스트 & 진단

7.1 테스트

통합 유닛‑테스트 도구
DOM‑동등성 어설션
깊은 DOM 비교
폼‑값 어설션
속성 및 클래스 비교
논블로킹 테스트 보고
회귀‑테스트 전략

7.2 로깅 & 디버깅

콘솔‑메시지 삽입
구조화된 로깅 시스템
오류 분류
네트워크‑오류 감지
재시도 로깅
브라우저‑지원 로그

7.3 신뢰성 & 제어

재시도 메커니즘
최대‑재시도 횟수
재시도‑간격 제어
요청‑큐 관리
ID와 함께 하는 간격 할당
간격 삭제 지원

8. Fetch & 외부 리소스

HTML 가져오기를 위한 InputPlace 업그레이드
외부 HTML‑템플릿 가져오기
JSON 가져오기 (중첩 키)
XML 가져오기 (XPath)
INI 가져오기 (키 / 라인 인덱스)
이벤트 가져오기 (evt)
이스케이프된 가져오기 (@@)
위치‑속성 접근 (href, pathname, host, …)

9. Progressive Web App (PWA)

Service‑worker 통합
라우
e‑alias 구성
향상된 오프라인 기능
일회성 레이아웃 가져오기
캐시된 레이아웃 재수화
네이티브 앱과 같은 탐색

These features make WebForms Core 2.0 the most powerful full‑stack development infrastructure, completely erasing the boundaries between server and client.

Note: 위 목록은 버전 2에 적용됩니다. 이전 릴리스에서도 이 기술의 기반을 마련한 강력한 기능들이 도입되었습니다.

왜 이것이 혁명인가?

개발자가 수년간 복잡한 JavaScript 프레임워크를 마스터한 뒤, 이제 C#(또는 다른 인기 프로그래밍 언어) 지식만으로 실시간, PWA‑ready, 고성능 앱을 만들 수 있다는 것을 깨달았다고 상상해 보세요. 바로 “Technology” 가 “Magic.” 으로 변하는 순간입니다.

프론트엔드 괴물은 사라졌다. 패러다임 전환: 한 번 작성하고 어디서든 제어한다.

왜 WebForms Core가 돋보이는가

비할 데 없는 DOM 조작
완전한 이벤트 관리
고급 상태 관리
강력한 템플릿 시스템
서버 측 관리, 클라이언트에서 무거운 처리
전례 없는 포괄성 – 모든 것이 하나의 패키지에
프론트엔드/백엔드에 대한 사고 방식을 변화시킴
서버 주도 방식에서 오프라인 성능

소개: 현대 악몽의 해부

WebForms Core vs. 프론트엔드 프레임워크 (React, Vue, Angular)

WebForms Core 기술은 어떻게 사용하나요?

왜 현재 모델이 구식인가?

WebForms Core 2의 가장 중요한 기능

1. 마스터 페이지와 Service Worker

2. WasmBack와 FrontBack

3. 서버에서 DOM 단위 테스트

4. 스마트 폼 제출: 실제로 변경된 것만 전송

5. TriggerEvent: 사용자 상호작용에 대한 프로그래밍 제어

6. 사용자 정의 DOM 이벤트: 브라우저 이벤트 모델 확장

7. 비동기 명령 실행: 복잡성 없이 논블로킹 UI

8. 자동 Gzip: 대역폭을 일급 객체로 다루기

9. 의존성 혼란 없는 JavaScript 모듈

10. Smart Templates & Deep Replace Engine

WebForms Core 2.0 — Technical Reference (Feature List)

1. Architecture

1.1 Command Execution Model

1.2 Async & Runtime Model

1.3 Layout & Rendering Strategy

2. Communication

2.1 HTTP & PostBack

2.2 WebSocket

WebForms Core 2.0 – 기능 개요

1. Ket Logging

2. Server‑Sent Events (SSE)

3. 네트워크 최적화

4. DOM & UI 명령

4.1 DOM 선택

4.2 DOM 조작

4.3 UI 상태 및 상호작용

5. 상태, 저장소 & 보안

5.1 상태 관리

5.2 무결성 & 검증

5.3 보안 제어

6. 런타임 확장 & 크로스‑플랫폼

6.1 WasmBack

6.2 FrontBack

6.3 JavaScript 모듈

7. 툴링, 테스트 & 진단

7.1 테스트

7.2 로깅 & 디버깅

7.3 신뢰성 & 제어

8. Fetch & 외부 리소스

9. Progressive Web App (PWA)