강디너의 개발 일지

우선 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({ ..