강디너의 개발 일지

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, ''); } },

삽질하지 않기위한 기록 makeComma(number){ return String(number).replace(/\B(?=(\d{3})+(?!\d))/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..

운영중인 Vscode 플러그인을 잠깐 소홀하게 뒀더니 깜짝 놀랄 일이 생겼었다. 사용자는 많이 늘지 않았는데 갑자기 사용량만 엄청 많이 늘었다. 결국 네이버 API 일일 허용량 초과로 이어졌으니... 갑작스런 변화에 이상해서 저장 데이터를 확인했다. 음....; 으음..;; 번역하는데 딜레이가 있어 막 클릭해서 그런건지는 모르겠지만 어뷰징 대책이 필요했다. 1. 같은 단어를 같은 시간(분)에 검색하면 막기 - 시간은 분단위 까지 저장 중 2. 사용자 IP를 저장하고 하루에 100번 사용하면 막기 - Firebase DB에 저장 후 비교 1번, 2번 두개다 적용해야 할 듯 한데 사용자 IP를 막 저장해도 괜찮은지 고민이 되었다. 사용시 IP를 하루 동안 저장합니다. 위의 약관을 ReadMe에 추가하면 될 ..

React에서 graphQL 을 이용해서 데이터 통신하는 예제 먼저 통신할 URL 을 연결해줍니다. import axios from 'axios'; const endPoint = axios.create({ baseURL : '-------------------------', headers : { 'Content-Type' : 'application/json', } }); query 이용한 조회 getList = async() =>{ const query = `query{ list { item_list { id name } } }`; try{ const supplierList = await endPoint.post('',{query : supplier_list_query}); this.setState({ ..

100 번대 - 정보 응답 200 번대 - 성공 응답 400 번대 - 클라이언트 에러 응답 500 번대 - 서버 에러 응답

페이스북 생활코딩 그룹에 리팩토링 정리한 글을올렸는데 피드백이 들어왔다 ! 피드백이 들어올줄 생각치도 못했는데 이렇게 남겨주신 '서재원'님께 감사드립니다. 1. 변수의 스코프를 최대한 작게 2. js는 카멜케이스 + 상수는 상수 케이스 사용 - 보통 언더바 표기법 ex) somting_todo 으로 네이망을 했었다. 3. tailing comma 를 사용 무슨 용어인지 몰라서 검색 Object를 선언할 때 뒤에 , 를 붙이는 것 ex) 'Time' : getNowTIme(), edited.replace(selectionRange, String(translateResult.message.result.translatedText))); 위의 코드도 원래 edited: any 였는데 object, array 를..