일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- jwt
- react
- 배포
- 회고록
- express
- extension
- 셋팅
- Docker
- 기획
- react-query
- 플러그인
- Firebase
- login
- 정리
- 로그인
- vue
- vsCode
- PWA
- database
- 뷰
- AWS
- vue login
- 프론트
- nginx
- javascript
- Git
- vuex
- plugin
- 토이프로젝트
- 신상마켓
- Today
- Total
목록Javascript/Vue.js (18)
강디너의 개발 일지
기획 PWA를 이용한 위치 저장 어플리케이션 만들기 - Vue 이용한 페이지 제작 - Firebase 를 이용한 호스팅 + DB 저장 목차 1. vue-cli4 Setting 2. Firebase Setting 1. vue-cli Setting 설정 중 PWA 설정 도와주는 옵션이 있습니다. 설정해주시면 편합니다. 2. Firebase Setting Window에서 firebase-tools 를 설치하려면 까다롭습니다. 글로벌로 설치해서 사용하라고 적혀있는데, Window에서는 권한이 없다고 막혀버립니다. 그래서 찾아본 결과, 독립형 실행 프로그램을 다운로드 후 설치해서 firebase-tools 를 이용하거나 nvm-window를 설치해서 버전 관리해서 사용하는 방법 두 가지입니다. https://gi..
사용할 기능들 1. navigation guard - 뷰 라우터 내비게이션 가드 2. axios Intercept - axios 설정 3. Vue cookies 4. vuex 토큰을 이용한 로그인 유지 flow는 아래 사진과 같습니다. 참고 - 쉽게 설명해주셨습니다. https://tansfil.tistory.com/59 쉽게 알아보는 서버 인증 2편(Access Token + Refresh Token) 안녕하세요! 이전 포스팅에는 크게 세션/쿠키 인증, 토큰 기반 인증(대표적으로 JWT)에 대하여 알아보았습니다. 저희가 앱, 웹 혹은 서버 개발을 하면서 꼭 사용하게 되는 인증(Authorization).. tansfil.tistory.com 더 더 검색해보니 사용자가 로그인하면 -> 서버측에서 Acce..
예전에는 filters 라는 메소드가 없어서 ? 못찾아서 ? 못사용했는데, 최근에 뷰에 대해 공부하다 보니 있었다. filters 기능을 몰랐던 당시에는 methods, watch 에 넣어서 사용했었는데 구분 할 수 있을것 같다 {{arr | comma}} 1. 로컬 필터 data(){ return{ commaTest: [14000,1231244,1231244566,42134324,21312], } }, filters:{ comma(val){ return String(val).replace(/\B(?=(\d{3})+(?!\d))/g, ","); } } 2. 전역 필터 {{arr | makeComma}} Vue.config.productionTip = false; Vue.config.silent = tru..
1. 한글 방지 input 만들기 data(){ return{ userInfo:'', onlyNumber:'', } }, watch:{ userInfo(val){ const reg = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; if(reg.exec(val)!==null){ return this.userInfo = this.userInfo.slice(0,-1); } } } 2. 숫자만 입력 가능한 input 만들기 watch:{ onlyNumber(){ return this.onlyNumber = this.onlyNumber.replace(/[^0-9]/g, ''); } },
문제점 : 한 파일의 용량이 커서 페이지가 늦게 뜨는 현상이 발생했다. 상황 1. About.vue 안에 header.vue, main.vue, 기타1 기타2 등등 들어있음. 2. 메인, 기타1, 기타2 등등 이미지 용량이 커서 About.vue를 불러오면 너무 오래걸림 (약15초) 3. 빌드를 통해 js 형태로 배포하는데 js의 크기가 커서 분리시키기로 결심 해결 방안 1. webpackchunkname https://router.vuejs.org/kr/guide/advanced/lazy-loading.html 지연된 로딩 | Vue Router 지연된 로딩 번들러를 이용하여 앱을 제작할 때 JavaScript 번들이 상당히 커져 페이지로드 시간에 영향을 줄 수 있습니다. 각 라우트의 컴포넌트를 별도의..
우선 Vue Event Bus 사용에는 두가지 방법이 있습니다. - 직접 Event Bus를 만들고 import 해서 사용하는 방법 - Vue에 내장되어있는 Event Bus 를 이용하는 방법 import 해서 사용하는 방법 장점 : 부모-자식 사이가 아니여도 사용이 가능하다. 너무 편하다. 단점 : 너무 많이 쓰이면 후에 관리하기 힘들다(찾기 힘들다) 1. Event Bus // EventBus.js import Vue from 'vue'; const EventBus = new Vue(); export default EventBus; 2. $emit 이벤트 호출 $emit('이벤트 이름', option) option에 값을 넣어서 보낼 수 있다. HelloWorld Change Component 3. ..
목표 : Vue.js를 이용한 빙고게임 만들기 https://github.com/DinnerKang/vue_bingo 세부 목표 턴을 주고 받는 빙고 만들기 vuex를 상태관리 리셋 기능 만들기 1. Vuex를 이용해서 상태관리 turn - 1씩 증가시키면서 유저2명의 턴 검증하기 위해 저장 bingo - 유저 1이 선택한 빙고를 유저 2가 볼 수 있도록 저장 winner - 승자를 볼 수 있도록 저장 export const store = new Vuex.Store({ state : { turn : 0, bingo : 0, winner : null }, getters : { getBingo : function(state){ return state.bingo; } }, mutations : { change..
목표 : Vue.js를 이용한 빙고게임 만들기 세부 목표 빙고판을 컴포넌트로 만들어서 재활용하기 2인용으로 만들기 vuex를 이용하기 1턴씩 주고 받기 (자기턴이 아닐 시 에러 처리) 5빙고가 되면 종료하기 1. 빙고판 만들기 flex를 이용해서 간단하게 5x5 빙고판을 만들었습니다. {{number}} .bingo_container{ display: flex; width: 100%; flex-wrap: wrap; .bingo{ flex: 0 0 19%; border: 1px solid #ced3d6; height: 150px; display: flex; justify-content: center; align-items: center; font-size: 40px; cursor: pointer; } .a..