Je개발 일지

[ Reference ] https://vuejs.org/guide/essentials/reactivity-fundamentals.html Reactivity Fundamentals | Vue.js vuejs.org 공식 문서에서는 예시 코드를 Options API, Composition API 둘 다 지원하고 있다. 나는 개인적으로 Composition API 를 더 선호하고 있기 때문에 Composition API 로 예시 코드를 가져오도록 하겠다. 1. Declaring Reactive State ** reactive( ) ** 함수를 사용하게 되면 반응성이 있는 객체나 배열을 만들 수 있다. import { reactive } from 'vue' const state = reactive({ cou..

[ Reference ] https://vuejs.org/guide/essentials/template-syntax.html Template Syntax | Vue.js vuejs.org Vue 는 선언적 바인딩을 가능하게 하는 HTML 기반의 Template 구문을 사용한다. 모든 Vue template 은 HTML Parser 나 규격 호환 브라우저에서 파싱할 수 있는 유효한 HTML이다. Vue 는 template 을 높은 정도로 최적화된 자바스크립트 코드로 컴파일한다. 여기에 반응성 시스템까지 겹쳐서 Vue 는 리렌더링 해야 하는 최소한의 Element 를 파악해 앱 상태가 변경될 때 최소한의 DOM 을 조작할 수 있도록 만든다. (* 의미하는 바를 잘 생각해보자. HTML 을 이용해서 DOM T..

[ Reference ] https://vuejs.org/guide/essentials/application.html Creating a Vue Application | Vue.js vuejs.org [ 2-1 ] Creating a Vue Application The application instance 모든 Vue 어플리케이션은 createApp 함수를 이용해서 application instance 를 만들어내야 한다. The Root Component createApp 함수로 넘기는 객체들은 사실상 컴포넌트들이다. 각 app 은 Root Component 를 필요로 한다. 그리고 이 Root Component 는 다른 컴포넌트들을 Children 으로 갖는다. (*첨언. 이 Root Componen..

[ Reference ] https://vuejs.org/guide/introduction.html Introduction | Vue.js vuejs.org [ 1-1 ] Introduction Vue 란 무엇인가? Vue 는 유저 인터페이스 기반의 자바스크립트 프레임 워크다. 컴포넌트 기반의 선언적 프로그래밍 모델이며 이런 특징은 유저 인터페이스를 효과적으로 개발할 수 있도록 도와준다. Vue 의 가장 큰 특징 두 가지는 다음과 같다 선언적 렌더링 Vue 는 template 문법을 이용해서 HTML 로 확장한다. 이 말은 자바스크립트를 이용해서 HTML 을 선언적으로 그려나갈 수 있다는 걸 의미한다. React 랑 비교를 하자면 React 의 경우에는 JSX 문법을 이용해서 HTML 을 만들어 나가고,..

Vue 가 이번에 공식적으로 3 버전을 정식 버전으로 선언하고 공식문서를 개편했다. 생각했던 것보다 많은 것이 바뀌었다. 프론트엔드를 공부할 때 React 로 처음 공부 시작한 입장에서는 이번 변화에서 반길만한 것들이 있지만, 회사에서 Vue 2 에서 Vue 3 로 옮기는 작업을 하고 있었는데, 이번 개편에서 또 변화된 것들이 있어서 기존에 리팩토링 한 내용들을 다시 리팩토링해야 하는 상황이 왔다. 이번 기회에 Vue 에 대한 공부를 확실하게 하기 위해 부족한 실력이지만, 공식문서를 영어로 읽고, 필요하다 싶은 것들은 한글로 번역해서 블로그에 작성하고자 한다.