새로운 Front-End Framework 소개
I’m ready to translate the article for you, but I’ll need the full text you’d like translated (excluding the source line you already provided). Could you please paste the content here? Once I have it, I’ll keep the source link unchanged and translate the rest into Korean while preserving all formatting, markdown, and technical terms.
Introduction
WebForms Core — 서버‑명령/클라이언트‑실행을 프런트‑엔드에 도입
프런트‑엔드 생태계는 오랫동안 상태‑기반 및 컴포넌트‑기반 프레임워크가 주도해 왔습니다. 이러한 접근 방식은 강력하지만, 폼‑중심, 엔터프라이즈, 명령‑구동 애플리케이션에서는 불필요한 복잡성을 초래하는 경우가 많습니다.
WebForms Core는 이러한 가정을 뒤집기 위해 만들어졌습니다.
초기에 Server‑Command/Client‑Execution 기술로 소개된 WebForms Core는 다양한 백‑엔드 언어에 걸쳐 UI 로직을 통합하면서 프런트‑엔드를 가볍게 유지하는 데 초점을 맞추었습니다. 버전 2가 출시되면서 이 비전은 한 단계 도약합니다.
이번 업데이트에서 WebForms Core는 두 가지 혁신적인 기능 — WasmBack와 FrontBack — 을 도입하여 WebForms 클래스를 서버뿐만 아니라 WebAssembly와 클라이언트 직접에서도 실행할 수 있게 합니다. 그 결과 WebForms Core는 새로운 Commander/Executor 아키텍처를 통해 진정한 분산 UI 실행 모델로 진화합니다.
Commander/Executor 아키텍처는 프런트‑엔드를 상태와 컴포넌트 의존성에서 해방시키고, 명령‑구동 모델로 변환합니다.
이 문서에서는 WebForms Core가 이제 프런트 엔드에서 어떻게 동작하는지, 새로운 FrontBack 메커니즘이 클라이언트‑사이드 실행을 어떻게 가능하게 하는지, 그리고 이 접근 방식이 JavaScript를 사용한 웹 인터페이스 구축 방식을 근본적으로 어떻게 다르게 만드는지 살펴봅니다.
프런트에서 WebForms Core 사용 방법
이 WebForms 클래스는 JavaScript로 작성되었으며, 서버나 WebAssembly에서 실행되는 다른 WebForms 클래스와 달리 프런트‑엔드에서 사용됩니다.
Note – WebForms Core는 두 부분으로 구성됩니다:
• Commander – 모든 프로그래밍 언어용 WebForms 클래스.
• Executor – WebFormsJS 라는 프런트‑엔드 라이브러리(실제 파일명web-forms.js).
WebFormsJS는 HTML 페이지의<head>에만 배치되며, 초기 설정이 끝난 뒤에는 WebForms 클래스 함수와만 상호작용합니다.
Node.js(서버‑사이드)에서 사용되는WebForms.js클래스와 혼동하지 마세요.
1. WebForms 클래스 파일 추가
아래 저장소에서 WebForms 클래스 파일을 복사하여 프로젝트에 포함합니다:
- (link to repository)
2. 뷰(HTML) 파일 만들기
다음은 WebFormsJS를 로드하고 페이지 로드 시 FrontBack을 호출하는 최소 HTML 페이지 예시입니다. FrontBack 호출은 UI 로직이 들어 있는 모듈을 가리킵니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Using WebForms Core</title>
<script src="/path/to/web-forms.js"></script>
</head>
<body>
<button id="Button1">Click me!</button>
<script>
// FrontBack receives the load event and the path to the main module.
window.addEventListener("load", (event) => {
FrontBack(event, "/script/module/main.js");
});
</script>
</body>
</html>Why this approach?
일반적인 서버‑사이드 상황에서는exportToHtmlComment의 출력으로 페이지를 렌더링하고, WebFormsJS가 자동으로 Action Controls를 추출·실행합니다. 이 예시는 정적 페이지이므로load이벤트에서FrontBack을 수동으로 호출합니다.
3. 메인 모듈 작성 (/script/module/main.js)
FrontBack을 통해 실행되는 모듈은 PageLoad 함수를 내보내야 하며, 이 함수는 이벤트 인자를 받습니다. 필요에 따라 이벤트 인자 뒤에 추가 인자를 전달할 수 있습니다.
// /script/module/main.js
import { WebForms, HtmlEvent } from "./WebForms.js";
export function PageLoad(evt) {
const form = new WebForms();
// Register a front‑end click handler for the button.
form.setFrontEvent("Button1", HtmlEvent.OnClick, "/script/module/change-color.js");
// Return the response that WebFormsJS will process.
return form.response();
}4. 클릭‑핸들러 모듈 작성 (/script/module/change-color.js)
사용자가 버튼을 클릭하면 이 모듈이 실행됩니다. 여기서는 WebFormsJS의 여러 기능을 시연합니다:
<body>에 새로운<h2>태그 추가- 텍스트 내용 설정
- 텍스트 색상 변경
- 일정 시간 후 배경 색상 변경
// /script/module/change-color.js
import { WebForms, InputPlace } from "./WebForms.js";
export function PageLoad(evt) {
const form = new WebForms();
// Add <h2> to the body and set its content.
form.addTag("", "h2");
form.setText("", "New H2 Tag");
form.setTextColor("", "orange");
// Change the body background after 2 seconds.
form.setBackgroundColor(InputPlace.tag("body"), "lightgreen");
form.assignDelay(2000);
return form.response();
}예제를 실행하고 Click me! 버튼을 클릭하면 다음이 수행됩니다:
- 텍스트 New H2 Tag가 포함된
<h2>요소가 삽입됩니다. - 해당 텍스트 색상이 주황색으로 바뀝니다.
- 2초 후 페이지 배경이 연두색으로 바뀝니다.
최신 WebFormsJS 스크립트 받기
web-forms.js의 최신 버전은 공식 저장소에서 다운로드할 수 있습니다:
- (다운로드 링크)
Conclusion
WebForms Core의 FrontBack 메커니즘은 명령‑구동 아키텍처가 전통적인 상태‑중심, 컴포넌트‑무거운 프런트‑엔드 모델을 어떻게 대체할 수 있는지를 보여줍니다. UI 로직을 재사용 가능한 WebForms 클래스에 넣어 클라이언트(또는 WebAssembly)에서 실행함으로써 개발자는 다음과 같은 이점을 얻습니다:
- 서버, WebAssembly, 클라이언트 전반에 걸친 Unified code.
- Reduced bundle size – 브라우저에서는 가벼운 WebFormsJS 실행기만 필요합니다.
- 무엇을 해야 하는지(Commander)와 어떻게 실행되는지(Executor)를 Clear separation.
다음 기업용 또는 폼‑무거운 애플리케이션에서 직접 사용해 보고, 더 가볍고 유지보수가 쉬운 프런트‑엔드 워크플로를 경험해 보세요.
FrontBack 및 WasmBack: 분산 UI 실행 프레임워크
FrontBack와 WasmBack의 도입으로 WebForms Core는 기존의 서버 중심 모델을 넘어 완전한 분산 UI 실행 프레임워크가 됩니다. Commander/Executor 패턴을 수용함으로써 UI 동작을 한 번 정의하고 서버, WebAssembly, 브라우저 전역에서 실행할 수 있는 통합 방식을 제공합니다.
가상 DOM, 컴포넌트 트리, 혹은 반응형 상태 관리에 의존하는 기존 프런트엔드 프레임워크와 달리, WebForms Core는 명령 지향 접근 방식을 취합니다. UI 변경은 명시적이고 직렬화 가능한 명령으로 표현되며, 가벼운 프런트엔드 실행기에 의해 실행되어 클라이언트를 단순하고 예측 가능하게 유지합니다.
이 모델은 폼 중심 애플리케이션, 엔터프라이즈 시스템, 백엔드와 프런트엔드 로직 간 일관성이 중요한 프로젝트에 특히 강력합니다. 동시에 새로운 FrontBack 기능은 아키텍처적 명료성을 희생하지 않으면서 현대적인 클라이언트‑사이드 인터랙티비티를 구현할 수 있는 길을 엽니다.
WebForms Core는 모든 프런트엔드 프레임워크를 완전히 대체하도록 설계되었습니다. 이 기술은 제어, 이식성, 구현 투명성을 우선시하는 강력한 대안 패러다임을 제시합니다.