개발자 꿈은 이루어진다.

(공부 책 : Vue.js Quick Start ) 반복적인 데이터를 렌더링하는 방법으로 v-for 디렉티브를 많이 사용합니다. 기존 다른 언어의 for문과 역할은 비슷합니다. 번호 이름 전화번호 주소 {{index+1}} {{contact.name}} {{contact.tel}} {{contact.address}} 위 예시 코드는 model 객체 내부에 contacts 배열을 html 내 v-for을 이용해서 배열의 개수만큼 반복되어 나타냅니다. 원본 데이터가 객체일 경우 조금 달라지는데 key를 이용해 값에 접근하는 HashMap 구조이기 때문에 key, value값을 얻을 수 있는 구조를 사용합니다. 지역을 선택하세요 {{ index+1 }} : {{val}} v-for 디렉티브와 v-if 디렉티브..

created() { this.onClickLine(this.lines[0]) }, methods: { onClickLine : function(line) { chart... } } 결과 함수가 실행은 되나 화면에 차트 그림이 출력안됩니다. 발생원인 : created는 data와 events가 활성화되어 접근할 수 있지만 템플릿과 가상돔은 마운트 및 렌더링되지 않은 상태이기 때문에 created가 실행되는 시점에 dom에 출력하지 않는 겁니다. 해결방법 : mounted() { this.onClickLine(this.lines[0]) }, methods: { onClickLine : function(line) { chart... } } created 대신 mounted를 사용합니다. mounted 실행 ..

(공부 책 : Vue.js Quick Start ) 1. ex01-01.html 분석 {{message}} 코드 내 var model = { message: 'Hello World!' }; 부분은 Model을 담당하고 있습니다. 데이터를 가지고 있지요. var ex01_01 = new Vue({ el: '#ex01_01', data: model }) ex01_01 객체는 ViewModel로 Vue 객체의 el 속성은 HTML 요소를 data 속성은 모델 객체를 참조합니다. 즉, ex01_01 객체가 HTML 요소와 데이터를 참조하고 있기에 데이터가 변경되면 HTML 요소에 반영시킵니다. 간단한 코드만 보아도 모든 작업은 반응형으로 이루어 진다는걸 알 수 있습니다. 2. v-text, v-html 디렉티브..

React와 Vue중 무엇을 공부할지 고민하다 상대적으로 배우기 더 쉽다 생각한 Vue를 선택하게 되어 공부한 기록을 남기고자 합니다. (공부 책 : Vue.js Quick Start ) 1. MVVM 패턴 Vue.js는 MVVM(Model - View - ViewModel) 패턴을 따르고 있습니다. MVVM패턴은 애플리케이션 로직과 UI 분리를 위해 설계된 패턴으로 View는 HTML, CSS로 작성하고 ViewModel은 View의 실제 논리 및 데이터 흐름을 담당합니다. View는 비즈니스 로직에서 ViewModel의 상태 데이터를 변경하면 View에 즉시 반영되어 ViewModel 외 다른 요소는 신경쓸 필요 없습니다. 2. 개발환경 Node.js: 서버 측 자바스크립트 언어 ( nodejs.or..

보호되어 있는 글입니다.

public class CustomUserDetailsService implements UserDetailsService{ private MemberService service; @Override public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException { // TODO Auto-generated method stub log.warn("Load User By UserName : " + username); service.checkMember(username); return vo == null ? null : new CustomUser(map.get("resultCursor")); } } 결과 retrieve..