Zero Build Frontend (Grade A)클로드 AI를 위한 보안 검증된 개발 역량 GRADE A. CDN으로-loaded React, Tailwind CSS, 그리고 바닐라 자바스크립트를 사용하여 무버드링(frontend) 빌드 Development. 정적 웹 앱을 짤 때 사용

zero-build 프론트엔드 개발에서 CDN 로드된 React, Tailwind CSS, 바닐라 자바스크립트를 사용할 때입니다. 정적 웹 애플리케이션 만들기, 레잌플 맵 만들기, 구글 시트를 데이터베이스로 사용하기, 또는 브라우저 애드온 개발하기 등에 사용합니다. 로우森 프론트엔드, NJCIC 맵, 포켓링크 프로젝트에서 사용한 패턴을 다룹니다. zero-build 프론트엔드 개발 패턴은 배포 가능한 웹 어플리케이션을 만들기 위해 Build 도구, 번들러, 또는 복잡한_TOOLchain_없이 필요한 모든 것을 제공합니다. 프런트엔드 스택 선택 0-build 프런트엔드 방식을 선택하는 3 가지 방법이 있습니다. 각 가지방법에는 다르게 가중치를두고 있는 trade-offs가 있습니다 Stack 번들 사이즈 효과 React (via esm.sh + htm) 컴포넌트가 많은 SPA, existing React 인지 모델, Tailwind styling ~50 KB gzipped (React + ReactDOM + htm) htmx 2.x + 서버 렌더링 된 HTML CRUD 애플리케이션, 전통적인 MPA 흐름, 서버측의 진실의 상태를 원함 ~14 KB gzipped (htmx 만) Alpine.js 3.x + 평간 HTML 소량의 인터랙티비티를 띄우면, 그리고 대부분의 정적페이지에 ~15 KB gzipped (Alpine 만) htmx와 Alpine.js를 동일한 페이지에 띄우면, htmx는 서버 Interaction을 다루고, Alpine는 클라이언트 측의 UI 상태를 다룹니다. 여러 프로덕션 사이트에서 이 콤비네이션으로 동작합니다. ESM import maps import maps를 사용하면 bundler없이 <script type="module">에서 import x from 'react'로 작성할 수 있습니다. 브라우저는 map에서 bare specifier를 resolve합니다. 2023 년 이후로 모든 주요 브라우저에서 안정적입니다. <script type="importmap"> { "imports": { "react": "https: // esm.sh/react@19.0.0", "react-dom/client": "https://esm.sh/react-dom@19.0.0/client", "lodash-es": "https://esm.sh/lodash-es@4.17.21", " "my-app/": "/src/" }, "scopes": { "https://esm.sh/": { "scheduler": "https://esm.sh/scheduler@0.23.0" } } } </script> scopes block는 서브 트리 내의 import를 다르게 resolve할 수 있습니다. CDN 패키지에 특정 전이 의존성 버전을 필요로 할 때 유용합니다. trailing / 서브 트리에서 import를 다르게 resolve할 수 있습니다. exact pinned 버전이나 SHA-锁 URL을 사용하지 않으면, esm.sh/react(버전이 없는 것) 및 esm.sh/react@latest는 요청 시간에 resolve되며, 버전이 바뀔 수 있습니다. 버전이 pin되어 있도록 하거나 특정 URL로 정한 것이 좋습니다. htmx 2.x 서버 렌더된 인터랙티비티 htmx 2.0(6 월 2024 년에 출시)은 평간 HTML에 AJAX, WebSocket, SSE를 추가할 수 있습니다. hx-* 속성을 통해 클라이언트는 서버로부터 HTML 프랜젠츠를 받습니다. JS 프레임워크가 필요하지 않습니다. <script src="https://unpkg.com/htmx.org@2.0.4"></script> <!-- 클릭 후 POST를 서버에 보내고, #result에 리스폰즈를 교체합니다 --> <button hx-post="/api/clicked" hx-target="#result" hx-swap="innerHTML"> 클릭 하세요. </button> <div id="result"></div> <!-- 검색하기 --> <input type="search" name="q" hx-get="/api/search" hx-trigger="input changed delay:300ms" hx-target="#results" /> <div id="results"></div> <!-- 무한 스크롤 --> <div hx-get="/api/items?page=2" hx-trigger="revealed" hx-swap="afterend"> ... </div> htmx2.x는 IE 지원을 끊고, API를 개량했습니다. 만약 현재 htmx 1.x를 사용 중인 경우, 마이그레이션을 생략하고 사용중인 1.x는 보안 패치를 계속받을 수 있습니다. 새로운 프로젝트는 2.x를 대상으로 개발해주세요. Alpine.js 3.x 클라이언트측 reactivity in HTML Alpine.js(current 3.14+)는 Vue/React 대안으로, 작은 스크립틀 구현을 위해 사용될 수 있습니다. 상태와 비행 동작은 x-* 속성을 사용하여 마크업에서 관리됩니다. <script defer src="https://unpkg.com/alpinejs@3.14.1/dist/cdn.min.js"></script> <!-- visible/hidden --> <div x-data='{ open: false }'> <button @click='open = true'> </button> </div>