🖥Frontend/Vue.js

Vue.js 파비콘, 아이콘, 폰트, 반응형 태그 설정 / 컴포넌트 구현하기

코너(Corner) 2021. 7. 26. 17:27
반응형

Vue.js 파비콘, 아이콘, 폰트, 반응형 태그 설정 / 컴포넌트 구현하기

vue.js todo app

index.html에 Meta viewport를 추가한다.

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

반응형 웹으로 설정하기 위한 메타 태그이다.

파비콘 생성 방법

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

위 링크 사이트에서 이미지 추가후 favicion 16 * 16 체크한 뒤 생성

Font Awesome, Google Font 추가

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-todo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="src/assets/favicon.ico" type="image/x-icon">
    <link rel="icon" href="src/assets/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

Todo 컴포넌트 구현

TodoHeader.vue

<template>
<!--  HTML -->
  <header> <!-- 컴포넌트의 정체성을 나타내는 header 태그 -->
    <h1>TODO it!</h1>
  </header>
</template>

<!-- scoped는 이 해당 컴포넌트에서만 적용되게 하는 스타일 속성이다. 다른 css에는 영향을 주지 않는다는 것.-->
<!-- 싱글 파일 컴포넌트 -->
<style scoped>
/* css */
h1 {
  color: #2F3B52;
  font-weight: 900;
  margin: 2.5rem 0 1.5rem;
}
</style>

App.vue 앱.뷰에서 전체 스타일

<style lang="scss">
body {
  text-align: center;
  background-color: #F6F6F6;
}

input {
  border-style: groove;
  width: 200px;
}
button {
  border-style: groove;
}
.shadow {
  box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.03);
}

</style>

Input 박스에 입력된 값이 newTodoItem에 즉각적으로 변동된다.

Angular와 React의 장점을 결합한게 Vue.js이다.

투웨이 바인딩이 따라온 상황이다.

화면에서의 데이터 변경과 Vue 안에서 인스턴스 변경이 동일하게 동기화가 된다.

TodoInput 컴포넌트의 할 일 저장 기능 구현

TodoInput.vue

<template>
  <div>
<!--    v-model이란, input에 입력된 텍스트 값을 동적으로 바로바로 vue 인스턴스에 매핑을 하는 것. -->
<!--    newTodoItem은 input 박스에 새롭게 입력된 데이터 연동에 사용-->
    <input type="text" v-model="newTodoItem">
    <button v-on:click="addTodo">add</button>
  </div>
</template>

<script>
export default {
  name: "TodoInput",
  data: function () {
    return {
      newTodoItem: ""
    }
  },
  methods: {
    addTodo: function (){
      console.log(this.newTodoItem);
      // 저장하는 로직
      localStorage.setItem(this.newTodoItem, this.newTodoItem);
      // this.newTodoItem = '';
    }
  }
}
</script>

<style scoped>

</style>

로컬 스토리지 setItem() API 공식 가이드

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

크롬 개발자도구 Application탭에서 보면 key, Value 동일한 텍스트 값으로 추가되는 것 확인 

반응형