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

[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 통신

[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장 상태관리

[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장 라우팅

[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장 리스트와 키

[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
[Vue] 2장 기본 컴포넌트

[Vue] 2장 기본 컴포넌트

1.Vue.js의 컴포넌트 구조Vue.js 애플리케이션에서 컴포넌트를 모듈화해 관리하는 것이 중요합니다. 각 컴포넌트는 별도의 파일로 만들어, 이를 통해 재사용성과 유지보수성을 높일 수 있습니다. src/components 폴더를 만들어 그 안에 컴포넌트를 저장합니다.src/└── components/ ├── ChildComponent.vue └── ParentComponent.vueChildComponent.vue이 컴포넌트에는 부모로부터 전달받는 메시지를 표시합니다.템플릿: HTML 구조를 정의합니다. {{ message }} 를 사용해 부모에서 전달받은 메시지를 표시스크립트: props를 사용해 부모 컴포넌트에서 전달된 데이터를 받아옴스타일: 컴포넌트에만 적용되는 CSS 스타일을 정의 ..

  • format_list_bulleted Front-End/VueJS
  • · 2025. 2. 23.
  • textsms
반응형