본문 바로가기

vue25

[vue + 무한 스크롤] 무한 스크롤 구현

사용 기술 Javascript Intersection Observer(iob) iob는 사용자가 감시하고자 하는 페이지의 요소가 브라우저와 교차되는 정도를 관찰하고, 설정 비율 이상의 교차가 일어났을 때 실행되야 하는 콜백함수를 등록할 수 있는 객체이다. 사용법 const iob = new IntersectionObserver((entries) => { if (entries.isIntersecting) { // 실행 로직 } }, { //options }); 무한스크롤을 구현하면서 고려해야할 사항 1. 마운트될 때 한 번 실행해버리는 경우가 있음. 방법1. entries.isIntersecting === true 인 경우에 실행로직을 작성하면 된다. 2. 다시 위로 올라가면, 중복되서 페이지네이션을 요청.. 2022. 5. 20.

[Vuejs] 엔터로 서브밋 보내기

2022. 5. 11.

[Nuxtjs&Vuejs]AWS S3 업로드한 파일 브라우저에서 다운로드 버튼으로 다운로드 하는 기능 만들기

요규사항 사용자가 s3에 업로드한 파일을 브라우저 상에서 버튼을 클릭해서 다운로드 Vue 컴포넌트 파일 구현 코드 html 저장 · 다른 이름으로 저장 script export default ({ // ... async mounted() { await fetch(this.feedback.attachment, { method: 'GET' }) .then(res => { return res.blob(); }) .then(blob => { const url = window.URL.createObjectURL(blob); this.$refs.save.href = url; }); }, }) 2022. 4. 15.

[Vue2 + SASS] 전역으로 SCSS 적용하기

1. sass, sass 설치 npm i -D sass sass-loader 2. scss 파일 작성 /src/assets/scss/_variables.scss /src/assets/scss/base.scss /src/assets/scss/reset.scss 3. vue.config.js 작성 module.exports = { css: { loaderOptions: { sass: { data: ` @import "@/assets/scss/_variables.scss"; @import "@/assets/scss/reset.scss"; @import "@/assets/scss/base.scss"; ` } } } } 4. 세팅할 때 에러 Sass Loader has been initialized using a.. 2021. 12. 11.

[Vue Test Utils] Vue 테스트 코드 작성 방법1️⃣- 테스트 환경 설정 및 간단한 테스트 코드 작성 방법

개요 프로그램은 테스트가 가능하게 개발되어야 합니다. 프로그램이 개발만 되고, 자신이 작성한 코드 기능을 증명할 수 없다면 완전이 개발된 프로그램이 아닙니다. 제가 담당하는 제품은 테스트 코드가 전혀 작성되지 않았습니다. 이제서야 테스트 코드를 작성하기 시작하려고 하고 있습니다. 팀에 테스트 코드를 작성하는 문화?가 없고, 개발만 하기 때문에 이번 이 글을 통해서 웹 테스트 코드를 작성하는 방법을 공유해보려고 합니다. 목표는 올 해 안에 테스트 커버리지 80%를 달성하는 것입니다. 사용 라이브러리 제품이 vue 2 로 개발되어 있습니다. 라이브러리 설명 jest@27.0.6 vue-jest@3.0.7 Vue 파일을 Jest가 실행할 수 있는 자바스크립트로 컴파일을 합니다. @vue/test-utils@1.. 2021. 8. 5.

[Chart.js] Vue에서 사용하기.

안녕하세요. 회사에서 외주로 맡겼던 제품코드를 보면서, Chart.js라는 라이브러리를 처음 접하게 되었습니다. 기존에는 apex chart를 제품에 사용하고 있었습니다만, chart.js 또한, 커스텀이 광범위하게 가능하다는 점에서 많이 사용하고 있는 것 같더라구요. 그래서, chart.js를 사용해서 실제 작업 중인 프로젝트에 처음 적용해보면서 공부한 내용을 정리해보고자 합니다. 제가 chart.js로 프로토타입은 만든 결과는 다음과 같습니다. Chart 만들기 Vue 프레임워크에 chart.js를 사용해서 chart를 화면에 그리는 과정을 설명한 글입니다. 일단, 공용으로 여러 컴포넌트에서 재사용할 수 있도록, 파일 구성을 다음처럼 구성했습니다. 📂src | - 📂Modules |- 📂LineCha.. 2021. 7. 26.

[Vue] Vuetify 템플릿 적용 개발 팁

개요 제가 실제 업무에서 담당하는 제품의 스타일 작업은 scss로 개발되었습니다. 전부요. style 코드가 script 코드보다 많은 컴포넌트 파일도 많았습니다. 유지보수에 적합하지 않다고 생각했습니다. 그래서, components 템플릿을 찾아서 사용하면서, 템플릿의 장점과 사용방법을 공유하려고 합니다. 직접 css로 style 작업 Vuetify 템플릿 사용 장점 🤔. - 개발 생산성 증가. 빠르게 개발 가능. - UX 좋아짐. - css 코드를 작성할 일이 거의 없음. 유지보수 관리에 좋음. - 얼마든지 디자인 요구사항대로 커스텀 가능. - 정적 파일 img를 사용하지 않고, icon을 넣을 수 있음. 단점 - 개발을 할 때, 작업 시간 많이 걸림. - css 코드가 많아져서 관리에 어려움. - .. 2021. 7. 18.

[vue][업무] 404 페이지 만들기

404페이지로 redirect하기 위해서는 router 설정이 필요합니다. 등록된 vue-router 설정 이외의 경로로 요청이 오면, 지정된 페이지로 요청이 가도록 해야 합니다. 저희 제품은 사용자에게 없는 경로임을 알려주기 위해서 404페이지로 redirect 되도록 했습니다. 📂 router/index.js { path: '*', redirect: "/404" // 아래처럼 바로 NotFound 경로를 매칭해도 됨 // component: NotFound }, 2021. 7. 15.

[Vue] life cycle

Vue life cycle Vue.js 라이프사이클은 Vue 인스턴스가 생성되는 것부터 인스턴스가 소멸되는 것까지의 과정입니다. Vue 라이프 사이클이 실행되는 경우는 다음과 같습니다. - Vue 인스턴스가 생성돼서 DOM에 마운트되는 경우 - 데이터가 변경되서 DOM을 업데이트하는 경우 Vue.js 라이프 사이클은 여러 단계가 정의되어 있습니다. 그리고 각 단계마다 사용자가 정의한 로직을 실행하는 주체가 있습니다. 이를 '훅'이라고 합니다. Vue.js 공식문서에서는 '인스턴스 라이프사이클 훅'이라고 정의하고 있습니다. 인스턴스 라이프사이클 훅 Vue.js 라이프 사이클은 여러 단계를 순서대로 실행합니다. 각 단계마다 호출되는 훅이 있습니다. 주요 훅은 created, mounted, updated, .. 2021. 5. 12.

[vue.js] vue-router 튜토리얼 -1

개요 jquery나 pure js로 개발된 페이지는 사용자가 매 번 요청하는 경로가 달라지면, 서버에서 페이지 자원을 다시 받아오게 됩니다. 받아오는 동안에도 시간이 걸리기 때문에 화면이 번쩍하면서 랜더링이 됩니다. 반면어 spa는 사용자가 처음 애플리케이션에 접속할 때 보내는 서버 요처으로 애플리케이션에 필요한 자원을 모두 받아옵니다. 사용자가 경로를 다르게 요청하면, 서버에 다시 페이지 자원을 요청하지 않습니다. 처음에 받아온 script 파일로 동적으로 페이지를 변환합니다. 덕분에 서버는 해당 경로에 페이지에 필요한 데이터만 브라우저에 전송해 주면되므로, 서버에 부담이 덜 하게 됩니다. 그럼, 브라우저에서는 어떻게 동적으로 경로에 맞는 페이지를 랜더링해주는 걸까요? vue에서는 사용자가 요청한 경로.. 2021. 4. 13.

티스토리툴바