글 작성 이유
- 두 플러그인 을 사용법을 기록해두어 다음에 참고하기
- 글을 작성하며 단순히 코드 복사 붙이기로 끝내지 않고 가능한 이해하고 넘어가기
왜 플러그인이라고 하는가?
먼저 ChatGPT에게 물어보았습니다.
플러그인이라는 용어는 이 모듈들이 기본적인 소프트웨어에 "추가적으로 연결될 수 있는" 독립적인 확장 기능을 의미합니다.
플러그인을 사용하면 개발자는 기본 소프트웨어의 코드를 변경하지 않고도 추가 기능을 손쉽게 사용할 수 있습니다.
이는 마치 전기 장치에 플러그를 꽂아 추가 기능을 사용하는 것과 유사하다고 볼 수 있어 "플러그인"이라는 명칭이 붙었습니다.
완벽한 답변이라고 생각했습니다. 위에서 말하는 기본적인 소프트웨어는 React 또는 Vue.js가 될 수 있을 것이고 오늘 사용할 unplugin-auto-import & unplugin-vue-components들이 플러그인이 될 것입니다.
unplugin?
저는 처음 이 2가지의 플러그인 이름을 보고 "플러그인 이라면서 왜 unplugin으로 시작하지?" 라는 생각을 했습니다.
참고: https://unplugin.vercel.app
Unplugin
The Unified
Plugin System
Supports Vite, Rollup, webpack, esbuild, and every framework built on top of them.
"Unplugin"은 다양한 빌드 도구와 개발 환경에서 사용할 수 있도록 설계된 통합 플러그인 시스템
Unplugin의 Un은 Undo처럼 부정을 뜻하는 접두사가 아니고 Unified의 앞 2글자를 뜻하는 것이엇습니다.
뒤에 코드로 설명하겠지만 plugin들은 각각의 빌드 환경 설정에 간단한 모듈을 추가하는 방식으로 설정합니다.
unplugin-auto-import & unplugin-vue-components은 개발자가 위에 보이는 Vite, Rollup, webpack 등 빌드 시스템에 맞추어 플러그인을 별도로 개발할 필요 없이, 범용적으로 호환되는 플러그인을 사용할 수 있도록 만들어 놓았기 때문에 unplugin이라는 이름이 붙은 것입니다.
unplugin-auto-import?
unplugin-auto-import의 Readme
Auto import APIs on-demand for Vite, Webpack, Rspack, Rollup and esbuild. With TypeScript support.
on-demand: 필요할 때마다, 즉 요구가 있을 때 자동으로 무엇인가를 제공하거나 실행한다는 의미입니다.
명시적으로 compostion API를 import 하지 않아도, 해당 API를 사용하는 순간 자동으로 임포트되는 기능을 의미합니다.
위 그림처럼 해당 플러그인을 사용하면 Vue 3에서 제공하는 composition API를 명시적으로 임포트 하지 않아도 사용할 수 있게 됩니다.
Vue 3를 기준으로 설명하고 있지만 auto-import 플러그인을 사용하면 React에서 useState도 별도로 임포트 하지 않고 사용할 수 있게 됩니다.
unplugin-vue-components?
unplugin-vue-components의 Readme입니다.
"On-demand components auto importing for Vue"
unplugin-auto-import와 비슷한 의미로 컴포넌트를 명시적으로 임포트하지 않아도, 해당 컴포넌트를 사용하는 순간 자동으로 임포트되는 기능을 의미합니다.
제가 생각하는 이 플러그인의 주요 장점은 개발자가 컴포넌트를 사용하기 위해 매번 임포트 구문을 작성할 필요가 없어진다는 점도 있지만. 필요하지 않은 컴포넌트를 임포트 하지 않기 때문에, 최종 빌드 파일의 크기를 최소화할 수 있어 성능 최적화에도 도움이 된다는 점입니다.
두 플러그인의 대한 설명을 이상 간단히 마치고 다음 글에서 사용 방법을 작성하도록 하겠습니다.
