TIL-64, Vue.js 시작해보기

이력서를 넣은 기업에서 감사하게도 과제 전형의 기회를 주셨다.

이제껏 React를 공부했고, React를 이용해 서비스들을 만들어 왔는데

Vue를 이용하는 과제를 받게 되었다.

평소에 다른 SPA 프레임워크인 Vue, Angular에 대한 호기심도 있었고,

기회가 된다면 학습하고 싶었는데, 마침 Vue를 학습할 기회가 온 것 같다.

React는 라이브러리이고, Vue는 프레임워크라는 차이가 있고,

기술 인터뷰 준비 포스팅에서도 다뤘듯이 React는 단방향, Vue는 양방향이라는

차이점이 있다.

이 외에도 많은 차이점이 있지만, 일단 학습을 하면서 몸소 느끼고, 경험해보자.

개발환경 셋팅

Vue 설치

• npm install -g @vue/cli

VSCode Extensions 설치

• Vetur
• Vue 3 Snippets

Vue 프로젝트 생성

• vue create <프로젝트명> (프로젝트명 대문자 사용 불가)

데이터 바인딩

기본 파일인 App.vue는 크게 3개 문단으로 나누어져 있다.

// HTML 작업을 할 수 있는 template
<template>
  ...
</template>

// JavaScript 코드를 작성하는 script
<script>
  export default {
  name: 'App',
  components: {},
  };
</script>

// CSS 디자인을 하는 style
<style>
  ...
</style>

React에서의 state처럼 변하는 값을 바인딩하기 위해서는

script에 아래와 같이 추가한다.

<script>
  export default {
    name: 'App',
    // data() {} 추가 후 Object 타입으로 data 추가
    data() {
      return {
        name: 'namhun',
        color: 'color: red',
      };
    },
    components: {},
  };
</script>

데이터를 렌더링하기 위해선

<template>
  <div></div>
</template>

위와 같이 를 사용한다.

HTML Element의 속성값에서 데이터를 사용하고 싶을땐

아래와 같이 (:) 콜론을 사용한다.

<template>
  <div :style="color">namhun</div>
</template>

image 경로 변수

<div v-for="(el, i) in 3" : key="i">
  <img :src="require(`./assets/room${i}.jpg`)" />
</div>

만약 image 경로에 변수를 넣고자 한다면

위와 같이 :src와 require, 그리고 백틱을 이용해준다.

다음 글에선 vue에서 props를 다루는 법을 알아보자.