본격적인 개발의 시작이다. 일단 vue3 webpack을 사용해주었다. 모듈 관리 시스템이라고 보면 편하다.
npx degit ParkYoungWoong/vue3-webpack-template#eslint 이름헤로피 블로그를 운영하시는 프론트엔드 개발자님의 깃허브에서 가져왔다. eslint 설정이 깔끔해서 사용한다. webpack 내에 있는 의존성 패키지는 다음과 같다.
"devDependencies": {
"@babel/core": "^7.13.10",
"@babel/plugin-transform-runtime": "^7.13.10",
"@babel/preset-env": "^7.13.10",
"@vue/compiler-sfc": "^3.0.11",
"autoprefixer": "^10.2.5",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"copy-webpack-plugin": "^8.0.0",
"css-loader": "^5.1.3",
"eslint": "^7.22.0",
"eslint-plugin-vue": "^7.8.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.1",
"postcss": "^8.2.8",
"postcss-loader": "^5.2.0",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"vue-loader": "^16.1.2",
"vue-style-loader": "^4.1.3",
"webpack": "^5.27.1",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^4.0.0-beta.0"
},
"dependencies": {
"@popperjs/core": "^2.11.2",
"bootstrap": "^5.1.3",
"vue": "^3.2.29",
"vue-router": "^4.0.12"
}babel, eslint, sass, bootstrap, vue, vue-router정도를 사용해 주었다.
바로 헤더를 만들기 위해 부트스트랩을 사용했지만 어림도 없었다. 이번 개발의 목적은 모바일에서도 제대로 작동하는 웹을 개발하는 것이였는데 부트스트랩 스크립트가 작동하지않았다. 왜? KSK 커뮤니티에도 질문해보고, stack overflow에서도 물어봤다. 답은 스택오버플로우에서 얻을 수 있었는데
https://stackoverflow.com/questions/70921843/how-to-you-use-bootstrap-nav-bar-in-vue-js
How to you use bootstrap nav bar in vue.js?
In general html, it is used well as written in docs, but it does not work properly in my vue project.Is it a problem that I didn't import popperjs? I don't think I'm exporting to html, and I'm not ...
stackoverflow.com
내가 질문하고도 웃기다. 그냥 부트스트랩 스크립트가 존재하지 않아서 스크립트가 작동하지 않고 css파트만 작동 한 것이다.
이걸로 약 이틀을 날렸다. 부트스트랩에는 부트스트랩 뷰라는 것이 따로 있어서 아! 뷰에서는 부트스트랩 뷰가 없으면 작동 하지 않는구나 했는데, 그게 아니였다. 이것때문에 다른 css 프레임워크를 적용한다고 이틀을 날린 것이다. 이 때 사용 해본게, tailwind, balmui, vuetify등이 있었다.
공부한 부트스트랩도 제대로 못쓰는 내가 테일윈드 같은 프레임워크를 감당할 리가 없었고 ㅋㅋ 결국 이틀동안 헤메다가 스택오버플로우에서 5분만에 해결했다.
솔직히 반응형만 되면 라우팅이고 뭐고 다 필요없지만 그래도 웹 구성을 어떻게 했는지 보여주겠다.
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './Home'
//first Page
import PastorGreeting from './SchoolIntroduction/PastorGreeting';
import PhilosophyEducation from './SchoolIntroduction/PhilosophyEducation';
import SchoolFacilities from './SchoolIntroduction/SchoolFacilities';
import SchoolHistory from './SchoolIntroduction/SchoolHistory';
import TeacherIntroduction from './SchoolIntroduction/TeacherIntroduction';
//second Page
import Curriculum from './EducationInfo/Curriculum'
import AdmissionFAQ from './EducationInfo/AdmissionFAQ'
import AcademicCalendar from './EducationInfo/AcademicCalendar'
//third Page
import ConsultationInquiry from './AdmissionGuide/ConsultationInquiry'
import EducationExpenses from './AdmissionGuide/EducationExpenses'
import RecruitmentGuide from './AdmissionGuide/RecruitmentGuide'
//fourth Page
import NoticeBoard from './SchoolStory/NoticeBoard'
import SchoolActivities from './SchoolStory/SchoolActivities'
import SchoolNews from './SchoolStory/SchoolNews'
//roadMap Page
import RoadMap from './Map.vue'
export default createRouter({
//hash mode or history
history: createWebHashHistory(),
routes: [{
path: '/',
component: Home
},
{
path: '/SchoolIntroduction/PastorGreeting',
component: PastorGreeting
},
{
path: '/SchoolIntroduction/PhilosophyEducation',
component: PhilosophyEducation
},
{
path: '/SchoolIntroduction/SchoolFacilities',
component: SchoolFacilities
},
{
path: '/SchoolIntroduction/SchoolHistory',
component: SchoolHistory
},
{
path: '/SchoolIntroduction/TeacherIntroduction',
component: TeacherIntroduction
},
{
path: '/EducationInfo/Curriculum',
component: Curriculum
},
{
path: '/EducationInfo/AdmissionFAQ',
component: AdmissionFAQ
},
{
path: '/EducationInfo/AcademicCalendar',
component: AcademicCalendar
},
{
path: '/AdmissionGuide/ConsultationInquiry',
component: ConsultationInquiry
},
{
path: '/AdmissionGuide/EducationExpenses',
component: EducationExpenses
},
{
path: '/AdmissionGuide/RecruitmentGuide',
component: RecruitmentGuide
},
{
path: '/SchoolStory/NoticeBoard',
component: NoticeBoard
},
{
path: '/SchoolStory/SchoolActivities',
component: SchoolActivities
},
{
path: '/SchoolStory/SchoolNews',
component: SchoolNews
},
{
path: '/RoadMap',
component: RoadMap
}
]
});HTML5 히스토리 모드 | Vue Router
HTML5 히스토리 모드 vue-router의 기본 모드는 hash mode 입니다. URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않습니다. 해시를 제거하기 위해 라우터의
router.vuejs.org
이런식으로 히스토리 모드로 웹을 구현하였다.
상세경로가 명확하게 보이기 때문에 선택하였다.
헤더는 컴포넌트로 다음과 같이 구현하였다.
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a
class="navbar-brand"
href="#">
<img
src="src\assets\logo.png"
alt=""
width="250" /></a>
<!-- mediaquery 반응형 버튼 -->
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navBarHeader"
aria-controls="navBarHeader"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse"
id="navBarHeader">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-bs-toggle="dropdown"
aria-expanded="true">
학교 소개
</a>
<ul
class="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink">
<li
class="nav-item"
v-for="nav in first_menu"
:key="nav.name">
<RouterLink
:to="nav.href"
class="nav-link">
{{ nav.name }}
</RouterLink>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-bs-toggle="dropdown"
aria-expanded="true">
교육 정보
</a>
<ul
class="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink">
<li
class="nav-item"
v-for="nav in second_menu"
:key="nav.name">
<RouterLink
:to="nav.href"
class="nav-link">
{{ nav.name }}
</RouterLink>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-bs-toggle="dropdown"
aria-expanded="true">
입학 안내
</a>
<ul
class="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink">
<li
class="nav-item"
v-for="nav in third_menu"
:key="nav.name">
<RouterLink
:to="nav.href"
class="nav-link">
{{ nav.name }}
</RouterLink>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-bs-toggle="dropdown"
aria-expanded="true">
국크 이야기
</a>
<ul
class="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink">
<li
class="nav-item"
v-for="nav in fourth_menu"
:key="nav.name">
<RouterLink
:to="nav.href"
class="nav-link">
{{ nav.name }}
</RouterLink>
</li>
</ul>
</li>
<li class="nav-item come-to-school">
<RouterLink
to="/RoadMap"
class="nav-link">
오시는 길
</RouterLink>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
export default {
data() {
return {
first_menu: [
{
name: '이사장 인사말',
href: '/SchoolIntroduction/PastorGreeting'
},
{
name: '학교 연혁',
href: '/SchoolIntroduction/SchoolHistory'
},
{
name: '교육 철학',
href: '/SchoolIntroduction/PhilosophyEducation'
},
{
name: '교직원 소개',
href: '/SchoolIntroduction/TeacherIntroduction'
},
{
name: '학교 시설',
href: '/SchoolIntroduction/SchoolFacilities'
}
],
second_menu: [
{
name: '학사 일정',
href: '/EducationInfo/AcademicCalendar'
},
{
name: '커리큘럼',
href: '/EducationInfo/Curriculum'
},
{
name: '입학 FAQ',
href: '/EducationInfo/AdmissionFAQ'
}
],
third_menu: [
{
name: '모집 요강',
href: '/AdmissionGuide/RecruitmentGuide'
},
{
name: '교육비 안내',
href: '/AdmissionGuide/EducationExpenses'
},
{
name: '상담 문의',
href: '/AdmissionGuide/ConsultationInquiry'
}
],
fourth_menu: [
{
name: '학교 소식',
href: '/SchoolStory/SchoolNews'
},
{
name: '학교 활동',
href: '/SchoolStory/SchoolActivities'
},
{
name: '학생 마당',
href: '/SchoolStory/NoticeBoard'
}
]
}
}
}
</script>
<style scoped lang="scss">
.dropdown{
padding-left: 25px;
.nav-item{
padding-left: 10px;
}
}
.come-to-school{
padding-left: 25px;
}
</style>eslint때문에 줄은 매우 길어보이지만 실상 그렇게 긴 줄은 아니다. vue 문법을 이용하여 script 태그 안에 header 이름들을 dropdown 클래스에 ~~_menu라는 이름으로 바인딩 해주었다.
헤더 개발 끝! 나중에 오른쪽에 로그인 요소들을 만들어 줄 생각이다.
'프론트엔드 개발 > 온누리학교 웹 개발 프로젝트' 카테고리의 다른 글
| [Vue.js/개발일지] 5. 세부 페이지 제작 (0) | 2022.02.03 |
|---|---|
| [Vue.js/개발일지] 04. 오시는 길 제작하기 (Kakao map API) (0) | 2022.02.03 |
| [Vue.js/개발일지] 3. Footer 만들기 및 라우팅 트랜지션 (0) | 2022.02.02 |
| [Vue.js/개발일지] 2. 메인 페이지 swiper 제작 (0) | 2022.02.02 |
| [Vue.js/개발 일지] 00. 개발을 시작하며 (0) | 2022.01.31 |
