alpinejs/alpine

어떤 프로젝트인가요?

핵심 기능

• 01HTML 속성으로 직접 작성하는 선언적 상태 관리와 이벤트 처리.
• 02CDN script 태그 또는 npm 모듈로 제공됩니다.
• 03요소 접기 애니메이션, 포커스, 입력 마스킹, 상태 유지, DOM morphing을 위한 공식 플러그인.
• 04엄격한 Content Security Policy가 적용된 환경을 위한 CSP 안전 빌드 변형.
• 05Cypress 및 Vitest 테스트 스위트를 갖춘 모노레포.

활용 사례

• 전체 SPA 프레임워크 없이 서버 렌더링 페이지에 드롭다운, 모달 또는 탭을 추가할 때.
• 열린 패널이나 폼 입력값 같은 UI 상태를 페이지를 새로 불러온 뒤에도 유지할 때.
• 입력 마스킹과 포커스 관리를 지원하는 인터랙티브한 폼을 만들 때.
• CSP 안전 JavaScript 빌드가 필요한 환경에서 작업할 때.

빠른 시작

1. 1

   저장소를 로컬에 클론합니다

2. 2

   종속 항목을 설치합니다

   npm install
3. 3

   모든 패키지를 빌드합니다

   npm run build
4. 4

   빌드된 cdn.js 파일을 페이지의 script 태그에 포함합니다

사용 전 알아둘 점

• !이 저장소는 기여용 저장소이며, 사용 방법에 관한 문서 대부분은 외부 Alpine 문서 사이트에 있습니다.

토픽

자주 묻는 질문

alpine은(는) 무엇인가요?

HTML 마크업에 반응형 동작을 바로 추가할 수 있는 간결하고 탄탄한 JavaScript 프레임워크입니다. Alpine.js는 HTML 안에 인터랙티브한 동작을 구성할 수 있는 간결한 JavaScript 프레임워크입니다. 개발자는 HTML 속성으로 요소에 상태와 이벤트 핸들러를 지정하므로, 드롭다운, 모달, 탭, 폼 로직 같은 작은 인터랙션을 별도의 빌드 중심 애플리케이션 구조 없이 해당 마크업 가까이에 둘 수 있습니다.

alpine은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

alpine은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

alpine은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. alpine의 마지막 커밋은 2026년 10월 16일입니다.

alpine은(는) 어디에 사용할 수 있나요?

전체 SPA 프레임워크 없이 서버 렌더링 페이지에 드롭다운, 모달 또는 탭을 추가할 때. 열린 패널이나 폼 입력값 같은 UI 상태를 페이지를 새로 불러온 뒤에도 유지할 때. 입력 마스킹과 포커스 관리를 지원하는 인터랙티브한 폼을 만들 때. CSP 안전 JavaScript 빌드가 필요한 환경에서 작업할 때.

alpine는 어떻게 설치하나요?

저장소를 로컬에 클론합니다 종속 항목을 설치합니다: npm install 모든 패키지를 빌드합니다: npm run build 빌드된 cdn.js 파일을 페이지의 script 태그에 포함합니다

alpine은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/alpinejs/alpine