본문 바로가기

전체 글

(60)
[Vue]공통 컴포넌트로 내용이 다른 게시물로 이동시, 해당 내용이 안 보여지는 현상 문제 발생메뉴에서 서로 다른 게시물로 이동하면, 첫번째 눌렀던 게시물은 잘 이동되지만, 그 상태에서 두번째 게시물로 위 링크는 바뀌지만 해당 내용은 안 바뀌는 모습을 발견 할 수 있었다. /Detail/34/Detail/45문제 원인라우터 뷰가 동일한 컴포넌트를 보여주고 있다고 인식하기 때문이다. 즉 공통 컴포넌트를 제작하였기 때문에 보여주는 데이터와 별개로 동일한 컴포넌트를 보여주고 있다고 인식을 하는 것이다. 이런 문제를 해결하기 위해서 키를 사용하여 경로값을 변경해주면 구성요소가 리로드되게 하면 된다. 해결 방법router view에 key를 바인딩해주면 된다. key를 통해 경로 객체 속성을 강제로 연결 시켜주는데, 보여지는 화면에 쿼리 및 해시가 포함된 전체 url을 연결하여 쿼리스트링이 변경될..
[Three] Error: Relative references must start with either “/”, “./”, or “../” 문제 발생처음 three js 를 이용하여 npm i three해서 다운 받아서 아래처럼 import를 하였는데 제목 처럼 해당 오류가 발생하였다.import * as THREE from "three"; 문제 해결index.html에 직접 three 공식 홈페이지에서 모듈을 가져올 수 있게 지정을 해주니깐 제대로 작동하였다. 참고자료 Error: Relative references must start with either "/", "./", or "../"Hi, I’m not using CDN as well, I was looking for an answer. Are you using the full package from three.js downloads? if it is, can you show me..
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란?검색..
[Vue] v-html을 사용하면 안된다…?( vue-dompurify-html 변경, XSS공격) v-html이란?vue 템플릿 문법을 처리하지 않고 일반 HTML로 삽입되는 데, innerHtml을 업데이트하는 기능이라고 생각하면 된다.즉, 일반 텍스트가 아닌 HTML을 화면에 그리고 싶다면 사용하면된다.하지만, v-html은 신뢰할 수 있는 컨텐츠만 사용을 하고, 사용자가 제공하는 컨텐츠에는 사용하면 안되는데 html을 동적으로 렌더링하면 XSS공격으로 쉽게 이어질 수 있기 때문이다.XSS(교차 사이트 스크립팅)란?핵심: 웹사이트에 악성 스크립트를 주입하는 행위를 말한다.주요 목적: 사용자의 정보를 도용하는 것이다.공격자가 상대방의 브라우저에 스크립트가 실행되도록하여 아래와 같은 공격을 진행한다.사용자의 세션을 가로챈다.웹사이트를 변조한다.악의적인 콘텐츠를 삽입한다.파싱 공격을 진행하는 것을 말한..
동일한 영역을 차지하는 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..
chart.js 그래프 다시 그리기(그래프 초기화) 문제 발생chart.js를 이용하여 그래프를 제작하였다. 처음에는 그래프가 보이지 않고 해당 부분을 클릭을했을 때 chart가 보이게 제작을 하였는데, 처음에는 오류가 안뜨는데 chart가 보이는 부분을 다시 닫았다가 다시 열면 오류가 발생하였다. (오류 메시지를 캡처했어야 했는데 ... 캡처를 못했다)왜 이렇게 오류가 뜨는지 해결하려고 살펴보다보니, 처음에는 그래프가 그려지지만 다시 그리려고 하면 기존에 그래프가 있기 때문에 발생되는 오류 였다. 즉, 기존 그래프를 그렸다면 초기화를 하면 해당 문제를 해결할 수 있다. 문제 해결const chartStatus = Chart.getChart(ctx); if (chartStatus !== undefined) { chartStatus.destroy();..