RequireJS를 이용한 Javascript의 Ajax개발.

1. 전자정부 프레임워크
대시 보드 – JSON View 예제.(+RequireJS)
EMS 2 Team
진형은 사원

2. 1. RequireJS 간단한 구조.
2. RequireJS를 활용한 Select 예제.
3. 구현한 Select기능을 모듈화.

3. 1. RequireJS (1)
• RequireJS를 사용하는 이유..
: 대시보드의 경우, 화면을 담당하는 html과 순수 JS위주로 되어있다고 합니다.
즉, JS파일 내에서 다른 JS를 사용해야할 경우가 있습니다.
(ex jQuery사용, Ajax 호출, 암호화, 등등..)
이처럼 다양한 JS 모듈을 활용해야 할 경우, 의존성관리가 되지 않는 문제가
있었습니다. 이 때문에 Require JS를 사용하게 되었습니다.
또한, 자주 사용되는 JS(비즈니스 로직)을 모듈화하여,
추후에 재사용할 수 있도록 “사용자 모듈화”도 가능합니다.
예제는 requireJS 사용법과 “사용자모듈화” 이 두 부분을 위주로 작성하였습니다.

4. 1. RequireJS (1)
Main.js
(requireJS setting)
Jquery.js
(Module)
Cryptograph.js
(Module)
Json2.js
(Module)
Require.js
Json2.js
(Module)
• 모듈 경로 지정 및 각 모듈의 의존성을 정의.
• 자주 사용하는 경우, 미리 로드하여 초기화
작업을 할 수 있다.
사용자정의.js
(Module)

5. 1. RequireJS – main.js (2)
• Requirejs 구성환경 설정.
• baseUrl
: 기본적인 모듈 경로 지정
• Paths
: 사용할 모듈 경로 지정.
• Shim
: 모듈별 의존성 지정.
• Requirejs
최초 가져올 모듈을 정의,
초기화 함수 지정 가능.

6. 1. RequireJS 간단한 구조.
2. RequireJS를 활용한 Select 예제.
3. 구현한 Select기능을 모듈화.

7. 2. 예제화면.
src/main/webapp/htmlview

8. • Require([“사용하고자하는 모듈”],
• Sample.js 안에서
사용할 모듈(ex jquery, 암호화..)들을
미리 load하며, 초기화 기능을 정의합니다.
• 기능 구현의 경우, 추후에 html에서
접근 가능형태로 제공 해야하기 때문에,
객체 형식으로 작성합니다.
(자세한 내용은 3번에서 자세히 설명.)
2. Sample.js (1)

9. 2. Sample.js (2)
1) 조회할 Select Query를 가져옵니다.
2) 암호화 모듈을 통해 쿼리를 암호화.
3) 암호화된 쿼리를 parameter형식으로 변환
* “_”문제 등으로 변환처리.
*$.param사용시 JSON형태로 인자값을 넣어줘
4) Jquery의 Ajax를 사용해 요청.
5) 요청이 정상적으로 성공할 경우, 결과값을
JSON 파싱하여 View(대시보드) 구현.
1
2
3
4
5

10. 2. Sample.js (3)
• 작성된 class를, new연산자를 통해 생성합니다.
• 브라우저에서 최상위(Global)개념인
Window 객체에 생성한 객체를 넣고,
이후 html에서 Window.정의한객체.정의한메소드 를 통해 접근가능합니다.

11. 2. main.html
src/main/webapp/htmlview/main.html

12. 1. RequireJS 간단한 구조.
2. RequireJS를 활용한 Select 예제.
3. 구현한 Select기능을 모듈화.

13. 3. sampleModule.js (1)
• 첫번째 예제와 달리, 모듈을 만드는 경우
Require가 아니라 define을 통해서 정의합니다.
• 의존성 형식은 동일합니다
[“사용할모듈”],function(로드될 모듈변수)

14. 3. sampleModule.js (2)
1
2
3
4
5
• 세부기능은 위에서 설명과 동일하므로
• 생략하겠습니다.

15. 3. sampleModule.js (3)
• sampleModule에서 정의한 객체를 반환합니다.
sampleModule.js
sampleModuleLoader.js
• sampleModuleLoader에서는
require를 이용하여 사용자 정의 모듈을
로드한 후 마찬가지로 html접근을 위해
Window객체에 추가합니다.
*재밋는건, 하위모듈(sampleModule)에서
상위모듈이 로드한 모듈(jQuery..)
역시 사용 가능합니다.

16. 3. sampleModule.js (3)
src/main/webapp/htmlview/mainUsingModule.html