728x90
반응형
오늘 회사동료가 재미있어 보이는 걸 하길래 한번 해보았다.
Vue를 가지고 프로젝트를 하는데, 기존의 프로젝트는 Vue2의 인라인 템플릿을 활용하여 구축했었는데,
Vue3를 이용해서 한다는 것, 그래서 인라인 템플릿을 사용 못하는 상황이라는데..
공식 홈페이지에서 Vue를 cdn으로 가져오니
실제로 cdn을 통해 가져 온 Vue는 2.6.14버전이었다..
-- 수정
Vue 공식홈페이지에서는 안정화 되어 있는 2.6.14버전만 cdn으로 배포하는 것 같고.. Vue3 버전의
cdn을 가져오려면 아래 스크립트를 넣으면 될 것 같다.
-- 가장 최신 버전의 Vue를 가져옴 2022.03.05 기준 3.2.31버전
<script src="https://unpkg.com/vue@next"></script>
-- Vue 3.1.1 버전
<script src="https://unpkg.com/vue@v3.1.1"></script>
각설하고 바로 jsp환경에서 import, export를 해서
component들을 생성하고 Vue인스턴스에 넣어서 DOM에 부착해보자..
아래 그림을 잘 봐두도록 하자. 아래와 같은 그림으로 진행 될 것이다.
부트스트랩5에서 디자인 가져오기
============================================================================
부트스트랩5에서 디자인을 골라보자. 아무거나 골라도 된다. 나는 아래와 같은 녀석을 골랐다.
나는 이 화면을 header, body, footer 이렇게 3개의 컴포넌트로 만들 생각이다. 그럼 바로 시작해보자.
우선 아래와 같이 3개의 js파일을 생성한다.
oneComponent.js
export default{
template : `
<header>
<div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
<a href="#" class="d-flex align-items-center text-dark text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
<span class="fs-4" @click="alertMain()">Pricing example</span>
</a>
<nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Features</a>
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Enterprise</a>
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a>
<a class="py-2 text-dark text-decoration-none" href="#">Pricing</a>
</nav>
</div>
<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
<h1 class="display-4 fw-normal">Pricing</h1>
<p class="fs-5 text-muted">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
</div>
</header>
`,
methods : {
alertMain : function(){
alert("메인로고 입니다.");
}
}
}
twoComponent.js
export default{
template : `
<main>
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Free</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$0<small class="text-muted fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 users included</li>
<li>2 GB of storage</li>
<li>Email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Pro</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$15<small class="text-muted fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>20 users included</li>
<li>10 GB of storage</li>
<li>Priority email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-primary">Get started</button>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm border-primary">
<div class="card-header py-3 text-white bg-primary border-primary">
<h4 class="my-0 fw-normal">Enterprise</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$29<small class="text-muted fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>30 users included</li>
<li>15 GB of storage</li>
<li>Phone and email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-primary">Contact us</button>
</div>
</div>
</div>
</div>
<h2 class="display-6 text-center mb-4">Compare plans</h2>
<div class="table-responsive">
<table class="table text-center">
<thead>
<tr>
<th style="width: 34%;"></th>
<th style="width: 22%;">Free</th>
<th style="width: 22%;">Pro</th>
<th style="width: 22%;">Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="text-start">Public</th>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Private</th>
<td></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="row" class="text-start">Permissions</th>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Sharing</th>
<td></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Unlimited members</th>
<td></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
</tr>
<tr>
<th scope="row" class="text-start">Extra security</th>
<td></td>
<td></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
</tr>
</tbody>
</table>
</div>
</main>
`,
}
threeComponent.js
export default{
template : `
<footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="24" height="19">
<small class="d-block mb-3 text-muted">© 2017–2021</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Random feature</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team feature</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another one</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource name</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another resource</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Locations</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Privacy</a></li>
<li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
`,
}
자 이렇게 3개의 컴포넌트를 만들었다. 설명할 것도 없다. 그냥 export defalut를 해주고 템플릿만 잡아주었다.
export default를 모르면 ES6 문법 공부를 하자. ( 사실 나도 잘 모르지만.. )
그리고 이 컴포넌트들을 부착할 인스턴스를 하나 만들어주자.
testInstance.js
import oneComponent from './components/oneComponent.js'; // 컴포넌트1 import
import twoComponent from './components/twoComponent.js'; // 컴포넌트2 import
import threeComponent from './components/threeComponent.js'; // 컴포넌트3 import
//각 컴포넌트들을 변수에 할당
const one_component = oneComponent;
const two_component = twoComponent;
const three_component = threeComponent;
//뷰인스턴스 생성 및 컴포넌트들 저장
new Vue({
el : '#app',
components: {
'one-component': one_component,
'two-component': two_component,
'three-component': three_component
}
})
자 이렇게 하고... 실제 화면으로 가보자..
testHTML.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<script type="module" src="<c:url value='/js/testInstance.js' />"></script>
<body>
<!-- el태그의 app -->
<div id="app" class="container py-3">
<!-- 각 컴포넌트 붙여줌 -->
<one-component></one-component>
<two-component></two-component>
<three-component></three-component>
</div>
</body>
<!-- 부트스트랩 스타일 -->
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</html>
따로 설명은 안하겠다. 그냥 필요한 애들 갖다 붙인거니까.. 여기 있는 내용들 전부 내 블로그에 정리해놨으니
모르는 거 있으면 찾아보자.
그럼 실행을 해보자.
짠. InstanceTest.do로 해당 페이지를 여니까 잘 열린다. 그리고 앞에 코드를 보면.. 테스트로 함수를 하나 생성했었다..
헤더에 있는 로고를 클릭하면 alertMain이라는 녀석을 호출하는 뷰 디렉티브를 넣어줬었다.
해당 함수는 아래와 같다.
그럼 실제로 클릭을 해보자..
잘뜬다... 이런식으로 그냥 하나하나 컴포넌트들을 만들고, 인스턴스에 부착한 뒤 필요한 곳에 갖다 쓰면 되지 않을까?
나도 아직 Vue는 잘 몰라서 공부가 필요하다. 비동기 통신이나 이런 건 테스트 안해봤고, 여러 페이지들을 만들어서
붙인 것도 아니라서, 실제로 이렇게 개발을 해도 되는 지는 모르겠지만,,
component를 어떻게 export하고 import하는지에 의의를 두고 보면 좋을 것 같다. 끝
728x90
반응형
'FrontEnd > Vue' 카테고리의 다른 글
| [Vue] 하위 컴포넌트에서 상위 컴포넌트 데이터 전달 ( this.$emit ) (0) | 2022.03.07 |
|---|---|
| [Vue] 웹팩 감시 옵션을 추가하여 자동으로 웹팩을 빌드해보자. (0) | 2022.03.05 |
| [Vue] 'v-model' directives aren't supported on 태그 elements. 에러 (0) | 2022.03.01 |
| [Vue] vue.config.js를 이용해서 프록시를 설정해보자. (0) | 2022.02.21 |
| [Vue] Vue3 환경에서 axios를 사용해보자. (0) | 2022.02.20 |
