[Vue공식문서번역] 2. Quick Start - Vue3 프로젝트 시작하기

개인 공부를 위한 번역으로 참고사항으로만 여겨주시길 부탁드립니다.

오번역 및 잘못이해한 부분이 있다면 커멘트 부탁드립니다(_ _)

Introduction

Start Date: January 23, 2023

Link: https://vuejs.org/guide/quick-start.html

 

공부 목적: 공식문서 읽는 습관 들이기, Composition API 익히기

목표 기간:

- (1st 완독) 2023. 01. 19 ~ 2023. 02. 28

시작하기

• 사전 조건: Node.js 최신 버전 설치

> npm init vue@latest

 

• 공식적인 Vue 프로젝트 스캐폴딩 툴인 create-vue를 설치하고 실행할 것임.
  • 타입스크립트 사용, 테스트 툴 지원과 같은 몇 가지 선택적 기능에 대한 프롬프터가 등장할 것임.
  • ✔ Project name: … <your-project-name> ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit testing? … No / Yes ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes ✔ Add ESLint for code quality? … No / Yes ✔ Add Prettier for code formatting? … No / Yes Scaffolding project in ./<your-project-name>... Done.
  • 아직 선택적 기능에 대한 확신이 들지 않는다면 일단은 NO 옵션으로 진행하기.
    
    
• Dev 서버 실행하기
  • > cd <your-project-name> > npm install > npm run dev // app을 production으로 보낼 준비가 되었다면 > npm run build // ./dist 폴더에 빌드파일이 생성됨.

 

 

 

CDN을 통해 Vue 이용하기

*CDN 링크 방식**: 라이브러리등의 외부 모듈에 대한 js 파일을 직접 가지고있지 않아도 외부 서버 주소를 링크하여 사용하는 것 → HTML에 url경로를 포함시켜, CDN으로부터 Vue 라이브러리를 불러오는 방식임.

(vs Webpack 방식: npm 으로 뷰 모듈을 불러오는 것)

• 글로벌 빌드
  • <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
• ES 모듈 빌드
  • <script type="module"> import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'; </script>
• Import maps
  • // dependency entry를 import maps 을 통해 등록할 수 있음. <script type="importmap"> { "imports": { "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js" } } </script> ... <script type="module"> import { createApp } from 'vue' </script>
• 모듈쪼개기
  • 관리를 쉽도록하기위해 코드를 별도의 Javascript 파일로 분할해야할 수 있음.

    // my-component.js
    export default {
    data() {
      return { count: 0 }
    },
    template: `<div>count is {{ count }}</div>`
    }

  • <!-- index.html --> <script type="module"> import { createApp } from 'vue' import MyComponent from './my-component.js' createApp(MyComponent).mount('#app') </script>
  • index.html을 브라우저에서 직접 연다고 생각해보자. 이때, ES 모듈이 file:// 프로토콜을 통해 작동할 수 없기 때문에 오류가 발생한다는 것을 알 수 있다. 이를 작동하게 하기 위해서 http://프로토콜을 통해 index.html 을 제공할 필요가 있다.
  • 로컬에서 HTTP 서버를 시작하려면 먼저 Node.js를 설치한 다음 HTML 파일이 있는 동일한 디렉터리에서 npx serve를 실행한다. 또한, 올바른 MIME 타입을 가진 정적파일을 제공할 수 있는 다른 HTTP서버를 사용할 수도 있다.
    • *MIME 타입**: 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘, 브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 결정하기 위해 대게 MIME 타입을 사용https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types
• 빌드 단계 없이 Composition API 사용하기
  • setup() option에 대해 알아보자: https://vuejs.org/api/composition-api-setup.html

Composition API: setup() | Vue.js

 

---

 

개인 공부를 위한 번역으로 참고사항으로만 여겨주시길 부탁드립니다.

오번역 및 잘못이해한 부분이 있다면 커멘트 부탁드립니다(_ _)