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

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

Introduction

Start Date: January 23, 2023

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

시작하기

• 사전 조건: 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

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

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

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

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

Introduction

Start Date: January 19, 2023

Link: https://vuejs.org/guide/introduction.html

VUE란 무엇일까?

컴포넌트 베이스의 UI 구축을 위한 JS프레임워크

VUE의 2가지 코어 개념

1. 선언적 렌더링(Declarative Rendering)
   1. Javascript의 상태에 기반으로 HTML에 바로 결과값을 표현할 수 있음. 템플릿을 통해 확장된 HTML 사용 가능
2. Reactivity
   1. 뷰는 자동적으로 자바스크립트 상태변화를 감지하며, 변경사항이 발생할때마다 효율적으로 DOM을 업데이트합니다.

프로그래시브 프레임워크

1. 빌드 단계 없이 정적 HTML을 향상(enhance)
   1. 독립실행형 스크립트 파일로 사용 가능함.(실행을 위한 빌드가 필요하지 않음)
   2. petite-vue: 이미 짜여진 HTML을 사용하기 위한 최적화된 형태의 Vue
2. 모든 페이지에 웹 컴포넌트로 임베딩
   1. 렌더링 방법에 관계없이 모든 HTML페이지에 포함할 수 있는 표준 컴포넌트를 빌드할 수 있음.
   2. 그 결과, 웹 컴포넌트는 레거시 어플리케이선, 정적인 HTML, 다른 프레임워크로 작성된 어플리케이션에 임베딩될 수 있음.
3. SPA
   1. 고도화된 어플리케이션(많은 상호작용, deep session, 복잡한 상태저장 등)을 구현하기위한 가장 좋은 방법 => Vue가 전체 페이지를 제어할 뿐만 아니라 페이지를 다시 로드하지 않고 데이터 업데이트 및 탐색을 처리하는 아키텍처를 사용하도록 하는 것 ( == SPA )
4. SSR / Fullstack
   1. SPA의 단점
      1. SEO, 콘텐츠 제공시간에 민감한 경우 문제가됨 => 맨처음에 비어있는 HTML을 수신하기 때문에, 무엇이든 렌더링 하기 전에 기다려야함.
   2. Vue는 Vue앱을 서버의 HTML문자열로 “렌더링”하기 위한 일급클래스 API를 제공함. 이를 통해 서버는 이미 렌더링된 HTML을 다시 보낼 수 있으므로 자바스크립트가 다운로드 되는 동안에 사용자가 즉시 콘텐츠를 볼 수 있음.
   3. 그 다음 Vue는 클라이언트 측에서 애플리케이션을 hydrate하여 인터렉티브하게 만듦.
   4. 이것이 Server Side Rendering
   5. 결과적으로 이는 웹바이탈의 LCP(Largest Contentful Paint)지표를 크게 향상시킬 수 있음.
   6. NextJS
5. SSG
   1. 필요한 데이터가 정적이면 서버측 렌더리을 미리 수행할 수 있음
   2. 즉, 전체 어플리케이션을 HTML로 사전 렌더링하고 정적파일ㄹ로 제공할 수 있음
   3. 결과적으로 사이트 성능이 향상되고 더이상 각 요청마다 페이지를 동적으로 렌더링할 필요할 필요가 없어지므로 훨씬 간단해짐
   4. SSG의 2가지 유형(공통점: 사이트를 정적 HTML로 미리 렌더링)
      1. 단일페이지
         1. 초기페이지 로드 후, 페이지를 hydrate함. 이렇게하면 많은 초기 JS페이로드 비용이 필요하지만, 전체 페이지를 다시 로드하는 대신 페이지 콘텐츠를 부분적으로만 업데이트하면되므로 후속 탐색이 빨라짐
      2. 다중페이지
         1. 탐색할 때마다 새 페이지를 로드함, 장점은 최소한의 JS를 제공하거나 페이지에 상호작용이 필요하지 않은 경우 JS를 전혀 사용하지 않음,
6. desktop, mobile, WebGl 그리고 터미널까지 구현 가능(../?)

API 스타일

options API

1. data, methods, mounted 와 같은 options의 객체를 사용하여 컴포넌트 로직을 정의할 수 있음.
   1. data: this로 노출되어, reactivity를 가짐
   2. methods: state를 수정하거나 업데이트를 할 때 사용 | template에서 이벤트 리스너와 결합되어 사용 가능.
   3. mounted: 컴포넌트가 마운트될때 실행되는함수
2. options 로 정의된 요소들은 컴포넌트 인스턴스를 가리키는 this 내부 함수에 노출됨
3. 예제

Composition API

1. import 로 가져온 API함수를 사용해서 컴포넌트 로직을 정의할 수 있음.
2. <script setup> 을 활용
   1. setup속성은 Vue가 간편하게 composition API를 사용할 수 있도록하는 컴파일타임 변환을 수행한다.
   2. <script setup> 내에서 템플릿에서 바로 사용가능한 imports, 변수선언, 함수 정의를 할 수 있다.
3. 예제 
   
   1. 동일 템플릿, 대신 `<script setup>` 사용

Options API vs Composition API 정리

링크: https://vuejs.org/guide/introduction.html

링크: https://vuejs.org/guide/introduction.html

Introduction | Vue.js vuejs.org

번역 참 어렵다. Abstract away.. ?

  > reactivity를 abstraction시켜서 무조건 사용할수있게 함, reactivity에 대한 control 이 불가능 

이라고 이해를 해서 정리했는데,  잘못된 정보를 재생산하는 것이 아닌지 무섭다.

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

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