본문 바로가기

Study/Vue & Vuetify

(4)
Vuetify Infinity Scroll _ 무한 스크롤 Infinity Scroll _ 무한 스크롤 : 스크롤을 내려서 하단에 닿을 때마다 새로이 정보를 불러와 추가해주는 기능 구글링 찾은 코드 : codepen.io/mednabouli/pen/EdKzzL 코드도 간단해서 사용했는데 문제가 발생. 듀얼 모니터 사용 시, 주 모니터 화면을 기준으로 스크롤 위치를 잡아버림. 큰 모니터를 주로, 작은 모니터를 보조로 사용한 경우 같은 인터넷 창을 큰 모니터는 최하단을 1000으로 잡을 때, 작은 모니터는 999.xxx 식으로 잡히는 문제가 발생 (화면값+스크롤값을 더해도 전체 페이지 값을 넘지 못함) 간단하게 덧셈으로 값을 넣어줌 단순히 작은 편법으로 1만 넣어줘도 문제가 해결됐으나 휴대폰으로 화면을 열었을 경우 비슷한 문제 발생으로 값을 조금 더 크게 넣어주기로..
[에러이슈] Error: Rule can only have one resource source (provided resource and test + include + exclude) vue.js 사용 오류 INFO Starting development server... ERROR Error: Rule can only have one resource source (provided resource and test + include + exclude) in { "exclude": [ null ], "use": [ { "loader": "D:\\forTest\\vue-cli\\node_modules\\cache-loader\\dist\\cjs.js", "options": { "cacheDirectory": "D:\\forTest\\vue-cli\\node_modules\\.cache\\babel-loader", "cacheIdentifier": "5ee75e4e" }, "ident": "c..
Vue.js 배우기 기초이론 Lv.02 1. Vue CLI : Standard Tooling for Vue.js Development 명령어 실행/보조 도구 = 커맨드창/터미널 창에서 타이핑으로 명령어를 입력하면 실행해주는 도구 = 내부적으로 WebPack을 활용하며, Vue 프로젝트 생성, Vue 플러그인 설치/삭제 등을 명령어로 제공 1) 설치 & 프로젝트 생성 (기본셋팅환경- Node.js 설치완료 : Node.js 내의 npm(Node Package Manager)을 통해 vue-cli 패키지를 설치하므로) # npm(node pakage manager)은? : package.json 파일에 정의가 되어있는 scripts 아래 명령어를 간략하게 실행하기 위해 도와준다. -1. VSCode 메뉴바MenuBar에서 Terminal - ne..
Vue.js 배우기 기초이론 Lv.01 0. Setting ㅡ1) 설치 : Node.js (nodejs.org/ko/) : 이왕이면 왼쪽편의 확인된 버전으로 ㅡ2) 크롬 확장 프로그램 설정 : Vue.js dev tools (chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) ㅡ3) VSCode-Plug-in 설치 (추천) : VSCode로 학습 Vetur : vue를 쓰기 위해 필수 플러그인 Material Icon Theme : 아이콘 테마 플러그인 Night Owl : 화면 테마 플러그인 Live Server : 서버를 바로 돌릴 수 있는 플러그인 ESLint : 코드오류 잡아주는 플러그인 Prettier : 코드스타일을 정리해주는 플러그인 ..