vue를 시작한지 며칠이 지났더라...

0) npm 설치

1) 기본작업 (시작 >> cmd 검색 후 명령 프롬프트)

npm install -g vue@next npm install -g @vue/cli

2) 원하는 폴더에 워크스페이스 생성 후 주소창에 cmd를 입력해서 해당폴더를 위치로 하는 명령 프롬프트 실행

npm init vite-app (프로젝트이름)

몇몇 예시는 vue create (프로젝트이름) 으로 진행하던데 vue 1, 2 에서는 몰라도 vue3 공식문서는 npm init vite-app 으로 설명하고 있어서 vue create 는 여기에서는 언급하지 않겠음. 솔직히 vue 프로젝트가 만들어지는것은 같고 기본파일들은 미묘하게 다른것 같음.

 

3) 프로젝트 생성 후 다음 작업

cd (프로젝트이름) npm install npm run dev

npm 을 자바의 maven이나 gradle 처럼 생각하면 써먹기 편한건 사실. 그런데 npm install (-g: 글로벌 여부) (패키지이름)과 달리 npm install 단독으로 있는건 무슨 효과인지는 아직 모름.

 

일단 시작하면 npm run dev 이후 웹브라우저에서 확인이 가능. 기존 spring mvc나 spring boot + servlet 과는 달리 .jsp 파일이 아닌 .vue 파일이 주가 되고, vue 파일을 수정한 다음 저장할때마다 웹브라우저에 즉각반영된다. 이유인 즉슨 vite 때문이라고. 구체적으로는 더는 모르지만 마치 adobe bracket 으로 타이핑 하나하나 할때마다 웹브라우저에서 즉각적으로 보이던 그 기능이 생각날 따름.

 

Option) 기타: Materialize, Material-design-icons

npm install materialize-css npm install material-design-icons

app.js (하단 M 객체 임포트와 css 임포트 2줄 신규추가)

import { createApp } from "vue";
import App from "./App.vue";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.css";
import "material-design-icons/iconsfont/material-icons.css";

구글 안드로이드 디자인 효과를 상당히 재현한 웹 css 프레임워크인 Materialize 를 npm 에서 불러다 사용할 수 있다. 경로는 node_modules/materialize-css 이고 material-design-icons 의 경우에는 딱시 경로를 파알할 필요 까지는 없음.

 

단, 최초 install 시 색상선택이 안되고 디폴트로 materialize-red 색상과 teal 색상으로 고정되어있는데 이는 Scott SCSS 툴을 이용해 변수화해서 빌드하면 전체적인 색상을 바꿀 수 있음. 이것 말고도 가급적이면 SCSS의 변경 및 빌드를 통해 수정하는것이 유지보수, 재사용 측면에서 매우 좋음. 하루 정도 날 잡고 CSS 변수화 및 컴포넌트별 스타일 전부 재정비하고 사용하는 것을 추천. npm을 통해 받는 materialize-css는 다크 테마가 없다는 점 유의

materialize.css 0.12MB

나름 Scott SCSS로 커스텀한 materialize 테마. 다크테마에 프라이머리 컬러는 deep-purple 임

 

기껏 작업해놓고 해당 프로젝트 날라가버려서 다음 프로젝트 때 npm install materialize-css 다시 하면 디폴트 컬러로 된 작업물 다시 받아오게 되느 변수화 시킨 SCSS 프로젝트는 별도로 하나 백업을 권장함.

 

현재 취약점이 하나 있다고 npm 에서 알려주는데 원인은 materlailize.js 의 autocomplete. 필자는 아예 autocomplete 관련 기능들을 전부 제거한 상태로 사용하고 있음.

 

Option) 기타: Vue-Router

npm install vue-router

브라우저상의 url 또는 uri 이동을 웹브라우저에서 페이지를 다시 불러 렌더링하는 방식이 아니라 html 컴포넌트만을 바꿔버러듯이 경량화된 페이지 이동으로 바꿔주는 기능. 애니메이션 기능도 있긴 한데 아직 공부중.

 

router.js (단, import 구절의 compxx.vue 파일은 사전에 미리 생성되어있어야함)

import { createWebHistory, createRouter } from "vue-router";
import Comp01 from "Comp01.vue";
import Comp02 from "Comp02.vue";
import Comp03 from "Comp03.vue";
import Comp04 from "Comp04.vue";

const routes = [{
    path: "/comp01", 
    component: Comp01
}, {
    path: "/comp02", 
    component: Comp02
}, {
    path: "/comp03", 
    component: Comp03
}, {
    path: "/comp04", 
    component: Comp04
}];

const router = createRouter({
    history: createWebHistory(), 
    routes
});

export default router;

app.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

App.vue

<template>
    <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
            <component :is="Component" />
        </transition>
    </router-view>
</template>

<script>
    export default {
    	name: "", 
        props: {}, 
        components: {}, 
        data() {
        	return {
            	
            };
        }
    }
</script>

<style>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}


.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>

이렇게 설정하면 페이지 이동 시 페이지 렌더링 없이 열려있는 html 에서 컴포넌트가 활성화되고 사라지고 하는 형식으로 즉석에서 페이지 전환효과를 관리해준다는듯. 구체적으로는 잘 몰라서 아직 공부중.