2024_08_29

오늘의 코딩순서

CMD창 입력

cmd에서 Vue의 새 프로젝트 생성하기
Boostrap5 설치 - npm install bootstrap bootstrap-icons
라우트 설치 - npm install vue-router
통신모듈( axios: ajax와 비슷한 기능) 설치- npm install axios

Vue => (폴더: vue3Member01) => Spring의 API를 MSA 방식을 사용하여 서버로 만들기

main.js => 메인 설정 import 추가하기
App.vue+ (router 폴더 만듬) index.js + (views 폴더 만듬)HomeView.vue + AboutView.vue
+ (layouts 폴더 만듬) TheHeader.vue+ TheView.vue

Spring => (폴더: oBootJpaApi01)

application.yml

Docker와 TBL연결해서 build폴더 만들고 이미지 만들기

CMD 켜서 Spring의 API 폴더 접속
Java의 jdk-17과 연결
build 폴더 만들기
Spring에서 docker를 배포할 수 있는 파일 만들기
lib 폴더에서 jar 파일 하나 더 만들고, 위에서 만든 Dockerfile도 넣기
CMD에서 lib폴더로 경로변경하고, 로그인 작업, 새로 생성
도커에 새 이미지 만들기

오늘의 코딩 포인트

CMD창 입력

1. cmd에 vue폴더의 sources 위치 치기

cd C:\vueJs\Sources

2. vue 접속

npm init vue

3. vue 프로젝트 생성 후 Yes나 No 눌러서 설정완료하기

4. 설치된 프로파일명으로 경로 변경하고 설치하기

cd C:\vueJs\Sources\vue3Member01

5. 명령어로 기능 설치하기

npm install

npm run format

npm run dev

Vue

1. 새 폴더 열기해서 만든 폴더 열고, 터미널에 Boostrap5 설치후 run dev

npm install bootstrap bootstrap-icons

npm run dev

2. ctrl+c눌러서 일괄작업 Yes선택

3. 라우트 설치

npm install vue-router

4. 통신모듈( axios: ajax와 비슷한 기능) 설치

 npm install axios

(폴더: vue3Member01)

main.js => 메인 설정 import 추가하기

import './assets/main.css'

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

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// createApp(App).mount('#app')
createApp(App).use(router).mount('#app')

App.vue

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

=> 여기에서 nav 검색해서 Navbar 카테고리의 Supported content의 첫 코드 복붙하기

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

<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>
export default {}
</script>

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

(router 폴더 만듬)

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

(views 폴더 만듬)

HomeView.vue
Tip) v-base-setup로 틀 만들기

<template>
  <div>
    <h2>HomeView</h2>
  </div>
</template>

<script setup></script>

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

AboutView.vue
Tip) https://getbootstrap.kr/docs/5.0/components/buttons/ 에서 버튼 색 참고
- btn-primary

<template>
  <div>
    <h2>AboutView</h2>
    <p>{{ $route.path }}</p>
    <button class="btn btn-primary" @click="$router.push('/')">Home 이동</button>
  </div>
</template>

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

const route = useRouter()
console.log('route.path:', route.path)
console.log('route:', route)
</script>

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

(layouts 폴더 만듬)

TheHeader.vue
Tip) 헤더 부분을 전담하여, 애플리케이션의 다른 부분과 독립적으로 관리할 수 있

<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>

TheView.vue
Tip) 메인 콘텐츠를 담당하는 영역으로, 이 내부에서 라우트에 따라 다른 컴포넌트가 렌더링됨
- <RouterView>
  - 메인 콘텐츠 영역만 변경되도록 함
    즉, 현재 활성화된 라우트에 해당하는 컴포넌트를 동적으로 렌더링하는 역할을 하여 애플리케이션의 특정 부분만 변경하고 나머지 레이아웃은 그대로 유지할 수 있음
  - 애플리케이션의 여러 페이지나 뷰를 중앙에서 관리할 수 있어서 코드의 유지보수성과 확장성이 향상되며, 새로운 페이지를 추가할 때마다 <RouterView>를 통해 쉽게 연동할 수 있음

App.vue
Tip) 애플리케이션의 레이아웃을 구성하는 데 사용되며, 각각의 컴포넌트가 특정한 역할을 담당함
애플리케이션의 레이아웃을 논리적으로 분리하고, 각 컴포넌트를 독립적으로 관리할 수 있게 함

<template>
  <div>
    <TheHeader></TheHeader>
    <TheView></TheView>
  </div>
</template>

<script setup>
import TheHeader from '@/layouts/TheHeader.vue'
import TheView from '@/layouts/TheView.vue'
// @'라는 경로를 src/ 경로로 바꿔주는 설정
</script>

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

Spring

application.yml

server:
  port: 8388
# Oracle Connect
spring:
  datasource:
    driver-class-name: oracle.jdbc.OracleDriver
    url: jdbc:oracle:thin:@127.0.0.1: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

http://localhost:8388/restApi/v1/members 접속 ↓↓↓

Docker와 TBL연결해서 build폴더 만들고 이미지 만들기

1. cmd 켜서 Spring의 API 폴더 접속하기

cd C:\Spring\springSrc17\oBootJpaApi01

2. Java의 jdk-17과 연결하기

set Java_HOME=C:\Program Files\Java\jdk-17

3. oBootJpaApi01폴더에 build 폴더 만들어서, BUILD SUCCESSFUL하기

gradlew build

4. Spring에서 docker를 배포할 수 있는 파일 만들기

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

5. C:\Spring\springSrc17\oBootJpaApi01\build\libs 경로로 들어가서 oBootJpaApi01-version.1.0.jar를 복붙하고,

복사한 파일 이름을 app로 바꾸기

6. Spring에 만든 Dockerfile도 넣기

7. 다시 CMD에서 경로변경후, dir 입력

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

dir

8. DOCKER를 켜놓고 로그인 작업후, 명령어 입력해서 Login Succeeded 나오면 성공

docker login

9. 도커 파일 읽어서 이미지 생성하게 하기

docker build -t spring-project-restapi .

10. 도커에 이미지 만들어졌는지 확인

docker images

11. 포트번호 입력하여 컨테이너 만들기

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

질문목록

수업교재

05.Vue component

11. script setup

1. 개념 및 특징

Single-File Component 내에서 Composition API를 사용하기 위한 syntactic sugar
SFC와 Composition API를 사용하는 경우 <script setup>을 사용하는 것을 권장
<script>구문보다 많은 장점을 제공
1. 간결한 문법으로 상용구(boilerplate)를 줄일 수 있음
2. 타입스크립트를 사용한 props와 emits 선언 가능 (공식문서)
3. 런타임 성능의 향상
  (템플릿이 setup 스크립트와 같은 스코프(scope)에 있는 render 함수로 컴파일되므로 프록시가 필요 없음)
4. 더 뛰어난 IDE 타입 추론 성능 (language 서버)가 코드로부터 타입을 추론해내는 데 비용이 절감됨
기본 문법
1. 내부 코드는 컴포넌트의 setup() 함수 안의 코드로 컴파일
2. 컴포넌트를 처음 가져올 때 한 번만 실행되는 일반 <script>와 달리, <script setup>는 컴포넌트의 인스턴스가 생성될 때마다 <script setup> 내부 코드가 실행됨
3. Top-level에 선언: <script setup> 내부 최 상위에 선언된 변수, 함수, import 는 <template>에서 직접 사용됨

06.Vue Router

1. Router

1. 개념

라우터(Router) 개념
- 라우터라고 하면 일반적으로 네트워크간에 데이터를 전송하는 장치
- 뷰에서 말하는 라우터는 쉽게 말해서 URL에 따라 어떤 페이지를 보여줄지 매핑해주는 라이브러리
뷰 라우터 (Vue Router): Vue.js를 이용하여 싱글 페이지 애플리케이션(SPA)을 구현할 때 사용하는 Vue.js의 공식 라우터
라우트 (Route) - 어떤 URL에 대해 어떤 페이지를 표시해야 하는지에 대한 정보

2. 라우터(router) 설정: app.use(router)를 호출 함으로써 컴포넌트 내부에서 $router, $route 객체에 접근

3. 뷰 라우터를 HTML과 JavaScript로 사용하는 방법

HTML
- <RouterLink>
  1. Vue Router 에서는 페이지를 이동할 때는 일반 a태그를 사용하는 대신 커스텀 컴포넌트인 를 사용하여 다른 페이지 링크를 만들어야 함
  2. 이를 통해 Vue Router는 페이지를 리로딩 하지 않고 URL에 매핑된 페이지를 렌더링 가능
- < RouterView>: <RouterView>는 URL에 매핑된 컴포넌트를 화면에 표시
JavaScript
- 위에서 router를 설정할 때 app.use(router)를 호출.
  이렇게 호출 함으로써 모든 자식 컴포넌트에 router, route 같은 객체를 사용 가능.
  그리고 이러한 객체는 페이지 이동 또는 현재 활성 라우트(경로 매핑)정보에 접근하는 데 사용할 수 있음
  1. router 라우터 인스턴스로 JavaScript에서 다른 페이지(컴포넌트)로 이동가능
    Options API : this.$router
    Composition API : useRouter()
    template : $router
  2. route 현재 활성 라우트 정보에 접근할 수 있음. (이 속성은 읽기 전용 입니다.)
    Options API : this.$route
    Composition API : useRoute()
    template : $rout

오늘의 숙제

'Vue.js' 카테고리의 다른 글

2024_09_03_화 (0)	2024.09.03
2024_08_30_금~09_02_월 (0)	2024.08.30
2024_08_28_수 (0)	2024.08.28
2024_08_27_화 (0)	2024.08.27
2024_08_26_월 (0)	2024.08.26

코딩일기

2024_08_29_목

오늘의 코딩순서

CMD창 입력

Vue => (폴더: vue3Member01) => Spring의 API를 MSA 방식을 사용하여 서버로 만들기

Spring => (폴더: oBootJpaApi01)

Docker와 TBL연결해서 build폴더 만들고 이미지 만들기

오늘의 코딩 포인트

CMD창 입력

Vue

(폴더: vue3Member01)

(router 폴더 만듬)

(views 폴더 만듬)

(layouts 폴더 만듬)

Spring

Docker와 TBL연결해서 build폴더 만들고 이미지 만들기

질문목록

수업교재

05.Vue component

11. script setup

06.Vue Router

1. Router

오늘의 숙제

'Vue.js' 카테고리의 다른 글

티스토리툴바

2024_08_29_목

오늘의 코딩순서

CMD창 입력

Vue => (폴더: vue3Member01) => Spring의 API를 MSA 방식을 사용하여 서버로 만들기

Spring => (폴더: oBootJpaApi01)

Docker와 TBL연결해서 build폴더 만들고 이미지 만들기

오늘의 코딩 포인트

CMD창 입력

Vue

(폴더: vue3Member01)

(router 폴더 만듬)

(views 폴더 만듬)

(layouts 폴더 만듬)

Spring

Docker와 TBL연결해서 build폴더 만들고 이미지 만들기

질문목록

수업교재

05.Vue component

11. script setup

06.Vue Router

1. Router

오늘의 숙제

'Vue.js' 카테고리의 다른 글

관련글

티스토리툴바