Vue.js 시작하기 - ES6 기초부터 프로젝트 설정까지

프론트엔드 기술 스택 이해하기

현대 웹 개발에서는 HTML이 구조(Structure), CSS가 표현(Style), JavaScript가 동작(Behavior)을 담당합니다. 기존의 jQuery 라이브러리는 JavaScript의 DOM 조작을 단순화했고, Bootstrap은 CSS 프레임워크로 클래스 기반의 스타일링을 제공했습니다. 현재主流 SPA 프레임워크로는 Facebook이 개발한 React, Google이 만든 Angular, 그리고 Evan You가 창안한 Vue가 있습니다.

ES6 핵심 문법

let과 const

let은 블록 스코프 변수를 선언할 때 사용하며, 동일한 블록 내에서 중복 선언이 불가능합니다. const는 상수를 선언할 때 사용하며, 선언과 동시에 초기화해야 하고 이후 값 변경이 불가능합니다. 두 키워드 모두 호이스팅이 발생하지 않아 Temporal Dead Zone의 영향을 받습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>let과 const 예제</title>
</head>
<body>
    <script>
        // let을 사용한 블록 스코프
        {
            let price = 15000;
            let price = 20000; // 오류 발생 - 중복 선언 불가
        }
        
        // 클로저 문제 해결
        const functions = [];
        for (let i = 0; i < 5; i++) {
            functions.push(() => i);
        }
        console.log(functions[3]()); // 3 출력 (var 사용시 5 출력)
        
        // const 상수 선언
        const API_URL = "https://api.example.com";
        // API_URL = "다른 값"; // 오류 발생
    </script>
</body>
</html>

템플릿 리터럴

ES6부터는 백틱(`` ` ``)을 사용하여 문자열 내부에 변수や式을 쉽게 삽입할 수 있습니다. 기존 문자열 연결 연산자보다 가독성이 뛰어납니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>템플릿 리터럴</title>
</head>
<body>
    <script>
        const userName = "홍길동";
        const userAge = 25;
        
        // 기존 방식
        const message1 = "안녕하세요, " + userName + "님. 나이는 " + userAge + "세입니다.";
        
        // 템플릿 리터럴 방식
        const message2 = `안녕하세요, ${userName}님. 나이는 ${userAge}세입니다.`;
        
        console.log(message2);
        
        // 다중 줄 문자열
        const html = `
            <div class="card">
                <h2>${userName}</h2>
                <p>${userAge}세</p>
            </div>
        `;
    </script>
</body>
</html>

화살표 함수

화살표 함수는 함수를 더 간결하게 작성할 수 있게 해줍니다. 또한 가장 큰 특징은 this 바인딩이 없습니다. 화살표 함수 내부의 this는 정의된 환경의 this를 그대로を引き받습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>화살표 함수</title>
</head>
<body>
    <script>
        // 기존 함수 표현식
        function sum(a, b) {
            return a + b;
        }
        
        // 화살표 함수
        const add = (a, b) => a + b;
        
        console.log(add(3, 5)); // 8
        
        // 객체 메서드에서의 this 차이
        const user = {
            nickname: "개발자",
            showInfo: () => {
                console.log(this); // window 객체 (일반 함수라면 user 객체)
            }
        };
        
        // 단일 파라미터 시 소괄호 생략 가능
        const double = x => x * 2;
    </script>
</body>
</html>

클래스 문법

ES6의 class 문법은 prototype 기반의 상속을 더 명확하고 직관적인 형태로 사용할 수 있게 합니다. constructor 메서드로 초기화를 담당하며, 메서드는 prototype에 자동으로 추가됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>클래스 예제</title>
</head>
<body>
    <script>
        class Product {
            constructor(name, price) {
                this.name = name;
                this.price = price;
            }
            
            getInfo() {
                return `${this.name} - ${this.price}원`;
            }
            
            static create(name, price) {
                return new Product(name, price);
            }
        }
        
        const laptop = new Product("노트북", 1500000);
        console.log(laptop.getInfo());
        
        // 정적 메서드 사용
        const tablet = Product.create("태블릿", 800000);
    </script>
</body>
</html>

Vue 요청 처리 흐름

Vue 애플리케이션에서 네트워크 요청을 처리하는 방식은 여러 가지가 있습니다.

방식 1: 서버사이드 렌더링 구조로, Node.js 서버가 실제 API와 통신하고 결과를 클라이언트에 전달합니다. 초기 로딩 속도가 빠르고 SEO에 유리합니다.

방식 2: 클라이언트 사이드 렌더링으로, 브라우저가 직접 API 서버와 통신합니다. 사용자 상호작용 후 필요한 데이터만 불러오므로 서버 부하가 적습니다.

방식 3: 개발 환경에서 Node.js 서버에 문제가 생길 경우, 로컬Mockserver나 가상의 API를 통해 개발을 지속할 수 있습니다.

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

Node.js 설치

Node.js는 Chrome V8 엔진 기반으로 동작하는 JavaScript 런타임입니다. LTS 버전을 다운로드하여 설치합니다.

# Node.js 다운로드
https://nodejs.org/

프로젝트 초기화

# 대화형 모드로 초기화
npm init

# 기본값으로 즉시 초기화
npm init -y

패키지 설치

# 프로젝트 의존성 설치
npm install jquery --save

# 특정 버전 설치
npm install jquery@2.2.4 --save

# 패키지 제거
npm uninstall jquery --save

cnpm 사용 (了中国镜像)

国外 서버 접근이 불안정할 경우, Alibaba가 운영하는 taobao镜像을 사용할 수 있습니다.

# cnpm 전역 설치
npm install -g cnpm --registry=https://registry.npm.taobao.org

# cnpm으로 패키지 설치
cnpm install vue --save

Vue 시작하기

Vue 공식 웹사이트(vuejs.org)에서 최신 버전을 다운로드하거나 CDN을 통해 바로 사용할 수 있습니다. Chrome 브라우저에서는 Vue Devtools 확장을 설치하면 컴포넌트 구조를 시각적으로 확인하면서 디버깅할 수 있어 개발 효율성이 크게 향상됩니다.

태그: vue JavaScript ES6 nodejs npm

6월 18일 21:16에 게시됨

괴물 클럽