[Vuetify] Vutify UI 라이브러리 가이드

🖱️ 1. Vuetify란?Vuetify는 Vue.js 전용 UI 컴포넌트 라이브러리로, 100개 이상의 다양한 UI 컴포넌트를 제공하고, 버튼, 폼, 테이블 등 모든 UI 요소를 포함하고 있으며, Vue 3와 완벽하게 호환하고 있는 라이브러리 입니다. Vuetify를 사용하는 이유로는 다음과 같습니다.프로젝트에 필요한 UI 컴포넌트를 일일이 만들 필요 ❌반응형 디자인이 기본 제공테마 변경과 커스터마이징 가능대규모 애플리케이션에도 일관적인 UI를 제공👉 Vuetify는 초기 개발 속도를 크게 높여주면서 서비스의 퀄리티를 유지 시켜주는 라이브러리라고 말할 수 있음.💿 2. Vuetify 설치 방법 (Vue 3 기준)1 ) Vue 프로젝트 생성먼저 Vue CLI 또는 npm create vue@late..

• format_list_bulleted Front-End/VueJS
• · 2025. 8. 25.
• textsms

[Vue] Vue를 사용한 TMDB API 사용하기

1. Vue TMDB API 키 받기Vue.js에서 TMDB(The Movie Database) API를 사용하는 방법으로 API를 사용해 영화, TV 프로그램, 배우 정보 등을 가져올 수 있습니다. TMDB를 사용하려면 먼저 웹 사이트에 들어가 화원가입을하고 API 키를 발급 받아야합니다. The Movie Database (TMDB)환영합니다 수백만 개의 영화, TV 프로그램 및 인물을 발견하세요. 지금 살펴보세요.www.themoviedb.orgTMDB 공식사이트에 들어가 화원가입 후 설정에 들어가 API키를 발급 받습니다. 발급받은 API를 복사한 후 먼저 Vue 프로젝트를 생성하기 위해 아래 명령어를 입력해 Vue 프로젝트를 생성합니다.vue create tmdb-vue2. API 라이브러리 설..

• format_list_bulleted Front-End/VueJS
• · 2025. 3. 17.
• textsms

[Vue] 6장(완) API 통신

1. Vue API 통신Vue에서 API 통신을 하기 위해 주로 axios 라이브러리를 사용합니다. 아래는 Vue에서 axios를 사용해 API와 통신하는 기본적입 방법입니다. 먼저 프로젝트에 axios라이브러리를 설치해줍니다.npm install axios && yarn add axios2. API 호출 예제다음은 Vue 컴포넌트에서 API를 호출합니다. API 데이터 {{ item.name }}   GitHub - Koras02/vue-tutorial: https://thinky.tistory.com/category/Front-End/VueJShttps://thinky.tistory.com/category/Front-End/VueJS - Koras02/vue-tuto..

• format_list_bulleted Front-End/VueJS
• · 2025. 3. 16.
• textsms

[Vue] 5장 상태관리

1.Vue 상태관리 Vue.js에서 상태를 관리하는 애플리케이션으로 Vuex를 사용할 수 있습니다. Vuex는 Vue.js 애플리케이션을 위한 상태 관리 패턴이자 라이브러리로, Vuex를 사용하면 컴포넌트 간에 공유되는 상태를 중앙 집중식으로 관리할 수 있습니다. Vuex의 주요 구성 요소로는 다음과 같습니다.State: 애플리케이션의 상태를 저장하는 객체 Getters: 상태를 계산하여 반환하는 메서드로, 컴포넌트에서 상태를 쉽게 가져올 수 있도록 도움Mutations: 상태를 변경하는 유일한 방법으로, 동기적으로 상태를 변경 Actions: 비동기 작업을 처리하고, 그 결과로 mutations을 호출하여 상태를 변경Modules: Vuex 스토어를 모듈화하여 큰 애플리케이션의 상태를 관리2. Vuex..

• format_list_bulleted Front-End/VueJS
• · 2025. 3. 8.
• textsms

[Vue] 4장 라우팅

1. Vue Router 설치 Vue.js에서 라우팅을 설정하는 방법은 VueRouter를 사용해 SPA(Single Page Application) 네비게이션을 관리할 수 있습니다 먼저 Vue Router를 설치합니다. 아래 명령어를 사용해 Vue Router를 설치합니다.npm install vue-router && yarn add vue-router src/router/index.js 파일을 생성하고 라우터를 설정합니다.import About from '@/components/About.vue'import Home from '@/components/Home.vue'import { createRouter, createWebHistory } from 'vue-router'const routes = [ ..

• format_list_bulleted Front-End/VueJS
• · 2025. 3. 5.
• textsms

[Vue] 3장 리스트와 키

1. 리스트 렌더링Vue.js에서 리스트를 렌더링할 때는 v-for 디렉티브를 사용해 배열이나 객체를 반복할 수 있습니다. 이 때 각 항목에 대해 고유한 key 속성을 사용하는 것이 중요합니다. key 속성은 Vue가 각 항목의 변경 사항을 추적하고 성능을 최적화하는 데 도움을 주는 렌더링 입니다. {{ item.name }} key 속성의 중요성key 속성은 리스트의 각 항목을 식별하는 데 사용됩니다. Vue는 이 key를 사용해 항목의 추가, 삭제 및 변경을 효율적으로 처리일반적으로 항목의 고유한 ID를 사용하는 것이 좋음2. Key 속성을 사용하지 않을 경우의 문제아래와 같이 Key 속성을 사용하지 않으면 Vue의 항목의 변경 사항을 효율적으로 추적하지 못할 수 있으며, 이로 인해 성..

• format_list_bulleted Front-End/VueJS
• · 2025. 2. 28.
• textsms