Jessi :D

Language/Vue

Language/Vue

Vue - 무한 스크롤, Infinite Scroll

인피니트 스크롤 - Infinite Scroll, 무한 스크롤 IntersectionObserver - 생성한 인스턴스로 관찰자를 초기화하고 관찰할 대상을 지정 소스코드 // 로딩아이콘 - 관찰대상 #infinite-scroll(ref="infinitescroll") font-awesome-icon(:icon="['fas', 'spinner']" spin) methods: { fetchList() { let req = new Request(this.currentUrl); fetch(req) .then(res => { if (res.status === 200) { return res.json(); } }) .then(data => { this.nextUrl = data.next; }) .catch(erro..

Vue - scss 전역 스타일 사용하기

SCSS 전역 스타일 사용 ※ 테스트 버전 "vue": "^2.6.14" 사용 목표 변수 $ @mixin, @include '$'변 수사용 전역으로 설정해놓고 다른 파일에서 사용 // set $color: #3b3b3b; // use h3 { color: $color; } @mixin 사용 필요 sass, sass-loader 주의 vue 2.6.x에서는 sass-loader 10버전 이하를 사용해야 함. 최신버전으로 설치했더니 에러. (▼▼ 릴리즈 버전 확인은 페이지 하단 ▼▼) 사용예제 /* set */ @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius:..

Vue2에서 tailwindcss 사용

vue2에서 사용하는 방법 기록 이미 8버전이 설치되어 있는 경우 먼저 삭제 // uninstall npm uninstall tailwindcss postcss autoprefixer 설치 // install npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 23.4.12 기준 vue2 확인 "@tailwindcss/postcss7-compat": "^2.2.17", 설치 확인 됨 초기화 // init npx tailwindcss init -p 초기화를 하면 파일이 생성됨 /postcss.config.js /tailwind.config.js 최적화 postcss.config.js // postcss.config.js const au..

Vue - $route.path

router-view에 key를 바인딩 key를 통해 경로 개체 속성을 강제로 연결시킴 router-view(:key=".$route.path") 절대경로로 확인되는 경로를 다시 연결해 노출시킴 router-view(:key=".$route.fullPath") 보여지는 화면에 쿼리 및 해시가 포함된 전체 URL을 연결해 쿼리스트링이 변경되면 페이지를 리로드해서 노출시키는 방법 $route.path 유형 string 항상 절대경로로 확인되는 현재 경호의 경로와 동일한 문자열 $route.params 유형 Object 동적 세그먼트 및 스타 세그먼트의 키/값 쌍을 포함하는 개체 매개 변수가 없으면 값은 빈개체 $route.query 유형 Object 쿼리 문자열의 키/값 쌍을 포함하는 개체 $route.me..

Vue - 404 Page 페이지 만들기

404 Redirect 존재하지 않는 경로가 있다면 404페이지로 리다이렉트하는 방법 페이지 생성 컴포넌트로 사용할 페이지를 임폴트 import PageNotFound from '@/views/PageNotFound.vue' Vue 2.x const routes = [ { path: '*', redirect: "/404" }, ]; 혹은 const routes = [ { path: '*', component: PageNotFound }, ]; Vue 3.x export const constantRoutes = [ { path: "/:pathMatch(.*)", redirect: "/404", }, { path: "/404", component: PageNotFound, meta: { title: "Pag..

Vue3 V-Calendar 사용법

설치 vue3 사용 npm i v-calendar@next https://vcalendar.io/ Introduction | V-Calendar Custom Calendars Roll your own calendars using scoped slots Sun Mon Tue Wed Thu Fri Sat vcalendar.io main.js import "v-calendar/dist/style.css"; import VCalendar from "v-calendar"; app.use(VCalendar, {}); use v-date-picker // option v-date-picker(v-model="date" is-expanded is-range color="orange")

Vue - 기본

Instance 뷰 개발 시 생성해야하는 필수 코드 인스턴스 생성시 Vue 개발자 도구에서 Root 컴포넌트로 인식 el: app이라는 ID를 가진 태그를 찾아서 인스턴스를 붙여준다. 태그에 인스턴스를 붙여주면 view의 기능과 속성을 조작 가능 data: 뷰의 반응성(Reactivity)이 반영된 데이터 속성 template : 화면에 표시할 요소 (HTML, CSS 등) methods : 화면의 동작과 이벤트 로직을 제어하는 메서드 created : 뷰의 라이프 사이클과 관련된 속성 watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성 Components 코드 재사용 전역 컴포넌트, 지역 컴포넌트 하나의 인스턴스에 컴포넌트를 붙이는 방식으로 서비스 구현 통신..

Vue - 사이트를 Github Pages에 배포하기 방법2

기본 셋팅 후 깃허브에 파일을 업로드 한 다음 과정. 파일수정 vue.config.js 파일 수정 module.exports = { publicPath: process.env.NODE_ENV === "production" ? "/vue-page/" : "/", outputDir: "docs", }; publicPath: process.env.NODE_ENV === "production" ? "//" : "/", npm run build "docs" 폴더가 생겼으면, 푸시한다. 참고 https://cli.vuejs.org/config/#target-browsers Configuration Reference | Vue CLI Configuration Reference Global CLI Config Some..

Vue - 사이트를 Github Pages에 배포하기 방법1

Vue.js로 만든 사이트를 다른사람도 볼수 있도록 배포를 해보자. Point. vue파일들을 그대로 올리는 것이 아니고, build를 실행해서 생성된 파일을 올려야 한다. 깃허브 로그인 https://github.com/ GitHub: Let’s build from here GitHub is where over 83 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat... github.com 깃허브에 로그인하자. 페이지생성이 아직 안되어있으면 Pa..

Vue - 서버 시작 에러

에러메시지 서버를 실행하려고 'npm run serve'를 입력했늗네 에러가 나올 때, npm ERR! code ENOENT .npm ERR! enoent This is related to npm not being able to find a file. 에러메시지 내용 npm ERR! code ENOENT npm ERR! syscall open npm ERR! path D:\*****\package.json npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, open 'D:\*****\package.json' npm ERR! enoent This is related to npm not being able to find a file..

Vue - 버전 확인하기

버전 확인하기 터미널에서 확인 npm list vue 크롬에서 확인 확장 프로그램이 설치되어 있으면 크롬에서 확인할 수 있다. 도움 사이트 Chrome 웹브라우저 설치 Chrome 웹브라우저 더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게. www.google.com Vue.js devtools - 디버깅 도와줌 Vue.js devtools Browser DevTools extension for debugging Vue.js applications. chrome.google.com

CLI 설치, 버전 바꾸기

CLI vue 터미널 명령어를 사용하기 위해 cli를 설치 Command Line Interface, 명령 줄 인터페이스 가상 터미널 또는 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다. 즉, 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며, 컴퓨터로부터의 출력 역시 문자열의 형태로 주어진다.(출처 : 위키백과) Vue CLI 기본 설치 npm i -g @vue/cli 업데이트 그냥 최신 버전으로 업데이트 하는 방법 npm update -g @vue/cli 삭제, 설치 vue의 버전에 따라 명령어가 상이함 (Vue 버전확인하기) 2.x 버전 // 설치 npm i -g vue-cli // 삭제 npm r -g vue-cli 3.x 버전 // 설치 npm i -g @vu..

Vue - 프로젝트 생성 (Vue-CLI 시작)

프로젝트 생성 Vue 3.x 버전 vue creat 프로젝트명 vue create pages Vue 2.x 버전 vue init webpack 프로젝트명 - webpack 대신에 webpack-simple, browserify 등 가능 함 명령어를 입력했는데 에러 나옴 Vue - 초기 설치 에러 에러메시지 이 시스템에서 스크립트를 실행할 수 없으므로..... Vue를 설치하고 명령어를 입력할 때 나오는 에러메시지. 오류 메시지가 나오는 이유는 Windows의 실행 정책 때문이라고 한다. 이를 mansu.tistory.com Vue-CLI 시작하기 키보드로 조작( ↑↓ ).하고, vue 2 버전, vue 3 버전 중 설치할 버전을 고르고 엔터. Default는 Vue 3 일반적으로 설치를 했다면 vue3버..

Vue - 초기 설치 에러

에러메시지 이 시스템에서 스크립트를 실행할 수 없으므로..... Vue를 설치하고 명령어를 입력할 때 나오는 에러메시지. 오류 메시지가 나오는 이유는 Windows의 실행 정책 때문이라고 한다. 이를 수정해보자. @_@ 권한 변경하기 파워셀열기 윈도우즈 검색에서 'PowerShell'을 입력 명령어입력 파워셀을 열고 명령어를 입력하고 엔터. get-ExecutionPolicy 결과는 Restricted라고 나오는 것을 확인할 수 있다. 권한 상태 값 Restricted : default설정값으로, 스크립트 파일을 실행할 수 없음 AllSigned : 신뢰할 수 있는(서명된) 스크립트 파일만 실행할 수 있음 RemoteSigned : 로컬에서 본인이 생성한 스크립트와, 신뢰할 수 있는(서명된) 스크립트 파..

Vue - 설치, 환경 세팅

Visual Studio Code에서 진행 Vue 설치 새 터미널 열기 Terminal > New Terminal 터미널창에 입력 둘다 가능 !! npm i vue npm install vue 조금 기다리면 알아서 설치함 vue@3.2.41 버전 설치 완료. 공식문서에는 vue --version 으로 vue버전을 확인한다고 나와있지만, 어째서인지 CLI버전을 확인하는 명령어로 반영이 되어서 좀 더 확인이 필요하다. CLI 설치 Vue.js 개발환경 빠르게 다운받아보자. (Vue.js에서 제공하는 공식 CLI 설치) 둘다 가능 !! npm i -g @vue/cli npm install -g @vue/cli 시간이 좀 걸리니 그냥 기다린다. 버전 @vue/cli 5.0.8 설치완료 Vue - 프로젝트 생성 ..