강디너의 개발 일지

목표 : 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..

준비물 Front-end 파일 (빌드된것) Back-end 파일 AWS Nginx 까지 띄운 것 Putty (원격접속) 환경 Window 10 1. Front-end Build 빌드가 끝난 후 dist 폴더가 만들어졌는지 확인해주세요 2. 압축도 해줍니다. 3. 자신의 EC2 에 파일을 전송합니다. pscp -i C:\path\my-key-pair.ppk C:\path\Sample_file.txt ec2-user@public_dns:/home/ec2-user/Sample_file.txt 참조 : https://docs.aws.amazon.com/ko_kr/AWSEC2/latest/UserGuide/putty.html 4. 확인하기 ! 5. 압축 해제 unzip vue-project.zip (사진은 생략)..

준비물 1. express 서버 키기 2. mysql 서버 키기 3. Vue 서버 키기 *설치 모듈* 서버와 통신하기 위한 axios 설치 상태 관리를 위한 Vuex 설치 Login 기능 만들기 + 인증 1. axios를 main.js 에 넣어서 전역으로 쓸수 있게 합니다. 2. 로그인을 해봅시다. loginSubmit: function() { console.log("로그인"); this.$Axios.post(`http://127.0.0.1:3000/auth/login`, { id: this.user_id, pwd: this.user_pwd}).then( res=> { console.log(res); this.$router.push("/"); } ) }, 리턴값이 이쁘게 나오는 것을 볼 수 있습니다. 3..

Vue 로그인 페이지를 만들어보겠습니다. style 을 scss 를 사용하기 위해서 필요한 모듈인 sass-loader 를 설치해야합니다. npm install --save sass-loader 설치하면 scss를 컴파일 할 수 있습니다. 구조는 다음과 같이 만들겁니다. Templete 로그인 회원가입 로그인 회원가입 Admin User 취소 회원가입 템플릿에서 보실점은 form 에 v-on:submit.prevent="loginSubmit" 입니다. form 안에있는 button type="submit" 인 버튼을 누르면 loginSubmit 함수를 실행하라는 의미입니다. user_id와 user_pwd는 v-model로 설정해주어 나중에 로그인할 때 사용할 것입니다. v-if 로 회원가입버튼을 누르면..

Vue 2+ 와 Git 설치를 해보겠습니다. Vue 2+ 는 Vue 버전 2.~~ 입니다. 현재는 Vue 3 이 나왔으나 자료가 부족해서 이번 프로젝트에서는 사용하지 않습니다. Vue 를 설치하겠습니다. 윈도우 -> cmd 창맥 -> 터미널 창 npm install -g vue-cli -g 옵션은 vue-cli 를 어디서든지 사용하겠다고 정의하는 옵션입니다. vue init 옵션에 대해서 보겠습니다. Browserify - Browserify + vue 조합으로 hot-reload, ESLint, unit testing 지원 템플릿 Browerify-simple - Browserify + vue 조합 pwa - 프로그래시브 웹을 만들기 위한 세팅 simple - 하나의 index.html 생성 webpa..

프로젝트를 시작하면 셋팅이 필요하죠. 1. vue 버전을 확인해봅니다 (설치했다는 가정)저는 2.9.6 버전을 사용할겁니다.Vue 3 버전이 나왔으나 자료도 부족하고, 아직 개발하기에는 이르다고 생각해서 2+ 버전으로 사용합니다. 2. vue init 후 나오는 메시지들 입니다. 3. 프로젝트 만든거에 들어가고 git init 을 해줍니다.git init -> git 최초 생성 4. git remote add origin git 원격저장소가 어딘지 정해줍니다.그리고 전부 다 add 했습니다. 5. git commit 해주고 ~ 6. git push 도 해줍니다 ~ 초기 셋팅이 완료되었습니다.

vue를 nginx 와 연동하기 flask 를 배포했고.. 이제는 vue 를 배포해봤습니다. nginx 는 플라스크를 배포할때 설치했었고, 셋팅을 다 했다 라고 생각했으나, vue 랑 nginx 를 맞춰야하는 셋팅이 따로 있다는걸 깨닫고 얼른 구글링을...했습니다 ㅎㅎ vue 는 로컬에서 빌드하고 ftp 로 서버로 보냈습니다 (dist 파일 중요) 서버로 가서 nginx 의 설정을 건듭니다. vi /etc/nginx/con.f/이름 ! 저는 default 로 되어있는거 수정했는데 제생각으로는 파일 만들어서 하는거 같습니다.. 아마 ? maybe ?? default 파일에는 sever { 블라블라 ~~포트 : 80location / {root ~~index ~~} 되있었는데 이게 80 포트로 들어가면 ro..

Firebase(파이어베이스) 새 프로젝트 만들기 목적 : vue + firebase 연동 1. 구글 로그인 https://firebase.google.com 2. 콘솔로 이동 3. 프로젝트 만들기 위치를 대한민국으로 바꿔주세요. 4. 초기 화면 Vue + firebase 를 이용한 웹을 만들 예정입니다.