Angular Quick Start Angular CLI를 제공 https://cli.angular.io/ project를 생성 add files testing, budling, deployment cli 설치 $ npm install -g @angular/cli 프로젝트 생성 $ ng new my-dream-app serve app $ ng serve --open (-o는 자동으로 http://localhost:4200/을 열어주는 옵션) angular component 수정 CLI를 통해 Angular component가 생성이 된다. ./src/app/app.component.ts 타이틀을 변경 ./src/app/app.component.css 는 스타일을 변경 프로젝트 구성을 확인 가능 asset..

오늘 포스팅할 내용은 Vue 컴포넌트이다. 여기서 말하는 컴포넌트란 무엇일까? 컴포넌트는 하나의 블록을 의미한다. 레고처럼 여러 블럭을 쌓아서 하나의 집을 모양을 만들 듯이, 컴포넌트를 활용하여 화면을 만들면 보다 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다. 이렇게 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 훨씬 편리하다. 또한 모든 사람들이 레고의 사용설명서처럼 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있다. 위 그림에서 보듯이 하나의 페이지를 여러 블록으로 나누었고, 여러 블록으로 조합하여 하나의 화면으로 만들었다. 그리고 하나의 특징이라면 하나의 블록 안에 또 다른 블록들이 들어가 있..

뷰 인스턴스의 정의와 속성 뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다. 즉 뷰로 화면을 개발하기 위해 빠트릴 수 없는 필수 조건이다. 뷰 인스턴스 생성 뷰 인스턴스를 사용하기 위해 아래와 같은 형식으로 뷰 인스턴스를 생성한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Vue Sample {{message}} new Vue({ el:'#app', data:{ message: 'Hello Vue.js !' } }); Colored by Color Scripter cs 위의 코드를 간단히 설명하자면 HTML화면에 'Hello Vue.js !' 라는 텍스트를 출력하기 위한 코드이다. 일단 new Vue()로 뷰 인스턴스를 생..

오늘 포스팅할 내용은 프론트엔드 프레임워크 중에 하나인 vue.js 이다. 필자도 처음 다루어보는 프론트엔드이기 때문에 간단히 vue.js가 무엇인지 알아보자. Vue.js란? vue.js는 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크이다. vue.js는 여타 다른 프론트엔드 프레임워크보다 배우기 쉽다는 장점이 있다. 리엑트와 앵귤러라는 프레임워크의 장점들을 쏙 빼와서 더욱 빠르고 가볍게 만든 프레임워크라고 한다. vue.js는 위 그림과 같은 구조를 가지고 있다. 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다. 즉, 단순 라이브러리의 기능 외에 프레임워크 역할도 수행하게 되는..

지금까지 프로젝트를 진행하면서, 많은 유효성 검사 함수를 만들어서 썼다. 아무래도, 내가 너무 시대에 뒤떨어져있었던게 아닌가 생각된다. AngularJS를 활용하면 간편하게 유효성 검사를 할 수 있는데, 아래 간단한 예제를 소개한다. User name: Required! Show Example on Plunker. AngularJS에서는 사용자의 입력에 따른 From Validation을 기본적으로 몇가지 제공한다. Attribute Type Detail ngRequired boolean 필수 입력 체크. ngMinlength number 최소길이 설정. ngMaxlength number 최대길이 설정. ngPattern string 패턴설정. 정규표현식 사용. AngularJS에서 Form의 Prope..

아직 AngularJS에 대해서 많은것을 알지는 못하지만, AngularJS의 커스텀 디렉티브는 굉장히 유용할 것 같다. 그 중, HighCharts를 AngualrJS를 통해서 쉽게 사용할 수 있는 HighCharts 모듈을 소개해볼까 한다. 아래 주소에 더 많은 정보가 있다. http://ngmodules.org/modules/highcharts-ng 예제를 확인해보자. HTML HighCharts - angularModule ReLoad JavaScript app.controller('ngCtrl', function($scope) { $scope.loadChart = function() { var rnd = []; for (var i = 0; i < 10; i++) { rnd.push(Math.fl..

AngularJS에서는 ng-model 디렉티브를 사용하여, 양방향 데이터 바인딩이 가능하다. 먼저 jQuery를 사용한 아래 예제를 확인해보자. InputText Element에 값을 입력할때 마다, p Element의 값을 변경해주는 예제이다. HTML 파일. Javascript 파일. $(function(){ $("#txtText").keyup(function() { $("#p").text($(this).val()); }); }); 예제 확인 소스를 확인해보면, txtText Id를 가진, InputText Element의 keyup 이벤트시, p Id를 가진 pElement의 text를 InputText 엘리번트의 값으로 변경해주고 있다. 물론, 이렇게 보면 이 소스 또한 그리 복잡하지는 않을 수..

요즘 시간이 날때마다, AngularJS를 조금씩 공부하고 있다. AngularJS는 보통 자바스크립트 MVW(Model View Whatever) 프레임워크라고 하고, jQuery는 자바스크립트 Library라고 한다. 예전부터 AngularJS에 대한 궁금증을 가지고 있었는데.. 드디어 시간을 내서 AngularJS에 대해서 공부를 했다. 아래 소스를 보면, 간단하게 AngualrJS와 jQuery의 차이점에 대해서 파악해 볼 수 있다. 동일한 결과를 가져오는 두가지의 소스이다. 먼저, jQuery를 이용한 방법이다. 먼저, HTML에는 TABLE과, TBODY를 설정했다. 이어서, Javascript 파일에서 아래의 ArrayData를 $.each를 사용해서 반복한다. $(function() { v..

1. Node.js 설치 2. Node.js, npm 버전 확인 3. react 설치 4. 특정 폴더에 react 설치 5. npm start로 리액트 서버 실행 Node.js 홈페이지로 가서 설치 https://nodejs.org/ko/ 정상 설치되었다면 아래와 같이 cmd에서 위와 같은 명령어로 현재 버전 확인 npm -v node -v react를 사용할 수 있게, react 전역 설치 install -g create-react-app 리액트를 사용할 폴더에 리액트 설치 create-react-app . 참고로 다음과 같이 create-react-app 이후에 설치가 완료되면 아래와 같이 Happy hacking!이란 메시지가 나온다. npm start 스타트를 하면 다음과 같이 localhost:..