일골드

Front End/Vue.js (8)

Splash 구현

Front End/Vue.js 일골드 2021. 8. 10. 22:54

어플리케이션을 구동하면 Loading이 될 때 스플레쉬화면이 잠깐 등장했다가 사라진다. 아무 동작 없는 것보단 모션이 있는 화면을 잠깐 띄웠다가 사라지게 해보자. 일단, 아래 명령으로 vue-splash 플러그인을 설치하자! npm i vue-splash 사용법은 간단하며 자세한 내용은 https://www.npmjs.com/package/vue-splash에서 참고 바란다. 아래를 참고하여 splash-component를 만들어주자. main.js import Vue from 'vue' import VueSplash from 'vue-splash' Vue.use(VueSplash); vue-splash를 이용하면 두근두근 느낌의 모션을 나타낼 수 있다. splash-component import You..

서비스 워커 (Servcie Worker)

Front End/Vue.js 일골드 2021. 7. 21. 20:22

Service Worker 서비스 워커는 브라우저와 분리되어 독립해서 사용할 수 있다. 서비스 워커의 주요 기능은 ①캐싱, ②푸시 알림, ③백그라운드 동기화. 캐싱은 이미지나 데이터를 캐시에 저장해서 캐싱되있는 데이터를 사용하기 때문에 더욱 빠르고 오프라인에서도 실행 가능하게 만든다. 캐시 범위나 파일(정규표현식가능) 지정할 수 있다. 푸시 알림은 구독하면 웹이나 어플이 실행중이든 아니든 서비스 워커는 백그라운드에서 별도로 실행되기 때문에 받을 수 있다. 백그라운드 동기화란건 뭐냐면 음.. 카톡하다가 인터넷이 끊기면 메시지가 안나가다가? 갑자기 인터넷이 들어오면 써놨던 카톡이 나가는데 이런거? 흠... 인터넷이 연결되든 안되든 항상 사용자 경험은 같도록 하기 위한 그런거다! 사실 나는 캐싱이랑 푸시만 해..

router

Front End/Vue.js 일골드 2021. 7. 14. 22:04

router(라우터) 라우터는 프로젝트 생성시 선택하여 추가하는 방법과 추후 npm을 통해 추가하는 방법이 있다. 1. vue create [프로젝트명] 터미널에서 vue 명령으로 프로젝트를 생성할때 router를 선택할 수 있다. Router를 선택하고 history mode 여부에서 'Y'를 입력한다. history mode 가 'Y'이면 주소에서 '#'이 사라진다. 2. npm install vue-router 다른 플러그인들 설치하듯 vue-router 또한 쉽게 설치할 수 있다! 3. 간단한 router 사용이 vue의 강점이다. > vue와 vue-router를 import > Vue.use() 를 통해 Vue 객체에서 사용하게 하면 어디서든 사용할 수 있게 된다. > mode: history..

Vue 위로 스크롤(새로고침) 막기

Front End/Vue.js 일골드 2021. 6. 25. 23:12

Scroll chaining overscroll-behavior 속성이 auto로 설정된 (기본값) 영역은 스크롤 영역이 모두 끝나면 부모 스크롤 영역이 움직이기 시작합니다. 이것을 스크롤 체이닝(스크롤이 연결되어 있기 때문에 체이닝이라는 단어를 사용)이라고 합니다. vue로 홈페이지를 만들었는데 모바일 기기에서 위로 스크롤하니 화면이 새로고침이 돼어버렸고 저는 그것을 막고자 했습니다. 기본값이 auto이기 때문에 contain으로 바꿔주면 부모 스크롤 영역을 움직이지 않습니다. overscroll-behavior:auto overscroll-behavior:auto overscroll-behavior:auto overscroll-behavior:auto overscroll-behavior:auto ov..

Vuex

Front End/Vue.js 일골드 2021. 6. 21. 21:02

Vuex 상탯값 관리 전문 라리브러리 store라고 들어보았다면 이해하기 쉬울 것이다. vuex가 store 관리 라이브러리다. src/store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { sTitle: '', address: 'xxxxxxx', phone: '010-xxxx-xxxx', todo: [], book: [], schedule: [] }, mutations: { fnSetTodo: function (state, todo) { return state.todo = todo }, fnSetBook: function (state, book) { r..

Vuetify

Front End/Vue.js 일골드 2021. 6. 15. 22:59

Vuetify.js 뷰 자바스크립트 프레임워크에 머티리얼 디자인을 사용할 수 있는 컴포넌트 프레임워크 Vuetify v-card Component 4.5 (413) $ • Italian, Cafe Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio seating. Tonight's availability 5:30PM 7:30PM 8:00PM 9:00PM vuetify 홈페이지 샘플 중 하나입니다 https://vuetifyjs.com/ Vuetify — A Material Design Framework for Vue.js Vuetify is a Material Design component frame..

Vue.js 시작하기

Front End/Vue.js 일골드 2021. 6. 15. 20:43

Vue.js 는 자바스크립트 프레임워크입니다. 장점으로는 ①HTML과 CSS 사용가능 ②MVC모델 지원 ③러닝커브가 낮다(HTML5, Javascript) ④설치가 쉽고 용량이 작아 속도가 빠르다 정도가 있겠습니다. 리엑트는 JSX라는 새로운 문법, 래퍼 지옥(wrapper hell)을 대비한 훅(hook)의 필요성을 고려하면 학습이 쉽지 않다. redux, store도 구현해줘야했다 :( 툴은 역시 비주얼 스튜디오가 익숙하다. 1. 비주얼 스튜디오 코드 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized fo..

PWA

Front End/Vue.js 일골드 2021. 6. 14. 22:12

Prograssive web app 모바일 환경에서 구동하는 앱의 종류는 무엇이 있을까! 스마트폰이 처음 생기고 모바일 환경에서만 작동하는 ①네이티브앱이 생겨났고 브라우저로 작동하는 ②웹앱, 두 장점을 합친 ③하이브리드앱(웹뷰방식과 네이티브언어로 변환되는 방식이 있다) 그리고 ④프로그래시브웹앱이 있다. 이렇게가 내가 공부해서 알고있는 앱의 종류이다. 그런데 프로그래시브웹앱의 목표가 너무 맘에 들었다. 기억은 잘 안나지만 내가 이해하기로는 웹으로 시작했지만 앱과 최종적으로 도착지가 같다는 것이었다. ㅇㅅㅇb 네이티브 앱 장점 단점 스마트폰에 최적화된 기능 구현 가능 개발난이도 UP, 많은 시간 소요 OS별로 따로 개발해야함 시장이 넓다 업데이트가 생기면 다시 받아야함 앱 시장에서 선택 받기 어렵다 아이콘을..

Copyright © 일골드 All Rights Reserved
Designed by JB FACTORY

티스토리툴바