본문 바로가기

트러블 슈팅

(19)
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란?검색..
동일한 영역을 차지하는 tap 만들기(feat: flex:1) 동일한 영역을 차지하는 tap 아래사진과 같이 넓이 높이 모두 같은 크기의 tap을 제작할 때, flex: 1을 이용하게 된다. 이 flex 1을 이용하기 전에 flex의 속성에 대해서 알아보자. flex란하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성인데, 이 속성에는 flex-grow, flex-shrink, flex-basis 등이 있다.대부분 flex는 auto, intial, none, 양의 수를 사용합니다. felx 1만약 넓이, 높이 모두 같읕 크기의 tap을 원할 때 felx:1을 설정해주면됩니다. flex:2를 설정해주면 flex:1설정해준 tag보다 더 큰 요소를 차지할 수 있습니다. .부모클래스 { display:..
footer(바닥글) 맨 아래에 붙게하기 문제 발생footer를 설정하였는데,이상하게 어떤 부분에서는 footer가 제대로 맨 아래에 붙지만, 만약 main content가 양이 적으면 footer 다음에도 빈 구역이 붙는 모습을 확인할 수 있었다.원하는 구조실제 화면 구조문제 해결APP에서 처음 구조를 wrapper div로 해더와 메인 컨텐츠 footer를 묶어주었다. 그리고 메인컨테츠의 경우 처음 시작 tag를 section으로 만들어 주었고, footer는 footer tag로 제작해주었다.(tag는 본인이 원하는 방식으로 설정하면 된다.) 그래서 common.css를 따로 만들어서 전체적으로 css를 적용해주었다. 해당 코드는 아래와 같다..wrapper { display: flex; min-height: 100vh; fle..
route의 path가 mis matching일때, 404 에러 화면으로 이동하기 const routes = [ { path: '/', name: 'HomeRedirect', redirect: '/Home', }, { //홈 path: '/Home', name: 'Home', component: Home, }, { // 404 페이지 path: '/404', name: '404', component: Notfound404, }, { // 존재하지 않는 페이지 404로 리다이렉트 path: '/:pathMatch(.*)*', redirect: '/404', },]; 예를 들어 여기서는 path가 /Home 밖에 없는데 /Map을 입력하게 되면 해당페이지가 없기 때문에 404로 리다이렉트를 해주는 방법이다. 유저의 사용패턴이 잘못 될 수 있기 때문에 예외처리로 4..
[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..
[React] 중복 클릭 방지 구현하기 문제 발생컴퓨터로 웹을 실행하게 되면 기록 및 피드를 등록할때 빠르게 등록이 되지만 모바일 같이 느린 데이터를 사용하는 기기는 지금 등록중인지 아닌지를 확인하기가 어려워서 사용자가 중복으로 클릭한다는 문제점이 발생하였다. 해결우선 react-query를 사용하고 있기때문에, react- query의 isLoading을 사용하기로 했다. 등록 중일 때(Loading)는 유저가 화면을 누를 수 없도록 dimmed처리를 하고, Spinner를 보여주며, 등록 버튼도 비활성화되게 설정하였다.export const NewFeed = () => { const { mutate, isLoading } = useNewFeedMutation(); return ( ... ..