돈들어손내놔

뷰나 리액트 등 이용한 개발시 Vite를 사용하는 경우가 많이 있습니다. 이 경우 프로젝트를 빌드할 때, index.html 등 html파일의 빌드 결과물이 minify되도록 하는 방법을 알아보겠습니다. vite-plugin-html 플러그인을 설치합니다.npm 설치 npm i vite-plugin-html -Dyarn 설치 yarn add vite-plugin-html -D vite.config.js (타입스크립트 사용시 vite.config.ts)를 열어줍니다. 아래와 같이 vite-plugin-html을 import해 주고, 필요한 옵션을 plugins 내에 추가해 줍니다.import { fileURLToPath, URL } from 'node:url'; import { defineC..

본 포스팅은 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)) } }..

모달이나 바텀시트 컴포넌트는 사용자의 주의를 환기시키거나 또는 중요한 정보를 전달해야 할 때 매우 유용하게 사용됩니다. 그런데 사용자가 해당 창을 닫기 위해 웹 브라우저의 뒤로가기 동작을 수행하게 되면 이전 페이지로 되돌아가버리게 됩니다. 이는 결국 사용성을 해치는 것이 되는데요, 모달이 띄워져 있을 때 웹 브라우저 자체의 뒤로가기를 했을 때 이전 페이지로 이동되지 않고 열려 있는 모달창(또는 바텀시트나 팝업 등)을 닫으려면 아래와 같이 구현하면 됩니다. 본 포스팅에서는 모달을 예시로 설명하고 있으나 모달 뿐만이 아니라 어떤 컴포넌트라도 응용이 가능합니다. 모달 컴포넌트와 이를 열어주는 버튼은 이미 구현했다고 가정하겠습니다. let isModalOpen = false; // 모달 띄우기 function ..

다양한 상황에서 로컬스토리지는 매우 유용하게 사용됩니다. 그리고 로컬스토리지에 다양한 값들을 저장하고 편리하게 사용하는데, 객체(Object)는 저장시에 그냥 저장하는 것이 아닌, 한 단계를 거쳐 저장을 해주어야 우리가 원하는 형태대로 저장하고 또 읽을 수 있습니다. 아래와 같은 오브젝트가 하나 있다고 가정합니다. let person = { name: 'John', age: 26 } 이를 저장할 때, localStorage.setItem('personInfo', person) 과 같이 바로 저장을 하게 되면, 아래와 같이 [object Object] 값으로 저장이 되어 버립니다. 그렇다면 여기서 키-밸류를 가져와서 사용해야 하는 경우, 올바르게 데이터를 사용할 수 없겠죠. 객체를 로컬스토리지에 저장하고 ..

요즘은 바닐라 자바스크립트나 프론트엔드 프레임워크를 사용하는 추세이다 보니, 제이쿼리는 점점 사용률이 떨어지고 있습니다. 하지만 그렇다고 해도 여전히 쉽고 간편한 문법과 무시할 수 없는 편리함 때문에 아직까지도 제이쿼리에 의존한 프로젝트나 웹페이지들은 많이 볼 수 있습니다. 그리고 일반적인 웹페이지가 아니라 폼을 입력받아서 전송하는 페이지에서 유효성 검사는 필수인데, 여기서 유효성 검사 스크립트를 매번 작성하는 것은 분명히 귀찮은 일일 것입니다. 그래서 제이쿼리를 사용하면서 쉽고 편리하게 폼 유효성 검사를 할 수 있는 플러그인인 jQuery Validation Plugin 을 살펴보겠습니다. 플러그인 설치 2023년 2월 12일 현재 기준 버전은 1.19.5 버전입니다. 이 플러그인은 꽤 오래 전부터 사..

저는 개발 IDE로 비주얼 스튜디오 코드(Visual Studio Code, 이하 VS Code)를 사용합니다. 매우 다양한 개발 환경을 제공할 뿐만 아니라 매우 강력한 확장 기능들을 제공하며 어떤 개발을 하더라도 유연하게 진행을 할 수 있기 때문이죠. 또 무시할 수 없는 가장 큰 이유중에 하나가 바로 다양하고도 훌륭한 '커스텀 테마'를 제공한다는 것입니다. 개발자들마다 각자 선호하는 테마와 컬러셋이 모두 다릅니다. 어떤 분들은 라이트 모드를 선호하고, 또 어떤 분들은 다크 모드를 선호합니다. 저같은 경우는 그 때 그 때 기분에 따라, 혹은 눈의 피로도에 따라 테마를 전환해 가며 사용하는 편입니다. 오늘 소개해 드릴 테마는 라이트 모드 추천 테마 10개와 다크 모드 추천 테마 10개입니다. 추천해 드리는..

들어가기 전에 요즘은 CSS와 자바스크립트 등을 통한 모던하고 깔끔한 UI의 웹 페이지가 정말 많이 보입니다. 그리고 어떤 페이지는 좌측 또는 우측에 메뉴 영역, 또는 타이틀 영역이 존재하면서 반대 쪽에는 컨텐츠가 존재하고, 페이지를 스크롤할 때 사이드 영역만 고정이 되고 컨텐츠 영역만 스크롤이 되어 컨텐츠의 집중도를 올려주는 페이지도 드물지 않게 볼 수 있습니다. 이런 형태로 페이지를 만들면 '특정 영역까지만 스크롤을 했을 때 좌/우측 중 하나는 고정' 이 되는 인터랙션을 주어 보다 덜 심심하게, 더 재밌어보이게 웹페이지를 구성할 수 있습니다. 통상적으로 일정 부분까지 스크롤을 했을 때 특정 영역이 뷰포트 화면 내에 고정되는 것을 스티키(sticky)라고 부르고 있습니다. 우리는 그래서 이를 이용한 '..