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

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


Recommended Posts

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

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

이 시리즈의 1 편에서는 간단한 데모 웹 애플리케이션을 살펴봤다. WebBroker 애플리케이션 내에서 Delphi 코드로 실행되는 것이었으며, HTMX를 일종의 중간자로 사용했다.

이 글에서는 그 데모를 조금 더 개선할 것이다. 현대식이고 이 시대에 맞는 외관을 갖추도록 한다. 몇 가지만 변경하면 된다. 이전 글을 읽지 않았다면, 꼭 읽어 보기를 강력히 추천한다. 1 편의 지식과 코드가 필요하기 때문이다.

목차


향상

spacer.png

1 편에서 만든 데모의 모습은 위와 같았다. 아마도 조금 밋밋한 모습이다. 그렇지 않은가? 데모 목적으로는 괜찮다. 하지만, 이제 한 단계 더 발전시키고자 한다. 이제 우리는 완전히 웹 환경에 있으므로, 스타일 면에서 전혀 한계가 없다. Delphi 로직은 웹 서버 안에 들어 있다. 그러니 이제는 우리의 로직과 웹 페이지 자체가 완전히 분리되어 있다. 그래서 스타일링이 더욱 쉬워진다.

이 애플리케이션을 시각적으로 더 매력적으로 만들기 위해, 우리는 간단한 CSS를 사용할 수 있다. 하지만, 만약 델파이 세계 출신이라면, CSS에 특별히 익숙하지 않을 수 있다는 점 역시 이해할 수 있다. 그래서 우리는 PicoCSS를 사용할 것이다. PicoCSS는 매우 작은 CSS 프레임워크다. 그리고 완전히 의미론 방식을 사용한다. 즉, HTML이나 CSS에 대한 추가적인 지식이 필요하지 않다.
 

1 단계: HTML

먼저 index.html 파일 안에 있는 HTML 코드에 몇 가지를 추가할 것이다. 로직은 그대로 유지하기로 한다. 그러므로 우리는 그 HTMX 코드 안에 있는 GET과 POST 요청을 그대로 계속 사용할 것이다. 

상단의 레이블과 하단의 "Click me" 버튼부터 시작하자. 레이블과 버튼을 컨테이너로 감쌀 것이다. 그리고 HTML과 Delphi 둘 다 유니코드 문자를 완벽하게 지원하므로, 이모티콘도 사용할 수 있다 (재미 삼아 해 보자). 우리의 코드는 다음과 같다:

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

보다시피, 이전 코드 조각과 비교해 거의 바뀐 게 없다. 하지만 이는 디자인을 크게 향상시킨다.

이제 아래에 있는 다른 컨트롤들을 가지고 계속 해보자. 이번에는 폼(form)이다. 그 안에는 입력상자 컨트롤과 "Edit" 버튼이 들어 있다. 다시 한번, 우리의 코드를 몇 개의 컨테이너로 감싸고 이모티콘을 사용할 것이며, 이 모든 것을 앞에서 추가한 컨테이너 안에서 할 것이다.

<main class="container">
  ...
  <hr />
  <article>
    <h3>Another test</h3>
    <form hx-get="/edit" hx-swap="outerHTML">
      <fieldset role="group">
        <input 
          type="text" 
          name="edit" 
          placeholder="Disabled. Click Edit" 
          disabled
        />
        <input type="submit" value="Edit ✏" />
      </fieldset>
    </form>
  </article>
</main>

이제, 변경된 부분이 더 많아졌다. 이 HTML에 대해 너무 자세히 설명하지 않겠다. 그저  "Click me" 버튼 아래에 가로선을 하나 추가하고 그 아래에서 전체 폼을 <article> 컨테이너로 감쌌다. 그런 다음 작은 헤더 레이블을 하나를 더 추가했다. 그리고 입력상자 컨트롤과 "Edit" 버튼을 또 다른 컨테이너 안에 넣었다. 눈치챘을 수도 있지만, "Edit" 버튼은 더 이상 버튼이 아니라 <input> 태그가 되었다. 이렇게 한 이유 역시 스타일링을 위해서였다. PicoCSS는 type이 "submit"인 input 태그를 버튼으로 인식할 수 있기 때문이다. 이 버튼의 위치는 입력상자 컨트롤 바로 옆이다.
 

2 단계: PicoCSS 추가하기

PicoCSS를 우리 프로젝트에 추가하는 것은 매우 간단하다. 우리는 그저 PicoCSS를 우리의 HTML 파일에 추가해서 스타일시트로 지정하면 된다. 그러면 준비는 끝난다.

<head>
  ...
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
  />
  ...
</head>

이제 웹 서버를 컴파일하고 실행해보자. 디자인이 크게 개선된 것을 볼 수 있을 것이다. 그 모습은 다음과 같다:

spacer.png

spacer.png

시각적으로 매력적으로 보일 수 있지만 "Edit"를 클릭하면 입력상자 컨트롤을 편집하는 것이 제대로 작동하지 않는 것을 알 수 있을 것이다. 그 이유는 우리의 Delphi 코드 안에 있는 HTML 상수들을 아직 업데이트하지 않았기 때문이다.
 

3 단계: 델파이 코드 정비하기

지금까지는, 전체 HTML 코드를 index.html 파일 안에 넣어 두고 있었다. 거기에는 상수 두 개를 추가해 놓았었는데, 그 상수들 역시 HTML 코드였다. 그리고 각각 GET과 POST 요청 안에서 사용된다. 더 큰 프로젝트의 경우, 이 HTML 코드들을 각각 여러 줄 문자열 상수로 만들어 두고 그 상수들을 모두 모아 유닛 하나 안에 두는 것이 편리할 수 있다. 그 유닛에는 오직 그 상수들만 두는 것이다.

그렇게 했을 때 가장 큰 장점은 델파이 코드와 HTML 코드를 서로 섞을 일이 줄어든다는 점이다. 또한 때때로 HTML이 길어질 수 있는데, 그것을 프로시저 안에 있는 상수에 적어 넣고 사용한다면 Delphi 코드가 지저분해 질 수 있기 때문이다. 이렇게 하면 웹 디자이너가 델파이 개발자와 함께 작업하기도 훨씬 쉬워질 것이다. 이 접근 방식이 더 나을 수 있는 또 다른 이유가 있다. 바로 index.html 파일을 없앨 수 있다. 그러면 여러분의 웹 애플리케이션 전체가 단일 바이너리 파일 하나 안에 들어 있게 된다. 추가 리소스가 없어도 된다. 그러니 HTMLTemplates.pas 유닛을 만들고 그 안에 전체 index.html 내용과 두 개의 상수를 모두 넣어보자:

const
  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>
        <link rel="stylesheet"   href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
      </head>
      <body>
        <main class="container">
          <h1 id="header">Delphi & HTMX Rocks!💃</h1>
          <button hx-get="/helloworld" hx-target="#header">Click me</button>
          <hr />
          <article>
    	     <h3>Another test</h3>
    	     <form hx-get="/edit" hx-swap="outerHTML">
      	       <fieldset role="group">
                <input type="text" name="edit" placeholder="Disabled. Click Edit" disabled />
                <input type="submit" value="Edit ✏">
      	       </fieldset>
    	     </form>
          </article>
        </main>
      </body>
    </html>
  ''';
 
  cSubmit = '''
    <form hx-get="/edit" hx-swap="outerHTML">
      <fieldset role="group">
        <input type="text" name="edit" placeholder="Disabled. Click Edit" disabled />
    	  <input type="submit" value="Edit ✏">
      </fieldset>
      <kbd>%s</kbd>
    </form>
  ''';
 
  cEdit = '''
    <form hx-post="/submit" hx-swap="outerHTML">
      <fieldset role="group">
        <input type="text" name="edit" value="%s"/>
        <input type="submit" value="Submit ">
      </fieldset>
    </form>
  ''';

cSubmitcEdit 상수를 보면, 그 값을 조금 바뀌었다. 우리가 1 단계에서 적용한 새 코드를 반영했기 때문이다. 서버를 컴파일하고 실행하면, 모든 것이 제대로 작동한다. 그리고  이제 아름다운 디자인을 가지고 있다.

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

맺음말

이번 데모의 추가 사항에서 우리가 배운 점을 정리해보자. 적은 수고만으로도 시각적으로 매력적인 사용자 인터페이스를 만들 수 있다. 동시에 델파이와 웹을 분리해서 유지할 수 있다. 이는 이 접근 방식이 얼마나 강력할 수 있는지를 다시 한번 보여준다. 적절한 상황에서 사용된다면 말이다. 특히 기존의 웹과 델파이 애플리케이션에 적용할 때 유용할 것이다. 쉽게 델파이 로직을 웹 애플리케이션 안에 넣을 수 있고, 수고도 상대적으로 적으며, 델파이와 HTML이 잘 분리되어 있어서, 회사에서 델파이 팀과 웹 디자인 팀이 동시에 나란히 일하게 할 수 있기 때문이다.

만약 우리만큼 이 접근 방식에 대해 흥미를 느낀다면, 더 많은 블로그 기고를 기대해 주기 바란다!

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

이 토의에 참여하세요

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

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...

중요한 정보

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