[Vue2] 개발 기록 - Code Splitting, submit
Vue 개발 중 공부내용을 기록하는 포스트 입니다.
1. 개요
프로젝트 진행 간 적용 기술에 대한 정리
2. 코드 스플릿팅(Code Splitting)
일반적으로 vue router사용 시 SPA 방식을 선택하였기에, 초기에 모든 Page 정보를 전부 들고 오게 된다.
그러면 시간이 느릴 수 있기 때문에 우리는 레이지 로딩(Lazy Loading) 을 적용하여 실제 보여지는 부분만 가져오고 추가로 router를 통해 이동 했을대 가져오는 방식으로 구현이 가능하다.
import Vue from 'vue';
import VueRouter from 'vue-router';
import LoginPage from '@/views/LoginPage.vue';
// import SignupPage from '@/views/SignupPage.vue';
// 플러그인을 실행 및 초기화 하기위해 사용
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
path: '/',
component: LoginPage,
},
{
path: '/login',
component: LoginPage,
},
{
path: '/signup',
component: () => import('@/views/SignupPage.vue'),
},
],
});
위 코드를 보면 LoginPage의 경우 일반적인 방법으로 router를 구현하였고,
SignupPage의 경우 Code Splitting을 적용하여 Lazy Loading방식으로 구현하였다.
실제 동작과정을 살펴보자.
- 첫 진입 시
app.js에서 모든 정보 다운로드
이때 LoginPage에 대한 정보는 모두 가져온 상태이다.
반면, 회원가입(SignupPage)에 대한 정보는 가져오지 않은 상태
- 회원가입 클릭
추가로 SingupPage에 대한 정보를 받아오면 이후 부터는 다운받지 않고 사용한다.
3. submitForm
Submit 이 감지되는 원리
<template>
<form @submit.prevent="submitForm">
<div>
<label for="">id : </label>
<input id="username" type="text" v-model="username" />
</div>
<div>
<label for="">password : </label>
<input id="password" type="text" v-model="password" />
</div>
<div>
<label for="">nickname : </label>
<input id="nickname" type="text" v-model="nickname" />
</div>
<button type="submit">login</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
nickname: '',
};
},
};
</script>
<style></style>
<button> 이 클릭되면 이벤트 버블링으로 인해서 <form>태그 까지 올라가게 된다.
이때 v-on 디렉티브를 통해서 submitForm 을 실행해주는 방식으로 받아주면 된다.
.prevent를 통해 페이지 이동 시 새로고침을 막을 수있다.
Gatsby router 활용에 대한 포스트 입니다.