Vue.js (3) 실전 활용

InSeok·2023년 2월 8일

Vue

목록 보기

3/3

애플리케이션 제작 팁


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width", initial-scale="1.0"> //반응형 웹디자인 태그
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"> // 어썸 아이콘 CSS 설정
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> //로고 
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css2?family=Dongle:wght@300&family=Jua&display=swap" rel="stylesheet"> // 구글 폰트
    <title>Vue.js Todo</title>
  </head>

컴포넌트 등록

최상위 컴포넌트인 App.vue에 지역 컴포넌트 등록

components: {
	'컴포넌트 이름': 컴포넌트 내용
ex)
	'TodoHeader: TodoHeader,
	'TodoInput': Todo Input
}

등록한 컴포넌트 화면에 출력

<template>
  <div id="app">
    <TodoHeader></TodoHeader>
    <TodoInput></TodoInput>
    <TodoList></TodoList>
    <TodoFooter></TodoFooter>
  </div>
</template>

입력받은 텍스트 로컬 스토지에 저장

<template>
	<div>
		<input type="text" v-model="newTodoItem">
		<button v-on:click="addTodo">추가</button>
	</div>
</template>

<script>
	export default{
		data(){
		return {
			newTodoItem: ''
		}
	},
		methods: {
			addTodo(){
			localStorage.setItem(this.newTodoItem, this.newTodoItem);
}
}
</script>

로컬스토리지 데이터를 뷰 데이터에 저장

<script>
	export default{
		data(){
		return {
			todoItems: []
		}
	},
created() {
	if(localStorage.length > 0) {
		for(var i = 0; i < localStorage.length; i++){
			this.todoItems.push(localStorage.key(i));
			}
		}

뷰데이터의 아이템 개수만큼 화면에 표시

<template>
	<section>
		<ul>
			<li v-for="todoItem in todoItems">{{ todoItem}} </li>
		</ul>
	</section>
</template>

선택한 것을 뷰에서 인식하도록 만들기

<template>
	<section>
		<ul>
			<li v-for="(todoItem, index) in todoItems"> :key="todoItem"{{ todoItem}} </li>
		</ul>
	</section>
</template>

클릭한 내용 삭제

<span class="removeBtn" type="button" @click="removeTodo(todoItem, index)">

methods: {
	removeTodo(todoItem, index) {
		localStorage.removeItem(todoItem);
		this.todoItems.splice(index, 1);

//로컬 스토리지 데이터 모두삭제 
localStorage.clear();

props 활용

//상위 컴포넌트
<script>
	export default{
		data(){
		return {
			todoItems: []
		}
	},

<template>
	<TodoList v-bind:propsdata="todoItems"></TodoList>
</template>

//하위 컴포넌트
<li v-for="(todoItem, index) in propsdata>

export default{
	props ['propsdata'],
}

이벤트활용

//상위 컴포넌트
<template>
	<TodoInput v-on:addTodo="addTodo"></TodoList>
</template>

export default{
methods: {
		addTodo(todoItem) {
			localStorage.setItem(todoItem, todoItem);
			this.todoItems.push(todoItem);
		},

//하위 컴포넌트
	addTodo() {
	if(this.newTodoItem !== "") {
		var value = this.newTodoItem
		this.$emit('addTodo', value);
		}
}

VueX

애플리케이션의 상태관리를 돕는 라이브러리
애플리케이션에서 사용하는 모든 데이터를 중앙에서 관리하여 크기가 큰 애플리케이션의 데이터 관리를 효율적으로 한다.

웹팩(WebPack)

서로 연관이 있는 모듈간의 관계를 해석하여 정적인 자워능로 변화해주는 모듈번들러 →애플리케이션 동작과 관련된 여러개의파일(HTML, CSS, JS, 이미지등) 간의 연관관계를 파악하여 1개의 자바 스크립트 파일안에 다 넣어버리고 해당 자바스크립트 파일만 로딩해도 웹앱이 돌아가게 도와준다.