트러블 슈팅/Vue (4) 썸네일형 리스트형 LightHouse Syntax not understood error 1. 문제 발생LightHouse에서 SEO지수가 매우 낮게 나와서 원인을 살펴보니, Syntax not understood 등 여러 error가 나와있는 모습을 확인 할 수 있었다. 왜 이런 오류가 나왔을까? 그 이유는 robots.txt를 설정하지 않았기 때문에 유효하지 않다고 나온 것이다. robots. txt를 설정 안했을 경우, 아래와 같은 오류가 나오는데 모두 해당되는 오류였다.No user-agent specifiedPattern should either be empty, start with "/" or "*"Unknown directiveInvalid sitemap URL$ should only be used at the end of the pattern 2. robots .txt란?검색.. [vue3] radar chart를 제작한 공통 컴포넌트 표시되지 않는 문 (feat:chart.js 이용) 문제 발생details 태그를 이용하여 radar 차트가 그려지는 공통 컴포넌트를 제작하였다. 처음에 표시되는 컴포넌트를 클릭하면 제대로 차트가 표시되는 데, 그 이후에 두번째로 오는 컴포넌트를 클릭하면 아무 차트도 안 그려지는 문제가 발생하였다. 문제 해결이유를 분석해보다가 살펴보니 id 이름을 통해서 canvas를 조작하고 있었기 때문이었다. 공통컴포넌트다 보니 아무래도 처음 id만 찾을 수 있었기 때문에 나머지 id를 확인을 못하고 있었다. 그리고 애초에 id는 중복으로 적용이 불가능하기 때문에 발생되는 문제였다.const ctx = document.getElementById('chart') as HTMLCanvasElement;그래서 이 문제를 해결하고자, id를 고정이 아닌 매번 새로운 id를 .. [JavaScript, Vue]details/summary 태그 toggle 기능 막기 문제점보통 details와 summary 태그를 이용하게 되면, A를 클릭하든, B를 클릭하든 toggle 이벤트가 발생하여 숨겨져있는 내용이 나오게 됩니다. 하지만, A만 클릭했을 때는 다른 이벤트가 발생하고 B를 클릭해야지 toggle 이벤트가 발생되게 하고 싶었기 때문에 각자 영역에 다른 이벤트를 만들었지만 여전히 toggle 이벤트가 발생하였습니다.그 이유는 이미 해당 태그 내에는 기본동작으로 toggle이 숨겨져있었기 때문입니다. 해결방법click.prevent를 이용하여 details의 태그의 기본 동작을 실행하지 않게 하여 A클릭 시에도, toggle기능이 활성화되지 않게 하였습니다. click.prevent는 Event.preventDefault()인데, 이 메서드는 어떤 이벤트를 명시적으.. [vue3+TypeScript] Swiper의 type을 지정해주자. (swiperRef = swiper)"@slideChangeTransitionEnd="slideChange">여기서 swiper의 타입을 명시 해줘야하는데, 아무리 찾아도 이와관련한 내용이 없다가 한 블로그 글을 보게되었다.아래처럼 import해서 타입을 지정해주니 바로 해결 되었다.import { Swiper as SwiperCore } from 'swiper';const slideChange = (e: SwiperCore) => { currentSlide.value = e.realIndex + 1;}; 참고 { return ( console.log('slide change')} onSwiper={(swiper) => console.log(swiper)} > Slide 1 Slide 2 Sli" dat.. 이전 1 다음
