개요 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 파일을 아래와 같이 작성한다. { ..
Webpack이란? 서버 사이드에서 Node.js로 개발해본 개발자라면 require 구문을 통한 모듈 단위의 개발에 익숙할 것이다. Webpack은 서버 사이드에서만 사용되던 모듈 단위 개발을 클라이언트 사이드에서도 가능하게 해주는 빌드 도구이다. 이번 글에서는 Grunt 빌드 환경에서 Webpack을 적용하는 방법을 설명하고자 한다. 모듈의 예 JavaScript에서 모듈을 작성하는 방식은 AMD, CommonJS 2가지로 구분된다. 다음은 CommonJS 방식으로 작성한 모듈의 예이다. 아래와 같이 hello 이름을 갖는 모듈을 작성하고 hello.js로 저장한다. var hello = 'hello'; module.exports = hello; 앞서 생성한 hello 모듈을 사용하는 world.js..
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..
- Total
- Today
- Yesterday
- 구동계
- 로드 바이크
- bootstrap
- java
- JavaScript
- 평속
- jsp
- Spring Boot
- 태그를 입력해 주세요.
- CentOS
- kotlin
- graylog
- Eclipse
- maven
- DynamoDB
- Spring MVC 3
- Docker
- spring
- 로드바이크
- 알뜰폰
- 자전거
- jpa
- JHipster
- jstl
- Kendo UI Web Grid
- node.js
- Tomcat
- chrome
- MySQL
- Kendo UI
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |