Software Engineer, Java, Spring Boot, JAX-RS REST API, OAuth 2.0, Microservice, DevOps

개요 Java 진영, 특히 Spring 기반의 개발자들은 배포 환경에 따라 설정을 달리 적용할 수 있는 Profile 개념에 익숙할 것이다. 프론트엔드 JavaScript 진영에서 Profile 단위의 개발은 필요하지만 적용 방법은 익숙하지 않을 것이다. 이번 글에서는 Grunt 기반의 AngularJS 프로젝트에서 Profile 개념을 적용하는 방법을 소개하고자 한다. package.json 프로젝트 루트에 package.json에 아래 내용을 추..

개요 대개 jQuery, Bootstrap과 같은 프론트엔드 영역의 라이브러리(또는 프레임워크)를 프로젝트에 적용시 해당 라이브러리를 직접 다운로드하거나 CDN을 활용하는 방식을 사용해왔다. 이러한 방법은 최근의 백엔드 영역의 빌드 자동화에 비하면 대단히 낙후된 방법으로 이를 극복하기 위해 서버 영역에서는 WebJars, 클라이언트 영역에서는 Bower 등이 등장하였다. 이번 글에서는 Node.js의 패키지 매니저인 NPM을 이용하여 프로젝트에 프론..

var app = angular.module('someApp', ['ui.router']); app.run(['$rootScope', '$state'], function ($rootScope, $state) { $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams..

개요 AngularJS는 최근의 트렌드라 할 수 있는 SPA(Single Page Application) 개발을 지원하는 현재 가장 유명한 MVW(Model-View-Whatever) 프레임워크이다. 마지막 W가 Whatever인 것은 무엇이든 올 수 있다는 의미이다. 최근의 트렌드는 이 부분을 ViewModel 방식으로 구현하는 것이다. 사전지식 AngularJS를 접하기에 앞서 JavaScript 빌드 도구인 Grunt, Webpack에 대한 사..

Webpack이란? 서버 사이드에서 Node.js로 개발해본 개발자라면 require 구문을 통한 모듈 단위의 개발에 익숙할 것이다. Webpack은 서버 사이드에서만 사용되던 모듈 단위 개발을 클라이언트 사이드에서도 가능하게 해주는 빌드 도구이다. 이번 글에서는 Grunt 빌드 환경에서 Webpack을 적용하는 방법을 설명하고자 한다. 모듈의 예 JavaScript에서 모듈을 작성하는 방식은 AMD, CommonJS 2가지로 구분된다. 다음은 Co..

Grunt란? Grunt는 JavaScript 작업 자동화 도구이다. Java 진영의 Maven, Gradle과 같은 프로젝트 빌드 도구라고 생각하면 이해하기 쉽다. 최근 프론트엔드 영역의 개발 복잡성이 증가하면서 JavaScript 또한 빌드의 대상이 되고 있다. 이번 글에서는 Grunt를 이용하여 복수개의 JavaScript 소스 코드를 병합(Concat), 축약(Uglify)하는 방법을 소개하고자 한다. Grunt 사용을 위한 준비사항 Grun..

URL 라우팅이란? 전통적인 웹 사이트는 사용자가 링크를 클릭할 경우 새로운 주소로 이동하며 페이지가 전환된다. SPA(Single Page Application)은 이름 그대로 처음 시작 페이지를 제외하고는 독립적으로 접근 가능한 물리적인 페이지가 존재하지 않는다. 링크를 클릭할 경우 필요한 부분만 AJAX로 로드되어 현재 페이지에 주입된다. AngularJS에서의 URL 라우팅은? AngularJS는 URL 라우팅 기능을 하는 angular-ro..

JavaScript 오브젝트의 종류 JavaScript 오브젝트는 크게 3가지로 분류할 수 있다. 첫째는 ECMAScript 스펙에 명시된 오브젝트이다. Native Object라고 부른다. Object, Number, String, Boolean, Array, Date 등이 해당된다.둘째는 JavaScript 소스 코드가 실행되는 환경에서 제공되는 오브젝트이다. Host Object라고 부른다. 웹 브라우저 환경에서는 window, XMLHttp..

개요 나는 2011년 모 사내 시스템을 MVVM 패턴의 Knockout으로 개발하면서 상당한 생산성 향상을 경험했다.(심지어 해당 시스템은 닷넷 기반의 클라이언트 애플리케이션이었는데 나는 기어코 WebView를 적용하여 도입하고 말았다.) 데이터 바인딩과 컴포넌트의 개념이 일반적인 닷넷 기반의 클라이언트 개발에 익숙한 개발자들은 전통적인 웹 프론트엔드 개발 방식이 비효율적이라는 생각을 많이 했을 것이다. Knockout은 그러한 불만을 적당히 해결해..

개요 Vue.js는 최근 가장 핫한 MVVM 기반의 JavaScript 프론트엔드 라이브러리이다. Vue.js를 사용하면 jQuery보다 간결하고 직관적인 소스 코드를 작성할 수 있다. 달리 말하면 jQuery를 완전히 배제하고 프론트엔드 소스 코드를 작성할 수 있다. 하지만 AJAX 요청시 jQuery.ajax()를 포기하기에는 너무 매력적인 기능이다. vue-resource는 XMLHttpRequest 오브젝트를 이용한 AJAX 요청을 도와주는 ..