[ Vue.js ] Todo App 구현 _ 플젝생성, 컴포넌트 구성 등

 

 

 

 

 

 

 

 

1.  프로젝트 생성

vue create vue-todo

Default ([Vue 3] babel, eslint) 선택

cd vue-todo

npm run serve

 

2. 기본 컴포넌트 등록

src > components > TodoHeader.vue, TodoList.vue, TodoInput.vue, TodoFooter.vue 파일 생성 

App.vue에 컴포넌트 생성 및 등록

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

<script>
import TodoHeader from "./components/TodoHeader.vue";
import TodoFooter from "./components/TodoFooter.vue";
import TodoList from "./components/TodoList.vue";
import TodoInput from "./components/TodoInput.vue";

export default {
  components: {
    // 컴포넌트 태그명 : 컴포넌트 내용
    TodoHeader: TodoHeader,
    TodoInput: TodoInput,
    TodoList: TodoList,
    TodoFooter: TodoFooter,
  },
};
</script>

<style lang="scss" scoped></style>

이렇게 하고 화면 새로고침하면

잘 등록이 되었다 !

 

 

 

모바일 웹에서도 잘 동작할 수 있도록 반응형 웹을 만든다

이때 필요한게 View port(메타 뷰포트)

모바일, PC, 태블릿 등 어떤 기기에서 웹사이트를 로딩을 하던 그 웹사이트가 해당 기기에 가장 최적화된 형태로 

레이아웃이 깨지지 않고 나오게 하는 디자인 기법이다

 

 

index.html 파일에

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

위의 코드를 추가하면 되는데 

내경우에는 public 폴더안에 index.html파일이 있었고, 듣고있는 강의랑 다른 코드가 적혀있어서 찾아보니

vue-cli의 설정과 웹팩의 설정에 따라 다를 수 있다고 한다. 

그래서 일단 내용을 다 지워버리고 'doc' 자동완성 단축기로 썼더니 뷰포트가 기본으로 적혀있었다 

 

 

 

 

그다음 Favicon 생성

이미 public폴더안에 생성되어있었지만 Favicon을 생성하는 방법을 간략하게 적어본다.

 

https://www.favicon-generator.org/

Favicon & App Icon Generator

scr > assets > logo.png를 넣어서 16X16 으로 선택후 create 해주면 된다.

index.html에는 

<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link rel="icon" href="./favicon.ico" type="image/x-icon" />

이렇게 넣어주자

 

 

 

 

 

이번엔 fontawesome을 가져오자

강의에서는 cdn으로 간편하게 가져올 수 있었는데, 지금은 홈페이지에서 지원을 안하는건지

그래서 검색해서 cdn을 찾아왔다 하하

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />

 

 

 

그다음 폰트 설정 - google font Ubuntu 사용

https://fonts.google.com/selection/embed

Google Fonts

 

 

 

 

 

 

 

이제 각 컴포넌트들을 채워나가보자 

 

TodoHeader.vue

<template>
  <header>
    <h1>TODO it!</h1>
  </header>
</template>

<style scoped>
h1 {
  color: #2f3b52;
  font-weight: 900;
  margin: 2.5rem 0 1.5rem;
}
</style>

헤더에서는 스크립트가 필요없어서 지웠고,

간단하게 적었다

scoped을 사용하면 이 컴포넌트에서만 유효한 스타일속성값을 갖게된다.

 

 

 

 

TodoInput.vue

input창을 만들어주고, 입력된 값을 받아오는 로직을 만든다.

<template>
  <div>
    <input type="text" v-model="newTodoItem" />
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      newTodoItem: "",
    };
  },
};
</script>

<style lang="scss" scoped></style>

 

 

입력값이 개발자도구에서 바로 출력되는걸 확인

이제 저장을 해보자!

1. 저장하기위해 add 라는 이름의 button을 만들고, v-on으로 메서드를 실행시킨다.

2. addTodo라는 이름의 메서드를 생성하고 저장하는 로직을 만들어준다.

이때 사용하는 로직이 setItem() API

https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem

Storage: setItem() method - Web APIs | MDN

위의 문서를 살펴보면 알 수 있듯이 key:value 형태로 값을 호출할 수 있다.

 <button @:click="addTodo">add</button>



methods: {
    addTodo: function () {
      localStorage.setItem(this.newTodoItem, this.newTodoItem);
      this.newTodoItem = "";
    },
  },

 

값을 저장하고 초기화할수있게까지 만들어준다.

 

이렇게까지 작성하고 실행해보자input창에 'hello'라고 입력후 add버튼 클릭

 

개발자도구에서 Application에서 Local storage를 보면 Key : Value값에 입력한 값이 저장되는걸 확인할 수 있다.

 

 

 

---

 

 

 

강의명

https://www.inflearn.com/course/vue-pwa-vue-js-%EC%A4%91%EA%B8%89/dashboard

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex | 장기효(캡틴판교) - 인프런