# PostgREST: Htmx를 이용한 HTML 콘텐츠 제공

> Clean Markdown view of GeekNews topic #12424. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=12424](https://news.hada.io/topic?id=12424)
- GeekNews Markdown: [https://news.hada.io/topic/12424.md](https://news.hada.io/topic/12424.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2023-12-19T20:36:23+09:00
- Updated: 2023-12-19T20:36:23+09:00
- Original source: [postgrest.org](https://postgrest.org/en/stable/how-tos/providing-html-content-using-htmx.html)
- Points: 3
- Comments: 1

## Topic Body

### HTML 콘텐츠 제공 방법

- PostgREST와 htmx 라이브러리를 사용하여 HTML 콘텐츠를 반환하고 AJAX 요청을 처리하는 방법 소개.
- htmx는 HTML 응답을 기대하며, 이를 사용하여 DOM 내의 요소를 대체함.

### 준비 설정

- 튜토리얼 0을 기반으로 한 할 일(to-do) 앱 제작.
- 인증 없이 진행하며, `web_anon` 사용자에게 `todos` 테이블에 대한 모든 권한 부여.
- `text/html`을 미디어 타입 핸들러로 추가하여 PostgREST가 웹 브라우저의 요청을 HTML 문서로 인식하도록 설정.

### HTML 응답 생성

- Tailwind CSS를 사용하여 기본 HTML 파일을 반환하는 함수 생성.
- 웹 브라우저는 `http://localhost:3000/rpc/index`에서 웹 페이지를 열 수 있음.

### 할 일 나열 및 생성

- 데이터베이스에 이미 입력된 할 일 목록을 표시하는 함수 생성.
- 할 일 목록 템플릿을 구축하는 데 사용되며, PostgREST 엔드포인트로 사용되지 않음.
- 할 일을 데이터베이스에 등록하는 엔드포인트 추가 및 `/rpc/index` 페이지 수정.

### 할 일 편집 및 삭제

- `api.html_todo` 함수를 수정하여 더 기능적으로 만듦.
- 새로운 htmx 기능 추가: 할 일 상태 변경, 할 일 편집 가능한 HTML 반환, 할 일 삭제.
- 할 일을 편집하고 데이터베이스에서 할 일을 수정 및 삭제하는 엔드포인트 추가.

### GN⁺의 의견

- 이 글은 웹 개발자들에게 흥미로울 수 있음. PostgREST와 htmx 라이브러리를 사용하여 웹 애플리케이션에서 동적인 HTML 콘텐츠를 제공하는 방법을 설명하기 때문.
- AJAX를 활용한 비동기 웹 페이지 업데이트는 현대 웹 개발의 중요한 부분이며, 이 글은 그러한 기능을 구현하는 구체적인 예시를 제공함.
- 사용자 인터페이스를 개선하고 서버와 클라이언트 간의 통신을 최적화하는 방법을 배울 수 있는 좋은 자료임.

## Comments



### Comment 21562

- Author: neo
- Created: 2023-12-19T20:36:23+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=38687997) 
- PostgREST에 대한 해커뉴스 댓글 요약:
  - **PostgREST의 오픈소스 프로젝트에 대한 애정**: 한 사용자는 PostgREST를 자신이 가장 좋아하는 오픈소스 프로젝트 중 하나로 꼽으며, Supabase의 성공이 PostgREST와 Postgres의 훌륭한 설계 덕분이라고 언급함. 이 사용자는 Supabase가 PostgREST 프로젝트에 얼마나 많은 후원을 하는지 모르지만, 많은 기업들이 이를 사용하고 있음에도 불구하고 후원자가 12명뿐이라는 사실에 대해 아쉬움을 표현함.
  - **PostgREST 앱 개발의 어려움**: 다른 사용자는 PostgREST를 사용한 앱 개발 경험이 좋지 않았다고 언급하며, 간단해 보이는 프레임워크도 요구사항이 복잡해지면 문제가 생긴다고 지적함. 이 경우, 개발자들이 원하는 결과를 얻기 위해 데이터베이스에 많은 저장 프로시저를 작성해야 했고, 이로 인해 확장성 문제가 발생했다고 함.
  - **유지보수의 어려움**: 또 다른 사용자는 PostgREST가 개념 증명으로서는 멋지지만, 실제로 복잡한 웹 애플리케이션을 유지보수하는 것은 악몽 같을 것이라고 의견을 제시함.
  - **단순한 웹 개발 스택의 매력**: 한 사용자는 HTML과 데이터베이스만으로 구성된 웹 개발 스택이 매력적이라고 평가하며, 백엔드나 프론트엔드가 필요 없다는 점을 긍정적으로 평가함.
  - **새로운/현대적 애플리케이션에서의 코딩 패턴**: Couchdb와 같은 JSON 문서 데이터베이스의 예를 들며, 클라이언트가 직접 데이터베이스에 접근하여 HTML이나 JSON을 받을 수 있는 방식에 대해 설명함. 그러나 이러한 방식이 유지보수에 어려움을 주어 개발이 중단되었다고 언급함.
  - **Haskell 관점에서 본 PostgREST의 독창성**: 한 사용자는 Haskell 관점에서 보면 PostgREST가 명백한 프로젝트이며, 그것이 바로 이 프로젝트의 천재성이라고 평가함.
  - **SmoothDB의 소개**: 한 개발자는 PostgREST와 호환을 목표로 하는 SmoothDB라는 새로운 프로젝트를 GitHub에 공개했다고 소개하며, 아직은 베타 버전이라고 언급함. SmoothDB는 Go로 작성되었으며, 독립 실행형 또는 복잡한 서버 애플리케이션의 모듈로 사용될 수 있음.
  - **PostgREST를 사용한 데이터 검증 파이프라인에 대한 기사**: 한 사용자는 PostgREST를 사용하여 일반적인 데이터 검증 파이프라인으로 사용하는 방법에 대한 기사를 작성했다고 언급하며, CQRS/REST API 레이어로 사용하는 방법에 대한 다음 기사를 준비 중이라고 함.
  - **PostgREST와 HTMX의 결합**: 한 사용자는 이전 프로젝트에서 PostgREST를 사용했으며, HTMX와 잘 어울린다고 평가함. 그러나 SQL 함수 내부에 HTMX 템플릿을 유지보수하는 것에 대한 우려를 표현함.
  - **유지보수 가능한 스택으로 발전시키기 위한 추가 도구**: 한 사용자는 이 개념을 중대형 애플리케이션에 좋은 UX를 제공하는 유지보수 가능한 스택으로 발전시키기 위해 필요한 추가 도구에 대한 의견을 물음.