작성일 : 2016-5-13(cpdev.tistory.com)- JHipster란? 말 그대로 Yeoman generator을 이용해서 spring boot + angularjs의 기본적인 기능을 갖춘 프로젝트를 생성하여 준다. 기본적인 인증처리라던가 restful api를 이용한 통신에 대한 내용들이 들어가 있으며, 거의 reference라고 봐도 무방할 정도의 소스를 제공한다. github : https://jhipster.github.io/ - Install JHipster를 설치하는 방법은 크게 3가지다 - local installation- vagrant-base "development box" - Docker 그중에 일반 유저에게 추천되는 설치 방법인 local installation 대해서 ..
Yeoman을 이용해서 기본 템플릿을 설정하고 빠르게 개발하는게 가능하다. 그중에 generator-gulp-angular를 이용하면 gulp 환경의 angularjs 프로젝트를 빠르게 만들수 있다. yo, gulp, bower 설치(필수사항)npm install -g yo gulp bower generator-gulp-angular 설치npm install -g generator-gulp-angular 설치 후 워크 디렉토리 생성 후 해당폴더에서 yo gulp-angular 그 뒤로 몇가지 기본 설정 사항을 선택 후 엔터키 입력만으로 기본환경 구성이 완료된다. 완료 후 아래 명령어로 gulp를 구동시켜 보면 angularjs로 구성된 화면이 brower-sync를 통해 실행되는것을 볼수 있다. gulp..
"use strict"; -> javascript가 "strict mode"로 실행하게 한다. "use strict"는 javascript 1.8.5 (ECMAScript version5) 에서 새로나온 디렉티브이다. 이전 버전에 자바스크립트에서는 무시된다 ."use strict"의 목적은 코드를 "strict mode"로 실행하게 하는 것이다. string모드는 아래 브라우져를 지원한다. Internet Explorer from version 10. Firefox from version 4.Chrome from version 13. Safari from version 5.1. Opera from version 12. "strict mode"에서는 아래와 같이 선언할수 있다. 예제1"use strict"..
front 개발을 하다보니 가벼운 atom 에디터를 사용하고 있다.사용하면서 유용한 라이브러리들을 소개한다. (윈도우os기준..) - sublime-style-column-selection alt 클릭하고 드래그로 세로 선택 가능 이클립스에 block select와 같은기능 - angularjsangularjs 개발시 태그 자동완성 - autoclose-html html 태그 작성시 자동으로 종료태그를 넣어준다 . - goto-last-editctrl + i 마지막으로 수정한 위치로 커서를 이동시켜준다. - linter문법검사 - 필수로 설치하시길 . - linter-htmlhinthtml 문법검사를 해준다. - linter-jshint javascript 문법검사를 해준다. - minimap 없어도 크..
jquery를 사용한다면 간단하게 $("#id").focus() 하면 될 일이지만서도....... angularjs를 이용한다면, 디렉티브를 만들어서 element 조작을 통해서 포커스를 지정한다. -_-뭔가, 복잡스럽다. 아래 plnkr 소스를 참조.
angularjs에 directive라는 유용한 기능이 있다. directive가 생성되는 과정에는 compile과 link라는 과정을 거치게 되는데, compile에 경우 scope와는 상관없이 html에 대한 element 속성만 변경이 가능하다. 예를 들면 아래와 같이 반복되면서 파라미터 객체만 달리해야하는 html 태그가 있을때 사용하면 유용하다. 위와 같이 반복되는 html tag를 아래와 같이 디렉티브를 사용하여 쉽게 사용할수 있다. 자세한 샘플코드는 아래 plunker에서 확인하도록 하자. http://plnkr.co/edit/cJgfVG?p=info