마퀴 슬라이드를 구현하는 방법 기록1. 마퀴 슬라이드 컴포넌트 구조먼저, MarqueeSlide.vue 파일의 구조를 살펴보겠습니다. 이 컴포넌트는 vue-marquee-slider를 사용하여 이미지를 연속적으로 이동시키는 슬라이드를 구현합니다. :space="100" :paused="handlePlay" > :style="{ 'background-image': `url(${item.url})` }" @mouseover="handlePlay = true" @mouseout="handlePlay = false" > vue-marquee-slider 컴포넌트를 사용하여 슬라이드를 구현하고,..

마퀴 슬라이드를 구현하는 방법 기록1. 마퀴 슬라이드 컴포넌트 구조먼저, MarqueeSlide.vue 파일의 구조를 살펴보겠습니다. 이 컴포넌트는 vue-marquee-slider를 사용하여 이미지를 연속적으로 이동시키는 슬라이드를 구현합니다. :space="100" :paused="handlePlay" > :style="{ 'background-image': `url(${item.url})` }" @mouseover="handlePlay = true" @mouseout="handlePlay = false" > vue-marquee-slider 컴포넌트를 사용하여 슬라이드를 구현하고,..

Vue.js를 이용해 검색어와 태그를 이용한 검색 기능을 구현하는 방법 기록프로젝트 구조TechTalks.vue: 메인 컴포넌트EpisodeSearch.vue: 검색어 입력 컴포넌트EpisodeTag.vue: 태그 선택 컴포넌트EpisodeSection.vue: 에피소드 목록 컴포넌트 1. TechTalks.vue: 메인 컴포넌트TechTalks.vue는 전체 컴포넌트를 관리하고, 검색어와 태그를 기반으로 데이터를 필터링합니다.  1-1 템플릿 구조 여기서 EpisodeSearch와 EpisodeTag 컴포넌트는 검색어와 태그를 통해 검색 요청을 TechTalks 컴포넌트로 전달합니다. 1-2 스크립트: 데이터 정의 및 메서드 여기서 onSearch 메서드는 자식..

Vue.js를 이용해 페이지네이션을 구현하는 방법 기록 1. 프로젝트 구조 News.vue: 메인 뉴스 페이지 컴포넌트NewsMain.vue: 뉴스 데이터를 표시하는 컴포넌트 Pagination.vue: 페이지네이션 컴포넌트Pagination.vue 컴포넌트를 분리한 이유는 페이지네이션 기능을 다른 페이지에서도 재사용할 수 있도록 하기 위함입니다. 컴포넌트로 분리함으로써 코드의 재사용성이 높아지고 유지보수가 용이해집니다. 예를 들어, 다른 페이지에서도 동일한 방식으로 페이지네이션을 구현하고자 할 때, 단순히 Pagination.vue 컴포넌트를 불러와 사용하면 됩니다  2. News.vue: 메인 뉴스 페이지 컴포넌트News.vue는 뉴스 데이터를 API로부터 받아와 NewsMain과 Pagination..

포스팅에서는 Vue.js를 이용해 외부 API를 호출하고, 비동기 통신을 통해 데이터를 가져와 화면에 표시하는 방법 기록 1. 비동기 통신을 통한 API 호출 (News.vue)비동기 통신을 통해 외부 API를 호출하고 데이터를 가져오는 것이 이번 예제의 핵심입니다. 비동기 통신을 사용하면 데이터를 가져오는 동안 사용자 인터페이스가 블록되지 않아서 더욱 부드러운 사용자 경험을 제공합니다. 1-1 API 호출 코드 watch: { countryCode: { async handler(value, oldValue) { try { // fetch를 사용하여 외부 API 호출 let response = await fetch( `https://newsapi...

Vue.js를 이용해 인물 카드를 만들고, 클릭 시 상세 정보 창이 나타나도록 구현하는 방법 기록1. 인물 카드 컴포넌트 (Manager.vue) 1-1 HTML 구조 설정 {{ $t("[5].manager.leadership") }} {{ $t(item.name) }} {{ $t(item.content) }} {{ $t("[5].manager.readmore") }} 위의 템플릿에서는 v-for 디렉티브를 사용해 cardData 배열을 순회하며 각 인물 카드를 생성합니다. 각 카드에는 ..