애초에 처음 프로젝트 시작을 리액트로 하거나 next.js 로 하거나
vue.js 로 하거나 nuxt.js 로 했더라면
이 글을 읽을 필요가 없다
이건 이미 spa가 나오기 이전에 이미 프로젝트를 만들어두고 유지보수를 하다가
디자이너 또는 클라이언트의 요청때문에 spa의 기능을 넣어야할때 조금 편하게 유지보수를 도와줄 수 있도록 알려줄 수 있다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.display-none {
display: none;
}
</style>
</head>
<body>
<div class="display-none mx-auto" id="app">
<div v-for="item in items" :key="item">{{ item }}</div>
<div style="height: 400px; overflow-y: scroll;">
Scroll down to load more items
<div style="height: 800px; overflow-y: scroll;">
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {
createApp,
ref,
onMounted
} = Vue;
// vue 요소 보이는 부분 해소
$(document).ready(function() {
$("#app").removeClass("display-none");
});
createApp({
setup() {
const items = ref(['Item 1', 'Item 2', 'Item 3']);
const handleScroll = () => {
// // 특정요소에 걸때
// const scrollTarget = document.getElementById('scrollTarget');
// if (scrollTarget.scrollTop + scrollTarget.clientHeight + 100 >= scrollTarget.scrollHeight) {
// const newItem = `Item ${items.value.length + 1}`;
// items.value.push(newItem);
// }
// 바디 전체
const scrollTarget = document.documentElement;
if (scrollTarget.scrollTop + window.innerHeight >= scrollTarget.scrollHeight) {
const newItem = `Item ${items.value.length + 1}`;
items.value.push(newItem);
}
};
onMounted(() => {
// // 특정요소에 걸때
// const scrollTarget = document.getElementById('scrollTarget');
// scrollTarget.addEventListener('scroll', handleScroll);
// 바디 전체
window.addEventListener('scroll', handleScroll);
});
return {
items,
handleScroll
};
}
}).mount('#app');
</script>
</html>이것처럼 vue의 기능중에 리스트 관련 상태관리를 할 수 있어서 이걸 응용하면 다양하게 가능하다 버튼을 클릭했을때 다른 리스트를 불러오는것도 가능해지고 한 페이지 내에서 vue의 기능중에 일부분을 필요한만큼 사용할 수 있다
사실 리스트만 상태관리가 가능해져도 훨씬 많은 코드가 줄어든다
이렇게 하기전에는 이렇게 했다
1. 리스트를 컨트롤러에서 기본으로 로드한다.
2. 리스트 변화가 있으면 ajax 또는 fetch 로 데이터를 가져온다.
3. 가져온 데이터를 js로 html을 만들어서 jqery로 aoppend 한다. (중복 리스트 코드 발생)
이런식으로 개발했기 때문에 리스트 ui 또는 로직이 변경되면 컨트롤러에서 기본 리스트와 비동기로 가져와서 처리하는 부분 모두 수정을해야해서 유지보수에 아주 불편했다