본문 바로가기

개발 공부/Vue

(5)
AOS 뒤로가기 버튼 클릭시, 해당 모달 닫히게 설정 문제 발생 및 원인웹뷰를 만들어서 native랑 연결하는 서비스를 만들었는데, 모달이 켜진 상태에서 AOS의 뒤로가기 버튼을 누르면 어플이 나가지는 현상을 발견하였다.(safari도 뒤로가기 버튼 작동 문제 발생)그리고, 다른 페이지로 이동 한 후 모달을 클릭 한 후 뒤로가기 버튼을 누르면 모달만 보이고, 안에 페이지들만 뒤로가게 작동이 되었다. 사실, 조금만 생각해보면 모달로 만들어지다보니, 뒤로가기 버튼을 누르면 당연히 페이지들만 이동이 된다.해결 방안 1현재 발생되는 모달은 header에서 파생된 모달들인데, 더보기 메뉴, 검색 메뉴, 알림 메뉴 등이 모달로 만들어져있다. 아무래도 pc가 모달로 구성되어 있고 모바일까지 반응형으로 만들다 보니, 당연스럽게 모바일에서도 해당 메뉴들을 모달로 구현을 했..
메뉴 클릭 시, 해당 화면으로 스크롤 이동하는 기능 (feat. 클릭 두번하면 처음 화면으로 돌아가는 문제 해결) 문제 발생메뉴 클릭 시 , 해당 화면으로 스크롤 이동하는 기능을 만들고 있는데, 메뉴를 처음 클릭 시에는 알맞는 화면으로 이동하는데, 다시 클릭하면 처음 메뉴 화면으로 이동한다. (참고로 메뉴 바는 상단에 고정되어 있다) 해당 화면으로 스크롤 이동 기능처음에는 메뉴 클릭시, 해당 화면으로 이동할 수 있게 스크롤 기능을 구현하였다. 해당 tab에 대한 내용을 id로 설정했고 그 id에 맞는 화면으로 부드럽게 이동하려고 로직을 구현하였다. 하지만 위에 처럼 해당 문제가 발생하였다.const movetToContent = (tab: string) => { const target = document.getElementById(tab)?.offsetTop ?? 0; const headerHeight = docum..
[Vue]공통 컴포넌트로 내용이 다른 게시물로 이동시, 해당 내용이 안 보여지는 현상 문제 발생메뉴에서 서로 다른 게시물로 이동하면, 첫번째 눌렀던 게시물은 잘 이동되지만, 그 상태에서 두번째 게시물로 위 링크는 바뀌지만 해당 내용은 안 바뀌는 모습을 발견 할 수 있었다. /Detail/34/Detail/45문제 원인라우터 뷰가 동일한 컴포넌트를 보여주고 있다고 인식하기 때문이다. 즉 공통 컴포넌트를 제작하였기 때문에 보여주는 데이터와 별개로 동일한 컴포넌트를 보여주고 있다고 인식을 하는 것이다. 이런 문제를 해결하기 위해서 키를 사용하여 경로값을 변경해주면 구성요소가 리로드되게 하면 된다. 해결 방법router view에 key를 바인딩해주면 된다. key를 통해 경로 객체 속성을 강제로 연결 시켜주는데, 보여지는 화면에 쿼리 및 해시가 포함된 전체 url을 연결하여 쿼리스트링이 변경될..
[Vue] v-html을 사용하면 안된다…?( vue-dompurify-html 변경, XSS공격) v-html이란?vue 템플릿 문법을 처리하지 않고 일반 HTML로 삽입되는 데, innerHtml을 업데이트하는 기능이라고 생각하면 된다.즉, 일반 텍스트가 아닌 HTML을 화면에 그리고 싶다면 사용하면된다.하지만, v-html은 신뢰할 수 있는 컨텐츠만 사용을 하고, 사용자가 제공하는 컨텐츠에는 사용하면 안되는데 html을 동적으로 렌더링하면 XSS공격으로 쉽게 이어질 수 있기 때문이다.XSS(교차 사이트 스크립팅)란?핵심: 웹사이트에 악성 스크립트를 주입하는 행위를 말한다.주요 목적: 사용자의 정보를 도용하는 것이다.공격자가 상대방의 브라우저에 스크립트가 실행되도록하여 아래와 같은 공격을 진행한다.사용자의 세션을 가로챈다.웹사이트를 변조한다.악의적인 콘텐츠를 삽입한다.파싱 공격을 진행하는 것을 말한..
chart.js 그래프 다시 그리기(그래프 초기화) 문제 발생chart.js를 이용하여 그래프를 제작하였다. 처음에는 그래프가 보이지 않고 해당 부분을 클릭을했을 때 chart가 보이게 제작을 하였는데, 처음에는 오류가 안뜨는데 chart가 보이는 부분을 다시 닫았다가 다시 열면 오류가 발생하였다. (오류 메시지를 캡처했어야 했는데 ... 캡처를 못했다)왜 이렇게 오류가 뜨는지 해결하려고 살펴보다보니, 처음에는 그래프가 그려지지만 다시 그리려고 하면 기존에 그래프가 있기 때문에 발생되는 오류 였다. 즉, 기존 그래프를 그렸다면 초기화를 하면 해당 문제를 해결할 수 있다. 문제 해결const chartStatus = Chart.getChart(ctx); if (chartStatus !== undefined) { chartStatus.destroy();..