본문 바로가기
728x90

vue7

[Vue] 초보자를 위한 Vue Router 완벽 가이드 Vue Router는 Vue.js에서 웹 앱의 페이지 이동을 관리하는 도구다.이 포스트는 Vue Router를 처음 접하는 초보자를 위해 Vue Router란 무엇인지, 왜 필요한지, 어떻게 사용하는지를 쉽게 설명한다.간단한 예제와 실생활 비유를 통해 개념을 익히고, 실제 코드를 따라 할 수 있도록 구성한다.키워드: Vue Router 초보, Vue 3 라우팅, SPA 페이지 이동.Vue Router란?Vue Router는 Vue.js 애플리케이션에서 페이지 이동을 구현하는 공식 라이브러리다. SPA(Single Page Application)에서 브라우저의 새로고침 없이 URL을 변경하고, 각 URL에 맞는 콘텐츠를 보여준다. 비유:Vue Router는 레스토랑 메뉴판과 같다. 손님이 “메뉴 1번(홈).. 2025. 4. 21.
[StudySync 프로젝트] Vue 3 + TypeScript + Tailwind CSS로 StudySync 프론트엔드 설정 2025년 4월 18일StudySync 프로젝트는 AI 기반 학습 플래너 웹 앱이다. Vue 3, TypeScript, Tailwind CSS로 프론트엔드를 설정하고, Spring Boot, JPA, MySQL로 백엔드를 구현한다. 오늘은 프론트엔드 초기 설정(Vite, Tailwind CSS, ESLint, Prettier)을 완료했다. IntelliJ와 GitHub 저장소(study_sync)를 사용해 진행한 과정을 기록한다.프로젝트 개요StudySync는 학습 목표를 설정하면 AI(ChatGPT API)가 맞춤형 계획을 생성하는 앱이다. 주요 기능은 다음과 같다:사용자 인증(JWT 기반)AI 기반 학습 계획실시간 퀴즈, 커뮤니티 피드반응형 UI, PWA프론트엔드는 Vue 3, TypeScript, .. 2025. 4. 19.
[vue] Vue에서 Slick 슬라이드가 새로고침 후만 적용되고, 페이지 이동 후에는 적용되지 않는 문제 해결하기 Vue에서 Slick 슬라이드가 새로고침 후만 적용되고, 페이지 이동 후에는 적용되지 않는 문제 해결하기 🔍 문제 상황Vue는 **SPA(Single Page Application, 단일 페이지 애플리케이션)**라서 페이지를 이동해도 전체 HTML이 새로고침되지 않고 필요한 부분만 변경됨.이 때문에 slick.js가 메인 페이지에서 최초 한 번만 실행되고, 다른 페이지로 이동 후 다시 돌아오면 슬라이드가 깨지는 문제가 발생했음. 💡 문제 원인slick.js는 페이지가 처음 로딩될 때 한 번만 실행되도록 되어 있음.Vue에서 다른 페이지로 이동 후 돌아오면 mounted()가 다시 실행되지 않음 → slick이 다시 초기화되지 않음.이로 인해 슬라이드가 풀려서 모든 배너가 펼쳐진 상태로 보이는 문제 발.. 2025. 2. 10.
[vue] 특정 페이지에서만 특정 클래스 추가하기 vue 프로제트를 작업하다보니 content 영역에 대해서 메인 Home 페이지에서만 main 클래스를 추가해야 하는 상황이 발생했다.  방법) [ :class ] 속성을 활용하여 특정 페이지에서 특정 클래스 추가 .// src/router/index.jsimport { createRouter, createWebHistory } from 'vue-router'; // Vue 3에 맞게 변경import Home from '../views/MainHome'; // 변경된 Home 컴포넌트import newlyProduct from '../views/newlyProduct';const routes = [ { path: '/', name: 'MainHome', compone.. 2025. 2. 10.
[vue] Vue 3 프로젝트에서 public/assets와 src/assets 폴더의 차이점 (chatGPT를 통한 정리내용)Vue 3 프로젝트에서 public/assets와 src/assets 폴더의 차이점1. public/assets 폴더public 폴더는 Vue 프로젝트에서 빌드 시 변환되지 않고 그대로 배포되는 정적 파일을 보관하는 곳입니다. 이 폴더에 있는 파일들은 브라우저에서 직접 접근할 수 있는 경로로 제공되며, 빌드 후에도 그대로 복사됩니다.예시 1: public/assets 폴더 사용하기public/assets 폴더에 logo.png라는 이미지 파일이 있다고 가정해 봅시다. 이 이미지를 Vue 컴포넌트에서 사용하려면 절대 경로로 접근해야 합니다.  이때 src="/assets/logo.png"와 같이 절대 경로를 사용해야 합니다.public 폴더 내의 파일들은 빌드 후에도 경로.. 2025. 2. 10.
[Vue] Vue 프로젝트에서 CSS, JS 파일 적용하기 - 오류(해결진행중) 현재 Vue 프로젝트를 공부하며 빠르게 프로젝트 완성을 해보려 맨땅에 해딩중이다.일단 유튜브 강의, ChatGPT 등의 도움을 받으며 프로젝트를 진행중이고 백엔드 교육과정중 세미 프로젝트로 진행했던 내용중 프론트엔드 부분만 가져와서 Vue 프로젝트로 변환하는중인데, CSS 와 JS 파일을 적용시키는 과정에서 문제가 발생했다. [index.html]  [main.js]// import { createApp } from 'vue'// import App from './App.vue'// createApp(App).mount('#app')// src/main.js// src/main.jsimport { createApp } from 'vue'; // Vue 3에 맞게 import.. 2025. 2. 10.
728x90

티스토리툴바