Je개발 일지

[ Reference ] https://vuejs.org/guide/essentials/conditional.html Conditional Rendering | Vue.js vuejs.org 1. v-if directive 중의 하나인 ** v-if ** 는 블록에서 조건부 렌더링하고 싶을 때 사용한다. 해당 블록은 디렉티브의 표현식이 true 값을 반환될 때만 렌더링된다. Vue is awesome! 2. v-else ** v-else ** 는 ** v-if ** 의 else 블록이다. ** v-else ** 에리먼트는 반드시 ** v-if ** 나 ** v-else-if ** element 뒤에 따라가야 하며 그렇지 않은 경우 인식되지 못한다. Toggle Vue is awesome! Oh no 😢 ..

[ Reference ] https://vuejs.org/guide/essentials/class-and-style.html Class and Style Bindings | Vue.js vuejs.org 데이터 바인딩이 필요한 일반적인 이유는 Element 의 클래스와 인라인 Style 을 조작하기 위함이다. 둘 다 속성(attribute) 이기 때문에 ** v-bind ** 를 이용해서 조작할 수 있다. 식을 사용해 마지막 문자열만 계산만 하면 된다. 하지만, 문자열만 가지고 계산하는 과정에서 생기는 간섭은 귀찮고 에러를 쉽게 유발한다. 이런 이유들로 Vue 에서는 ** v-bind ** 를 class 와 style 에 접목시킬 때 특별한 기능을 추가했다.문자열 뿐만 아니라 ** v-bind ** 로 ..

[ Reference ] https://vuejs.org/guide/essentials/computed.html Computed Properties | Vue.js vuejs.org 1. Basic Example Template 표현 방식은 매우 편리하지만 그만큼 간단한 작동을 위한 것이라는 의미도 내포한다. 너무 많은 로직을 Template 안에 넣게 되면 무거워지면서 유지하기가 어려워진다. 반응형 데이터를 포함하는 복잡한 논리의 경우 계산된 속성을 사용하는 것이 권장된다. Has published books: {{ publishedBooksMessage }} 여기에서 계산된 속성을 ** publishedBooksMessage ** 로 선언했다. ** computed( ) ** 함수는 getter 함수..

[ 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 에 대한 공부를 확실하게 하기 위해 부족한 실력이지만, 공식문서를 영어로 읽고, 필요하다 싶은 것들은 한글로 번역해서 블로그에 작성하고자 한다.

[ 1-1 자바스크립트란? ] 1. 자바스크립트의 정의 자바스크립트는 웹 페이지에 생동감, 동적인 부분을 담당하는 프로그래밍 언어다. HTML 태그에서 로 작성할 수 있다. 브라우저뿐만 아니라 서버에서도 실행할 수 있으며 자바스크립트 엔진 프로그램이 있는 모든 디바이스에서 동작한다. Chrome 과 Opera 에서는 자바스크립트 엔진 V8 (Node.js도 V8 엔진을 사용한다) 이 사용되고, Firefox 에서는 SpiderMonkey 가 쓰인다. 엔진의 동작 원리를 간단하게 요약하자면 다음과 같다 엔진이 스크립트를 읽는다 읽은 스크립트를 기계어로 전환한다 기계어로 전환된 코드가 실행된다. 2. 브라우저에서 할 수 있는 일과 없는 일 모던 자바스크립트는 브라우저를 대상으로 만든 언어이기에 메모리나 CP..