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

Grunt란? Grunt는 JavaScript 작업 자동화 도구이다. Java 진영의 Maven, Gradle과 같은 프로젝트 빌드 도구라고 생각하면 이해하기 쉽다. 최근 프론트엔드 영역의 개발 복잡성이 증가하면서 JavaScript 또한 빌드의 대상이 되고 있다. 이번 글에서는 Grunt를 이용하여 복수개의 JavaScript 소스 코드를 병합(Concat), 축약(Uglify)하는 방법을 소개하고자 한다. Grunt 사용을 위한 준비사항 Grunt를 사용하려면 프로젝트 루트 디렉토리에 package.json, Gruntfile.js가 작성되어 있어야 한다. Java 진영의 Gradle과 build.gradle의 관계를 생각하면 이해하기 쉽다. 콘솔에서 grunt 명령어를 사용하려면 NPM을 이용한 설..

URL 라우팅이란? 전통적인 웹 사이트는 사용자가 링크를 클릭할 경우 새로운 주소로 이동하며 페이지가 전환된다. SPA(Single Page Application)은 이름 그대로 처음 시작 페이지를 제외하고는 독립적으로 접근 가능한 물리적인 페이지가 존재하지 않는다. 링크를 클릭할 경우 필요한 부분만 AJAX로 로드되어 현재 페이지에 주입된다. AngularJS에서의 URL 라우팅은? AngularJS는 URL 라우팅 기능을 하는 angular-route.js라는 공식 모듈을 제공한다. 하지만 써드파티 모듈인 angular-ui-router.js가 보다 많은 기능을 제공하며 공식 모듈보다 표준처럼 널리 쓰이고 있다. 이번 글에서는 angular-ui-router.js의 사용법을 소개하고자 한다. UI-R..

JavaScript 오브젝트의 종류 JavaScript 오브젝트는 크게 3가지로 분류할 수 있다. 첫째는 ECMAScript 스펙에 명시된 오브젝트이다. Native Object라고 부른다. Object, Number, String, Boolean, Array, Date 등이 해당된다. 둘째는 JavaScript 소스 코드가 실행되는 환경에서 제공되는 오브젝트이다. Host Object라고 부른다. 웹 브라우저 환경에서는 window, XMLHttpRequest, HTMLElement 등이 해당된다. 해당 오브젝트들은 웹 브라우저 환경이 아닐 경우(예를 들면 Node.js) 사용할 수 없다. 셋째는 사용자가 정의한 오브젝트이다. User Object라고 부른다. Global 오브젝트란? 앞서 window..

개요 웹 디자이너와 퍼블리셔의 영역이었된 HTML, CSS에 Bootstrap를 시작으로 다양한 CSS 프레임워크가 등장하면서 개발자 또한 구조화된 웹 디자인이 가능하게 되었다. 시간이 흘러 전통적인 웹 페이지보다 보다 네이티브 클라이언트에 가까운 SPA(Single Page Application) 개념이 웹에 등장하면서 이런 수요를 총족하기 위한 다양한 프레임워크가 등장하고 있다. 이 중에 앱 스타일의 개발에 특화된 Framework7이라는 프레임워크의 사용법을 간단히 설명하고자 한다. HTML JavaScript // Framework7 오브젝트를 초기화한다. 앱 단위의 오브젝트로 단 한번만 초기화한다. 이 시점에 초기 요소들이 화면에 렌더링된다. var helloApp = new Framework7..