이 게시물에서는 htmx을 사용하여 간단한 Github 프로필 검색 구성 요소를 만드는 방법을 살펴보겠습니다.

.htmx가 무엇인가요?

htmx을 사용하면 하이퍼텍스트의 단순함과 강력한 기능으로 최신 사용자 인터페이스를 구축할 수 있습니다. 속성을 사용하여 HTML에서 직접 AJAX, CSS Transitions, WebSockets 및 Server Sent Events에 액세스할 수 있습니다.

작고~9KB(최소화 및 gzipped) 종속성이 없고 확장 가능하며 IE11과 호환됩니다.

프로젝트 설정

데모를 위해 Node에서 간단한Express.js 애플리케이션을 설정할 것입니다. 그 이유는 htmx 서버에서 렌더링된 html을 처리하기 때문이며 이 작업을 수행하기 위해 클라이언트 측에 Javascript가 필요하지 않습니다. UI의 모든 부분은 초기 전체 페이지 마크업이든 동적으로 렌더링된 프로필 구성 요소이든 관계없이 서버에서 렌더링됩니다. 페이지의 모든 HTML은 서버 측에서 제공됩니다.

프로젝트 부트스트랩을 시작하겠습니다. 터미널을 열고 다음 명령을 실행하여 간단한express.js 응용 프로그램 상용구를 설정합니다.

mkdir github-search
cd github-search
npm init -y
npm install --save express pug body-parser
mkdir views
touch index.js views/index.pug

서버 : index.js

우리의 서버 응용 프로그램은 매우 간단합니다. 사용자 이름을 검색하기 위한 양식과 입력 필드가 있는 간단한 HTML 페이지를 렌더링하기만 하면 됩니다. 그리고 우리는 pug을 익스프레스 앱용 템플릿 엔진으로 사용하고 있으며 Node.js 본문 구문 분석 미들웨어인 body-parser 라이브러리를 사용하여 처리기 전에 미들웨어에서 들어오는 요청 본문을 구문 분석합니다. 이 라이브러리는 req.body 속성에서 사용할 수 있습니다.

const express = require('express');
const fetch = require('node-fetch');
const bodyParser = require('body-parser');
const pug = require('pug');

const app = express();
const PORT = process.env.PORT || 3000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine','pug');

app.use(express.static(__dirname + '/assets'));

app.get('/', (req, res) => {
  res.render('index');
});

app.listen(PORT);
console.log('root app listening on port: 3000');

조회수/index.pug

우리index.html는 검색 양식을 렌더링할 pug 템플릿이 될 것입니다.

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title Github Profiles
    link(rel="stylesheet", href="style.css")
    script(src="https://unpkg.com/htmx.org")
  body
    .container
      h1 Github Profile
      form(hx-post="/users", hx-target="#profile")
        input#search(type="search", placeholder="Search here...",name="username",required)
        button#searchBtn(type="submit") Search
      main#profile
        h2 Search for a Github Profile !

여기서 주목해야 할 중요한 점은 양식 요소의 hx-post 속성으로, 여기서 Github api에서 사용자 정보를 가져오기 위한 api 엔드포인트를 지정할 것입니다. hx-post 속성을 사용하면 양식을 제출할 때 htmx가 AJAX - POST 요청을 http://localhost/users api 끝점으로 보냅니다.
hx-post는 HTML에서 직접 AJAX 요청을 실행할 수 있는 속성 집합입니다. htmx는 get, post, put, patch 및 delete와 같은 모든 HTTP 요청 방법을 지원합니다.



그리고 hx-target 속성은 실제로 HTML 마크업인 서버로부터 응답을 받으면 innerHTML 요소의 #profile를 동일한 것으로 대체할 것임을 알려줍니다. 이 모든 것은 htmx 라이브러리에 의해 내부적으로 처리되며, 교체할 대상 요소에 대한 CSS 선택기를 제공하기만 하면 됩니다.

/사용자 경로

서버에서 /users 끝점에 대한 POST 요청을 처리하기 위한 새 경로를 만듭니다. 응답 본문에서 얻은 username 매개 변수를 기반으로 사용자 정보를 가져오기 위해 Github api를 호출합니다.

app.post('/users', async (req, res) => {
  const { username } = req.body;
  const response = await fetch(`https://api.github.com/users/${username}`);
  const data = await response.json();
  const profile  = pug.compileFile('views/components/profile.pug');
  res.send(profile(data));
});

Github에서 받은 JSON 응답을 사용하여 아래와 같은 pug 템플릿을 기반으로 html 마크업을 구성합니다.

img(src=avatar_url)
h3
  | Login : 
  a(href=html_url) #{login}
h2
  | Name : #{name}
p
  | Bio : #{bio}

응답 JSON에는 다음 형식의 데이터가 포함되며 여기에서 bio, name, login 등과 같은 필드를 사용하여 pug 템플릿의 데이터를 렌더링합니다.

{
  ...
  "bio": '',
  "name": '',
  "login": '',
  "avatar_url": '',
  "html_url": ''
  ...
}

우리는 pug 라이브러리의 compileFile 함수를 사용하여 pug 템플릿을 컴파일하고 컴파일된 템플릿에 데이터를 전달하여 생성된 마크업을 얻고 마지막으로 API 응답으로 보냅니다. htmx는 자동으로 이 응답을 선택하고 양식 요소의 hx-target 특성을 사용하여 HTML에서 이전에 지정한 적절한 대상 요소의 innerHTML을 대체합니다.

전체 index.js

이것은 서버의 전체 및 최종 코드입니다.

const express = require('express');
const fetch = require('node-fetch');
const bodyParser = require('body-parser');
const pug = require('pug');

const app = express();
const PORT = process.env.PORT || 3000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine','pug');

app.use(express.static(__dirname + '/assets'));

app.get('/', (req, res) => {
  res.render('index');
});

app.post('/users', async (req, res) => {
  const { username } = req.body;
  const response = await fetch(`https://api.github.com/users/${username}`);
  const data = await response.json();
  const profile  = pug.compileFile('views/components/profile.pug');
  res.send(profile(data));
});

app.listen(PORT);
console.log('root app listening on port: 3000');

나중에 서버를 시작하는 데 사용할 수 있는 package.json에 start 스크립트를 추가할 수 있습니다.

패키지.json

...
"scripts": {
  "start": "node index.js"
}
...

이제 Node.js 서버를 시작하고 http://localhost:3000에서 작동 중인 앱을 볼 수 있습니다.

npm start

코드 및 데모

이 예제의 코드는 이Github 리포지토리에서 호스팅됩니다. 실제 데모를 볼 수 있습니다here.