Vue.js 시작하기 - 기초와 간단한 예제들

 

 

Vue.js 시작하기 - 기초와 간단한 예제들

 

안녕하세요, 제제미입니다! 여러분은 웹 개발에 관심이 많으신가요? 저는 개인적으로 웹 개발을 좋아하는데요, 특히 프론트엔드 분야에서 활약하는 Vue.js에 대해 이야기해보려고 해요. Vue.js는 사용하기 쉽고 이해하기 간단해서 많은 개발자들에게 사랑받고 있는 프레임워크랍니다. 오늘은 Vue.js의 기초부터 시작해 간단한 예제들을 통해 함께 배워보도록 할게요!

 

Vue.js란 무엇인가?

Vue.js는 현대적인 웹 애플리케이션 개발을 위한 인기 있는 JavaScript 프레임워크 중 하나입니다. 주요 목표는 쉽고 효율적으로 복잡한 UI를 구축하는 것이며, Vue 컴포넌트 시스템을 기반으로 합니다. 

주요 특징들은 다음과 같습니다:

1.컴포넌트 기반: Vue는 컴포넌트 기반 아키텍처를 사용하여 애플리케이션을 작고 재사용 가능한 구성요소로 분해합니다. 이로 인해 개발 및 유지 관리가 쉬워집니다.

2.템플릿 언어: Vue는 HTML과 유사한 템플릿 언어를 사용하여 UI를 정의합니다. 데이터 바인딩을 지원하며, 양방향 데이터 흐름을 제공합니다.

3.MVVM 패턴: Vue는 Model-View-ViewModel (MVVM) 패턴을 따릅니다. 이는 View와 ViewModel 사이의 느슨한 결합을 허용하여 코드의 가독성을 높이고 테스트를 쉽게 만듭니다.

4.빠른 프로토타이핑: Vue는 간단하고 유연한 API를 가지고 있어 빠르게 프로토타입을 만들 수 있습니다. 또한, 작은 프로젝트부터 대규모 애플리케이션까지 적용할 수 있습니다.

5.유연한 라우팅: Vue Router를 사용하면 Vue 애플리케이션에 클라이언트 측 라우팅을 추가할 수 있습니다. 단일 페이지 애플리케이션(SPA)을 만드는데 이상적입니다.

6.다양한 생태계: Vue는 광범위한 생태계를 가지고 있습니다. 수많은 라이브러리, 도구, 커뮤니티 리소스를 활용하여 개발 프로세스를 향상시킬 수 있습니다.

 

Vue.js의 핵심 개념 이해하기

Vue.js를 시작하려면 몇 가지 핵심 개념을 이해해야 합니다:

1.데이터 binding: Vue에서는 DOM 요소와 JavaScript 변수 사이의 양방향 데이터 바인딩을 기본적으로 지원합니다. 이렇게 하면 UI와 데이터 소스 간의 동기화가 보장됩니다.

2.Computed properties: 계산된 속성은 getter와 setter 메소드를 가진 Vue 인스턴스의 속성입니다. 이들은 주로 복잡한 계산이나 자주 변경되는 값을 저장하는데 사용됩니다.

3.Methods: 메소드는 Vue 인스턴스에서 실행할 수 있는 JavaScript 함수입니다. 이벤트 처리, 로직 처리, 또는 비동기 작업을 수행하는데 사용됩니다.

4.Components: Vue 앱은 독립적으로 배포하거나 재사용할 수 있는 컴포넌트로 구성됩니다. 컴포넌트는 그들만의 데이터, computed 속성, 메소드, 템플릿을 가질 수 있습니다.

5.Lifecycle hooks: Vue 컴포넌트에는 생명주기 훅이라는 특정 시점에 호출되는 메소드가 있습니다. 이러한 훅을 사용하여 컴포넌트의 초기화, 업데이트, 파괴를 처리할 수 있습니다.

이러한 개념들을 이해하면 Vue.js를 사용하여 강력하고 반응성이 뛰어난 유저 인터페이스를 구축할 수 있습니다.

 

개발 환경 설정: Vue.js 설치하기

Vue.js 프로젝트를 시작하려면 먼저 개발 환경을 설정해야 합니다. 주요 단계는 다음과 같습니다:

1.Node.js 설치: Vue.js는 Node.js 런타임을 필요로 합니다. 공식 웹사이트(https://.*/)에서 최신 버전을 다운로드하고 설치하세요.

2.npm (Node Package Manager) 설치: npm은 Node.js 패키지 관리자이며, Vue.js 및 기타 의존성을 설치하는 데 사용됩니다. Node.js를 설치할 때 함께 설치됩니다.

3.Vue CLI 설치: Vue CLI(Command Line Interface)는 Vue 애플리케이션을 쉽게 생성하고 구성할 수 있게 해주는 도구입니다. 터미널에서 `npm install -g @vue/cli` 명령어를 실행하여 Vue CLI를 설치하세요.

4.새로운 Vue 프로젝트 생성: Vue CLI를 설치한 후, `vue create <프로젝트 이름>` 명령어를 실행하여 새로운 Vue 프로젝트를 생성하세요. 이것은 프로젝트 구조, 의존성, 번들러 등을 설정하며, "default" 또는 원하는 다른 preset을 선택할 수 있습니다.

5.프로젝트 열기: 생성된 프로젝트 디렉토리로 이동하고 `npm run serve` 명령어를 실행하여 로컬 서버에서 프로젝트를 열어보세요. 브라우저에서 http://localhost:8080 으로 접속하여 Vue 애플리케이션을 확인할 수 있습니다.

이제 Vue.js 프로젝트를 위한 개발 환경이 설정되었습니다. 다음 단계로는 Vue의 기초 개념과 간단한 예제들을 살펴볼 수 있습니다.

 

첫 번째 Vue.js 애플리케이션 만들기

 

Vue.js 앱을 만들려면 HTML, CSS, JavaScript 파일을 사용합니다. 아래는 간단한 Vue.js 애플리케이션의 예시입니다:

index.html:
```html




첫 번째 Vue App


 

{{ message }}
 

```
위의 코드에서는 루트 Vue 인스턴스를 보유할 div 요소(#app)가 정의되어 있습니다. 데이터 바인딩 문법(`{{}}`)을 사용하여 변수 `message` 의 값을 표시합니다.

app.js:
```javascript
var app = new Vue({
el: '#app',
data: {
message: '안녕, Vue!'
}
})
```
JavaScript 파일에서는 새 Vue 인스턴스를 생성하고, `el` 옵션을 사용하여 DOM 요소('#app')에 바인드합니다. `data` 객체 안에 있는 `message` 변수는 Vue 인스턴스 내부에서 유지되며, 템플릿에서 동적으로 표시됩니다.

이것은 매우 기본적인 Vue.js 애플리케이션이지만, Vue의 핵심 개념 몇 가지를 보여줍니다: 데이터 바인딩, 컴포넌트, 라이프사이클 훅 등은 이후에 자세히 다루겠습니다.

 

데이터 바인딩과 디렉티브 활용하기

Vue.js의 주요 기능 중 하나는 데이터 바인딩이며, 이것은 뷰 업데이트를 자동으로 처리합니다. 두 가지 주요 구문 (`{{ }}` 와 `v-bind`)을 사용하여 속성, 클래스, 스타일, 이벤트 등을 쉽게 조작할 수 있습니다.

예를 들어, `` 요소에서의 입력값을 직접적으로 추적하려면 다음과 같이 할 수 있습니다:
```html

```
여기서 `v-model` 은 양방향 데이터 바인딩을 제공하는 특수 디렉티브입니다. 이제 `userName` 변수(Vue 인스턴스의 `data` 객체 내에 있음)는 입력 필드의 값과 동기화됩니다. 즉, 입력값이 변경되면 `userName` 도 업데이트되고, 그 반대의 경우도 마찬가지입니다.

또 다른 유용한 디렉티브로는 조건부 렌더링을 위한 `v-if` 와 `v-show`, 자식 컴포넌트를 위한 `v-component`, 그리고 로직 흐름 제어를 위한 `v-for` 가 있습니다.

이러한 강력한 도구들을 이용하면 Vue.js 애플리케이션을 유연하고 반응성이 뛰어나게 만들 수 있습니다.

 

조건부 렌더링과 리스트 렌더링 기초

Vue.js에서는 조건부 렌더링을 통해 특정 조건에 따라 DOM 요소를 표시하거나 숨길 수 있습니다. `v-if` 디렉티브를 사용하면 조건이 true인 경우에만 요소가 렌더링됩니다. 

```html
 

이것은 보일 것입니다.

```
위 코드에서 `isVisible` 의 값이 true 일 때만 해당 div가 렌더링됩니다.

`v-else` 와 함께 사용하면 else 블록을 정의할 수 있어 조건이 false 인 경우에 대한 대안을 제공합니다.

리스트 렌더링은 배열의 각 항목을 반복하며 HTML 요소를 생성하는 것을 의미합니다. `v-for` 디렉티브를 사용하여 간단하게 구현할 수 있습니다.

```html
 

• {{ item }}

```
위 예시에서 `items` 는 Vue 인스턴스의 `data` 객체에 있는 배열이라고 가정합니다. 이렇게 하면 배열의 각 항목에 대해 `

• ` 요소가 생성되어 목록으로 표시됩니다.
  
  이벤트 처리와 양방향 데이터 바인딩
  Vue.js에서는 컴포넌트 간 또는 컴포넌트 내부에서 이벤트를 주고받을 수 있습니다. 부모 컴포넌트에서 자식 컴포넌트로 이벤트를 전달하려면 `$emit` 메소드를 사용합니다.
  
  ```javascript
  
  ```
  위 예시에서 `my-component` 가 자식 컴포넌트이고, `handleClick` 은 부모 컴포넌트의 메소드라고 가정합니다. 클릭 이벤트가 발생하면 `handleClick` 메소드가 호출됩니다.
  
  양방향 데이터 바인딩은 Vue.js의 핵심 기능 중 하나로, 데이터 변경이 자동으로 뷰에 반영되고 그 반대도 마찬가지입니다. `data` 객체에 정의된 변수들은 템플릿에서 직접 참조할 수 있습니다.
  
  ```html
   

{{ message }}

• 
  ```
  위 예시에서 `message` 가 `data` 객체에 정의된 변수라면, 이 변수의 값이 변경될 때마다 해당 `

` 요소의 텍스트가 업데이트됩니다.

 

Vue.js를 활용한 간단한 프로젝트 예제

Vue.js 공식 문서에서는 다양한 예제들을 제공하고 있습니다. 이번 글에서는 그 중에서도 가장 간단한 예제 중 하나인 "Todo List" 를 만들어 보겠습니다.

HTML 파일 구조는 다음과 같습니다.

```html
 

 

Todo List

Add
 

• {{ todo }} Delete

 

• 
  ```
  
  JavaScript 코드는 다음과 같습니다.
  
  ```javascript
  new Vue({
  el: '#app',
  data: {
  newTodo: '',
  todos: []
  },
  methods: {
  addTodo() {
  if (this.newTodo !== '') {
  this.todos.push(this.newTodo);
  this.newTodo = '';
  }
  },
  deleteTodo(index) {
  this.todos.splice(index, 1);
  }
  }
  })
  ```
  
  이 예제에서는 입력 필드에 새 할 일을 입력하고 "Add" 버튼을 클릭하면 `todos` 배열에 추가됩니다. 각 할 일 항목에는 삭제 버튼이 있어서 클릭하면 해당 항목이 제거됩니다. 이렇게 만들어진 Todo List 는 Vue.js 의 양방향 데이터 바인딩 덕분에 실시간으로 업데이트됩니다.
  
  이번 시간에는 Vue.js의 기초 문법과 간단한 예제들을 통해 어떻게 작동하는지 알아보았습니다. 다음 시간에는 조금 더 심화된 내용으로 찾아오도록 하겠습니다.