vue2_frontend init..

.env

@@ -0,0 +1,13 @@
+# Environment variables declared in this file are automatically made available to Prisma.
+# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
+
+# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+
+VUE_APP_BACKEND_HOST="http://localhost:3000"
+VUE_APP_BACKEND_HEADERS_Content_Type="application/json;charset=utf-8"
+VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin="*"
+
+#LocalStorage는 Edge 브라우저의 개발툴 > 응용프로그램 > 로컬 저장소에서 확인가능
+VUE_APP_LOCALSTORAGE_NAME="access_token"
+

src/components/common/LoginComponent.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <b-form @submit="onSubmit" @reset="onReset" v-if="show">
+      <b-form-group
+        label="Email address:"
+        description="We'll never share your email with anyone else."
+      >
+        <b-form-input
+          v-model="form.email"
+          type="email"
+          placeholder="Enter email"
+          required
+        ></b-form-input>
+      </b-form-group>
+
+      <b-form-group label="Your Pasword:" label-for="input-2">
+        <b-form-input
+          type="password"
+          v-model="form.password"
+          placeholder="Enter Pasword"
+          required
+        ></b-form-input>
+      </b-form-group>
+
+      <b-button type="submit" variant="primary">Login</b-button>
+      <b-button type="reset" variant="danger">Reset</b-button>
+    </b-form>
+    <b-card class="mt-3" header="Form Data Result">
+      <pre class="m-0">{{ form }}</pre>
+    </b-card>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+  data() {
+    return {
+      form: {
+        email: '',
+        password: ''
+      },
+      show: true
+    }
+  },
+  methods: {
+    async onSubmit(event) {
+      event.preventDefault()
+      axios.defaults.baseURL = process.env.VUE_APP_BACKEND_HOST
+      axios.defaults.headers.post['Content-Type'] =
+        process.env.VUE_APP_BACKEND_HEADERS_Content_Type
+      axios.defaults.headers.post['Access-Control-Allow-Origin'] =
+        process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin
+      await axios
+        .post(
+          '/auth/login',
+          JSON.stringify({
+            email: this.form.email,
+            password: this.form.password
+          })
+        )
+        .then((response) => {
+          // console.log(response)
+          if (response.status === 201) {
+            // 로그인 성공시 처리해줘야할 부분
+            console.log(response.data)
+            // this.$store.dispatch('authenticate', {
+            //   token: response.data.access_token,
+            //   expiration: response.data.expires_in + Date.now()
+            // })
+            localStorage.setItem(
+              process.env.VUE_APP_LOCALSTORAGE_NAME,
+              response.data.access_token
+            )
+            alert('로그인 성공...')
+            // this.$router.push('/')
+          }
+        })
+        .catch((err) => {
+          localStorage.removeItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
+          console.log(err)
+          alert('로그인 실패...')
+        })
+    },
+    onReset(event) {
+      event.preventDefault()
+      // Reset our form values
+      this.form.email = ''
+      this.form.pasword = ''
+      // Trick to reset/clear native browser form validation state
+      this.show = false
+      this.$nextTick(() => {
+        this.show = true
+      })
+    }
+  }
+}
+</script>

src/router/index.js

@@ -17,14 +17,22 @@ const routes = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () =>
-      import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+      import(/* webpackChunkName: "about" */ '@/views/AboutView.vue')
+  },
+  {
+    path: '/login',
+    name: 'LoginComponent',
+    component: () =>
+      import(
+        /* webpackChunkName: "api", webpackPrefetch:true */ '@/views/loginView.vue'
+      )
   },
   {
     path: '/todo',
     name: 'TodoListView',
     component: () =>
       import(
-        /* webpackChunkName: "api", webpackPrefetch:true */ '../views/todo/listView.vue'
+        /* webpackChunkName: "api", webpackPrefetch:true */ '@/views/todo/listView.vue'
       )
   }
 ]

src/views/loginView.vue

@@ -0,0 +1,15 @@
+<template>
+  <!-- 참조: https://codesandbox.io/s/3v0m1?file=/src/components/board/BoardList.vue -->
+  <div>
+    <LoginComponent />
+  </div>
+</template>
+<script>
+import LoginComponent from '@/components/common/LoginComponent.vue'
+export default {
+  components: {
+    LoginComponent
+  }
+}
+</script>
+<style scoped></style>

src/views/todo/listView.vue

@@ -150,11 +150,8 @@
 </template>
 <script>
 // 참조 : https://vuejsexamples.com/vuejs-tables-and-select-all-checkbox/
-import axios from 'axios'
 import ListComponent from '@/components/common/ListComponent.vue'
-axios.defaults.baseURL = 'http://localhost:3000'
+import axios from 'axios'
-axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'
-axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'
 export default {
   components: {
     ListComponent
@@ -264,6 +261,11 @@ export default {
   methods: {
     async getDatas() {
       this.isBusy = true
+      axios.defaults.baseURL = process.env.VUE_APP_BACKEND_HOST
+      axios.defaults.headers.post['Content-Type'] =
+        process.env.VUE_APP_BACKEND_HEADERS_Content_Type
+      axios.defaults.headers.post['Access-Control-Allow-Origin'] =
+        process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin
       const items = await axios
         .get('/todo/vue2', {
           params: {