1. 이벤트 핸들러 기본 문법 Vue에서 이벤트 핸들러를 통해 버튼을 만들어보자. 자바스크립트에서는 보통 onclick = " " 문법을 사용한다. 그렇다면 Vue 에서는?? 위와 같이 v-on:click 안에 ~~~ 적으면 된다. v-on:click 문법은 @click으로 축약 가능 하다. --> v-on의 약자가 @라고 보면 된다고 한다,, ( HTML 문법이 아닌 Vue 문법!! ) 2. 진행 과정 차이 예를 들어 버튼을 눌렀을 때 수를 1 증가시키기 위한 코드를 작성하려고 할 때, 먼저 기본 자바스크립트 스타일은 버튼을 생성하고 누른다. 숫자를 찾아서 +1 해준다. 그런 뒤 +1 된 정보를 HTML에 반영해준다. 이런 식으로 진행되는 반면 Vue 에서는 버튼을 생성하고 누른다. 관련 데이터는 자동..

1. v-for 반복문 코드를 짜다보면 반복되는 코드가 많을 때, 길이가 길어지고 복잡해지는 안 좋은 현상이 일어날 경우가 있다. 이럴 경우에는 반복문을 사용한다. v-for 반복문은 배열, 객체, 태그 등 어느 곳에서나 사용할 수 있다. 2. 기본 문법 기본적으로 반복문은 원하는 태그에 v-for = "작명 in 반복할횟수" 를 작성하면 된다. Vue 에서는 반복문 뒤에 오는 값 하나하나에 유니크한 값을 선언해줄 것을 권장하며, 이는 :key = "작명" 을 통해 작성할 수 있다. :key 속성은 쉽게 말해 반복되는 요소들을 각각 구분짓기 위한 속성이다. {{i}} data() { return { 메뉴들 : ['Home', 'Shop', 'About'] } } 위 예제를 보면 반복할 횟수 자리에 메뉴들..

1. 데이터바인딩 ? 자바스크립트 변수 혹은 데이터를 HTML에 넣는것을 말한다. 일반적으로 자바스크립트에서는 해당 과정을 아래 코드를 통해 데이터바인딩을 했다. 하지만 Vue에서는 이렇게 길게 작성할 필요가 없다. 2. Vue에서의 데이터바인딩 데이터보관함 생성 아래 사진을 보면 빨간색으로 표시해둔 부분을 Vue의 데이터 보관함이라고 한다. 그 후 보관함 안에 모든 데이터를 object 자료형으로 저장하면 된다. 이렇게 작성한 데이터를 HTML에 넣기 위해서는 두개의 중괄호 안에 데이터 이름을 작성하면 된다. 3. 데이터바인딩을 하는 이유 1. HTML에 모든 데이터들을 하드코딩 해두면 나중에 하나하나 변경하기가 어렵다. ( 특히 가격과 같은 가변적인 데이터들은 더욱 까다롭기 때문에 데이터바인딩을 사용..

1. Vue.js를 사용하는 이유 Vue의 특징이자 장점을 살펴보자면 접근성이 좋다. 뛰어난 공식 라이브러리와 API 제공 최적화된 렌더링 시스템 -> 개발자가 직접 최적화 수행 X 성능이 좋다. 협업 커뮤니티 등이 있으며, 이 외에도 많겠지만 더 자세한 정보들은 Vue 공식 사이트에서도 확인할 수 있다. -Vue 공식 사이트 참고 https://ko.vuejs.org/ Vue.js - The Progressive JavaScript Framework | Vue.js 접근성 HTML,CSS, 자바스크립트 표준을 기반으로, 쓰기 편한 API와 최고 수준의 문서를 제공합니다. ko.vuejs.org 2. 개발환경 세팅 2.1. nodejs 설치 Vue.js는 자바스크립트 언어를 기반으로 하고 있기 때문에, ..

1. Component란? React에서 컴포넌트는 프로그램을 이루는 최소한의 단위 자바 스크립트에서의 함수와 유사 컴포넌트의 이름은 대문자로 시작되도록 함 컴포넌트를 통해 UI를 여러 개의 조각으로 나눈 뒤, 재사용이 가능하도록 함 각각의 조각들을 개별적으로 관리할 수 있도록 함 2. Component의 구분 2.1. 함수 컴포넌트 - function으로 정의 - return 문에 JSX 코드를 반환 함수 컴포넌트를 작성하는 방법은 function 사용 유무에 따라 다시 2가지로 나뉜다. 1) function 함수 사용 밑줄 친 부분은 함수 컴포넌트로, 해당 함수를 따라가서 살펴보면 function App() { return ( Hello ); } 이렇게 function으로 App 함수를 정의하고 있으..

1. Props Properties의 줄임말 속성을 나타내는 데이터 함수의 매개변수와 같이 컴포넌트끼리 값을 전달 읽기 전용으로, 컴포넌트 내부에서 값 수정이 불가 가장 중요한 마지막 특징을 살펴보자. function sum(a, b) { return a + b; } 위와 같은 간단한 함수를 보면 입력되는 값이 컴포넌트 내부에서는 바뀌지 않고 있다. 이는 즉, 더한 값이 리턴되지만, a와 b 자체의 값은 변하지 않는다는 것을 의미한다. 이러한 함수를 pure function 이라고 부른다. function withdraw(account, amount) { account.total -= amount; } 반대로 여기 이 함수를 보면 amount의 값이 함수 내부에서 바뀐다는 것을 볼 수 있다. amount..