2024. 1. 6. 17:34ㆍ언어/java
전체 흐름도를 코드로 적어 보겠다.
프론트엔드
index.html 파일 (처음 파일 )
전체 내용과 외관 , 동작 정의
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Node Vue Web">
<link rel="stylesheet" href="/client/resources/css/style.css">
<link rel="stylesheet" href="/client/resources/css/stylem.css">
<script src="/client/resources/js/jquery-2.1.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<title>카페 메뉴 관리</title>
</head>
<body>
<div id="root"></div>
<script src="/client/build/bundle.js"></script>
</body>
</html>
하나씩 나누면서 설명 하겠습니다.
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Node Vue Web">
메타 태그 안에는 웹 페이지에 대한 메타데이터들을 정의
여기서는
문자 인코딩 방법 ,
IE호환성 : <meta http-equiv="X-UA-Compatible" content="IE=edge"> 인터넷 익스플러 가 어떻게 렌더링 되는지 정의
뷰포트 설정 - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 모바일에 어떻게 보여줄 것인가 정의
페이지 설명 - <meta name="description" content="Node Vue Web"> 검색 엔지 결과 페이지에서 스니펫으로 사용 , 보여지는 설명
<link rel="stylesheet" href="/client/resources/css/style.css">
<link rel="stylesheet" href="/client/resources/css/stylem.css">
외부 리소스를 연결 하는데 사용 . 두개의 CSS 파일을 연결하여 웹 페이지의 스타일을 정의
<script src="/client/resources/js/jquery-2.1.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>두개의 jQuery 라이브러리를 불러오고 있음
jQuery 라이브러리는
. HTML 문서 탐색, 이벤트 처리, 애니메이션 제작, AJAX 통신 등을 간편하게 처리할 수 있도록 도와줍니다.
<body>
<div id="root"></div>
<script src="/client/build/bundle.js"></script>
</body>id가 root
bundle 스크립트를 동적으로 내용을 추가함
궁금한점 ? bundle 스크립트를 추가는 누가하고 생성은 자동인가?
웹팩(Webpack) 같은 모듈 번들러(module bundler)를 사용하여 여러 JavaScript 파일을 하나로 묶은 결과물
Header.vue
헤더
router-link는 Vue Router에서 제공하는 컴포넌트로, 클릭하면 지정된 경로(/cafe.page)로 이동
<template>
<header>
<div class="nav">
<ul>
<li><router-link to="/cafe.page">메뉴</router-link></li>
</ul>
</div>
</header>
</template>AppRouter.js
import { createWebHistory, createRouter } from "vue-router";
import Cafe from "../pages/cafe/Cafe.vue";
const routes = [
/* 카페 */
{ path: "/cafe.page", name: "Cafe", component: Cafe },
];
const AppRouter = createRouter({
history: createWebHistory(),
routes,
});
export default AppRouter;위는 전체 코드이다
import { createWebHistory, createRouter } from "vue-router";첫줄은 Vue.js에서 웹 애플리케이션의 라우팅을 관리하는 라이브러리
라우팅이란 웹 애플리케이션의 페이지 간이동을 관리하는것이다.
개발자가 직접 라우팅을 효과적으로 하기위해서 이 라이브러리를 불러옴
import Cafe from "../pages/cafe/Cafe.vue";cafe.vue 컴포넌트를 불러온다.
const routes = [
{ path: "/cafe.page", name: "Cafe", component: Cafe },
];라우터 (네트워크 두개 연결 시켜주는거 )정보를 담고
path - url경로
name - 해당 라우터 이름
component - 해당경로에 접근 했을때 보여줄 컴포넌트
const AppRouter = createRouter({
history: createWebHistory(),
routes,
});createRouter 함수를 사용하여 라우터 인스턴스를 생성
history , routes 라는 두가지 정보를 가진다.
'history'는 웹 브라우저의 히스토리 모드를 사용하고, 'routes'는 위에서 정의한 라우트 정보를 사용합니다.
궁금한점 ? 웹 브라저의 히스토리 모드가 뭐야?
히스토리 모드는 웹 애플리케이션에서 페이지를 넘어갈 때마다 URL이 변경되도록 하는 기능
export default AppRouter;이걸적게 되면 밑에 흐름
index.js 파일 에서는 appRouter라는 이름으로 불러와서 vue 애플리케이션을 적용
이렇게 해서 vue 는 vue Router의 설정을 알게되고 이를 통해 애플리케이션의
페이지 간 이동을 관리
index.js 코드
import { createApp } from 'vue';
import AppRouter from './pages/AppRouter.js';
import App from './pages/App.vue';
const vue = createApp(App).use(AppRouter).mount('#root');이 코드는 'vue'라는 라이브러리에서 'createApp'이라는 함수를 불러오는 역할을 합니다.
'createApp' 함수는 새로운 Vue 애플리케이션을 만드는 데 사용됩니다.
'AppRouter.js'는 웹사이트의 여러 페이지를 관리하는 라우팅 설정을 담고 있고, 'App.vue'는 웹사이트의 가장 기본이 되는 틀을 담고 있는 파일입니다.
마지막 코드는 'App.vue'를 기반으로 한 새로운 Vue 애플리케이션을 만들고, 'AppRouter.js'의 라우팅 설정을 적용하고, 이 애플리케이션을 웹페이지에 붙이는 역할을 합니다.
App.vue
<template>
<div>
<Header ></Header>
<div class="main-warp">
<router-view/>
</div>
</div>
</template>
<script>
import Header from '../layout/Header.vue';
const App = {
data: () => {
return {
}
},
methods: {},
watch: {},
computed: {},
components: {
Header: Header
},
mounted: () => {
console.log('Vue mounted');
}
}
export default App;
</script>
<style scoped>
</style>전체 코드입니다.
<template>
<div>
<Header ></Header>
<div class="main-warp">
<router-view/>
</div>
</div>
</template>Vue.js에서 웹 페이지의 기본 구조를 정의하는 부분
<Header ></Header>: Header.vue 컴포넌트를 사용하여 웹페이지의 헤더 부분을 그리는 것
const App = {
data: () => {
return {
}
},
methods: {},
watch: {},
computed: {},
components: {
Header: Header
},
mounted: () => {
console.log('Vue mounted');
}
}
data: 컴포넌트의 데이터를 정의합니다. 이 데이터는 컴포넌트 내부에서 사용될 수 있습니다.
methods: 컴포넌트에서 사용될 메서드를 정의합니다.
watch: 데이터의 변화를 감시하고, 변화가 있을 때마다 특정 로직을 실행합니다.
computed: 계산된 속성을 정의합니다. 데이터의 변화에 따라 자동으로 값이 갱신됩니다.
components: 이 컴포넌트에서 사용할 다른 컴포넌트들을 등록합니다. 여기서는 Header 컴포넌트를 등록하고 있습니다.
index.html: 이 파일은 애플리케이션의 기본 HTML 구조를 제공하므로, 먼저 작성하는 것이 좋습니다. 이 파일에서 애플리케이션의 루트 요소를 정의합니다.
App.vue: 이 파일은 애플리케이션의 루트 컴포넌트이므로, 애플리케이션의 기본 레이아웃을 정의합니다. 먼저 이 파일을 작성하면 전체 애플리케이션의 구조를 미리 설정할 수 있습니다.
기타 컴포넌트: App.vue에서 사용될 다른 Vue 컴포넌트를 작성합니다. 이 단계에서는 각 컴포넌트의 구조와 기능을 정의합니다. 예를 들어, Header.vue 같은 컴포넌트를 이 단계에서 작성할 수 있습니다.
AppRouter.js: 이제 각각의 라우트에 어떤 컴포넌트를 연결할지 정의하는 라우터 설정을 작성합니다. 이 파일에서는 각 경로에 대한 컴포넌트를 지정하고, Vue Router 인스턴스를 생성합니다.
index.js: 마지막으로, 애플리케이션의 시작점인 index.js를 작성합니다. 이 파일에서 Vue 애플리케이션을 생성하고, 라우터를 애플리케이션에 연결하며, 애플리케이션을 index.html의 루트 요소에 붙입니다.
이어서 cafe.vue 다음장에 설명
'언어 > java' 카테고리의 다른 글
| 7. 카페메뉴 백엔드 CRUD (0) | 2024.01.07 |
|---|---|
| 6. 카페메뉴 프론트엔드(2) (0) | 2024.01.07 |
| 4. 카페 메뉴 관리 전체 흐름 (3) | 2024.01.02 |
| 3. 카페 메뉴얼관리 ( 데이터 베이스 설명 ) (0) | 2023.12.31 |
| 2. 카페 메뉴얼관리 ( 데이터 조회 ) (0) | 2023.12.30 |