Js/vue
-
설명하기에 앞서🎉 본 글에서 제공하는 모든 내용은 저작권법에 의하여 보호받는 저작물이지만 이에 대한 무단 복제 및 배포를 환영합니다. 🎉 Aleph Kim's Portfolio Website🖥️ 프로젝트 소개Aleph Kim의 포트폴리오 웹사이트는 개발자의 역량과 프로젝트를 효과적으로 소개하기 위해 제작된 개인 웹사이트입니다.이 프로젝트는 데이터와 UI를 철저히 분리하여 사용자에게 커스터마이징과 확장성을 극대화할 수 있도록 제작하였습니다.🚀 주요 강점: 데이터 분리 구조이 웹사이트는 데이터를 독립적으로 관리하는 구조를 채택하여 개발, 유지보수, 확장성에서 많은 이점을 제공합니다.🛠️ 사용 기술Frontend: Vue.js (컴포넌트 기반 설계)Styling: Tailwind CSS (유틸리티 ..
vue - 개발자 포트폴리오 사이트설명하기에 앞서🎉 본 글에서 제공하는 모든 내용은 저작권법에 의하여 보호받는 저작물이지만 이에 대한 무단 복제 및 배포를 환영합니다. 🎉 Aleph Kim's Portfolio Website🖥️ 프로젝트 소개Aleph Kim의 포트폴리오 웹사이트는 개발자의 역량과 프로젝트를 효과적으로 소개하기 위해 제작된 개인 웹사이트입니다.이 프로젝트는 데이터와 UI를 철저히 분리하여 사용자에게 커스터마이징과 확장성을 극대화할 수 있도록 제작하였습니다.🚀 주요 강점: 데이터 분리 구조이 웹사이트는 데이터를 독립적으로 관리하는 구조를 채택하여 개발, 유지보수, 확장성에서 많은 이점을 제공합니다.🛠️ 사용 기술Frontend: Vue.js (컴포넌트 기반 설계)Styling: Tailwind CSS (유틸리티 ..
2024.12.23 -
개요프로젝트 진행 중 스크롤 애니메이션을 추가해보려 관련 라이브러리를 찾아보았다.이 글은 vue.js 3버전에서 AOS라는 라이브러리를 사용법하는 방법에 대한 글이다.설치npm install aos@2.3.4 # 마지막 정식 배포 버전이 2.3.4버전이다main.js 수정import { createApp } from 'vue';import App from './App.vue';import AOS from 'aos';import 'aos/dist/aos.css';// Vue 앱 생성const app = createApp(App);// AOS 초기화app.mount('#app');AOS.init();사용 예시 나타날때 올라오는 요소참고aos 다양한 효과 demoaos 공식 github
vue - AOS(Animate On Scroll) 라이브러리개요프로젝트 진행 중 스크롤 애니메이션을 추가해보려 관련 라이브러리를 찾아보았다.이 글은 vue.js 3버전에서 AOS라는 라이브러리를 사용법하는 방법에 대한 글이다.설치npm install aos@2.3.4 # 마지막 정식 배포 버전이 2.3.4버전이다main.js 수정import { createApp } from 'vue';import App from './App.vue';import AOS from 'aos';import 'aos/dist/aos.css';// Vue 앱 생성const app = createApp(App);// AOS 초기화app.mount('#app');AOS.init();사용 예시 나타날때 올라오는 요소참고aos 다양한 효과 demoaos 공식 github
2024.12.16 -
개요처음으로 컴포넌트 라이브러리를 사용하지 않고 다크모드를 구현하려니 수많은 난관을 만나게 되었다. 다음에는 이번처럼 헤매지 않기 위해 기록해두려 한다.코드tailwind.config.jsclass="dark:text-white"와 같이 다크모드일 경우 스타일 요소를 지정하기 위한 설정module.exports = { purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], darkMode: 'selector', // 3.4.1 버전 이후일 경우 darkMode: 'class'..
vue, tailwindcss - 다크모드 구현개요처음으로 컴포넌트 라이브러리를 사용하지 않고 다크모드를 구현하려니 수많은 난관을 만나게 되었다. 다음에는 이번처럼 헤매지 않기 위해 기록해두려 한다.코드tailwind.config.jsclass="dark:text-white"와 같이 다크모드일 경우 스타일 요소를 지정하기 위한 설정module.exports = { purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], darkMode: 'selector', // 3.4.1 버전 이후일 경우 darkMode: 'class'..
2024.12.03 -
문제발생vue로 spring 서버의 데이터를 가져오는 도중 개발자의 숙원 cors 에러가 발생했다.vite.config.js 작성import { defineConfig } from "vite"; // Vite 설정을 정의하기 위한 헬퍼 함수 가져오기import vue from "@vitejs/plugin-vue"; // Vue 플러그인 가져오기export default defineConfig({ plugins: [ vue(), // Vue 플러그인 추가 ], server: { proxy: { '/api': { target: 'https://서버.com', // 프록시 요청을 보낼 대상 URL ..
vue - cors 에러 proxy 사용(vite)문제발생vue로 spring 서버의 데이터를 가져오는 도중 개발자의 숙원 cors 에러가 발생했다.vite.config.js 작성import { defineConfig } from "vite"; // Vite 설정을 정의하기 위한 헬퍼 함수 가져오기import vue from "@vitejs/plugin-vue"; // Vue 플러그인 가져오기export default defineConfig({ plugins: [ vue(), // Vue 플러그인 추가 ], server: { proxy: { '/api': { target: 'https://서버.com', // 프록시 요청을 보낼 대상 URL ..
2024.07.02