Axios로 REST API를 연동하고 있다. 로그인 후 새로운 토큰을 받았지만 API호출 시 해당 토큰이 header에 실리지 않아 [그림 1]과 같이 401 에러와 함께 로그인 화면으로 리다이렉션 되어 버렸다. 기존에 interceptors에 response 코드만 적용했었던 것이 문제였다. 따라서 request 할 때 토큰을 실어 보내는 아래의 코드를 추가하여 문제를 해결할 수 있었다. instance.interceptors.request.use( function (config) { console.log('config : ', config) config.headers.Authorization = `Bearer ${localStorage.getItem('jwt')}` return config }, f..

[그림 1]과 같이 3개의 셀렉트박스(select)를 이용한 조회 로직을 구현하고자 하였다. 구현한 코드는 아래와 같다. data() { return { searchKeywords: ['total', 'total', 'total'], searchStaticKeys: ['facility.name', 'manhole.name', 'sensor.name'] } }, doSearch() { this.alarms = [] let tempArr = [...this.alarmsTotal] // 조회 대상이 되는 전체 데이터를 tempArr 배열에 할당 for (let i = 0; i < this.searchKeywords.length; i++) { if (this.searchKeywords[i] === 'total'..

1. 동적 데이터 바인딩 가능한 커스텀 오버레이(마커) 구현 카카오 지도 API를 이용해 서비스를 구현 중이었는데 마커에 동적인 데이터 바인딩이 필요했다. 또한 마우스 호버, 클릭 이벤트에 대해서도 각각 다른 애니메이션을 보여 주어야 했다. [그림 1]은 노멀 상태에서는 circle 애니메이션, hover 시에는 circle + spinner 애니메이션, clicked 시에는 spinner 애니메이션이 적용된 커스텀 오버레이이다. [그림 1]을 구현하기 위해 HTMLElement를 이용했다. 카카오 지도 API에서는 Vue의 데이터 바인딩 처리가 되지 않았기 때문이다. 구현 코드는 다음과 같다. 1. template 2. script 3. style *2024-03-05 추가 2. 클릭 이벤트 시 커스텀..

a 태그에 @click를 적용하여 Carousel을 사용한 페이지로 이동하였는데 Carousel 슬라이드가 작동하지 않는 문제가 생겼다. 해당 페이지의 주소창에서 엔터키를 치면 정상적으로 작동하는 것으로 보아 Carousel의 문제는 아닌 듯했다. 그래서 a 태그에 @click 대신 href에 해당 페이지의 라우터를 넣어주었다. 그랬더니 페이지 이동 즉시 Carousel의 슬라이드가 작동했다. Carousel은 아래의 부트스트랩을 사용했다. https://getbootstrap.com/docs/5.3/components/carousel/ Carousel A slideshow component for cycling through elements—images or slides of text—like a ca..

computed에 실시간으로 변경되는 데이터를 가공하는 코드를 작성하던 중 자주 만나게 되는 에러였다. 호출한 배열의 값이 없는 상태에서 특정 인덱스를 지정한 경우에 발생했다. 웹 애플리케이션이 작동하지 않는 것은 아니나 콘솔창이 계속 이런 에러를 뱉어 내지 여간 거슬리지 않을 수 없다. 조건문을 사용해 해결했는데 방법은 다음과 같다. if (gidManhole.length === 0) { return } gidManhole는 진행 중인 프로젝트에서 사용한 배열명이다. gidManhole 배열에 값이 없으면 아얘 다음 코드로 진행하지 못하도록 처리한 것이다.

Error: PostCSS received undefined instead of CSS string github에서 pull 한 Vue.js project의 모듈을 설치하기 위해 npm install 했다. 그런 후 npm run serve로 project를 실행했는데 발생한 에러였다. sass 관련 에러라서 해당 sass-loader을 uninstall 한 후 "npm install sass-loader"했는데 문제가 해결되지 않았다. npm install --save-dev node-sass sass-loader 결론적으로 "npm install sass-loader"가 아니라 "npm install --save-dev node-sass sass-loader"로 node-sass, sass-loade..

당신이 잘 모르는 8가지 HTML 팁 여러분의 마음을 사로잡을 HTML 팁 모음입니다! 1. 장치 카메라를 여는 캡처 속성 input 태그에 이메일, 문자, 비밀번호 등의 속성이 있는 것처럼 모바일 기기의 카메라를 열어 이미지를 캡처하는 속성도 있습니다. 이것은 두 가지 값을 가질 수 있는 capture속성으로 수행됩니다. 전면 카메라 사용자 후면 카메라 환경 2. 웹사이트 자동 새로고침 head태그에서 일정 시간이 지나면 웹사이트가 새로고침 되도록 설정할 수 있습니다! 이 스니펫은 10초마다 웹사이트를 새로고침 합니다. 3. 맞춤법 검사 활성화 HTML spellcheck 속성을 사용하고 이를 true로 설정하여 활성화할 수 있습니다. lang속성을 사용하여 사용할 언어를 지정합니다. 표준 속성이며 모..

1. CORS 위반 Spring boot로 만들어진 API 서버가 121번으로 시작하는 주소를 가지고 있고, 제작 중인 Vue.js 프로젝트에서 해당 주소로 API를 요청하는데 발생한 에러이다. POST 메서드로 로그인 API를 호출하면 아래와 같은 정보가-잘-날아온다. { "username": "admin", "token": "블라블라", "idx": 1 } 문제는 해당 토큰을 Headers에 실어서 다른 API를 호출하면 어김없이 [그림 1]과 같은 cors 위반 에러가 발생한다는 것이다. CORS(교차 출처 리소스 공유 : Cross-Origin Resource Sharing, CORS)는 브라우저가 담당하는 정책이다. 데이터의 출처가 상이한 경우에 발생한다. 제작 중인 Vue.js 프로젝트는 12..