포스팅에서는 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 배열을 순회하며 각 인물 카드를 생성합니다. 각 카드에는 ..

Sticky 속성을 활용한 스크롤 애니메이션 구현 방법 기록  개인적으로 sticky 속성을 처음 사용해봤는데, 꽤 흥미로웠고 적용하는 과정에서 많은 것을 배웠습니다. 1. HTML 구조 설정 먼저, position: sticky를 적용할 HTML 구조를 설정해보겠습니다. {{ $t(item.title) }} {{ $t(item.content) }}  v-for 디렉티브를 사용하여 infoData 배열의 데이터를 순회하며 각각의 섹션을 생성합니다. 각 섹션에는 텍스트와 이미지를 담고 있으며, 이미지는 sticky 속성을 통해 스크롤 시 고정됩니다. 2. 데이터 설정 다음으로,..

data구조와 css를 이용한 타일 이미지 구현 방법 기록1. HTML 구조 설정먼저, 타일 이미지를 담을 HTML 구조를 설정합니다.  {{ $t("[4].tileview.h2-1") }} {{ $t("[4].tileview.h2-2") }}  v-for 디렉티브를 사용하여 colContainer 배열의 데이터를 순회하며 타일 이미지를 생성합니다. imgContainer는 열을 나타내며, 각 열 안에 여러 개의 imgBox1이 포함됩니다. imgBox2 안에는 실제 이미지..

화면 크기에 따라 슬라이드 세 개를 나열된 형태에서 탭 창으로 전환하는 반응형 UI를 구현하는 과정 기록1. HTML 구조 설정 NEW PRODUCT EVENT HAITAI MALL ..

slick 라이브러리를 사용하여 다중 슬라이드를 만드는 방법과 슬라이드를 float로 정렬하는 방법 기록1. Slick 라이브러리 사용하여 다중 슬라이드 만들기먼저. Slick을 사용하여 세 개의 슬라이드를 구현합니다. HTML구조 NEW PRODUCT EVENT HAITAI MALL ..