리액트를 하던 나에게 갑자기 뷰 라는 시련이 내려졌다!!

Vue

사용자 인터페이스를 만들기 위한 플고그레시브 프레임워크로, 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다.
-출처: Vue Official 문서

😲갑자기 뷰!?

기업 협업으로 마지막 달을 보내기로 결정하고..
기업이 결정되었다. 1순위 중의 1순위였던 곳에서는 탈락되고ㅠㅠㅠ
모 회사에 가게 되었는데, 해당 회사는 프론트 개발을 Vue를 이용하는 중이었다 (!!!!)
그렇게.. 갑작스런 뷰와의 동거(?)가 시작되었다.

💚 vue-cli

Vue에도 React의 create-react-app 처럼 초기 세팅이 된 앱을 만들어주는 명령어가 있었다. 바로 vue create (이름)!!!

하지만 그 전에 설치를 해줘야하는게 있는데 바로 vue-cli이다.
vue-clli는 기본 vue 개발환경을 설정해주는 도구로, 기본적인 프로젝트 세팅을 해주기 때문에 여러 기본 설정에 대한 고민을 덜을 수 있다는 장점이 있다.
처음 배우는 중이라 무언가 설정하는게 어려울 때에도 vue-cli를 통하면 좋겠다는 결론!!

npm install -g @vue/cli @vue/cli-service-global를 통해 vue를 설치해주고, vue create todoList로 vue-app을 맹글어준다. 뚝딱!

react에서 npm start로 앱을 로컬에서 실행시켰다면, vue는 yarn serve를 통해 실행시킬 수 있다. 이게 내가 몰라서 그러는건지.. 리액트처럼 자동으로 페이지가 또롱! 하고 떠오르지는 않았다. (배포용 앱을 만들때에는 yarn build였던가 그랬다!!!)

그래도 터미널에 나오는 주소를 ctrl+클릭하면 자동으로 뿅! 하고 연결된다 :)
React는 3000부터 시작하는데, vue는 8080부터 시작되는 차이도 묘하게 귀엽고 재미있었다.

💚 처음으로 만든 vue-app, todoList

역시 가장 기본은 투두리스트가 아닐까ㅋㅋㅋㅋ
간단하게 작성해서 엔터를 쳤을 때 적용되고, x를 눌렀을 때 삭제되는 투두를 구성했다.

to-do-List Code

<template>
  <div class="wrapper">
    <h1>To do List</h1>
    <input
      v-model.trim="newTodo"
      id="todoInput"
      placeholder="Please enter your to-dos"
      @keyup.enter="addTodo"
    />
    <div v-for="(todo, index) in todos" v-bind:key="todo.id" class="todoItem">
      <div>
        {{ todo.title }}
      </div>
      <div class="remove" @click="removeTodo(index)">
        &times;
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TodoList",
  data() {
    return {
      newTodo: "",
      idForTodo: 3,
      todos: [
        {
          id: 1,
          title: "Finish Vue Screencast",
          completed: false,
        },
        {
          id: 2,
          title: "Write velog with vue",
          completed: false,
        },
      ],
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.length == 0) {
        return;
      }
      this.todos.push({
        id: this.idForTodo,
        title: this.newTodo,
        completed: false,
      });
      this.newTodo = "";
      this.idForTodo++;
    },

    removeTodo1(index) {
      this.todos.splice(index, 1);
    },
    removeTodo2(index) {
      return this.todos.filter(todo => {
        if (todo.id - 1 !== index) return todo;
      });
    },
  },
};
</script>

<style lang="scss">
.wrapper {
  width: 900px;
}
h1 {
  text-align: center;
  font-weight: 600;
  font-size: 48px;
}
input {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  &:focus {
    outline: none;
  }
}

.todoItem {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .remove {
    padding: 0 15px;
    cursor: pointer;
  }
}
</style>

Difference between Vue and React

컴포넌트 별로 뷰(view)를 구성할 수 있다는 점을 제외하고 내게는 전부 다른 느낌으로 다가왔다.
가장 처음 달랐던 것은 .js 대신 .vue를 사용한다는 점이었다.
그리고 html, css, js를 전부 한 파일에서 관리할 수 있다는 것도 정말 신기했다.

<template></template>

<script></script>

<style></style>

의 구조로 작성되어있었는데, 그 중에서도 가장 신기했던 script 태그 내부 부분에 대해서 이야기 해보고싶다.

Difference - inside of the script tag

script태그를 뜯어보기 위해서는, 위에 올렸던 코드의 파일 상단에 있는 파일의 코드도 읽어볼 필요가 있다.

//App.vue

<template>
  <div id="app">
    <TodoList />
  </div>
</template>

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

export default {
  name: "App",
  components: {
    TodoList,
  },
};
</script>

//TodoList.vue

<template>
  <div class="wrapper">
    <h1>To do List</h1>
    <input
      v-model.trim="newTodo"
      id="todoInput"
      placeholder="Please enter your to-dos"
      @keyup.enter="addTodo"
    />
    <div v-for="(todo, index) in todos" v-bind:key="todo.id" class="todoItem">
      <div>
        {{ todo.title }}
      </div>
      <div class="remove" @click="removeTodo(index)">
        &times;
      </div>
---+    </div>
  </div>
</template>

<script>
export default {
  name: "TodoList",
  data() {
    return {
      newTodo: "",
      idForTodo: 3,
      todos: [
        {
          id: 1,
          title: "Finish Vue Screencast",
          completed: false,
        },
        {
          id: 2,
          title: "Write velog with vue",
          completed: false,
        },
      ],
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.length == 0) {
        return;
      }
      this.todos.push({
        id: this.idForTodo,
        title: this.newTodo,
        completed: false,
      });
      this.newTodo = "";
      this.idForTodo++;
    },

    removeTodo(index) {
      this.todos.splice(index, 1);
    },
    filterTodo(index) {
      return this.todos.filter(todo => {
        if (todo.id - 1 !== index) return todo;
      });
    },
  },
};
</script>

react를 사용할때엔 js 파일에 모든 것을 작성했기 때문에 최상단에서 바로 import를 해도 무관했지만, vue는 그렇지 않기 때문에 "script 태그 내부"에서 작성해줘야한다.
어떤 컴포넌트를 import해서 사용할 때에는 export default 내부에 components라는 키값을 가진 오브젝트 내부에 컴포넌트 명을 써서 사용해준다.

컴포넌트에서 사용되는 함수, 데이터 등을 다룰 때에도 전부 script 태그 내에서 작성한다. 가장 신기했던건 사용할 이벤트 핸들러 등의 함수를 methods라는 키의 value 값에 작성해줘야했다는 것이다.

data: () => ({
    newTodo: "",
    idForTodo: 3,
    todos: [
      {
        id: 1,
        title: "Finish Vue Screencast",
        completed: false,
      },
      {
        id: 2,
        title: "Write velog with vue",
        completed: false,
      },
    ],
  }),

data 쪽을 관찰하다가 발견한 재미있는 코드!!
나의 작고 편협한 개발 세계에서는 당연히 ( ) => { }가 올바른 코드인데, ( ) => ( ) 코드라니!!!!
( ) => {{ }} 는 또 안 된다. 뭘까..

해결
객체를 return 한다고까지 혼자 생각했는데, 그 뒤를 잘 몰랐었다.
여기저기 알아보고 찾아보고 물어보고 한 결과!!
( ) => ({ })는 내가 객체를 리턴해줄거야! 라고 해주는거고, ( ) => { }는 내가 함수를 정의할거야! 라고 해주는 거라고 들었다.
결국, ( ) => ({ }) 와 ( ) => { return { }} 가 서로 같은 것이라는 것!!!

💚 Vue Styling

Vue with Sass

vue에서 scss를 사용하기 위해서는 node-sass와 sass-loader를 설치해줘야 사용할 수 있다.

Vue with vue-styled-components

이건 방금 블로그 쓰면서 찾아본건데, vue에서도 styled-components를 사용할 수 있는 vue-styled-components가 존재했다. 나중에 꼭 써봐야지 :3

💚 Vue Router

나는 vue-cli로 앱을 시작했기 때문에 vue add router를 작성해서 vue router를 사용할 수 있을 것 같다. react-router와 비슷하게 this.$router.push('/') 등과 같이 작성할 수 있을 듯 하다.
vue router 공식 문서 바로가기

💚 Vue Lifecycle

뷰 공식문서에서 데려온 라이프사이클 다이어그램. 오늘은 간단히 이런 정도로만 이해하고, 실제 협업에 나가 사용하면서 더 자세히 공부해야지.
리액트의 lifecycle method와 비슷하게 사용할 수 있지 않을까 하고 생각하고있다!

💚 앞으로의 계획

물론 내 주력으로 리액트로 유지할 생각은 변함이 없지만, vue를 쓰는 동안 만큼은 그 중에 일정 부분은 vue에게 양보해주려고 한다. vue만 해야하는 것은 아니라서, 한 동안 블로그 글이 조금조금 많아지지 않을까 :)
앞으로 또 친해지자 Vue!!!