💪🏿 gain-muscle | 득근 : Development Log

점진적 과부하를 관리하는 근력 운동 기록 웹앱 득근 🧙🏻‍♂
Github(front): https://github.com/protect-me/gm-front
Github(back): https://github.com/protect-me/gm-back

🧩 Specs

Vue2 + Vuetify + Express + MySQL
(Heroku를 통한 배포 작업 중)

📼 유튜브 시연 영상 플레이리스트

👉🏻 득근 2분만에 훑어보기 (x2배속 시청 권장)

---

---

🌑 Set Front-End Environment | 프론트엔드 환경설정

🚀 Create Project Directory | 프로젝트 경로 생성

mkdir gain-muscle : create gain-muscle folder
cd gain-muscle : change directory

gain-muscle 경로는 이하 root로 명명함.

🚀 Create Vue Project with Vue-CLI | Vue-CLI로 Vue 프로젝트 생성하기

$ vue create frontend : create Vue project with vue-cli(set in frontend folder)

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

$ cd frontend : change directory
$ yarn serve : run project

http://localhost:8080/ : served local App URL

🚀 Set Vuetify | 뷰티파이 설정

$ vue add vuetify : add vuetify to project

? Choose a preset: Configure (advanced)
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes
? Use custom theme? No
? Use custom properties (CSS variables)? No
? Select icon font Material Design Icons
? Use fonts as a dependency (for Electron or offline)? No
? Use a-la-carte components? Yes
? Select locale English

🌒 Set Back-End Environment | 백엔드 환경설정

🚀 install express | 익스프레스 설치

$ npm install -g express-generator
or $ yarn global add express-generator : install express-generator

$ express --view=pug backend : create express in backend folder
$ cd backend : change directory
$ npm install : install dependencies
$ npm start : run the app

http://localhost:3000/ : served local App URL(back end)

Ctrl + C : stop server

🌓 Install MySQL && Connect MySQLWorkbench

🚀 create Schema

schema name: gain_muscle
characterset: utf8
collation: utf8_general_ci

(새 쿼리 버튼 - 페이지+)

• Query

use gain_muscle;
CREATE TABLE users ( 
   userid VARCHAR(255) NOT NULL , 
   password VARCHAR(255) NULL , 
   name VARCHAR(255) NULL , 
PRIMARY KEY (userid) );

(쿼리 실행 버튼 - 번개모양)

🌔 Connect Front <-> Back

🚀 vue.config.js

root > frontend > vue.config.js

module.exports = { 
    devServer: { //① api 요청이 있을때 어디에서 처리할지를 설정
      proxy: { 
        '/api': { 
          target: 'http://localhost:3000/api',
          changeOrigin: true, 
          pathRewrite: { 
            '^/api': ''
          } 
        } 
      } 
    },
    outputDir: '../backend/public',  //② 배포 파일의 위치를 지정
  }

$ cd frontend
$ npm run build
$ cd ../backend
$ npm start

위와 같이 Express 서버를 실행시키면, localhost:3000 페이지도
localhost:8080 페이지와 동일한 화면으로 변경 된 것을 확인

🚀 install mysql, bcryptjs

root > backend
$ npm install mysql --save : install mysql
$ npm install bcryptjs --save : install bcryptjs, 암호화 해시 함수

🚀 backend app.js

root > backend > app.js
*connection 객체는 설치한 DB 환경에 맞는 값으로 변경(ex. password: '1234')

var mysql = require('mysql');
// Connection 객체 생성 
var connection = mysql.createConnection({
  host: 'localhost',
  port: 3306,
  user: 'root',   
  password: 'password',
  database: 'pwa_crud'  
});  
// Connect
connection.connect(function (err) {   
  if (err) {     
    console.error('mysql connection error');     
    console.error(err);     
    throw err;   
  } 
});

$ npm start: backend 서버가 잘 돌아가는지 확인
*에러 발생 시 connection 객체 정보를 정확하게 입력했는지 확인

🚀 install axios

• API 통신을 위해 frontend/backend 각각의 경로에서 axios를 설치함.

$ cd frontendnpm install axios --save
$
$ cd ../backend
$ npm install axios --save

• root > frontend > src > main.js

(...)
import axios from 'axios'
(...)
Vue.prototype.$http = axios;
(...)

🚨 error

rooot > front
$ npm run serve or $ npm run build 명령 시, 아래와 같은 에러

Failed to compile with 144 errors                                                         19:04:52

These dependencies were not found:

* core-js/modules/es.array.concat.js in ./node_modules/vuetify/lib/components/VGrid/VContainer.js, ./node_modules/vuetify/lib/components/VProgressCircular/VProgressCircular.js and 6 others
* core-js/modules/es.array.fill.js in ./node_modules/vuetify/lib/util/helpers.js
* core-js/modules/es.array.filter.js in ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js, ./node_modules/vuetify/lib/components/VGrid/VContainer.js and 1 other

$ npm install --save core-js: core-js 설치
(폴리필 문제, 바벨 7.4 이상 버전과 core-js@3를 같이 사용해야 동작함)

🚀 frontend/src/main.js

eslint

Ref : eslint

🌔

🌕

참고

https://marshmello.tistory.com/64
https://marshmello.tistory.com/65?category=1158454
https://medium.com/hivelab-dev/vue-express-mysql-part1-98f68408d444
https://medium.com/hivelab-dev/vue-express-mysql-part2-6d8fc0e497de