VUE BUILD
vue 프로젝트를 빌드하게되면
Javascript 번들링
Vue CLI는 webpack과 babel을 이용하여 javascript 코드를 번들링 합니다. 이 과정에서 프로젝트의 여러 파일들이 하나의 번들파일로 합쳐지고 코드의 최적화가 이루어집니다.
CSS, 이미지, 폰트 등의 번들링
Vue CLI는 프로젝트에서 사용하는 스타일시트, 이미지, 폰트 등의 리소스들을 적절히 번들링하여 최종 결과물에 포함시킵니다.
HTML 파일 생성
VUE CLI로 vue 프로젝트를 생성하게 되면 기본적으로 public이라는 폴더에 index.html 파일을 생성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue App</title>
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
근데 index.html에는 js를 import 하는 코드가 없는데 ???...
>> dist라는 폴더가 있는데 dist/index.html 안에 있습니다!
**이유!**
Vue CLI는 public 폴더 내의 index.html 파일을 기반으로 빌드된 자원들을 주입 하여 최종적인 HTML 파일을 생성 합니다.
즉. main.js는 빌드 프로세스에서 생성되고 번들링 되어 최종 생성된 정적 dist/index.html 파일에 포함됩니다.
(따라서 dist/index.html 에 스크립트 태그가 자동으로 삽입 된 것을 볼 수 있습니다. )
빌드된 파일은 dist 폴더 아래 생성
빌드를 하게되면 vue cli에 내장되어있는 webpack과 babel로 해당 프로젝트의 파일들을 번들링하고 최적화된 형태로 만듭니다.
그리고 그 결과물을 dist 폴더에 생성되고 배포할 준비가 됩니다.
이렇게 빌드된 프로젝트는 정적 파일로서 웹 서버에 호스팅 되거나 서버 실행을 통해 어플리케이션을 실행할 수 있습니다.
VUE RUNTIME
브라우저에서 vue-router 로 설정한 경로로 서버에 요청이 들어오면,
1. Route 테이블 검색
Vue Router에서 설정한 정보를 바탕으로 라우팅 테이블을 검색합니다
즉, 각 경로에 매핑된 컴포넌트와 그에 필요한 데이터를 찾습니다.
2. 컴포넌트 로딩
라우팅 테이블에서 매칭된 컴포넌트가 있는 경우, 해당 컴포넌트를 로딩합니다.
이때 비동기(동적) 컴포넌트 로딩이 설정되어 있으면 필요한 컴포넌트 코드를 비동기적으로 가져와 로딩합니다.
3. Route LifeCycle Hook 호출
라우팅 과정에서 라우트에 정의된 라이프 사이클 훅 (ex: beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave)이 호출됩니다.
이 단계에서 데이터를 가져오거나 라우팅 이벤트에 대한 전처리를 수행할 수 있습니다. (ex. 권한체크)
4. 컴포넌트 마운트
로딩된 컴포넌트는 Vue 인스턴스로 생성되고, DOM에 마운트됩니다.
이때 라우트의 <router-view> 영역에 컴포넌트가 렌더링 되어 표시 됩니다.
5. 화면 갱신 및 렌더링
컴포넌트가 마운트되면 해당 컴포넌트의 데이터와 템플릿을 기반으로 화면이 갱신되고 렌더링됩니다.
이때 Virtual DOM을 사용합니다.
가상DOM (Virtual DOM) 이란?
가상돔(Virtual DOM)은 실제 DOM 문서를 추상화한 개념으로, 변화가 많은 View를 실제 DOM에서 직접 처리하는 방식이 아닌 Virtual Dom과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화 하는 프로그래밍 개념 입니다.
가상돔 ,,,ㄱㅅㄷ,,,,감성돔 참돔 벵에돔...
vue 인스턴스가 생성이 되면 가상 DOM이 초기화 됩니다.
vue는 가상 DOM을 사용하여 실제 DOM과 동기화 하고 효율적인 렌더링을 수행합니다.
예를 들어 말하자면 !
실제 DOM과 가상 DOM이 있는데,
페이지네이션 다음 버튼을 눌러 <ul>안에 있는 <li>태그 10개를 변경한다고 가정하면
실제 DOM에 바로 접근해서 <li>를 10번 바꾸는 것이 아니라
가상 DOM을 통해 <li> 리스트 태그 10개를 변경하고
바뀐 가상 DOM과 실제 DOM을 비교하여 변경된 부분 인 <ul> 을 통째로 1번만에 변경해서 렌더링도 1번만 일어나게 하는 것입니다
(참고: https://jeong-pro.tistory.com/210)
'내직업은 IT종사자 > vue' 카테고리의 다른 글
| 뷰(vue) options api와 composition api의 라이프사이클(lifecycle) (1) | 2024.01.11 |
|---|---|
| ref, reactive 어떤 것이 더 좋을까? ref와 reactive 차이점 (0) | 2023.06.20 |
| [vue] v-if와 v-show의 차이점 , vue3에서 v-if와 v-show (1) | 2023.06.10 |
