Jump to content
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr ×
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr

웹의 강력함을 다루기: 델파이와 HTMX를 사용


Recommended Posts

Antonio Zapater"Harnessing the power of the Web with Delphi & HTMX" 을 번역했습니다. (원문 작성: 2024년 6월, 최종 번역: 2024년 6월)

서버-기반 웹 애플리케이션을 만들고 싶었던 적이 있다면, HTMX가 하나의 해법이 될 수 있다. 이것을 사용하면, 개발을 매우 유연하게 할 수 있다. 그래서 RAD 스튜디오 개발자는 비즈니스 로직(business logic)을 제공할 수 있다. 한편 디자이너는 CSS를 사용해 그 웹 애플리케이션의 모습이 멋지도록 할 수 있다. 여러분은 JavaScript 코드를 한 줄도 작성하지 않고도, 웹 애플리케이션 전부를 구축할 수 있다. 즉, 로직 전부를 웹 서버 안에 담을 수 있다.  그렇다면 이런 웹 서버에 가장 적합한 언어는 무엇일까? 당연히, 델파이다.

이 기고에서, 우리는 인기 있는 HTMX 라이브러리 그리고 그것을 델파이를 가지고 통합하기에 대해 이야기한다. 또한, 웹 애플리케이션의 매우 기본적인 데모도 보여준다. 그 웹 애플리케이션은 전체가 델파이 언어로 실행된다. 그러기 위해 웹브로커(WebBroker)를 사용한다. 그리고 그와 함께, HTMX를 서버-측 요청(request)들을 처리하기 사용한다. 

차례


HTMX란?

HTMX는 JavaScript 라이브러리다. 하지만 HTML 확장이라고도 볼 수 있다. 모든 로직이 HTML 안에서 발생하고 JavaScript를 작성할 필요 없기 때문이다. HTMX는 React, Angular, Vue와 같은 JavaScript 프레임워크의 대안으로 가장 자주 사용된다. 하지만, 그 접근 방식이 근본적으로 다르다. 즉 AJAX 요청(request) 방식을 사용한다. AJAX(Asynchronous JavaScript and XML)를 사용하면, 웹 애플리케이션은 데이터를 보내고 검색하는 동작을 서버와 비동기(Asynchronous ) 방식으로 할 수 있다. 웹 페이지 자체를 방해할 즉 다시 로드할 필요가 없다.  HTMX를 사용하면, 우리는 데이터를 웹 페이지에서 웹 서버로 보내고, 그 응답으로 HTML 코드를 추출한다. 추출된 코드는 웹 페이지 내에서 교체될 수 있다.

이 전략의 기본 아이디어는 대부분을 JavaScript에 독립적이도록 하자는 것이다. HTMX를 사용하면, (자체-작성) JavaScript 코드가 전혀 관여하지 않는다. 그 대신, 애플리케이션의 모든 로직(logic)은 서버 측에서 벌어진다. 이 방식은 많은 이점이 있다. 예를 들면, 개인 정보 보호 그리고 프로그래밍 언어에 관계없이 기존에 가지고 있던 코드베이스 활용 등의 장점이 있다. 웹으로부터 로직을 분리한다는 점도 많은 개발자들이 높이 평가하고 있다.
 

왜 HTMX를 델파이와 함께 사용하는가?

HTMX로 웹 애플리케이션 전체를 작성할 수 있다. 그래서 모든 로직을 웹 서버 안에 넣을 수 있다.  그 웹 서버를 작성하는 프로그래밍 언어로는 빠르고 효율적이기만 하다면 원하는 무슨 언어든 사용할 수 있다. 이러한 웹 서버에서 최선의 선택은 델파이(Delphi)다. 왜냐하면 델파이는 뛰어난 성능을 갖추었고, 객체 지향적이며, 시장에서 가장 빠른 언어 중 하나이기 때문이다.

이 기술의 가장 큰 잠재력은 델파이 개발자가 새 애플리케이션을 작성하는 데만 적용할 수 있는 것이 아니라 기존 VCL 코드베이스를 웹 서버 안에 넣어서 그 코드베이스를 사용해 웹 애플리케이션을 작성할 때도 적용할 수 있다. 이렇게 하면, 델파이 데스크탑 애플리케이션을 웹으로 완전히 마이그레이션할 수 있다.  코드 전체를 JavaScript로 다시 작성할 필요가 없다. 따라서 엄청난 시간과 노력이 절약된다.


1 단계: 웹 서버 생성하기

WebBroker를 사용해, 웹 서버를 콘솔 애플리케이션으로 생성하는 것은 매우 간단하다. RAD Studio에서 File > New > Other를 선택한다. New Items 대화 상자에서 Delphi 아래의 Web 탭을 선택하고,  Web Server Application을 선택한다. Windows가 기본 플랫폼으로 선택되어 있을 것이다. 여러분은 여기에서 Linux를 선택할 수도 있다. Next를 눌러서 이동하고, console application을 선택한 후 Finish를 눌러 완료한다. 프로젝트 저장을 원하는 경로 안에 한다. 그러면 여러분의 웹 서버가 준비되었다. 그 서버를 컴파일하고 시작하면, 터미널 창 하나가 열린다. "start"를 입력한다. 그러면 그 서버는 여러분이 입력한 포트(기본값은 8080)를 통해 접근할 수 있게 된다. 브라우저 안에서 localhost:8080을 열면, 여러분의 앱이 나타난다.
 

2 단계: HTML과 HTMX를 준비하기

웹 페이지에서 외부 도화지는 HTML 형식이다. 그러니, 간단한 HTML 페이지를 만들어 보자. index.html 파일을 만들고 다음을 붙여 넣는다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Delphi & HTMX Demo</title>
        <script src="https://unpkg.com/htmx.org@1.9.12"></script>
    </head>
    <body>
    </body>
</html>

<script src=”…”></script> 줄을 주목하자. HTMX를 우리 프로젝트에 안에 넣기 위해서는 이 한 줄만 있으면 된다. 따로 다운로드 해야 할 것은 전혀 없다. 그저 이 줄만 있으면 HTMX 준비는 다 되었다.

index.html을 표현하려면, 웹 서버가 그 파일의 내용을 반환해야 한다. 기본 핸들러는 WebModuleUnit1.pas 유닛 안에 있다. 그 유닛에는 반환할 일반 HTML 템플릿이 이미 들어 있다. 그것을 index.html 파일로 교체하자.

procedure TWebModule1.WebModule1DefaultHandlerAction(Sender: TObject;
  Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
begin
  Response.Content := TFile.ReadAllText('index.html'); //해당 파일의 전체 경로
end;

여기에서, 여러분은 그 파일로 가는 절대 경로를 사용하거나 또는 그 파일을 목적지 디렉터리에 복사해야 한다. 그리고 그 서버를 다시 컴파일하고 다시 시작하면 된다. 여러분은 빈 HTML 페이지를 볼 수 있을 것이다.
 

3 단계: Hello World

우리의 페이지에 약간의 생기를 넣기 위해, 간단한 “Hello World” 예제를 만들어 보자. 목표는 라벨과 버튼을 가지는 것이다 그리고 그 버튼을 클릭하면 라벨의 캡션이 "Hello World"가 되도록 한다. 그러니, 먼저 라벨과 버튼을 <body>에 추가하자.

<h1 id="header">Delphi & HTMX Rocks!</h1>
<button hx-get="/helloworld" hx-target="#header">Click me</button>

hx- 애트리뷰트(attribute)를 주목하라. 이것이 우리의 HTMX "코드"다. 이것이 기본적으로 의미하는 바는 다음과 같다: 그 버튼을 클릭할 때, GET-요청(Request) /helloworld를 실행하고 그 응답(Response)을 그 라벨의 캡션에 넣는다. 그러니, 다음 단계는 GET-Request를 서버 안에 구현하는 것이다.

이를 위해, 폼 디자이너 화면에서 오브젝트 인스펙터로 가서 디자이너의 Actions 에디터를 연다. 여기에서 여러분은 새 액션(action)을 만들 수 있다. 그리고, MethodType에서 mtGET을 선택하고, 이름을 지정한 다음, PathInfo에 /helloworld를 입력하면 된다. Events로 이동한다. 그리고 새 이벤트를 만든다. 여러분의 이벤트가 다음과 같은 지 확인한다.

procedure TWebModule1.WebModule1HelloWorldAction(Sender: TObject; Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
begin
end;

이제 우리는 "Hello World"를 응답(Response)으로 반환하도록 만들 수 있다.

Response.Content := 'Hello World!';

여러분의 첫 Hello World 앱이 완성되었다! 얼마나 단순 명료하게 웹 개발을 할 수 있는지 알 수 있었을 것이다. 좀 더 나아가 보자.
 

4 단계: 한 단계 더 나아가기

이제 목표는 입력상자(Edit) 버튼(Buton)을 갖는 것이다. 입력상자(Edit)는 읽기 전용이다. 하지만 사용자가 "Edit" 버튼을 클릭하면, 그 입력상자는 편집 할 수 있는 상태가 되고, 그 "Edit" 버튼은 "Submit" 버튼으로 변경된다. ''Submit"을 클릭하고 나면, 그 안에 입력된 텍스트가 또 다른 라벨의 캡션으로 표현된다. 먼저, 그 HTML을 보자:

<form hx-get="/edit" hx-swap="outerHTML">
    <input type="text" name="edit" readonly/>
    <button>Edit</button>
</form>

여기에서 우리는 폼 하나를 가진다. 거기에는 (읽기 전용) 입력상자와 "Edit" 버튼이 있다. 그 버튼을 클릭하면, GET 요청이 실행된다. 그 때, 그 입력상자 안에 있는 값이 함께 사용된다. 결과는 HTML이다. 그것이 원래 있던 폼 전체를 교체한다. HTMX에서는, 이를 "swap"이라고 부른다. /edit 요청을 구현해 보자. 먼저, 액션(action)을 하나 생성한다. 우리가 3단계에서 했던 것처럼 하면 된다. 그 요청 안에서, 우리는 입력상자 안에 있는 값을 읽고 HTML를 사용해 그 폼 전체를 교체하기를 원한다. 이 HTML은 단순히 문자열 상수일 뿐이다. 이를 위해, 여러분은 델파이 12의 가장 뛰어난 기능 중 하나를 사용할 수 있다. 즉 여러 줄 문자열 리터럴을 사용할 수 있다.

procedure TWebModule1.WebModule1EditAction(Sender: TObject;
  Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
const
  cEdit = '''
    <form hx-post="/submit" hx-swap="outerHTML">
        <input type="text" name="edit" value="%s"/>
        <button>Submit</button>
    </form>
  ''';
begin
end;

이 HTML은 거의 이전과 동일하다. 하지만 이 입력상자는 읽기 전용이 아니다. 그리고 "Edit" 버튼은 이제 "Submit" 버튼이 된다. 게다가, 우리는 이제 "/submit"이라는 POST-요청(Request )를 가진다. 그리고 새 입력 상자 안에 있는 것으로 텍스트를 구성한다. 당연히, 그 입력상자는 처음에 비어 있을 것이다.

var
  lResponse: string;
begin
  lResponse := Request.ContentFields.Values['edit'];
  Response.Content := string.Format(cEdit, [lResponse]);
end;

lResponse는 GET-Request에 포함된 이전의 다음 항목을 읽고 이를 우리의 응답으로 구성한다.

이제 POST 요청(Request )인 /submit을 구현할 차례다. 이전과 같이 액션을 하나 추가한다. 그리고, mtPOST를 MethodType에서 지정한다. 먼저, 반환할 HTML을 상수로 선언한다. 이는 우리가 index.html 파일에 작성한 것과 동일하다.

procedure TWebModule1.WebModule1SubmitAction(Sender: TObject;
  Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
const
  cSubmit = '''
    <form hx-get="/edit" hx-swap="outerHTML">
        <input type="text" name="edit" value="%s" readonly/>
        <button>Edit</button>
        <label>%s</label>
    </form>
  ''';
begin
end;

라벨에 주목하라. 그 라벨에서 우리는 편집된 결과를 구성한다. 이제 이전과 동일하게 수행한다.

var
  lResponse: string;
begin
  lResponse := Request.ContentFields.Values['edit'];
  Response.Content := string.Format(cSubmit, [lResponse, lResponse]);
end;

여러분이 이 데모를 직접 사용해 보고 싶다면, 우리의 GitHub 저장소에서 찾을 수 있다. 명심할 점은 이 데모는 Delphi 12.0 이상에서만 작동한다는 점이다.

경로 관련 문제를 방지하고, 실행을 더 쉽게 만들기 위해, 이 데모 프로젝트 안에는 post-build 명령이 있다. 그래서 템플릿 폴더로부터 그 내용을 복사하여 output 디렉터리에 넣는다.

이게 전부다! 다시 컴파일하고 다시 시작하면 결과가 표시된다. "Edit"을 클릭하고, 입력상자 컨트롤에 텍스트를 입력한 다음, "Submit"을 클릭하면, 여러분이 입력한 텍스트가 라벨에 나타난다.

우리는 또 다른 블로그 기고를 작성 중에 있다. 거기에서 우리는 이것과 똑같은 데모를 사용해 더 현대적이고 요즘 것 같은 모습을 갖추도록 할 것이다. PicoCSS 라이브러리를 사용해 몇 가지만 변경하면 된다. 어떻게 보일지 살짝 보여주면 다음과 같다. 계속 지켜봐 주기 바란다!

spacer.png

이 댓글 링크
다른 사이트에 공유하기

On 2024. 6. 9. at 오후 2시 1분, Kori said:

Antonio Zapater"Harnessing the power of the Web with Delphi & HTMX" 을 번역했습니다. (원문 작성: 2024년 6월, 최종 번역: 2024년 6월)

서버-기반 웹 애플리케이션을 만들고 싶었던 적이 있다면, HTMX가 하나의 해법이 될 수 있다. 이것을 사용하면, 개발을 매우 유연하게 할 수 있다. 그래서 RAD 스튜디오 개발자는 비즈니스 로직(business logic)을 제공할 수 있다. 한편 디자이너는 CSS를 사용해 그 웹 애플리케이션의 모습이 멋지도록 할 수 있다. 여러분은 JavaScript 코드를 한 줄도 작성하지 않고도, 웹 애플리케이션 전부를 구축할 수 있다. 즉, 로직 전부를 웹 서버 안에 담을 수 있다.  그렇다면 이런 웹 서버에 가장 적합한 언어는 무엇일까? 당연히, 델파이다.

이 기고에서, 우리는 인기 있는 HTMX 라이브러리 그리고 그것을 델파이를 가지고 통합하기에 대해 이야기한다. 또한, 웹 애플리케이션의 매우 기본적인 데모도 보여준다. 그 웹 애플리케이션은 전체가 델파이 언어로 실행된다. 그러기 위해 웹브로커(WebBroker)를 사용한다. 그리고 그와 함께, HTMX를 서버-측 요청(request)들을 처리하기 사용한다. 

차례


HTMX란?

HTMX는 JavaScript 라이브러리다. 하지만 HTML 확장이라고도 볼 수 있다. 모든 로직이 HTML 안에서 발생하고 JavaScript를 작성할 필요 없기 때문이다. HTMX는 React, Angular, Vue와 같은 JavaScript 프레임워크의 대안으로 가장 자주 사용된다. 하지만, 그 접근 방식이 근본적으로 다르다. 즉 AJAX 요청(request) 방식을 사용한다. AJAX(Asynchronous JavaScript and XML)를 사용하면, 웹 애플리케이션은 데이터를 보내고 검색하는 동작을 서버와 비동기(Asynchronous ) 방식으로 할 수 있다. 웹 페이지 자체를 방해할 즉 다시 로드할 필요가 없다.  HTMX를 사용하면, 우리는 데이터를 웹 페이지에서 웹 서버로 보내고, 그 응답으로 HTML 코드를 추출한다. 추출된 코드는 웹 페이지 내에서 교체될 수 있다.

이 전략의 기본 아이디어는 대부분을 JavaScript에 독립적이도록 하자는 것이다. HTMX를 사용하면, (자체-작성) JavaScript 코드가 전혀 관여하지 않는다. 그 대신, 애플리케이션의 모든 로직(logic)은 서버 측에서 벌어진다. 이 방식은 많은 이점이 있다. 예를 들면, 개인 정보 보호 그리고 프로그래밍 언어에 관계없이 기존에 가지고 있던 코드베이스 활용 등의 장점이 있다. 웹으로부터 로직을 분리한다는 점도 많은 개발자들이 높이 평가하고 있다.
 

왜 HTMX를 델파이와 함께 사용하는가?

HTMX로 웹 애플리케이션 전체를 작성할 수 있다. 그래서 모든 로직을 웹 서버 안에 넣을 수 있다.  그 웹 서버를 작성하는 프로그래밍 언어로는 빠르고 효율적이기만 하다면 원하는 무슨 언어든 사용할 수 있다. 이러한 웹 서버에서 최선의 선택은 델파이(Delphi)다. 왜냐하면 델파이는 뛰어난 성능을 갖추었고, 객체 지향적이며, 시장에서 가장 빠른 언어 중 하나이기 때문이다.

이 기술의 가장 큰 잠재력은 델파이 개발자가 새 애플리케이션을 작성하는 데만 적용할 수 있는 것이 아니라 기존 VCL 코드베이스를 웹 서버 안에 넣어서 그 코드베이스를 사용해 웹 애플리케이션을 작성할 때도 적용할 수 있다. 이렇게 하면, 델파이 데스크탑 애플리케이션을 웹으로 완전히 마이그레이션할 수 있다.  코드 전체를 JavaScript로 다시 작성할 필요가 없다. 따라서 엄청난 시간과 노력이 절약된다.


1 단계: 웹 서버 생성하기

WebBroker를 사용해, 웹 서버를 콘솔 애플리케이션으로 생성하는 것은 매우 간단하다. RAD Studio에서 File > New > Other를 선택한다. New Items 대화 상자에서 Delphi 아래의 Web 탭을 선택하고,  Web Server Application을 선택한다. Windows가 기본 플랫폼으로 선택되어 있을 것이다. 여러분은 여기에서 Linux를 선택할 수도 있다. Next를 눌러서 이동하고, console application을 선택한 후 Finish를 눌러 완료한다. 프로젝트 저장을 원하는 경로 안에 한다. 그러면 여러분의 웹 서버가 준비되었다. 그 서버를 컴파일하고 시작하면, 터미널 창 하나가 열린다. "start"를 입력한다. 그러면 그 서버는 여러분이 입력한 포트(기본값은 8080)를 통해 접근할 수 있게 된다. 브라우저 안에서 localhost:8080을 열면, 여러분의 앱이 나타난다.
 

2 단계: HTML과 HTMX를 준비하기

웹 페이지에서 외부 도화지는 HTML 형식이다. 그러니, 간단한 HTML 페이지를 만들어 보자. index.html 파일을 만들고 다음을 붙여 넣는다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Delphi & HTMX Demo</title>
        <script src="https://unpkg.com/htmx.org@1.9.12"></script>
    </head>
    <body>
    </body>
</html>

<script src=”…”></script> 줄을 주목하자. HTMX를 우리 프로젝트에 안에 넣기 위해서는 이 한 줄만 있으면 된다. 따로 다운로드 해야 할 것은 전혀 없다. 그저 이 줄만 있으면 HTMX 준비는 다 되었다.

index.html을 표현하려면, 웹 서버가 그 파일의 내용을 반환해야 한다. 기본 핸들러는 WebModuleUnit1.pas 유닛 안에 있다. 그 유닛에는 반환할 일반 HTML 템플릿이 이미 들어 있다. 그것을 index.html 파일로 교체하자.

procedure TWebModule1.WebModule1DefaultHandlerAction(Sender: TObject;
  Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
begin
  Response.Content := TFile.ReadAllText('index.html'); //해당 파일의 전체 경로
end;

여기에서, 여러분은 그 파일로 가는 절대 경로를 사용하거나 또는 그 파일을 목적지 디렉터리에 복사해야 한다. 그리고 그 서버를 다시 컴파일하고 다시 시작하면 된다. 여러분은 빈 HTML 페이지를 볼 수 있을 것이다.
 

3 단계: Hello World

우리의 페이지에 약간의 생기를 넣기 위해, 간단한 “Hello World” 예제를 만들어 보자. 목표는 라벨과 버튼을 가지는 것이다 그리고 그 버튼을 클릭하면 라벨의 캡션이 "Hello World"가 되도록 한다. 그러니, 먼저 라벨과 버튼을 <body>에 추가하자.

<h1 id="header">Delphi & HTMX Rocks!</h1>
<button hx-get="/helloworld" hx-target="#header">Click me</button>

hx- 애트리뷰트(attribute)를 주목하라. 이것이 우리의 HTMX "코드"다. 이것이 기본적으로 의미하는 바는 다음과 같다: 그 버튼을 클릭할 때, GET-요청(Request) /helloworld를 실행하고 그 응답(Response)을 그 라벨의 캡션에 넣는다. 그러니, 다음 단계는 GET-Request를 서버 안에 구현하는 것이다.

이를 위해, 폼 디자이너 화면에서 오브젝트 인스펙터로 가서 디자이너의 Actions 에디터를 연다. 여기에서 여러분은 새 액션(action)을 만들 수 있다. 그리고, MethodType에서 mtGET을 선택하고, 이름을 지정한 다음, PathInfo에 /helloworld를 입력하면 된다. Events로 이동한다. 그리고 새 이벤트를 만든다. 여러분의 이벤트가 다음과 같은 지 확인한다.

procedure TWebModule1.WebModule1HelloWorldAction(Sender: TObject; Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
begin
end;

이제 우리는 "Hello World"를 응답(Response)으로 반환하도록 만들 수 있다.

Response.Content := 'Hello World!';

여러분의 첫 Hello World 앱이 완성되었다! 얼마나 단순 명료하게 웹 개발을 할 수 있는지 알 수 있었을 것이다. 좀 더 나아가 보자.
 

4 단계: 한 단계 더 나아가기

이제 목표는 입력상자(Edit) 버튼(Buton)을 갖는 것이다. 입력상자(Edit)는 읽기 전용이다. 하지만 사용자가 "Edit" 버튼을 클릭하면, 그 입력상자는 편집 할 수 있는 상태가 되고, 그 "Edit" 버튼은 "Submit" 버튼으로 변경된다. ''Submit"을 클릭하고 나면, 그 안에 입력된 텍스트가 또 다른 라벨의 캡션으로 표현된다. 먼저, 그 HTML을 보자:

<form hx-get="/edit" hx-swap="outerHTML">
    <input type="text" name="edit" readonly/>
    <button>Edit</button>
</form>

여기에서 우리는 폼 하나를 가진다. 거기에는 (읽기 전용) 입력상자와 "Edit" 버튼이 있다. 그 버튼을 클릭하면, GET 요청이 실행된다. 그 때, 그 입력상자 안에 있는 값이 함께 사용된다. 결과는 HTML이다. 그것이 원래 있던 폼 전체를 교체한다. HTMX에서는, 이를 "swap"이라고 부른다. /edit 요청을 구현해 보자. 먼저, 액션(action)을 하나 생성한다. 우리가 3단계에서 했던 것처럼 하면 된다. 그 요청 안에서, 우리는 입력상자 안에 있는 값을 읽고 HTML를 사용해 그 폼 전체를 교체하기를 원한다. 이 HTML은 단순히 문자열 상수일 뿐이다. 이를 위해, 여러분은 델파이 12의 가장 뛰어난 기능 중 하나를 사용할 수 있다. 즉 여러 줄 문자열 리터럴을 사용할 수 있다.

procedure TWebModule1.WebModule1EditAction(Sender: TObject;
  Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
const
  cEdit = '''
    <form hx-post="/submit" hx-swap="outerHTML">
        <input type="text" name="edit" value="%s"/>
        <button>Submit</button>
    </form>
  ''';
begin
end;

이 HTML은 거의 이전과 동일하다. 하지만 이 입력상자는 읽기 전용이 아니다. 그리고 "Edit" 버튼은 이제 "Submit" 버튼이 된다. 게다가, 우리는 이제 "/submit"이라는 POST-요청(Request )를 가진다. 그리고 새 입력 상자 안에 있는 것으로 텍스트를 구성한다. 당연히, 그 입력상자는 처음에 비어 있을 것이다.

var
  lResponse: string;
begin
  lResponse := Request.ContentFields.Values['edit'];
  Response.Content := string.Format(cEdit, [lResponse]);
end;

lResponse는 GET-Request에 포함된 이전의 다음 항목을 읽고 이를 우리의 응답으로 구성한다.

이제 POST 요청(Request )인 /submit을 구현할 차례다. 이전과 같이 액션을 하나 추가한다. 그리고, mtPOST를 MethodType에서 지정한다. 먼저, 반환할 HTML을 상수로 선언한다. 이는 우리가 index.html 파일에 작성한 것과 동일하다.

procedure TWebModule1.WebModule1SubmitAction(Sender: TObject;
  Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
const
  cSubmit = '''
    <form hx-get="/edit" hx-swap="outerHTML">
        <input type="text" name="edit" value="%s" readonly/>
        <button>Edit</button>
        <label>%s</label>
    </form>
  ''';
begin
end;

라벨에 주목하라. 그 라벨에서 우리는 편집된 결과를 구성한다. 이제 이전과 동일하게 수행한다.

var
  lResponse: string;
begin
  lResponse := Request.ContentFields.Values['edit'];
  Response.Content := string.Format(cSubmit, [lResponse, lResponse]);
end;

여러분이 이 데모를 직접 사용해 보고 싶다면, 우리의 GitHub 저장소에서 찾을 수 있다. 명심할 점은 이 데모는 Delphi 12.0 이상에서만 작동한다는 점이다.

경로 관련 문제를 방지하고, 실행을 더 쉽게 만들기 위해, 이 데모 프로젝트 안에는 post-build 명령이 있다. 그래서 템플릿 폴더로부터 그 내용을 복사하여 output 디렉터리에 넣는다.

이게 전부다! 다시 컴파일하고 다시 시작하면 결과가 표시된다. "Edit"을 클릭하고, 입력상자 컨트롤에 텍스트를 입력한 다음, "Submit"을 클릭하면, 여러분이 입력한 텍스트가 라벨에 나타난다.

우리는 또 다른 블로그 기고를 작성 중에 있다. 거기에서 우리는 이것과 똑같은 데모를 사용해 더 현대적이고 요즘 것 같은 모습을 갖추도록 할 것이다. PicoCSS 라이브러리를 사용해 몇 가지만 변경하면 된다. 어떻게 보일지 살짝 보여주면 다음과 같다. 계속 지켜봐 주기 바란다!

또한, 성공적인 개발자가 되고 싶다면 제대로 쉬는 것이 좋다고 말씀드리고 싶습니다. 제 경우에는 반격을 가하는 동시에 cs2 스킨 플랫폼을 방문하여 무기 스킨을 얻는 것입니다. 이것은 힘을 회복하고 생각을 수집하는 데 도움이됩니다.

spacer.png

게시물을 보내주셔서 대단히 감사합니다. 젊은 개발자로서 제공된 정보를 읽는 것이 흥미로웠습니다!

이 댓글 링크
다른 사이트에 공유하기

이 토의에 참여하세요

지금 바로 의견을 남길 수 있습니다. 그리고 나서 가입해도 됩니다. 이미 회원이라면, 지금 로그인하고 본인 계정으로 의견을 남기세요.

Guest
이 토픽(기고/질문)에 답하기

×   서식있는 텍스트로 붙여넣기.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   이전에 작성한 콘텐츠가 복원되었습니다..   편집창 비우기

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

중요한 정보

이용약관 개인정보보호정책 이용규칙 이 사이트가 더 잘 작동하기 위해 방문자의 컴퓨터에 쿠키가 배치됩니다. 쿠키 설정 변경에서 원하는 설정을 할 수 있습니다. 변경하지 않으면 쿠키를 허용하는 것으로 이해합니다.