전체 글 25

[React] cannot read properties of undefined (reading '컬럼명') 오류

문제 : cannot read properties of undefined(reading '컬럼명') {e.컬럼명1} {e.컬럼명2} {data[i+1].컬럼명1} {data[i+1].컬럼명2} data[i+1].컬럼명에서 에러 발생 데이터가 아직 들어오직 않았거나, 데이터를 변경되는 시점에 렌더링이 실행되어 i+1에 있어야 할 데이터가 undefined로 정의되어 오류 발생 문제 해결 : && 를 이용하여 해결 { data[i+1] && ( {data[i+1].컬럼명1} {dadta[i+1].컬럼명2} ) } { true && expression } 은 항상 expression { false && expression }은 항상 false

React 2023.09.07

[React, Spring Boot] 파일 다운로드(Blob)

파일 다운로드 : DB에 있는 원본 BLOB 데이터를 가져와 화면에서 다운로드 React const downloadFile = async (event, doc) => { event.preventDefault(); const downloadUrl = '다운로드 url' const result = await axios.get(downloadUrl, {responseType : 'blob'}) // responseType 중요 let blob = new Blob([result.data], { type: result.headers['content-type'] }) let link = document.createElement('a') link.href = window.URL.createObjectURL(blob)..

React 2023.09.07

[Vue] v-if 사용하여 요소 보이거나 숨기게 하기

VueJS에서 엘리먼트, 컴포넌트 등을 숨기는 방법은? 일반적으로 가장 많이 사용되는 방법은 v-if 그리고 v-show를 사용하는 방법입니다. 간단하고 빠르게 적용할 수 있기 때문입니다. 그런데 이 둘 중 어떤 것을 사용해야 할까요? v-if 그리고 v-show의 차이점은? 이 둘의 공통점은 둘 다 동일한 기능으로 숨기거나 보여준다는 점이지만 기능 구현에 큰 차이점이 있습니다. 가장 큰 차이점은 실제 DOM을 그려주느냐의 여부에 따라 차이가 있습니다. 예를들어 v-if는 DOM 영역에 실제로 그려주지 않는 방법을 사용하고 이와 달리 v-show는 단지 css style의 display: none을 사용하여 보여주지만 않는다는 차이가 있습니다. 이런 이유로 보여주거나 숨기는 액션을 반복해야한다면 v-sh..

Vue 2020.08.27