Vue.js - 라이프사이클(LifeCycle) 기본 설명 ① Vue.js로 성공적인 어플리케이션 개발을 위해서는 라이프사이클 이해가 필수적이라고 생각합니다.② 아래 다이어그램을 확실히 이해하면 좋겠지만, 가장 중요한 요소 네 가지만 기억하세요. - Creation - Mounting - Updating - Destruction③ 각 사이클에 대한 자세한 내용은 아래 예제를 보면서 설명하겠습니다. 라이프사이클(LifeCycle) 다이어그램 Vue.js 기초문법8 - 라이프사이클(LifeCycle) 예제 기본 설명 및 소스코드 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455..
Vue.js - 인스턴스(Instance) 기본 설명 ① Vue.js 인스턴스(Instance) - 데이터 변경(watch) 관찰을 설정한다. - 템플릿(template)을 컴파일한다. - DOM을 마운트(Mount), 업데이트(Update) 한다.② 인스턴스(Instance)를 초기화 할 때는 아래와 같은 옵션(options) 객체를 전달해야 한다. - 데이터(data) - 템플릿(template) - 마운트 엘리먼트(Mount Element) - 메소드(method) - 라이프사이클(LifeCycle) 관련 콜백(callback) 등③ 미리 정의된 옵션은 API reference 에서 확인하자. Vue.js 기초문법7 - 인스턴스 생성, watch(감시자) 예제 기본 설명 및 소스코드 - 하단 예제에..
Vue.js - 기본 컴포넌트 작성방법 ① Vue.js에서 컴포넌트(Component)는 정말 중요한 개념이다.② 타 언어의 컴포넌트 개념과 거의 비슷하며 아래와 같다. - 재사용 가능한 응용프로그램을 구축가능하게 하는 추상적 개념 - 거의 존재하는 모든 응용프로그램은 컴포넌트 트리로 추상화 가능하다.③ 미리 정의된 옵션을 가지고 있는 Vue.js의 인스턴스(instance)라고 이해하자. 컴포넌트(Component) 개념 사진 Vue.js 기초문법6 - 컴포넌트 작성 실습 기본 설명 및 소스코드 - 아래 todo-item 태그 참조12345678910111213141516171819202122232425262728293031323334353637383940414243 Component Example V..
Javascript - reduce 설명 ① reduce - 이 함수는 Array 객체의 ProtoType에 정의되어 있는 고차함수 이다. ② 가장 중요한 특징은 배열의 값을 한 개로 감소시키는 특징을 가지고 있다. ③ map, filter, find 함수로 구현할 수 있는 기능은 모두 reduce 함수로 구현 가능하다. ④ 두 번째 매개변수인 initialValue를 통해서 반환 값을 자유롭게 지정하여 유연하게 사용 가능 하다. ⑤ MDN : Array#Reduce 레퍼런스(Reference) 확인 Javascript - reduce 패턴(1) 기본 소스 arr.reduce(callback[, initialValue]) 1.callback previousValue : 마지막 콜백에서 반환된 값 또는 i..
Javascript - every, some 설명 ① every, some - 특정 조건을 만족하는지 배열 내부의 원소를 순회하면서 검사한다. ② 조건에 만족하면 True, 그 반대는 False 를 리턴(Return) ③ 프로젝트 진행 중 배열 내부 원소의 값에 대해서 검토가 필요한 경우 빈번하게 사용한다. ④ Array.prototype.every Array.prototype.some 레퍼런스(Reference) 확인 Javascript - every 기본 소스 - 성능을 위해 조건을 만족하지 않는 값이 발견되면 그 즉시 순회는 중단된다. - (Return False) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 let data= [ { name: "jack", age: 20 ..
Javascript - filter 설명 ① filter - 콜백함수에 지정된 조건에 맞는 요소를 새롭게 반환한다. ② 콜백함수의 인자는 순서대로 값(value), 인덱스(index), 원 배열(array) 이다. ③ Array.prototype.filter 를 통해서 더욱 자세히 공부해보자. Javascript - filter 패턴(1) 기본 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 let data= [ {name: "jack", age: 20}, {name: "kevin", age: 16}, {name: "rick", age: 27}, {name: "marry", age: 21}, {name: "rilly", age: 19} ] // age가 20이상인 원소 추출(필터링) le..
Javascript - forEach, map 비교 ① forEach, map - 배열 순회 후 내부 인자의 원소의 값을 가공하여 로직을 완성하는 메소드(Method) ② 차이점은 수정된 배열을 리턴(retrun)하는지 여부가 있지만, 사용법에 따라 다르다. ③ 새롭게 가공 후 수정 된 배열을 리턴 받을 때는 map, 기존 배열을 가공 하여 평균, 합산 등을 구할 때는 forEach 사용 Javascript - forEach 패턴(1) 기본 소스 1 2 3 4 5 6 7 8 9 10 let data= [10, 15, 20, 25, 30] let result = []; //모든 원소의 값에서 -5 감소 data.forEach( x => { result.push( x - 5 ) }); //결과 출력 cons..
React[리액트]- Router 기본 예제 설명 ① 리액트(React)에서는 URL 값에 따른 뷰(View)를 보여주는 Router를 제공한다. ② 렌더링(Rendering)을 서버쪽에서 담당하는 것은 자원 소모가 있으므로, 뷰(View) 렌더링을 브라우저에서 담당 하는 것이다. ③ 즉, 브라우저에서 압축과 캐싱 기능을 활용하여 렌더링을 후 서버에서 필요한 데이터만 전달받아 보여준다. React Router + Redux 기본 구조 React Router + Redux 기반 어플리케이션의 일반적인 구조는 아래와 같다. 참고 하자. React 라우터(Router) 예제 코드 index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 Colored by Color Scripter cs sty..
React[리액트]- 생명주기(LifeCycle) 설명 ① 리액트(React)에서는 Props, State값이 변화 될 때 컴포넌트(Component)에 많은 변화가 일어난다. ② 컴포넌트(Component) 생성, 업데이트, 제거 될 때 일어난다. ③ 리액트(React) 에서는 DOM 혹은 페이지에 올라갈 때를 마운트(Mount), 그 반대는 언마운트(Unmount) 라고 정의한다. React Life Cycle React에서는 아래 그림과 같은 생명주기(LifeCycle)을 원칙으로 한다. React 생명주기(LifeCycle) 예제 코드 main.js 1 2 3 4 5 6 7 8 9 import React from 'react'; import ReactDOM from 'react-dom'; impo..
Vue.js - 기본 CDN 설치 ① Vue.js는 최신 트렌드에 맞는 진보적인 프레임워크이다. ② 핵심 라이브러리에는 뷰 레이어에 초점을 맞춰어 코딩하면 된다. ③ 대규모 개발 프로젝트에서 Vue.js는 통합 관점에서 매우 편하다는 것을 알 수 있다. cs Vue.js 기초문법4 - 반복문 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 {{ todo.text }} var app4 = new Vue({ el: '#app', data: { todos: [ { text: 'JavaScript 배우기' }, { text: 'Vue 배우기' }, { text: 'React 배우기' } ] } }) cs 실행 화면 Vue.js 기초문법5 - 이벤트 핸들링1 1 2 3 ..
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}