Vue.js - 템플릿 문법 ① 이번 포스팅부터 Vue.js 기본 문법을 차례대로 정리 하겠습니다.② 아래 예제 소스를 확인하면서 천천히 읽어보시면 쉽게 이해되실 겁니다. Vue.js 기초문법9 - 템플릿 문법 설명 및 예제 # 문자열{{ message }}cs 기본적으로 데이터 바인딩은 이중 중괄호를 사용합니다. 바인딩 이후에는 데이터의 message 속성이 변경될 때마다 자동으로 값이 변경(갱신)됩니다. # v-once 디렉티브{{ message_once }}cs v-once 디렉티브(Directive)는 일회성 바인딩을 의미합니다. (값이 변경되지 않습니다.) 단, 같은 노드의 바인딩에도 영향을 끼치므로, 주의해서 사용합시다. 디렉티브(Directive)에 대해서는 나중에 다루겠습니다. # v-ht..
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..
npm(node.js) - 명령어 기본 설명 ① npm - node.js 를 설치하면 자동으로 함께 설치 된다.② 실제 프로젝트에서 npm 기반 모듈(module) 설치 & 제거 및 버전 관리 사용법은 정말 중요하다.③ 프로젝트 초기에 각 모듈별 버전(version) 관리를 철저하게 해야 나중에 꼬이지(Side effect) 않는다. npm(node.js) - 도움말 옵션(-h) 기본 소스 12345#npm 커맨드 확인npm -h #npm 커맨드 세부사항 확인npm 커맨드 -hcs 실행 화면 npm(node.js) - list 기본 소스 12345678#현재 프로젝트 설치된 모듈 확인npm list #npm 전역 설치 모듈 확인(global)npm list -g #depth 옵션npm list -g --..
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..
Java(자바) - 맵(Map) 9가지 중요 설명 소개 링크 ① Java Map(맵) - Key, Value의 대응관계로 이루어진 자료 저장을 위한 자료형이다.② 종류에는 HashMap, HashTable, TreeMap이 있으며, 차이점을 명확하게 알아야 한다. - 개발자 면접에 빈번하게 등장 하는 질문이다.③ 맵의 정렬(Sort)에 대해서 잘 알아두어야 한다. - 키(Key) 정렬 - 값(Value) 정렬④ 성능 하락에 영향이 가지 않도록 정확하게 원리 파악 후 개발하는 것이 중요하다. - Map(맵)의 순환(Iterate) - 깊은 복사(Deep Copy), 얕은 복사(Shallow Copy) - List(리스트)로 변환 등⑤ 위에 사항들이 예제와 함께 정리 & 설명 되어 있는 사이트가 있어서 아래..
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}