7장. Vue.js 고급 개발자 되기 - 3

IT Study./Do it! Vue.js 입문

7장. Vue.js 고급 개발자 되기 - 3

impnem 2022. 4. 27. 14:47

7장 - 3

07-3 뷰 개발을 위한 ES6

<ES6란?>

ES6(ECMAScript 2015)는 최신 자바스크립트 문법이자 스펙이다.
ECMA에서 자바스크립트의 첫 표준을 제정한 이래 2015년에 문법적으로 가장 큰 변화가 있었다.
이렇게 변경된 자바스크립트를 ECMAScript 2015 또는 ES6라고 부르고, 기존 자바스크립트를 ES5라고 부른다.
ES6는 개발자가 더 쉽게 코드를 작성할 수 있도록 문법을 단순화하고, 미숙한 코딩으로 인한 오류를 미연에 방지하기 위해 언어 자체에서 유효 범위를 제한하는 등의 기능을 추가했다.

ES5와 ES6가 코드 상에서 어떻게 다른지 한번 확인해 보자.

// ES5
var num = 100;
var sumNumbers = function(a, b) {
    return a + b;
};
sumNumbers(10, 20); // 30

// ES6
const num = 100;
let sumNumbers = (a, b) => {
    return a + b;
};
sumNumbers(10, 20); // 30

위 코드는 둘 다 변수를 선언하고 2개의 숫자를 더하는 함수를 선언해서 10, 20을 더한 것을 출력하는 코드이다.
위쪽 코드는 ES5 코드이며, var로 nu,이라는 변수를 선언하여 100을 대입했고, sumNumbers라는 변수를 선언한 다음에 인자 값 2개를 합산하는 함수 표현식을 정의했다.
아래쪽 ES6 코드도 const로 num이라는 변수를 선언하고, ES6의 화살표 함수(=>)를 활용하여 인자 값 2개를 받아 합산하는 함수 표현식을 정의했다.

변수를 선언하는 const, let과 함수를 정의하는 화살표 함수 방식 이외에도 많은 부분의 문법이 바뀌었다. 여기서는 ES6 문법을 모두 다루지는 않고 뷰로 개발할 때 알면 도움이 되는 몇 가지 주요 문법만 살펴보자.

<const와 let 예약어>

const와 let은 변수를 선언할 때 사용하는 예약어이다.
ES5에서는 변수를 선언할 때 var를 사용하지만 ES6는 var 대신 let으로 변수를 선언한다.
선언한 후 값이 바뀌지 않고 동일하게 사용되는 변수에 대해서는 const를 추가로 사용할 수 있다.
이렇게 구분하는 이유는 변수를 선언할 때 변수의 용도를 미리 고민하고 변수의 성격에 따라 변수 선언 방식을 구분함으로써 코드의 가독성을 높이기 위해서이다.

다음의 코드를 통해 const와 let의 특징을 구분할 수 있다.

let a = 10;
a = 20;

console.log(a); //20

const a = 10;
a = 20;

console.log(a); // TypeError: Assignment to constant variable.

위의 두 코드는 a라는 변수를 선언하고 숫자 10을 대입한 후 a에 다시 숫자 20을 할당하는 코드이다.
let은 정상적으로 a의 값이 20으로 다시 할당되지만 const는 값을 다시 할당하려고 하면 오류가 발생한다. 그 이유는 const 예약어로 선언한 변수에 한 번 할당된 값은 다시 변경할 수 없기 때문이다.
따라서 상수 값과 함수를 정의할 때는 const를 활용하고, 반복문을 비롯한 나머지 변수를 선언할 때는 let을 활용하는 게 좋다.

<블록의 유효 범위>

두 번째로 살펴볼 특징은 블록의 유효 범위(block scope)이다. 아래 코드를 통해 차이점을 알아보자.

// ES5에서 블록의 유효 범위
var i = 10;
for (var i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
}
console.log(i); // 5

// ES6에서 블록의 유효 범위
let i = 10;
for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
}
console.log(i); // 10

ES5 문법의 기본적인 특징 중 하나는 '변수의 유효 범위가 블록 단위로 제한되지 않는다'는 점이다.
반대로 ES6의 출력 결과는 for문 실행이 끝난 후에도 for문을 실행하기 전의 값인 10이 동일하게 출력된다. 이처럼 ES6의 let으로 변수를 선언하면 { } 안으로 변수의 유효 범위가 한정된다.

<화살표 함수>

화살표 함수(Arrow Functions)는 기존 ES5의 함수 정의 방식을 간소화한 문법이다.
아래의 코드를 살펴보자.

// ES5에서 함수 정의 방식
var sumNumbers = function(a, b) {
    return a + b;
};

// ES6에서 함수 정의 방식
var sumNumbers = (a, b) => {
    return a + b;
}

위 코드는 앞서 보았듯이 인자 값 2개를 합산하는 함수 표현식이다.
이렇게 함수를 선언할 때 function( )으로 길게 선언할 필요 없이 =>로 간단하게 선언할 수 있다.
이와 같은 방식으로 코드를 구성하면 구현 속도도 빨라지고 코드의 전체 길이도 짧아진다.

<Import와 Export>

import와 export는 자바스크립트 모듈화와 관련된 기능이다.
모듈화란 코드를 특정 기능이나 로직 단위로 구분하여 각각의 모듈로 관리하는 것을 말한다.
각 모듈은 다른 모듈에 영향을 주지 않고 독립적으로 실행할 수 있어야 한다.
자바스크립트는 원래의 언어 자체에 모듈화 기능이 없기 때문에 라이브러리나 프로그래밍 패턴 등으로 모듈화를 지원해 왔다. CommonJS, RequireJS 등 모듈화를 지원하는 라이브러리를 이용해 원하는 점에 특정 자바스크립트 파일을 로딩하거나 독립적인 실행 영역을 보장받을 수 있다.
- 모듈화 지원 라이브러리가 궁금하다면 'requirejs amd'와 'common js'를 검색하라.
또는 다음과 같은 프로그래밍 패턴으로 변수가 서로 충돌하는 것을 방지할 수 있다.

var nameSpaceA = {
    num: 10
};

var nameSpaceB = {
    num: 20
};

console.log(nameSpaceA.num); // 10
console.log(nameSpaceB.num); // 20

위 코드는 모듈화 기법 중 네임스페이스(name space)를 활용하여 num 변수의 범위가 충돌하지 않게 모듈화하는 코드이다.
이렇게 되면 num 값이 10과 20으로 각각의 네임스페이스에 보존된다. 여러 개의 자바스크립트 파일을 사용할 때 변수가 서로 충돌하지 않게 하기 위해 사용하는 일반적인 프로그래밍 기법이다.

하지만 매번 변수의 유효 범위를 구분해 주기 위해 모듈화 패턴을 사용하는 건 번거롭다. 이러한 수고를 덜어 주고자 ES6는 언어 자체에서 import와 export로 모듈화를 지원한다.

자바스크립트에 모듈화가 필요한 이유
- 자바스크립트는 변수의 유효 범위가 파일 단위로 구분되지 않고, 기본적으로 같은 유효 범위를 갖는다. 그래서 복잡한 어플리케이션을 작성하다 보면 기존에 정의된 변수를 실수로 재정의하거나 유효 범위가 충돌하는 경우가 발생한다. 이러한 문제를 방지하기 위해 모듈화가 필요하다.
import란 파일에서 다른 파일의 내용을 불러올 때 사용하며, export는 한 파일의 특정 기능을 다른 파일에서 사용할 수 있도록 설정할 때 사용한다. 아래의 예제를 보자.

// ./app/login.js
export const id = 'test';

// ./main.js
import { id } from './app/login.js';
console.log(id);

위 코드는 main.js 파일에서 app/login.js 파일의 id 값을 불러와 콘솔로 출력하는 예제이다.
main.js 파일을 실행하는 시점에 login.js 파일에 선언된 일부 내용(변수 id)을 불러와 main.js 파일의 로직에서 사용하였다.

뷰 싱글 파일 컴포넌트 체계에서 import와 export 살펴보기

앞의 내용을 바탕으로 뷰 싱글 파일 컴포넌트 체계를 다시 살펴보자.
webpack-simple 프로젝트에서 아래와 같은 뷰 파일이 2개 있다고 가정하자.

<!-- App.vue -->
<template>
    <div id="app">
        <Login></Login>
    </div>
</template>

<script>
import Login from './Login.vue';

export default {
    components: {
        'Login': Login
    }
}
</script>

<!-- Login.vue -->
<template>
    <h1>로그인 컴포넌트</h1>
</template>

여기서 Login.vue 파일의 내용을 보면 <h1>을 포함하는 간단한 <template>만 있다. 따라서 npm run dev 명령어로 애플리케이션을 실행했을 때 App.vue 파일에 Login.vue 파일의 내용이 포함되어 화면에 표시된다.

지금까지 뷰 개발에 도움 되는 ES6 문법을 살펴보았다.

해당 글은 [Do it! Vue.js 입문] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.