Programing Language
-
CSS) 스크롤 없애고 기능은 계속 사용하기Programing Language/CSS 2021. 12. 1. 13:06
웹앱을 만들때면 스크롤은 사용하면서 스크롤 바는 없애고 싶을때가 있다. 그럴때 다음과 같이 사용하면 된다. /* Hide scrollbar for Chrome, Safari and Opera */ .example::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .example { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }
-
-
Vue.js) 연관없는 컴퍼넌트들끼리의 데이터 전송 Vue3.x (이벤트 버스)Programing Language/Vue.js 2021. 11. 26. 16:40
개발을 하다보면 부모-자식 뷰의 관계가 아닌 여러 자식 뷰 들 사이에서 데이터를 전송해야하는 일들이 발생한다. 이런경우 Vue2.0에서는 eventBus를 사용했지만 참고:https://v3.vuejs.org/guide/migration/events-api.html#overview Vue3.x 부터는 Mitt라는 라이브러리를 사용한다. 설치 npm i mitt --save ------------------------ //파일명 mitt.js import mitt from 'mitt' const emitter = mitt(); export default { install(Vue) { Vue.config.globalProperties.emitter = emitter } } -------------------..
-
Javascript) Array에서 value 값 제거하기(remove)Programing Language/JavaScripｔ 2021. 11. 25. 15:08
일바적으로 javascript에서 array에 remove를하면 value값을 지울수 있다. 하지만 remove로 지우게 되면 array전체 length에 대한 값은 변하지 않는다. 하여 다음과 같은 방법으로 진행하면된다. const idx = array.indexOf(e) // e는 value 값 if (idx > -1) array.splice(idx, 1) 도움 되셨다면 하단의 광고 클릭 부탁드립니다:)
-
Vue.js) Docker(도커)를 이용해서 vue.js를 구동해보자Programing Language/Vue.js 2021. 11. 21. 18:48
기본환경 세팅! 윈도우 도커를 사용했으며 터미널에도 미리 도커가 설치된 상태이다. 도커는 리눅스 기반이기 때문에 윈도우에서 도커를 사용하게 되면 결국은 VM을 사용해서 도커를 돌리는 셈이라지만 그래도 로컬에서 충분히 지지고 볶아가며 연습을 해야하기 때문에 상관하지 않기로 했다. 윈도우 도커를 설치하고 터미널에도 미리 도커가 설치된 상태이다. (터미널을 통한 도커설치는 이전 포스트를 참고!) 이제 frontend 폴더로 이동했다. 폴더의 구조는 다음과 같다. ─frontend ├─node_modules ├─public └─src ├─api ├─assets │ ├─css │ └─img ├─components ├─plugins ├─views └─vuex Vue를 구동하기 위해서는 node 의 환경이 필요하다...
-
Vue.js) cookies + localstorage 사용해서 반복적인 reqeust 방지하기Programing Language/Vue.js 2021. 11. 18. 16:12
쿠키와 로컬 스토리지로 반복적인 리퀘스트를 막은 이유는 쿠기는 최대 4kb만 저장이 가능합니다. 게시판이나 여러 이미지 같은 경우 url 등의 값들이 string으로 많이 길어지기 때문에 4kb만으로는 저장이 안되는 경우가 많이 있었습니다. 하여 브라우저 마다 최대 용량이 다르지만 최대 5M까지 저장이 가능한 localstorage을 사용하여 반복적인 request를 막는 기능을 구현해보았습니다. 쿠키의 Expires기능을 이용해서 쿠키가 없어 졌을때만 서버로 부터 데이터를 가지고 오게 하는 것입니다. 참고 코드는 다음과 같습니다. 참고하시길 바랍니다. async created(){ if(!self.$cookies.isKey('notice_info')){ // 쿠키에 공지사항 정보가 없으면 서버에서 받아..
-
Vue.js) vue-router를 이용해서 컴포넌트들간의 데이터 전달하기Programing Language/Vue.js 2021. 11. 18. 15:25
1. 두 가지 방법 vue router로 데이터를 전달하는 방법은 2가지가 있습니다. query params 2. 전달하기 query {name: 'Query', query: {name: 'cat', age: 3}} params {name: 'Params', params: {name: 'dog', age:4}} main Query 프로그래밍 방식 Query 선언적 방식 params params 선언적 방식 3. 라우터 크게 수정할 부분은 없습니다. 다만, params로 전달하는 경우 props:true 로 설정하면 데이터가 props에도 전달됩니다. import VueRouter from 'vue-router' import vue from 'vue' vue.use(VueRouter) import Main..