📚금일 학습 내용
vue router의 종류, 네비게이션 가드, 메타 필드, Babel구성, PostCSS, Autoprefixer, 웹팩 정리
🏫데브코스
📌Vue Day7
📌Vue Router
📌Hash & HTML5
뷰에서 라우팅 처리를 할 수 있는 방식으로 2가지를 제공한다. Hash와 HTML5 방식인데 Hash의 경우 URL에 #이 삽입되는 것과 서버에 추가적인 요청을 요구할 필요가 없다는 것이 특징이고 HTML5는 서버 설정이 따로 필요하지만 매우 유저직관적이다.
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [
//...
],
})
//-----------------------------------
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
//...
],
})
//아래와 같은 설정들이 필요하다.
output: {
path: path.resolve(__dirname, "dist"), // 혹은 'build' 혹은 'public'이지만 dist가 제일 무난
publicPath: '/',
clean: true,
},
...중략
devServer: {
historyApiFallback: true,
},📌Vue Router 네비게이션 가드, 메타 필드
어렵지만 유용한 개념이다. 개념을 먼저 살펴보자면 네비게이션 가드란 라우트의 전환 전, 후 또는 중간에 특정 동작을 수행할 수 있도록 해주는 기능이다. 여러가지 기능이 있지만 해당 기능은 필요할 경우 공식문서를 참조하도록 하자. 뷰의 장점은 공식 문서의 퀄리티가 매우 높다는 것이다.
실습에서 사용했던 것은 beforeEach로 라우트 전환 전에 실행되는 가장 일반적인 네비게이션 가드이다. 로그인 여부를 감지하여 path를 처리해주는 것이다.
router.beforeEach((to) => {
// to 접근하려는 페이지 정보
// from 이전 페이지 정보
// next 해당 페이지로 넘어가는 기능, 하지만 굳이 사용 X
console.log(store);
if (to.meta.requiresAuth && !store.state.user.isLoggedIn) {
return {
path: "/login",
query: { redirect: to.fullPath },
};
}
});메타 필드는 각 라우트에 추가 정보를 저장하는 데 사용된다. 컴포넌트에서 이러한 정보를 주로 활용한다. 아래와 같이 사용자의 인증이 필요한지 여부를 나타내는 메타 필드인 requiresAuth 사용하여 위 코드와 함께 동작한다. 로그인이 되어있다면 페이지를 보여주고 그렇지 않다면 로그인 페이지로 redirect 시켜주는 과정이다.
export default createRouter({
history: createWebHistory(),
routes: [
{
path: "/",
component: Home,
},
{
path: "/about",
component: About,
meta: {
// 필요한 정보
requiresAuth: true,
},
},
{
path: "/login",
component: LogIn,
},
],
});라우터에서 페이지 위치가 바뀔 때 스크롤의 위치를 지정해줄 수 있다. routes/index.js에 createRouter 인수 객체에 아래 조건을 추가해주자.
scrollBehavior() {
return { top: 0 };
},📌 Babel
Bable이 아니다... Babel이다.
설치할 때 이름을 조심하자 한참 헤맸다.
Babel이 뭘까? 웹팩, 바벨을 프론트엔드 개발할 때 많이 사용하지만 막상 개발을 할 때 일단 내 브라우저에서는 동작하니까, 그리고 로직 개발하기도 급급했기에 막상 깊게 공부해본 적은 없었는데 이번에 좋은 기회로 공부를 하게 되었다.
Babel이란 최신의 JS문법을 구형 브라우저에서 동작할 수 있도록 변환시켜주는 트랜스파일러 이다. 즉 신기능을 구형 브라우저 혹은 구형 동작환경에서도 호환성을 유지시켜주는 매우 중요한 요소였다.
여러 플러그인이 있었지만 npm i -D @babel/preset-env으로 한방에 여러 기능들을 사용할 수 있다. 필요한 기능은 여기서 필요에 따라 babel.config.json에 plugin에 등록 후 사용하면 된다.
아래와 같이 브라우저 정보에 대해서도 여러 조건을 추가할 수 있다.
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"ie >= 11"
],하지만 이대로 실행하니 오류가 났는데 한가지 예시를 들면 require 같은 것에서 에러가 났다. 왜냐하면 require는 nodejs에서 쓰는 것이라 브라우저는 모른다! 그래서 이때는 웹팩을 통해서 모듈이 브라우저에서 동작하는 번들로 묶어서 사용되도록 해야한다.
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader
추가로 PostCSS와 Autoprefixer에 대해서도 살펴보았다. PostCSS와 Autoprefixer는 CSS 후처리 도구 중의 하나인데, 화면에 보여주고 나서 CSS 변경 (기본 CSS 파일 작성 -> 렌더링 -> CSS변경)하는 방식으로 동작한다고 한다. CSS확장이나 이런 부분에서 장점을 가진다는데 일단 VUE에서 사용하기는 매우 편해 보인다.
지금까지 학습한 것을 정리하여 담은 템플릿을 만들게 되었다. 브랜치가 몇개고..
https://github.com/SoJuSo/prgrms_vue/tree/Day51_final
📘독스클럽의 시작!
오늘 회장님(?)이신 원주님을 필두로 독스클럽 환영회를 했다. 처음으로 많은 사람들과 즐겁게 대화도 하고 얘기도 하고 게임도 했는데 다들 너무 반가웠고 재미있었다ㅋㅋㅋ 라이어 게임이 그렇게 재미있을 줄이야..
다만 요즘 너무 바빠서 일정을 어떻게 가져가야할 지 모르겠는데 일단 열심히 따라가야겠다. 하다보면 각이 나오겠지..?
📖소회
발표는 다가오고 뷰 강의는 많고 과제는 곧 시작이고 신경써야할 것들이 너무나도 많으니까 오히려 자꾸 포기하려고 한다. 근데 어쩌겠는가? 니선발 악깡버 그래도 중간 중간 나를 많이 알아봐주시는 분들도 많고(?) 뭔가 머리속에서 개발 관련 회로가 점점 더 활발하게 활성화되고 있는 것 같아서 기분이 좋다.
내일도 오프라인 모각코가 있는데 저녁 선약이 있어 밥은 못먹지만 또 새로운 분들을 뵙는게 기대된다. 내일도 화이팅🔥🔥
TIL 작성 소요시간 25분
