개발자가 템플릿의 엘리먼트에 직접 접근해야하는 경우가 있을 수 있다. ref로 접근하기 v-for 내부에서 ref 사용하기 ref가 v-for 내부에서 사용되면, 해당 ref는 마운트 후 엘리먼트로 채워지므로 배열 값이어야 한다. list에 있는 값을 v-for

computed는 정해진 계산식에 따라 결과값을 반환하는 함수를 내가 호출하는 방식이다.하지만 watcher는 호출을 하는게 아니라 지정한 값이 변경할 때 마다 인지하고 알아서 수행하는 방식이다.input에 값을 입력하게 되면 watch에 의해 비동기로 함수가 실행 된

라이프사이클이란 Vue 인스턴스나 컴포넌트가 생성되고 소멸되기까지의 단계를 말하며 각 단계에서 실행되는 함수들을 라이프사이클 훅이라고 부른다.onMounted 컴포넌트가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행한다.onUpdated 리랜더링 시 실행한

화면에서 데이터를 처리할 때 엘리먼트의 상태와 자바스크립트의 상태가 동기화가 되야하는 경우가 많다. 이럴 때 값을 수동으로 연결하고 이벤트리수너를 통해 변경하는것은 번거롭다. 이럴 떄 v-model 디렉티브는 단순화 하는데 도움을 준다. 기본 사용법 텍스트 imp

일반적으로 v-on 디렉티브는 단축 문법으로 @ 기호를 사용하며, DOM 이벤트를 수신하고 트리거될 때, 사전 정의해둔 JavaScript 코드를 실행할 수 있다.아래와 같이 사용한다.핸들러는 두 가지 종류가 있다.인라인 핸들러: 이벤트가 트리거될 때 실행되는 인라인

v-for 디렉티브를 이용해 배열을 리스트로 랜더링 할 수 있다.items라는 배열에서 한개식 꺼내서 item에 담아 표현 해주고, idx는 배열의 순서를 나타낸다.for를 중첩으로도 사용이 가능하다.객체의 속성들을 반복하는데에도 v-for를 사용할 수 있다.순서대로

v-if 디렉티브는 조건부로 블록을 렌더링하는 데 사용한다. 블록은 디렉티브 표현식이 참인 경우에만 렌더링됩니다.v-else로 v-if에 해당되지 않는 else블록을 나타낼 수 있다.dog를 true로 만든 뒤 버튼을 누를 때 마다 현재 dog의 참거짓 값을 반대로 돌

일반적으로 엘리먼트에 데이터를 바인딩하는 이유는 클래스 목록과 스타일을 동적으로 만들기 위해서다. 하지만 class와 style을 v-bind를 사용하여 할당하게되는 경우 성가시고 오류가 발생하기 쉽다. HTML 클래스 바인딩 객체로 바인딩 클래스를 동적으로 표현

만약 객체의 상태에 따라서 템플릿에 동적으로 표현을 해줘야할 경우 아래와 같이 한다.author.books의 길이가 0 이상이면 Yes, 아니면 No를 표현 해준다.간단한경우는 상관 없지만, 복잡하거나 양이 많아지면 template이 커진다.따라서 이런 경우 compu

기존에는 스크립트에 state와 함수를 표현할 때 아래와 같이 했다Vue 3에서는 Composition API 와 setup 함수의 등장으로 컴포넌트 객체에 setup 함수를 사용할 수 있다. setup은 아래와같이 사용해서 더 간결하게 사용할 수 있다.setup을 쓰

Method는 뷰 컴포넌트 안에 기능을 정의해놓은 것 이다.method에 객체를 만들고 사용할 함수를 정의하면 된다.name 이라는 데이터를 만들어 버튼을 누르면 alert에 name을 띄우게 해보자.data 에 있던 값은 template과 methods에서 접근이 가

Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수 있는 HTML 기반 템플릿 구문을 사용컴포넌트의 데이터를 DOM에 그리는 방법으로 사용되는 문법은 중괄호를 두번 쓴다.이중 중괄호(mustaches)는 HTML이 아닌 일반 텍스

Vue 프로젝트를 WebStorm을 통해 생성 해보자.WebStorm에서 Vue.js에서 프로젝트를 생성 해주자.그러면 프로젝트가 아래와 같이 생성 된다.main.js : Vue 인스턴스를 생성App.vue : 최초로 불러오는 Vuecomponents : 컴포넌트 폴더

Vue는 웹 페이지 화면을 개발하기 위한 javascript 프레임워크이다.여기서 보면 리액트와 차이점이 있다. 리액트는 라이브러리고 Vue는 프레임워크이다.배우기 쉽다리액트에 비해 성능이 좋다리액트의 가상돔, 앵귤러의 데이터 바인딩을 가지고 있다.긴말이 필요 없다.

웹스톰으로 리액트 프로젝트를 생성해 예제를 만들어 실행 해보면 찍히면 안되는 콘솔 로그까지 마구잡히로 찍히고, 두번씩 찍히는 것을 경험한적이 있을것이다.이유는 React.StrictMode 때문이다.해당 모드가 존재하는 이유는 다음과 같다.안전하지 않은 생명주기를 사용

Hooks는 리액트 16.8 버전에 신규로 추가된 기능이다. 클래스형 컴포넌트에서만 가능했던 state 및 다양한 기능을 코드작성 없이 라이브러리로 제공한다.리액트에서는 클래스형 컴포넌트가아닌 함수형 컴포넌트에 훅을 사용하는것을 권장한다.훅의 간단한 규칙이 있다.최상위

변경 가능한 값우리가 아는 데이터에 해당.데이터 변경 시 화면이 새로고침 됨state는 우리가 일반적으로 알고있는 변수와 비슷하다. 다음 예제에서는 카드색상을 원하는색으로 바꾸는 실습을 진행하겠다.아래와 같이 파일을 생성한다.Label, Squere컴포넌트를 사용하는

화면에 값을 불러오고 표현하기 위한 값을 처리하는 방식에 대해서도 알아보자.불변하는 값부모 컴포넌트에서 자식컴포넌트로 전달한번 만들어진 데이터는 변경되지 않는다.상태값이 없는 컴포넌트는 stateless component라고 부른다. 이런 상태값이 없는 컴포넌트는 스스

이번에는 부트스트랩 웹페이지 실습 소스를 이용해 모듈화 하는 실습을 진행한다.https://startbootstrap.com/previews/new-age해당 웹페이지에서 소스코드를 다운로드 한다.압축을 풀면 파일은 이렇게 들어있다. css와 assets 폴더

컴포넌트는 화면을 구성하는 단위이다.컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트 두가지가 있다.상태를 알수있는 값인 state를 사용할 수 있는 컴포넌트render를 무조건 위치해야 한다.class 앞에 export default라는 의미는 외부에서 참조할 수 있게