<p>- React에 비해 가볍고 빠르게 개발이 필요한 경우 선호</p><p>- 최신 릴리즈로 시작한 프레임워크(2014년)</p><p>- Virtual Dom 활용으로 양방향 바인딩 처리 등 가능</p><p> </p><p><b>Single File Component</b></p><p>Vue는 단일 파일 컴포넌트 기반의 프레임워크다. 웹의 view를 구성하는 요소인 HTML, CSS, JavaScript 코드를 .vue 확장자를 가진 하나의 파일에 모두 정의하는 방식으로 <span data-ke-size="size16">적당한 규모의 프로젝트에서 관리의 생산성을 높이고, 협업이 쉬운 것으로 알려져 있다. 뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위이며 new Vue()를 사용하여 뷰 객체를 생성한다.</span></p><p> </p><p><b>HTML 기반 템플릿 구문</b></p><p>Vue는 개발한 프론트엔드 파일을 사용자가 볼 수 있도록 브라우저 화면에 렌더링하는 과정에 템플릿이란 문법을 사용한다. </p><p>이 템플릿을 구성하는 문법이 HTML 기반으로 이뤄져 있어 이해하기 쉽다.  </p><p>데이터 바인딩의 기본 형태는 "Mustache" 구문(이중 중괄호)을 사용하는 Text Interpolation(텍스트 보간)이다. Vue가 동작하고 있는 HTML 문서상에서 {{}}로 data 내부에 있는 객체 리터럴 변수에 접근이 가능하다.</p><p> </p><p>HomePage : <a href="https://v3-docs.vuejs-korea.org/" target="_blank" class="ke-link">https://v3-docs.vuejs-korea.org/</a></p><p>Repository : <a href="https://github.com/vuejs/vue" target="_blank" class="ke-link">https://github.com/vuejs/vue</a></p><p> </p><p> </p><p>개발 환경 설정 및 실행 방법 두 가지</p><p><a href="https://lifere.tistory.com/entry/Vuejs-Vue-3-Vuejs-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-%EC%84%A4%EC%B9%98-%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85-CLI-CDN" target="_blank" class="ke-link">https://lifere.tistory.com/entry/Vuejs-Vue-3-Vuejs-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-%EC%84%A4%EC%B9%98-%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85-CLI-CDN</a></p><p> </p><p>개발 및 실행 방법1) Vue.js를 CLI 방식(빌드 툴 사용)으로  사용할 수 있다. ---------</p><p>Vue 환경 설정 후 실습하기  <a href="https://ojava.tistory.com/185" target="_blank" class="ke-link">https://ojava.tistory.com/185</a></p><div class="figure-img" data-ke-type="image" data-ke-style="alignLeft" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/ygGb/f112e40b1a781bad30c0261ec907d997ba472744" class="txc-image" width="245" height="226" data-img-src="https://t1.daumcdn.net/cafeattach/ygGb/f112e40b1a781bad30c0261ec907d997ba472744" data-origin-width="430" data-origin-height="397"></div><p><a href="https://data-make.tistory.com/747" target="_blank" class="ke-link">https://data-make.tistory.com/747</a></p><p> </p><p> </p><p><span style="color: #333333; background-color: #ffffff;" data-ke-size="size16"><span style="color: #333333; background-color: #ffffff;" data-ke-size="size16">개발 및 </span>실행 </span>방법2) Vue.js를 CDN 방식으로 사용하면 빌트 툴 없이 바로 사용할 수 있다. ---------</p><div class="figure-img" data-ke-type="image" data-ke-style="alignLeft" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/ygGb/3a96e82fc61e8d9587cd754859c5038aac05ad88" class="txc-image" width="312" height="233" data-img-src="https://t1.daumcdn.net/cafeattach/ygGb/3a96e82fc61e8d9587cd754859c5038aac05ad88" data-origin-width="403" data-origin-height="301"></div><p>-- cdn으로 가장 최신 버전의 Vue를 가져옴 <br><script src="https://unpkg.com/vue@next"></script></p><p>or</p><p><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></p><p> </p><p>-- Vue 2.5 버전</p><p><script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script></p><p> </p><p>-- Vue 3.1 버전 <br><script src="https://unpkg.com/vue@v3.1.1"></script></p><div class="figure-file" data-ke-type="file" data-file-src="https://t1.daumcdn.net/cafeattach/ygGb/5f511ba108b45b910ea1058d9b8df79f98a0941e?download" data-file-name="Vuejs3_이해_.pdf" data-file-size="5978873" data-mimetype="application/pdf" data-ke-align="alignLeft"><a href='javascript:fileFilterViewer("https://t1.daumcdn.net/cafeattach/ygGb/5f511ba108b45b910ea1058d9b8df79f98a0941e?download", "/cafeattach/ygGb/5f511ba108b45b910ea1058d9b8df79f98a0941e", "Vuejs3_이해_.pdf", "grpid%3DygGb%26fldid%3DQbpR%26dataid%3D64%26fileid%3D4%26regdt%3D20200430093640&url=https%3A%2F%2Ft1.daumcdn.net%2Fcafeattach%2FygGb%2F5f511ba108b45b910ea1058d9b8df79f98a0941e")'><div class="image"></div><div class="desc"><div class="filename"><span class="name">Vuejs3_이해_</span><span class="type">.pdf</span></div><div class="size">5.70MB</div></div></a></div><p> </p><p><span style="color: #2e2e2e; background-color: #ffffff;" data-ke-size="size18">웹으로 웹을 구축하는 최신 방법인 StackBlitz Teams(실습환경을 지원)  </span><a href="https://stackblitz.com/" target="_top" class="ke-link">https://stackblitz.com/</a></p><p> </p><p><span style="color: #006dd7;">ex1)</span></p><p><!DOCTYPE html></p><p><html></p><p>  <head></p><p>    <meta charset="utf-8"></p><p>    <b><script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script></b></p><p>    <title>Vue ex</title></p><p>  </head></p><p>  <body></p><p>      <div <b>id="app"</b>><span style="color: #006dd7;" data-ke-size="size16">{{message}}</span><span data-ke-size="size16"></div></span></p><p>      </p><p>      <script type="text/javascript"></p><p>        new Vue({</p><p>         <b> el: '#app',</b></p><p>          data:{</p><p>            <span style="color: #006dd7;">message : 'Hello world!'</span></p><p>          }</p><p>        });</p><p>      </script></p><p>  </body></p><p></html></p><p> </p><p>아래는 Vue 2 코드를 Vue 3로 변환한 예제입니다. Vue 3에서는 앱 인스턴스를 생성할 때 createApp 함수를 사용하고, el 속성 대신 mount 메서드를 사용하여 인스턴스를 DOM 요소에 연결합니다: <br><!DOCTYPE html> <br><html> <br>  <head> <br>    <meta charset="utf-8"> <br>    <!-- Vue 3 CDN 링크 --> <br>    <script src="https://unpkg.com/vue@next"></script> <br>    <title>Vue ex</title> <br>  </head> <br>  <body> <br>    <div id="app">{{ message }}</div> <br>    <script type="text/javascript"> <br>      const { createApp } = Vue; // Vue에서 createApp 함수 추출 <br><br>      createApp({ <br>        data() { <br>          return { <br>            message: 'Hello world!' <br>          } <br>        } <br>      }).mount('#app');     // #app 요소에 앱 마운트 <br>    </script> <br>  </body> <br></html></p><p>위 코드는 다음과 같이 동작한다. <br> - Vue CDN 링크를 Vue 3으로 변경: Vue 3용 CDN 링크를 포함시켜 Vue 3의 모든 기능을 사용할 수 있다. <br> - createApp 함수 사용: Vue 3에서는 new Vue({}) 대신 createApp({}) 함수를 사용하여 앱 인스턴스를 생성한다. <br> - mount 메서드로 요소 연결: 이전의 el 속성 대신, mount 메서드를 사용하여 Vue 인스턴스를 원하는 DOM 요소에 연결한다.</p><p> </p><p>Vue 객체 주요 속성</p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 83.2484%;" border="1" data-ke-style="style12"><tbody><tr><td style="width: 14.6096%;">속성</td><td style="width: 68.9467%;">설명</td></tr><tr><td style="width: 14.6096%;"><b>template</b></td><td style="width: 68.9467%;">화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 역할.</td></tr><tr><td style="width: 14.6096%;"><b>methods</b></td><td style="width: 68.9467%;">화면 로직 제어와 관계된 메소드를 정의하는 속성, 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트 또는 화면 동작과 관련된 로직 추가 가능.</td></tr><tr><td style="width: 14.6096%;"><b>created</b></td><td style="width: 68.9467%;">뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 역할</td></tr></tbody></table></div><p> </p><p> </p><p>구글 차트 사용 : <a href="https://developers-dot-devsite-v2-prod.appspot.com/chart" target="_blank" class="ke-link">https://developers-dot-devsite-v2-prod.appspot.com/chart</a> <br><script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.prod.js"></script> <br><script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script></p><p> </p><p><span style="color: #781b33;" data-ke-size="size20"><b>*** 라이프사이클 다이어그램 ***</b></span></p><p><span data-ke-size="size16">인스턴스 라이프 사이클이란 뷰의 인스턴스가 생성되어 소멸되기까지 거치는 과정을 의미한다. </span></p><p><span data-ke-size="size16">인스턴스가 생성되고 나면 라이브러리 내부적으로 다음과 같은 과정이 진행된다.</span></p><ul style="list-style-type: disc;" data-ke-list-type="disc"><li><span data-ke-size="size16">data 속성의 초기화 및 관찰 (Reactivity 주입)</span></li><li><span data-ke-size="size16">뷰 템플릿 코드 컴파일 (Virtual DOM -> DOM 변환)</span></li><li><span data-ke-size="size16">인스턴스를 DOM에 부착</span></li></ul><div class="figure-img" data-ke-type="image" data-ke-style="alignLeft" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/ygGb/602faabdbb8cbc11eb80ee03e3e709ac49a9c2cc" class="txc-image" width="416" height="972" data-img-src="https://t1.daumcdn.net/cafeattach/ygGb/602faabdbb8cbc11eb80ee03e3e709ac49a9c2cc" data-origin-width="392" data-origin-height="916"></div><p>인스턴스의 상태에 따라서 호출할 수 있는 속성들이 있다. 속성마다 개발자가 추가한 커스텀 로직을 Life Cycle Hook 이라고 하며, 뷰 인스턴스는 객체이기 때문에 생명주기를 갖고 있다. 구현할 때 주로 사용하는 라이프 사이클 훅은 아래와 같다.<br><br>👓beforeCreate <br>   인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 <br>   뷰 인스턴스의 data와 methods 속성이 정의되어 있지 않고 화면 요소(ex. dom)에 접근 불가 <br>👓created <br>  data와 methods 속성 정의되어 있음. 따라서 두 속성 값에 접근 가능 <br>  아직 화면 요소에 인스턴스가 부착되기 전이기 때문에 template 속성에 정의된 돔 요소에 접근하는 코드 구현 불가 <br>👓beforeMount <br>  render()함수가 호출되기 직전의 단계로 created 이후에 template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소에 인스턴스를 부착하기 직전 호출됨 <br>  화면에 붙이기 전 실행해야 할 코드 구현 <br>👓mounted <br>  el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 난 후 호출되는 단계로 template 속성에서 정의한 화면 요소에 접근 가능.<br>  화면 요소를 제어하는 코드를 구현하며 DOM에 인스턴스가 부착되자마자 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 html 코드로 변환되는 시점과 다를 수 있음 <br>👓beforeUpdate <br>  el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 난 후에 인스턴스 속성들이 화면에 치환됨 <br>  치환된 값을 $watch 속성으로 감시 (관찰) <br>  관찰하고 있는 데이터가 변경되면 가상 돔을 이용해 화면을 다시 그려야 함. 이때, 그리기 직전 호출되는 단계가 beforeUpdate <br>  변경 예정인 데이터 값을 이용해 작업을 해야할 때 이 단계에서 로직 구현.<br>  변경하는 로직 구현해도 다시 화면에 그려지지는 않음 <br>👓updated <br>  beforeUpdate가 끝나고 화면에 다시 그리고 나면 실행되는 단계로 데이터가 변경되고 화면 요소를 제어하고 싶을 때 이 단계에서 로직이 구현됨. 그러나 beforeUpdate -> updated -> beforeUpdate -> .. 무한루프될 가능성 있음 <br>  데이터 값 갱신하는 로직은 beforeUpdate에서 처리하는게 좋음 <br>👓beforeDestroy <br>  뷰 인스턴스가 destroy되기 직전에 호출되는 단계로 아직 인스턴스가 없어지지 않았기 때문에 접근이 가능함.<br>  인스턴스의 데이터 삭제 혹은 인스턴스가 사라지기 직전에 해야하는 작업 구현 <br>👓destroyed <br>  뷰 인스턴스가 destroy 되고 난 후 호출되는 단계로 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언했던 인스턴스 모두 destroy됨</p><p> </p><p> </p><p>자습서  <a href="https://vuejs.org/" target="_blank" class="ke-link">https://vuejs.org/</a></p><p> </p><p>참조</p><p><a href="https://mimah.tistory.com/entry/Vuejs-Vuejs-%EA%B8%B0%EC%B4%88-%EC%98%88%EC%A0%9C-%EC%B6%9C%EB%A0%A5-%EC%A1%B0%EA%B1%B4-%EB%B0%98%EB%B3%B5-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%93%B1" target="_blank" class="ke-link">https://mimah.tistory.com/entry/Vuejs-Vuejs-%EA%B8%B0%EC%B4%88-%EC%98%88%EC%A0%9C-%EC%B6%9C%EB%A0%A5-%EC%A1%B0%EA%B1%B4-%EB%B0%98%EB%B3%B5-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%93%B1</a></p><p> </p><p>Vue devtools 설치 및 사용  <a href="https://dreamcoding.tistory.com/34" target="_blank" class="ke-link">https://dreamcoding.tistory.com/34</a></p><p> </p><p>vue에서 bootstrap import 하기   <a href="https://h-clog.tistory.com/34" target="_blank" class="ke-link">https://h-clog.tistory.com/34</a></p><p> </p><p>Vue(project 방식) + Spring 시작하기   <a href="https://7942yongdae.tistory.com/135" target="_top" class="ke-link">https://7942yongdae.tistory.com/135</a></p><p> </p><p>Vue(CDN 방식) + Spring 시작하기   <a href="https://raadi.tistory.com/142" target="_blank" class="ke-link">https://raadi.tistory.com/142</a></p><p> </p><p>Vue + Django 시작하기   <a href="https://levelup.gitconnected.com/vue-django-getting-started-88d3f4c2ba62" target="_blank" class="ke-link">https://levelup.gitconnected.com/vue-django-getting-started-88d3f4c2ba62</a></p><p> </p><p>Django 및 Vue 3를 사용하여 풀 스택 소셜 네트워크 구축   https://www.youtube.com/watch?v=xOxN_7coIDw</p><p> </p><p> </p><p> </p><p>실습 문제)</p><div class="figure-img" data-ke-type="image" data-ke-style="alignLeft" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/ygGb/a75a70cd764fd1522690881580337c72cdd696c0" class="txc-image" width="204" height="315" data-img-src="https://t1.daumcdn.net/cafeattach/ygGb/a75a70cd764fd1522690881580337c72cdd696c0" data-origin-width="290" data-origin-height="448"></div><p> </p><p>실습 문제)</p><div class="figure-img" data-ke-type="image" data-ke-style="alignLeft" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/ygGb/e6199ab661417dacefe19cf42cd8d8ec80d798c9" class="txc-image" width="398" height="285" data-img-src="https://t1.daumcdn.net/cafeattach/ygGb/e6199ab661417dacefe19cf42cd8d8ec80d798c9" data-origin-width="575" data-origin-height="412"></div>
<!-- -->
