본문 바로가기
클라우드 데브옵스

Day69 2024.08.29.목 #코딩일기

by SSONG1521 2024. 8. 29.

 

새 터미널 열기

 

npm install bootstrap bootstrap-icons

npm run dev

 

Ctrl C -> y

npm install vue-router



npm install axios (ajax같은 역할)

 

 

 

 

 

 

 - 지금까지 했던 것 모놀리식 서비스 -> 뷰 + 서버단 전부 개발

                                마이크로 서비스 : 서버만 따로 개발 (api 개발)

 

 

 

CH05. Vue component

 

 

Spring Starter Project oBootJpaApi
folder resources
yml application.yml 
server:
  port: 8389
# Oracle Connect
spring:
  datasource:
    driver-class-name: oracle.jdbc.driver.OracleDriver
    url: jdbc:oracle:thin:@127.0.0.1:1521/xe  #docker(mydb)
    # url: jdbc:oracle:thin:@localhost:1521/xe
    # url: jdbc:oracle:thin:@l127.0.0.1:32772/xe  #docker
    # url: jdbc:oracle:thin:@l127.0.0.1:32768/xe  #docker
    username: scottJpa
    password: tiger
    
  #Jpa Setting
  jpa:
    show-sql: true
    hibernate:
      ddl-auto: update
            # @Entity라고 설정되어 있는 것들 만 update, none, create 등등
            # release 할 때에는 none으로 바꿔주어야 한다!!!!
            
logging.level:
  org.hibernate.SQL: debug  #logger를 통해 하이버네이트 실행 SQL



folder  
vue App.vue 
<template>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</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 mb-2 mb-lg-0">
            <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="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Dropdown
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
          <form class="d-flex">
            <input
              class="form-control me-2"
              type="search"
              placeholder="Search"
              aria-label="Search"
            />
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>
  </div>
</template>

<script setup></script>

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

 

 - 이번에는 vbase3-setup 로 큰 틀 만들어주기


- 메모장에 붙혀넣고 복붙해서 들어가주기 ( jsp에서 화면 구성할 때에도 사용 가능하다.)

https://getbootstrap.com/docs/5.0/getting-started/introduction/

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

 

nav가 화면구성

 

 - template 안에 넣어준다.

 

 

 

 

 

 

 

 

 

 

 

 

folder src
js main.js 
import './assets/main.css'

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-icons/font/bootstrap-icons.css'

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
import 'bootstrap/dist/js/bootstrap.js'
view 단
 

 

 - 추가해준다.

import 'bootstrap/dist/css/bootstrap.min.css';

import 'bootstrap/dist/js/bootstrap.js';

import 'bootstrap-icons/font/bootstrap-icons.css'



 

 

window R cmd

cd C:\spring\springSrc17\oBootJpaApi01

 

set Java_HOME=C:\Program Files\Java\jdk-17 (jdk-17을 연동시키기 위해서)

 

 ** 현재는 oBootJpaApi01 폴더 안에 build가 없는 상태

 

gradlew build -> gradlew build 설치 시작     (아래 초록 글씨가 나와야한다.)

 

Spring으로 돌아가서 oBootJpaApi에 바로 file을 만들어준다 -> 이름: Dockerfile

folder oBootJpaApi01
file Dockerfile 
FROM openjdk:17
ARG JAR_FILE=./app.jar
COPY ${JAR_FILE} ./apprestapi.jar
ENV TZ=Asia/Seoul
EXPOSE 8389
ENTRYPOINT ["java", "-jar", "./apprestapi.jar"]

 

 - build -> libs  폴더에 위에 만든 file 넣어주고, 

oBootJpaApi01-version1.0.jar 파일 복사해서 붙혀넣고 이름을 app.jar로 바꿔주기

다시 cmd창으로 넘어와서 

cd C:\spring\springSrc17\oBootJpaApi01\build\libs

 

dir

 

docker 창이 띄어진 이후에

docker login

 

docker build -t spring-project-restapi .        -> docker를 만들어준다. 

 만들어져 있다.

cmd에서도 확인 가능

docker images

 

docker run -p 8389:8389 spring-project-restapi

 

docker에서도 실행 가능

 -> 오류가 나기 때문에 내일 다시 해볼 것이다 (다 삭제해주기!!)

 

 

src에 router 폴더 만들어준 후, router 폴더에 index.js 파일 만들어준다.

folder src/router
js index.js 
import AboutView from '@/views/AboutView.vue'
import HomeView from '@/views/HomeView.vue'
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'About',
    component: AboutView
  }
]

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

export default router
view 단
 

 

 - component를 만들어준 후, 다시 입력해서 import를 해준다.

 

 

 

 

 

 

 

folder src
js main.js 
import './assets/main.css'
import router from '@/router'

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-icons/font/bootstrap-icons.css'

import { createApp } from 'vue'
import App from './App.vue'
// createApp(App).mount('#app')
createApp(App).use(router).mount('#app')
import 'bootstrap/dist/js/bootstrap.js'
view 단
 

 

 

 

 

 

 

views 폴더 만들어주기 (src 안에)

folder views
vue HomeView.vue 
<template>
  <div>
    <h2>Home View</h2>
  </div>
</template>

<script setup></script>

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

 

 - vue는 뒤에 확장자 안붙혀주면, 자동으로 vue로 만들어주지 않기 때문에 .vue까지 붙혀주어야 한다.

 - vbase-3 setup으로 틀을 불러와준다.

 

 

 



folder views
vue AboutView.vue 
<template>
  <div>
    <h2>About View</h2>
  </div>
</template>

<script setup></script>

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

 

 - 마찬가지로 vb-setup으로 불러와준다.

 

 

folder src
vue App.vue 
<template>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</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 mb-2 mb-lg-0">
            <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 dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Dropdown
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
          <form class="d-flex">
            <input
              class="form-control me-2"
              type="search"
              placeholder="Search"
              aria-label="Search"
            />
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>
  </div>
</template>

<script setup></script>

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

 

 

 

 

 

 

 

 

folder layouts
vue TheHeader.vue 
<template>
  <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</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 mb-2 mb-lg-0">
            <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 dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Dropdown
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
          <form class="d-flex">
            <input
              class="form-control me-2"
              type="search"
              placeholder="Search"
              aria-label="Search"
            />
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>
  </header>
</template>

<script setup>
    //import { useRouter } from 'vue-router';
    // const router = useRouter()
</script>

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

 

 - vb setup

 - App.vue에서 코딩한 내용을 엎어쳐준다.

 

 

 

 



folder layouts
vue TheView.vue 
<template>
  <main>
    <div class="conatainer py-4">
      <RouterView></RouterView>
    </div>
  </main>
</template>

<script setup></script>

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

 

 - vbase setup 불러와준다.

 

 

 

 

'클라우드 데브옵스' 카테고리의 다른 글

Day72 2024.09.03.화 #코딩일기  (0) 2024.09.03
Day71 2024.09.02.월 #코딩일기  (0) 2024.09.02
Day68 2024.08.28.수 #코딩일기  (0) 2024.08.28
Day67 2024.08.27.화 #코딩일기  (0) 2024.08.27
Day66 2024.08.26.월 #코딩일기  (0) 2024.08.26

관련글

티스토리툴바