바르셀로나 입성! 두 번째 방문이지만, 개인적으로 가장 좋아하는 도시! 숙소 근처 광장에서 도착 느낌을 만끽하고~ 플라맹고 공연을 보기위해 이번에는 미리 가서 예약한다! 맨 앞에서 관람 가능! 입장! 정말 최고의 공연이었다. 작년에 비해 멤버도 보강하고 사운드도 더 좋아진 듯! 숙소로 돌아 가는 길~ 다음 날 티비다보 놀이공원 방문! 역시 달라진 건 없구나! 전망 너무 좋다~ 저녁 먹자~ 두 가지 맛인데 개인적으로 먹물 빠에야가 더 맛있었던 듯! 근처 시장도 잠깐 방문! 익숙한 곳이라 유명지를 제외하고 돌아다녀 본다. 가장 좋아하는 곳 사그라다 파밀리아 성당! 작년에 비해 공사가 많이 진행되었다. 완공이 얼마 남지 않은 듯! 바르셀로나 경기장 투어를 신청했다. 두근두근! 내부 기념품 스토어인데 정말 굉장..
Vue.js 템플릿 - 디렉티브 ① 이번 포스팅에서는 Vue.js 디렉티브(Directive)를 차례대로 정리 하겠습니다.② 보통은 v- 로 시작하는 접두사가 붙어있는게 특징이예요.③ 아래 예제 소스를 확인하면서 천천히 읽어보시면 쉽게 이해되실 겁니다. Vue.js 기초문법11 - 디렉티브(Directive) 설명 및 예제 # Directive - v-ifTrue - ShowFalse - Showcs v-if 는 바인딩 된 'testFlag' 값에 따라서 엘리먼트를 선택적으로 표시할 수 있어요. # Directive - v-bindLink Activatecs 바인딩 된 엘리먼트의 속성 값을 동적으로 제어하는데 주로 사용됩니다.v-if 와 함께 자주 사용되는 디렉티브입니다. # Directive - v-o..
Vue.js - 템플릿 문법 ① 이번 포스팅에서는 Vue.js 템플릿 문법 자바스크립트 표현식을 차례대로 정리 하겠습니다.② 아래 예제 소스를 확인하면서 천천히 읽어보시면 쉽게 이해되실 겁니다. Vue.js 기초문법10 - 템플릿 문법 설명 및 예제 # JavaScript 표현식1 - 기본{{ number * 3 }}cs 기본적으로 자바스크립트 일반 표현식 사용이 가능합니다. 쉽죠? # JavaScript 표현식2 - 삼항연산자{{ condition ? 'True' : 'False' }}cs 주의 할 점은 데이터 바인딩 영역(이중중괄호) 안에서는 IF( true ) { ... } 조건문 등은 사용 불가합니다.아울러, var = 'test' 같은 구문도 사용이 불가능하겠죠? # JavaScript 표현식3..
Python 아나콘다(Anaconda) - 기본 설명 ① Anaconda(아나콘다) - Python 기반의 데이터 분석에 필요한 오픈소스를 모아놓은 개발 플랫폼이라고 볼 수 있습니다. - 가상환경 관리자 제공 - 패키지 관리자 제공② 아나콘다에 포함된 수준 높은 패키지 관리자를 통해서 파이썬의 효율성을 극대화 시켜 활용할 수 있습니다. ③ 아나콘다의 또 다른 장점은 가상환경 관리자를 각 프로젝트 별 개발 환경을 효율적으로 구성할 수 있다는 것입니다.④ 데이터 사이언스(Data Science)관련 작업에 있어서 파이썬 아나콘다 설치 후 편하게 개발을 진행하고 있습니다. Python 아나콘다(Anaconda) - 패키지 설치(install), 패키지 확인(list) 기본 소스- 가상 환경 활성화(activa..
Python 아나콘다(Anaconda) - 기본 설명 ① Anaconda(아나콘다) - Python 기반의 데이터 분석에 필요한 오픈소스를 모아놓은 개발 플랫폼이라고 볼 수 있습니다. - 가상환경 관리자 제공 - 패키지 관리자 제공② 아나콘다에 포함된 수준 높은 패키지 관리자를 통해서 파이썬의 효율성을 극대화 시켜 활용할 수 있습니다. ③ 아나콘다의 또 다른 장점은 가상환경 관리자를 각 프로젝트 별 개발 환경을 효율적으로 구성할 수 있다는 것입니다.④ 아래 예제들을 보시면 정말 쉽게 사용하실 수 있어요. Python 아나콘다(Anaconda) - 버전확인(version), 업데이트(update) 기본 소스12345#아나콘다 버전 확인conda --version #아나콘다 업데이트conda update c..
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(리스트)로 변환 등⑤ 위에 사항들이 예제와 함께 정리 & 설명 되어 있는 사이트가 있어서 아래..
