반응형 JavaScript/Vue11 이미지 지연로딩 구현(Lazy Loading) 웹 페이지에 이미지가 많아지면 가장 먼저 체감되는 것은 로딩 속도 저하와 느린 사용자 경험이다.특히 모바일 환경에서는 초기 로딩이 길어질수록 이탈률도 크게 높아진다.이런 문제를 해결하기 위해 흔히 사용하는 기법이 바로 이미지 Lazy Loading이다. 나는 프로젝트에서 vue-lazyload@1.3.3 라이브러리를 도입하려 했지만,당시 구조적 제약 때문에 기본 디렉티브(v-lazy)를 그대로 사용할 수 없었다.그래서 결국 IntersectionObserver를 활용해 직접 Lazy Loading 디렉티브를 구현하게 되었고,오늘은 그 과정을 공유하려 한다. vue-lazyload의 기본 사용법일반적으로 지연 로딩은 vue-lazyload를 설치하면 간단히 사용할 수 있다.npm install vue-.. 2025. 9. 23. [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. [구축] vue, spring boot 병합 1. 서론이전 게시물에서는 front 단락을 서술한 vue.js프로젝트와 back 단락을 서술한 spring boot프로젝트를 구분하여 구축하고, 이 두 프로젝트를 연동하는 내용에 대해 정리하였다. 이번 게시물에서는 한개의 프로젝트에서 vue.js 기반의 front 코드와 spring boot 기반의 back코드를 다루며, 두 소스가 연결될 수 있도록 병합 처리하는 과정에 대해 다루어 볼 예정이다. 병합을 진행하려는 이유는 간단하다. 프로젝트가 두개로 구분되면 개발 및 배포 작업을 위해서 두개의 디렉토리에 접근해야하는 부분이 번거롭다고 느껴졌기 때문이다. 규모가 작은 소스들이기 때문에 별도로 구분하는게 더 비효율적인 것 같다는 단순한 생각에서 출발한 작업이다. chatGPT 피셜 해당 작업에 대한 장단점.. 2024. 6. 4. [v-model] 자동 바인딩 : input입력 값 변수에 자동 저장하기 이 게시물에서는 v-model을 활용하여 사용자가 input에 입력한 내용을 변수에 자동으로 바인딩하는 방법에 대해 다룬다. 목차는 아래와 같이 하였다.1. v-model?2. 예시3. 번외 1. v-model?v-model은 데이터 바인딩을 쉽게 구현할 수 있도록 vue에서 제공하고 있는 디렉티브이다. 데이터 바인딩이 무엇이냐? binding은 묶다, 결박하다 등의 의미로 사용되는 영단어이다. data binding이라 하면 쉽게 말해, 화면 요소와 객체 데이터를 묶어서 동기화 시키는 기법이라고 설명할 수 있다. 어떠한 상태 변화에 따라 화면이 실시간으로 자동 업데이트 되어야한다거나, 사용자에게 실시간으로 반응하는 어플리케이션이 필요하다거나 등의 여러 상황에서 데이터 바인딩이 활용된다. 특정 데이터.. 2024. 4. 25. [axios] API 호출하기 전에 업로드 했던 포스팅에서 vue프로젝트와 spring boot로 생성한 api프로젝트를 연동하는 작업까지 마치었고, 이제 직접 api로 반환받은 데이터를 vue프로젝트에서 접근할 수 있도록 통신하는 작업에 대해 정리해보았다. 목차는 아래와 같다. 01. axios란? 02. 연동 예시 01. axios란? 일반적으로 node.js에서 api통신을 하기 위해 사용하는 라이브러리이다. javascript에서는 유사한 동작을 하기 위해 ajax를 활용하였다면, vue나 react등에서는 axios를 활용하여 api 통신 작업을 한다고 이해하면 된다. 02. 연동 예시 axios 설치 더보기 이 라이브러리를 사용하기 위해서는 우선적으로 설치 작업을 진행해야 한다. 설치를 위한 방법은 한가지 이상인데, 본인의.. 2023. 3. 30. Vue 기초 지식 vue로 간단한 UI를 만들어보면서, 본인을 기준으로 알아두면 좋을 기초 지식들을 정리해 보았다. 01. Vue 구조 02. v-bind 03. v-on 04. v-for 05. v-if / v-show 06. 이미지 삽입 01. Vue 구조 대뜸 생성해버린 프로젝트가 어떤 생김새로 이루어진건지 간단히 알아볼 필요가 있다. 기본 생성 파일 중 앞으로 주의깊게 다룰 파일은 main.js와 App.vue가 아닌가 싶다. ① main.js import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app'); 해당 프로젝트가 실행되면 기본으로 app.vue파일을 호출하는 것으로 해석된다. ② App.vue 안에 기본으로 .. 2023. 3. 28. 이전 1 2 다음 반응형
