npm 패키지를 통합해 드래그 앤 드롭·차트·애니메이션 등 고급 기능을 앱에 추가합니다.
npm 패키지 사용하기
Lovable에 npm 패키지를 프로젝트에 통합해 달라고 요청해 드래그 앤 드롭, 차트, 애니메이션 등 고급 기능을 추가합니다.
모든 Lovable 프로젝트는 npm 패키지를 사용할 수 있습니다. npm 패키지는 드래그 앤 드롭, 차트, 애니메이션, 날짜 처리 같은 기능을 위해 미리 만들어진 JavaScript 라이브러리입니다. 직접 설치할 필요는 없습니다. 채팅에서 패키지 이름을 말하거나 원하는 기능을 설명하기만 하면 Lovable이 패키지를 설치하고 앱에 연결합니다.
npm이란?
npm(Node Package Manager)은 JavaScript 개발자가 재사용 가능한 코드를 공유하는 공개 레지스트리입니다. 수천 개의 패키지를 호스팅하며, 이 패키지를 프로젝트에 통합해 기능을 확장할 수 있습니다. npmjs.com에서 살펴볼 수 있습니다.
채팅으로 패키지 요청하기
인기 있는 프로젝트 관리 도구처럼 Kanban 보드에서 작업을 정리하고 싶다고 가정해 봅시다. Lovable에 드래그 앤 드롭을 처음부터 만들어 달라고 프롬프트할 수도 있지만, 전용 패키지를 쓰면 안정적인 동작을 더 빠르게 구현할 수 있습니다. 예를 들어 @hello-pangea/dnd는 카드 추가, 열 사이 이동, 순서 변경을 지원하는 드래그 앤 드롭 기능을 제공합니다.
Use the @hello-pangea/dnd npm package to add drag-and-drop functionality to my Kanban board app. Ensure users can add new cards, move them within columns, and reorder them.Lovable이 패키지를 설치하고 프로젝트에 통합합니다. 다른 요구 사항에 따라 결과는 다음과 같이 보일 수 있습니다.
패키지 이름을 대지 않고 원하는 결과를 설명해도 됩니다("내 보드에 드래그 앤 드롭을 추가해 줘"). 이처럼 이미 잘 정립된 문제라면 Lovable은 직접 작성한 코드보다 검증된 라이브러리를 선호하며 적합한 패키지를 골라 줍니다.
패키지는 신중하게 고르기
Lovable은 요청한 공개 npm 패키지라면 무엇이든 설치하지만, 타사 코드의 품질이나 보안, 신뢰성까지 보장하지는 못합니다. 패키지를 기반으로 만든 기능은 실제로 의존하기 전에 철저히 테스트해야 합니다.
패키지를 통합하기 전에 다음을 확인합니다.
- 다운로드 수: 패키지의 npm 페이지에 표시된 다운로드 수가 많다면 커뮤니티에서 널리 쓰이고 신뢰받는 패키지라는 뜻입니다.
- 유지 관리: 패키지의 저장소를 살펴봅니다. 잦은 커밋, 최근 릴리스, 이슈에 대한 빠른 대응은 좋은 신호입니다. 몇 년째 업데이트되지 않은 패키지는 최신 종속성이나 보안 관행과 충돌할 가능성이 높습니다.
- 커뮤니티 피드백: 패키지의 GitHub 저장소에서 이슈와 토론을 읽고, 개발자 포럼에서 문제 보고 사례를 검색해 봅니다.
또한 Lovable 앱은 서버리스 백엔드와 함께 브라우저에서 실행된다는 점을 기억해야 합니다. Electron(데스크톱 앱)이나 Capacitor 네이티브 플러그인(모바일 앱)처럼 다른 환경을 위해 만들어진 패키지는 오류 없이 설치되지만 배포된 앱에서는 동작하지 않습니다.