Vue.js Day 1 | Notion

1. CDN (Content Delivery Network)

<aside> 💡

컨텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템

</aside>

HTML 기반에서 뷰 어플리케이션을 생성할때, CDN 서비스로 제공하는 뷰 라이브러리를 HTML에서 제공하는 <script></script>태그로 손쉽게 추가할 수 있다.

<script src = "[<https://unpkg.com/vue@3/dist/vue.global.js>](<https://unpkg.com/vue@3/dist/vue.global.js>)"></script>

뷰 라이브러리를 불러올 수 있다. 불러온 뷰 라이브러리를 사용하여 쉽게 뷰 어플리케이션을 만들 수 있다.

예제

<body>
    <script src = "<https://unpkg.com/vue@3/dist/vue.global.js>"></script>

    <div id="app">{{message}}</div>

    <script>
        const {createApp} = Vue;
            createApp ({
                data() {
                    return { message : "Hello vue.js!"};
                },
            }).mount("#app");
    </script>
</body>

2. NPM (Node Package Manager)

Node.js 패키지를 관리해 주는 도구

npm create vue@latest

초기 프로젝트를 구성하는 뷰의 뼈대를 세운다 -> 스케폴딩 (scaffolding)

npm create vue@lastest
npm install
npm run format
npm run dev

=> 의존성 관리 애플리케이션에서 사용한 라이브러리의 버전을 관리하는 것을 의미한다.