돈들어손내놔

본 포스팅은 Visual Studio Code IDE 환경을 기준으로 작성되었습니다. npm 을 통해 Vue프로젝트를 생성해 줍니다. npm init vue@latest Tailwind CSS를 설치해 줍니다. npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 아래 명령어를 통해 tailwind.config.js 파일과 postcss.config.js 파일을 생성합니다. npx tailwindcss init -p tailwind.config.js 를 아래와 같이 최적화해 줍니다. /** @type {import('tailwindcss').Config} */ export default { purge: ['./in..

프로젝트를 진행하다 보면 커스텀 컴포넌트를 직접 제작할 일이 매우 빈번하게 일어납니다. 그리고 이런 커스텀 컴포넌트 중 영역 외부 클릭 이벤트를 적용해야 하는 경우도 있죠. 예를 들면 드롭다운이 이러한 형태에 속합니다. 드롭다운은 누르면 펼쳐지고 다시 누르면 닫히게 되는데 사용자가 드롭다운 버튼을 통해서만 열린 드롭다운을 닫아야 한다면 다소 불편한 경험을 안겨줄 수 있을 것입니다. 이럴 때 사용하면 좋은 녀석 중 하나가 click-outside-vue3 라이브러리입니다. 비슷한 기능을 제공하는 패키지들이 여럿 있겠지만, 저는 click-outside-vue3를 통해서 엘리먼트 외부 클릭에 대한 처리를 편하게 했습니다. 설치 터미널에서 아래 명령어를 입력하여 패키지를 설치합니다. npm npm instal..

Vue3 + Vite 환경에서 SCSS를 전역적으로 불러와 사용하기 위해서는 아래와 같이 설정하시면 됩니다. vite.config.js을 열어줍니다. import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }..