Grunt, AngularJS 프로파일 설정하기

개요 Java 진영, 특히 Spring 기반의 개발자들은 배포 환경에 따라 설정을 달리 적용할 수 있는 Profile 개념에 익숙할 것이다. 프론트엔드 JavaScript 진영에서 Profile 단위의 개발은 필요하지만 적용 방법은 익숙하지 않을 것이다. 이번 글에서는 Grunt 기반의 AngularJS 프로젝트에서 Profile 개념을 적용하는 방법을 소개하고자 한다. package.json 프로젝트 루트에 package.json에 아래 내용을 추가한다. { ... "devDependencies": { "grunt": "1.0.1", ... "grunt-replace": "1.0.1", ... } 위와 같이 기존 Grunt 기반 AngularJS 프로젝트에 grunt-replace 모듈을 추가하고 커맨..
SW 개발/JavaScript 2016. 9. 22. 14:48
NPM을 이용하여 프론트엔드 라이브러리 적용하기

개요 대개 jQuery, Bootstrap과 같은 프론트엔드 영역의 라이브러리(또는 프레임워크)를 프로젝트에 적용시 해당 라이브러리를 직접 다운로드하거나 CDN을 활용하는 방식을 사용해왔다. 이러한 방법은 최근의 백엔드 영역의 빌드 자동화에 비하면 대단히 낙후된 방법으로 이를 극복하기 위해 서버 영역에서는 WebJars, 클라이언트 영역에서는 Bower 등이 등장하였다. 이번 글에서는 Node.js의 패키지 매니저인 NPM을 이용하여 프로젝트에 프론트엔드 라이브러리를 적용하는 방법을 소개하고자 한다. package.json NPM을 이용하여 프론트엔드 모듈을 설치하기 위해 프로젝트 루트에 package.json을 아래와 같이 작성한다. { "name": "helloworld-app", "version":..
SW 개발/JavaScript 2016. 9. 20. 13:32
AngularJS, 전역 범위($rootScope)에 이벤트 핸들러 등록하기

var app = angular.module('someApp', ['ui.router']); app.run(['$rootScope', '$state'], function ($rootScope, $state) { $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams, options) { if ( ... ) { // 인증이 요구되는 스테이트일 경우 $state.transitionTo('user.login'); event.preventDefault(); }); }]); AngularJS의 run() 메써드에 전달한..
SW 개발/JavaScript 2016. 9. 9. 18:16
AngularJS, Hello World 출력하기

개요 AngularJS는 최근의 트렌드라 할 수 있는 SPA(Single Page Application) 개발을 지원하는 현재 가장 유명한 MVW(Model-View-Whatever) 프레임워크이다. 마지막 W가 Whatever인 것은 무엇이든 올 수 있다는 의미이다. 최근의 트렌드는 이 부분을 ViewModel 방식으로 구현하는 것이다. 사전지식 AngularJS를 접하기에 앞서 JavaScript 빌드 도구인 Grunt, Webpack에 대한 사전 이해가 필요하다. 아래 글을 참고한다. Grunt, JavaScript 빌드 환경 구축하기Grunt, Webpack을 이용한 JavaScript 모듈 작성하기 package.json 프로젝트 루트에 package.json 파일을 아래와 같이 작성한다. { ..
SW 개발/JavaScript 2016. 9. 8. 16:44
1 2 3 4 ··· 10