VueJS 튜토리얼: Vue.js로 시작하기

안녕하세요, 웹 개발자 지망생 여러분! Vue.js의 세상으로의 흥미로운 여정을 안내해드리게 되어 기쁩니다. 10년 이상 컴퓨터 과학을 가르쳐온 경험을 가진 저로서는 Vue.js가 가장 초보자 친화적인 프레임워크 중 하나라고 말씀드릴 수 있습니다. 그麼, 함께 마법을 만들어보겠습니다!

VueJS - Home

Vue.js는 무엇인가요?

Vue.js는 사용자 인터페이스를 만들기 위한 진화적인 자바스크립트 프레임워크입니다. 하지만 이를 단순한 영어로 어떻게 표현할 수 있을까요? 집을 짓는 것을 생각해보세요. Vue.js는 당신의 꿈의 집을 쉽게 조립할 수 있는 사전 제작된 벽과 방들의 세트입니다. 복잡한 웹 애플리케이션을 조립하는 것을 LEGO 블록을 조립하는 것처럼 간단하게 만들어줍니다!

왜 Vue.js인가요?

쉽게 배울 수 있음
유연하고 확장 가능
훌륭한 성능
아주 좋은 커뮤니티 지원

사전 요구 사항

시작하기 전에 필요한 것들을 확인해보겠습니다:

HTML과 CSS에 대한 기본 이해
자바스크립트에 대한 친숙함 (전문가가 아니어도 괜찮습니다!)
현대적인 웹 브라우저 (크롬이나 파이어폭스를 추천합니다)
텍스트 편집기 (VS Code가 제 개인적인 최爱입니다)

첫 Vue.js 프로젝트 설정하기

먼저 간단한 "Hello, Vue!" 애플리케이션을 만들어보겠습니다. 그幺, Vue.js를 프로젝트에 포함시키는 방법을 알아보겠습니다. HTML 파일에 스크립트 태그를 추가하여 이를 할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Vue App</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!'
            }
        })
    </script>
</body>
</html>

이를 분해해보겠습니다:

Vue.js 라이브러리를 CDN 링크를 사용하여 포함시킵니다.
id가 "app"인 <div>을 생성합니다. 이곳이 Vue 애플리케이션이 살아갈 곳입니다.
div 내부에서 {{ message }}를 사용합니다. 이는 인터폴레이션으로, Vue에서 데이터를 표시하는 방법입니다.
<script> 태그 내에서 새로운 Vue 인스턴스를 생성하고, id가 "app"인 요소를 타겟으로 지정합니다.
data 객체를 정의하고, message 프로퍼티를 포함시킵니다. 이는 Vue가 애플리케이션에서 사용할 데이터입니다.

이 파일을 저장하고 브라우저에서 열면 "Hello, Vue!"가 페이지에 표시되어야 합니다. 축하합니다! 여러분은 첫 Vue.js 애플리케이션을 만들었습니다!

Vue 디렉티브: 상호작용을 더해주기

기본을 다 알고 나서, 애플리케이션을 조금 더 상호작용적으로 만들어보겠습니다. Vue는 우리에게 지시를 주는 특별한 속성인 디렉티브를 제공합니다. 몇 가지 흔한 디렉티브를 살펴보겠습니다:

v-model: 양방향 데이터 바인딩

v-model은 폼 입력과 애플리케이션 상태 간의 양방향 바인딩을 생성합니다. 애플리케이션에 입력 필드를 추가해보겠습니다:

<div id="app">
    <input v-model="message">
    <p>The message is: {{ message }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello, Vue!'
        }
    })
</script>

이제 입력 필드에 입력을 하면 메시지가 실시간으로 업데이트됩니다. 마법 같죠?

v-if와 v-else: 조건부 렌더링

때로는 조건에 따라 요소를 표시하거나 숨기고 싶을 때가 있습니다. 그幺, v-if와 v-else가 유용하게 쓰입니다:

<div id="app">
    <button @click="toggleVisibility">Toggle Message</button>
    <p v-if="isVisible">Now you see me!</p>
    <p v-else>Now you don't!</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            isVisible: true
        },
        methods: {
            toggleVisibility() {
                this.isVisible = !this.isVisible
            }
        }
    })
</script>

이 예제에서 우리는 v-if와 v-else를 사용하여 두 메시지를 토글합니다. @click 디렉티브는 클릭 이벤트를 듣는 v-on:click의 줄임형입니다.

v-for: 목록 렌더링

목록을 표시할 때는 v-for 디렉티브를 사용합니다:

<div id="app">
    <ul>
        <li v-for="fruit in fruits">{{ fruit }}</li>
    </ul>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            fruits: ['Apple', 'Banana', 'Cherry', 'Durian']
        }
    })
</script>

이렇게 하면 과일 목록이 렌더링됩니다. 이렇게 간단합니다!

Vue의 메서드

메서드는 Vue 인스턴스에 행동을 추가할 수 있는 함수입니다. 간단한 카운터를 만들어보겠습니다:

<div id="app">
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            increment() {
                this.count++
            },
            decrement() {
                this.count--
            }
        }
    })
</script>

여기서 우리는 두 메서드: increment과 decrement을 정의했습니다. 이 메서드는 각각의 버튼이 클릭될 때 호출되어 count 데이터 프로퍼티를 업데이트합니다.

계산된 프로퍼티: 스마트 계산

계산된 프로퍼티는 데이터 프로퍼티의 슈퍼 파워를 가지고 있습니다. 복잡한 계산을 수행하고, 의존성에 따라 캐싱됩니다. 예제를 보겠습니다:

<div id="app">
    <input v-model="firstName">
    <input v-model="lastName">
    <p>Full Name: {{ fullName }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            firstName: '',
            lastName: ''
        },
        computed: {
            fullName() {
                return this.firstName + ' ' + this.lastName
            }
        }
    })
</script>

여기서 fullName은 firstName과 lastName을 결합한 계산된 프로퍼티입니다. 의존성이 변경될 때 자동으로 업데이트됩니다.

Vue.js 메서드 요약

여기서 다루었던 Vue.js 메서드를 요약한 표입니다:

메서드	설명	예제
data	Vue 인스턴스의 데이터를 담는다	`data: { message: 'Hello' }`
methods	행동을 추가하는 함수를 포함시킨다	`methods: { greet() { alert('Hi!') } }`
computed	의존성에 따라 캐싱되는 프로퍼티	`computed: { fullName() { return this.firstName + ' ' + this.lastName } }`
el	Vue 인스턴스를 마운트할 요소를 지정한다	`el: '#app'`

결론

축하합니다! Vue.js의 fascinational 세상으로의 첫 걸음을 했습니다. 우리는 Vue 인스턴스를 만드는 법, 디렉티브를 사용하여 상호작용을 더하는 법, 메서드와 계산된 프로퍼티를 추가하여 행동을 추가하는 법을 다루었습니다.

코드를 배우는 것은 새로운 언어를 배우는 것과 같아서, 연습과 인내가 필요합니다. 모든 것이 당장 이해되지 않는다면 낙담하지 마세요. 계속 실험하고, 계속 만들고, 가장 중요한 것은 즐겁게 코드를 짜세요!

다음 강의에서는 컴포넌트에 대해 더 깊이 탐구할 것입니다. 그幺, 행복한 코딩을 기원합니다!

Credits: Image by storyset

다음 튜토리얼:

VueJS - 개요