2024_09_03_화

오늘의 코딩순서

Docker과 DB연결

• scottjpa에 권한주고 새 접속 만들기
• application.yml (Spring) 
• TEAM5 테이블과 MEMBER5 테이블에 데이터 삽입
• Docker와 TBL연결해서 새 build폴더 만들고 새 컨테이너와 새이미지 만들기
  ∵ 새 접속과 TBL 데이터를 만들었으니까
  => ubuntu와 oracle 컨테이너 빼고 삭제, API폴더의 build폴더 삭제 후, 0829일지 참고해서 다시 만들기\
• DB에서 값 수정후 실시간 Vue 웹 값도 바뀌는지 확인

(폴더: vue3Member01) 

• TheHeader.vue + index.js + MemberCreateView.vue + MemberForm.vue + member.js

---

오늘의 코딩 포인트

Docker과 DB연결

• scottjpa에 권한주고 새 접속 만들기

1. 도커에서 오라클 실행하고 접속 오류 생긴거 해결 => 비번 바꿈

 

2. scottjpa에 권한 주기

CREATE USER scottjpa IDENTIFIED BY tiger;
GRANT DBA to scottjpa;

 

3. 새 접속, dScottJpa 만들기

 

• application.yml (Spring)
  Tip) 포트번호와 ip번호 확인하고 똑같이 넣고 spring boot 실행해야 DB에 테이블이 뜸

server:
  port: 8388
# Oracle Connect
spring:
  datasource:
    driver-class-name: oracle.jdbc.OracleDriver
    url: jdbc:oracle:thin:@172.30.1.9:1521/xe # docker(mydb)
    #url: jdbc:oracle:thin:@localhost:1521/xe
    username: scottJpa
    password: tiger
    
  #JPA Setting
  jpa:
    show-sql: true
    hibernate:
      ddl-auto: update

#logger을 통해 hibernate를 실행하는 SQL      
logging.level:
  org.hibernate.SQL: debug

 

• TEAM5 테이블과 MEMBER5 테이블에 데이터 삽입

1	고구려
2	발해
3	고려원수
4	삼도수군통제사
5	전라우수사
8	고구려

1	이율곡3	7710	1
2	대조영	7000	2
3	강감찬장군	7700	3
4	이순신	8900	4
5	이억기	6700	5
8	강이식	7000	8
9	황희	7900	
10	이이	7800	
11	aa		
12	을지문덕	7700	
13	양만춘	7700

 

• Docker와 TBL연결해서 build폴더 만들고 이미지 만들기
  => ubuntu와 oracle 컨테이너 빼고 삭제, API폴더의 build폴더 삭제 후, 0829일지 참고해서 다시 만들기

• DB에서 값 수정후 실시간 Vue 웹 값도 바뀌는지 확인

---

(폴더: vue3Member01) 

• TheHeader.vue

<template>
  <header>
    <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">KTG</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto">
            <!-- 
            <li class="nav-item">
						<a class="nav-link active" aria-current="page" href="#">Home</a>
						</li>
						<li class="nav-item">
						 <a class="nav-link" href="#">About</a>
						</li> 
            -->
            <li class="nav-item">
              <RouterLink class="nav-link" active-class="active" to="/"> Home </RouterLink>
            </li>
            <li class="nav-item">
              <RouterLink class="nav-link" active-class="active" to="/about"> About </RouterLink>
            </li>
            <li class="nav-item">
              <RouterLink class="nav-link" active-class="active" to="/members">
                회원 관리
              </RouterLink>
            </li>
            <li class="nav-item">
              <RouterLink class="nav-link" active-class="active" to="/nested"> Nested </RouterLink>
            </li>
          </ul>
          <div class="d-flex">
            <button class="btn btn-outline-light" type="button" @click="goMemberCreatePage">
              회원등록
            </button>
          </div>
        </div>
      </div>
    </nav>
  </header>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
const goMemberCreatePage = () => {
  router.push({
    name: 'MemberCreate'
  })
}
</script>

<style lang="scss" scoped></style>

 

• index.js

import AboutView from '@/views/AboutView.vue'
import HomeView from '@/views/HomeView.vue'
import MemberCreateView from '@/views/members/MemberCreateView.vue'
import MemberListView from '@/views/members/MemberListView.vue'
import NestedHomeView from '@/views/nested/NestedHomeView.vue'
import NestedOneView from '@/views/nested/NestedOneView.vue'
import NestedTwoView from '@/views/nested/NestedTwoView.vue'
import NestedView from '@/views/nested/NestedView.vue'
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'About',
    component: AboutView
  },
  {
    path: '/members',
    name: 'MemberList',
    component: MemberListView
  },
  {
    path: '/members/create',
    name: 'MemberCreate',
    component: MemberCreateView
  },
  {
    path: '/nested',
    name: 'Nested',
    component: NestedView,
    children: [
      {
        path: '',
        name: 'NestedHome',
        component: NestedHomeView
      },
      {
        path: 'one',
        name: 'NestedOne',
        component: NestedOneView
      },
      {
        path: 'two',
        name: 'NestedTwo',
        component: NestedTwoView
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory('/'),
  routes: routes
})

export default router

 

• MemberCreateView.vue
  Tip)
  • submit.prevent: form의 기본적인 동작은 서버로 보내는 것이며 화면의 데이터가 리셋되게 됨
    submit.prevent는 이 기본 동작을 작동하지 않도록 제어함

<template>
  <div>
    <h2>Member 등록</h2>
    <hr class="my-4" />
    <!-- 
      form의 기본적인 동작은 서버로 보내는 것이다.
      그러면서, 화면의 데이터가 리셋되게 된다.
      submit.prevent는 이런 form의 기본 동작이 되지 않도록 제어 
    -->
    <MemberForm v-model:sal="form.sal" v-model:name="form.name" @submit.prevent="save">
      <template #actions>
        <button type="button" class="btn btn-outline-dark me-2" @click="goListPage">목록</button>
        <button class="btn btn-primary">저장</button>
      </template>
    </MemberForm>
  </div>
</template>

<script setup>
import { createMember } from '@/api/members'
import MemberForm from '@/components/members/MemberForm.vue'
import router from '@/router'
import { ref } from 'vue'

const form = ref({
  sal: null,
  name: null
})

const save = () => {
  try {
    console.log('save start...')
    createMember({
      ...form.value
      // ...은 sal과 name 등 DTO의 값을 전부 한 번에 넘겨줌
    })
    router.push({ name: 'MemberList' })
  } catch (error) {
    console.error(error)
  }
}

const goListPage = () =>
  router.push({
    // push로 이동할때는 이름을 적어서 작성
    name: 'MemberList'
    // 조회프로그램으로 이동하게 해줌
  })
</script>

<style lang="scss" scoped></style>

 

• MemberForm.vue
  Tip)
  • emit
    • 자식 화면에서 부모 화면으로 데이터를 넘길 때 사용
    • 직접 커스텀한 이벤트를 내보낼 수 있음
  • :의 사용 : 일반 속성 값은 :이 안들어가며, 나머지는 v-bind: 또는 : 을 사용하여 속성을 바인딩함
  • @의 사용: 부모 컴포넌트에서 v-on(또는 @)을 사용하여 이벤트를 수신
  • event(이벤트 파라미터)
    • 이벤트와 함께 특정 값 전달 , $emit 함수 이벤트명에 추가로 파라미터를 전달
    • 특정 매개 변수를 따로 넘겨주고 싶을때 사용하며, 넘겨줄 변수를 지정하되 $event를 선언해야함
  • defineprops: 부모 창으로부터 자식 창으로 데이터를 전달
  • defineEmits: 자식 창으로부터 부모 창으로 데이터를 전달

<template>
  <form>
    <div class="mb-3">
      <label for="sal" class="form-label">급여</label>
      <input
        :value="sal"
        @input="$emit('update:sal', $event.target.value)"
        :type="text"
        class="form-control"
        id="sal"
      />
      <!-- 이벤트와 함께 특정 값 전달 , $emit 함수 이벤트명에 추가로 파라미터를 전달 -->
    </div>
    <div class="mb-3">
      <label for="name" class="form-label">이 름</label>
      <textarea
        :value="name"
        @input="$emit('update:name', $event.target.value)"
        class="form-control"
        id="name"
        rows="1"
      ></textarea>
      <div class="d-flex gap-2 mt-4">
        <!-- 부모 Component에서 다른 tag를 전달 
         따라서 MemberCreateView의 MemberForm template를 불러옴-->
        <slot name="actions"></slot>
      </div>
    </div>
  </form>
</template>

<script setup>
// 다중 v-model 구현을 위해 아래처럼 사용함
// 부모 창으로부터 자식 창으로 데이터를 전달
defineProps({
  sal: String,
  name: String
})

// 자식 창으로부터 부모 창으로 데이터를 전달
defineEmits([
  // 배열이니까 대괄호 사용
  'update:sal',
  'update:name'
])
</script>

<style lang="scss" scoped></style>

 

• member.js

import axios from 'axios'

export function getMembers() {
  //MemberListView.vue의 getMembers와 연결됨
  console.log('getMembers Start...')
  return axios.get('http://localhost:8388/restApi/v1/members') // Risk API  // get방식
}

// 신규 members 등록
export function createMember(data) {
  console.log('신규 members 등록(createrMember)..')
  console.log('신규 members 등록 data->' + data)
  return axios.post('http://localhost:8388/restApi/v2/memberSave', data)
}

 

---

질문목록

 

---

수업교재

 

 

---

오늘의 숙제