[JavaScript 프레임워크] 2일차: Vue.js 기초 이해하기

2. Vue.js 기초

Vue.js란 무엇인가?

Vue.js는 사용하기 쉬운 프런트엔드 프레임워크로, 단일 페이지 애플리케이션(SPA) 개발에 적합합니다. React와 마찬가지로 컴포넌트 기반의 사용자 인터페이스를 구축할 수 있으며, 반응성(Reactivity)을 통해 동적인 웹 애플리케이션을 쉽게 만들 수 있습니다.

Vue.js 설치 및 프로젝트 설정

Vue.js 프로젝트를 설정하기 위해, Vue CLI를 사용합니다.

1. Vue CLI 설치

npm install -g @vue/cli

 

2. 새로운 Vue 프로젝트 생성

vue create my-vue-app
cd my-vue-app

 

3. 프로젝트 폴더 구조는 다음과 같습니다.

my-vue-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── views/
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md

 

4. 프로젝트를 실행합니다.

npm run serve

 

브라우저에서 http://localhost:8080을 열면 Vue 애플리케이션이 실행됩니다.

 

Vue.js의 주요 개념

1. 컴포넌트

Vue 컴포넌트는 Vue 애플리케이션의 기본 빌딩 블록입니다. 컴포넌트는 독립적인 UI 요소로, 템플릿, 스크립트, 스타일을 포함할 수 있습니다.

 

컴포넌트 예제

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

 

2. 템플릿

Vue 템플릿은 HTML 기반의 구문으로, 컴포넌트의 UI를 정의합니다. 템플릿은 데이터 바인딩, 디렉티브, 이벤트 핸들링 등을 포함합니다.

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Message updated!';
    }
  }
}
</script>

 

3. 데이터 바인딩

Vue에서는 v-bind 디렉티브를 사용하여 속성을 데이터에 바인딩할 수 있습니다.

<template>
  <div>
    <img v-bind:src="imageSrc" alt="Example Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    };
  }
}
</script>

 

4. 이벤트 핸들링

Vue에서는 v-on 디렉티브를 사용하여 이벤트를 핸들링할 수 있습니다.

<template>
  <div>
    <button v-on:click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
}
</script>

 

5. 조건부 렌더링

Vue에서는 v-if, v-else-if, v-else 디렉티브를 사용하여 조건부로 요소를 렌더링할 수 있습니다.

<template>
  <div>
    <p v-if="isLoggedIn">Welcome back!</p>
    <p v-else>Please log in.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false
    };
  }
}
</script>

 

6. 리스트 렌더링

Vue에서는 v-for 디렉티브를 사용하여 리스트를 렌더링할 수 있습니다.

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    };
  }
}
</script>

 

Vue 개발 도구

1. Vue Devtools

Vue Devtools는 브라우저 확장 프로그램으로, Vue 컴포넌트 트리와 상태를 쉽게 확인하고 디버깅할 수 있습니다.

• Chrome 확장 프로그램
• Firefox 확장 프로그램

 

결론

Vue.js는 사용하기 쉽고 강력한 프런트엔드 프레임워크로, 컴포넌트 기반의 사용자 인터페이스를 구축하는 데 매우 유용합니다. 이번 글을 통해 Vue.js의 기본 개념과 설치, 프로젝트 설정 방법을 배웠습니다.

 

다음 글에서는 Angular 기초에 대해 알아보겠습니다. 다음 글에서 만나요!