본문 바로가기

개발 공부

 (19)
[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..
[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();..
타입스크립트에서 type과 interface는 언제 사용해야하지? type과 interface의 차이점interface객체 상속을 지원하며 캐싱의 장점이 있다.인덱스 시그니처를 암무적으로 가진다.type모든 유형의 타입을 정의할 수 있고, 중복 정의 문제가 발생하지 않는다.인덱스 시그니처를 가지지 않는다.재선언 불가(const 키워드의 역할)객체 상속을 사용할 때는 interface를 활용하자interface를 이용하여 객체 상속이름을 기반으로 정보를 내부 레지스트리에 캐싱할 수 있어, extends를 사용할 때는 캐싱의 장점을 활용할 수 있다.interface WithId { id: string}interface User extends WithId { name: string}const user: User = { id: '0623', name: 'chanmin'..
[우타스 스터디] 2장 타입 타입이란 자료형으로서의 타입 개발자는 타입을 사용해서 값의 종류를 명시할 수 있고 메모리를 더욱 효율적으로 사용할 수 있다. 값의 크기를 명시하면 컴퓨터가 값을 참조할 때 한 번에 읽을 메모리 크기를 알 수 있어 값을 훼손하지 않고 가져올 수 있다. 집합으로서의 타입 컴파일러는 값이 어떤 일을 할 수 있고, 어떤 일을 할 수 없는지 사전에 알 수 있다. 유효한 값의 범위를 제한해서 런타임에서 발생할 수 있는 유효하지 않는 값에 대한 에러를 방지한다. 정적타입과 동적 타입 정적 타입 동적 타입 실행 시점 컴파일 타임 런타임 개발자 타입 명시 O X 에러 발견 시점 컴파일 타임 타입 에러 발견 프로그램 실행 시 타입 에러 발견 이점 안정성 보장 개발 과정에서 에러 발생 없음 더보기 - 컴파일타임이란? 기계(..
[React] useCallback은 무엇일까? useCallback은 리렌더링 사이에 함수 정의를 캐시할 수 있게 해주는 React 훅입니다. 즉, 함수가 정의되고, 리랜더링이 일어나고 의존성 배열이 바뀌지 않는다면 함수는 새로 만들어지지 않고 기존의 함수가 반환됩니다. 사용법 import { useCallback } from 'react'; function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]); // ... - 리렌더링 사이에 캐시할 함수, 함..
[React] useEffect()를 제거해보자! effect를 제거했을 때 이점 코드를 더 쉽게 따라갈 수 있고, 실행 속도가 빨라지며, 오류 발생 가능성이 줄어든다. 불필요한 Effect를 제거하는 방법 1. 렌더링을 위해 데이터를 변환하는 경우 - 렌더링 과정: React는 먼저 컴포넌트 함수를 호출해 화면에 표시될 내용을 계산한다 -> 화면 업데이트 -> Effect 실행 - Effect를 이용하여 state를 즉시 업데이트 한다면, 전체 프로세스가 처음부터 다시 시작된다. - 즉, 불필요한 렌더링이 발생한다. - 해결법: 데이터 변환을 컴포넌트 최상위 레벨에서 진행하면, props나 state가 변경될 때 해당 코드가 다시 실행된다. 2. 사용자 이벤트를 처리하는 경우 - 이벤트 핸들러를 제작할 경우 어떤 일이 일어나는지 정확하게 알 수 있지만..

티스토리툴바