반응형 JavaScript36 [Vue] 파일 업로드 net::ERR_UPLOAD_FILE_CHANGED 오류 해결 vue 프레임워크로 개발을 진행하면서, 파일 업로드 기능을 구현하게 되었다. 이때 마주한 net::ERR_UPLOAD_FILE_CHANGED오류를 해결한 과정에 대해 포스팅 해보았다. 목차 ❓ net::ERR_UPLOAD_FILE_CHANGED 오류란?net::ERR_UPLOAD_FILE_CHANGED 오류는 브라우저가 사용자가 선택한 파일이 업로드되기 전에 변경되었거나, 더 이상 유효하지 않다고 판단할 때 발생한다.이 오류는 주로 다음과 같은 상황에서 발생한다.같은 파일을 다시 선택했지만 요소의 값을 초기화하지 않았을 때파일을 선택하자마자 너무 빨리 초기화 코드를 실행했을 때Vue, React 등 SPA 환경에서 HMR(Hot Module Replacement)로 인해 컴포넌트가 리렌더링되며 참조.. 2025. 4. 22. [지도 lib] 바람 자료 GIS상 애니메이션 표출(leaflet-velocity.js) 오픈소스 leaflet(지도 라이브러리), leaflet-velocity.js를 활용하여 바람자료(풍향, 풍속)을 애니메이션 시각화 하는 방법에 대해 정리해보았다. 목차 필요 리소스 참조leaflet.css, leaflet.js, leaflet-velocity.js의 참조가 필요하다.CDN 방식을 위해서는 아래와 같이 내부에 선언해주면 된다. 혹여 파일 첨부 방식이 필요한 경우에는 아래의 파일을 사용하여 리소스를 참조하여 활용할 수 있다. 지도 초기화css 소스html, body, #map { height: 100%; margin: 0; padding: 0;} html 소스 js 소스// 중심좌표 및 zoom레벨 설정(서울 기준)const map = L.map('map.. 2025. 4. 17. [지도 API] leaflet-rotate.js 지도 회전 지도 오픈소스 라이브러리인 leaflet.js를 활용하여 개발을 진행하던 중, 지도를 회전해달라는 요구사항을 받게 되었는데해당 기능을 구현하기 위한 추가 모듈을 찾던 중 leaflet-rotate.js를 알게 되어 사용 방법에 대해 포스팅해보았다. 목차 leaflet-rotate.jsleaflet.js 기반의 맵 상에서 객체 활용만으로는 지도의 회전은 불가능하다. 하지만 그런 기능의 수요는 있고, 그 수요를 위한 공급이 바로 leaflet-rotate.js이다. 말보다는 직접 데모를 확인해 보는 것이 빠르다. https://raruto.github.io/leaflet-rotate/examples/leaflet-rotate.html leaflet-rotate.jsFly to bounds: CIRCL.. 2025. 3. 18. [지도API] Leaflet, 기준 좌표의 반경 polygon 생성 해당 게시물에서는 지도 API인 Leaflet을 활용하여, 기준 중심좌표로부터 일정한 반경으로 둘러싸는 사각형을 그리는 방법에 대해 정리해보았다. 목차 결과 예시간단하게 codePen을 활용하여 표출을 진행해보았다. See the Pen 특정좌표의 반경 polygon by HamJeong (@HamJeong) on CodePen.">See the Pen 특정좌표의 반경 polygon by HamJeong (@HamJeong) on CodePen. html코드와 css코드는 특별한 구간이 없기 때문에 javascript 코드를 첨부해보았다(가독성과 추가 설명을 위해 일부 첨삭함)var domainAddr = 'https://tiles.osm.kr'; //map layer 도메인con.. 2025. 1. 10. [차트API] highcharts wind barb(바람 깃) 그리기 해당 포스팅에서는 상단 이미지 예시와 같이, 풍속 값을 기반으로 하여 바람 깃 자료를 svg형태로 그려내고 풍향 값을 참고하여 해당 svg를 회전시켜 wind barb를 highcharts 내 표출하는 방법에 대해 다루었다. 목차는 다음과 같이 하였다.1. wind barb 정의 1) 바람 깃 svg 처리 메서드 2) svg 적용 메서드 3) 로드 예시2. highchart 표출3. 구현 예시 1. wind barb 정의바람 깃 생성을 위해 연관 작업을 처리하는 메서드를 3개로 나누어 작업하였다. 아래 목록화 된 목차 제목이 각 메서드 대한 내용이며, 연계처리하여 load메서드 실행->바람 깃 생성->바람 깃 svg 생성 순으로 호출되도록 하였다. 즉, 차트 객체 정의 혹은 차트 생성 시, .. 2024. 11. 25. [JS] 타임 슬라이더 구현(자동 스크롤) 해당 게시물은 위 예시 이미지 설명에서 언급한 바와 같이, 타임슬라이더를 생성하고 '이전', '다음' 버튼을 통해 슬라이더를 컨트롤 하는 기능을 생성함과 더불어 해당 기능 동작 시, active상태의 요소가 사용자에게 보여지는 부모요소 사이즈 내에 항상 표출될 수 있도록 자동 스크롤 기능을 덧붙이는 코드에 대한 예시에 대한 정리 글이다. 구현을 위한 코드 예시는 아래와 같다. See the Pen 자동 스크롤 타임슬라이더(이전/다음) by HamJeong (@HamJeong) on CodePen.">See the Pen 자동 스크롤 타임슬라이더(이전/다음) by HamJeong (@HamJeong) on CodePen. 위 예시 코드를 직접 동작해보면 알 수 있다 시피, '이전', '다음' 버.. 2024. 11. 25. 이전 1 2 3 4 ··· 6 다음 반응형
