자바스크립트(Javascript) 모듈화
배경
- Web App 로직의 비중이 서버에서 클라이언트로 이동하면서 클라이언트 코드가 거대화, 엔터프라이즈화 됨
- 클라이언트 Web App 개발 언어는 자바스크립트(이하 JS)
- JS를 본격적인 프로그래밍 랭귀지로 사용하려면 모듈화가 선결조건
- 모듈화의 중요성
==> 유지보수의 간편함
- 시스템이 독립적인 모듈로 느슨하게 결합되어 있어야 관리하기 쉽다
- 어느 한 부분을 수정해도 전체 시스템에 영향을 주지 않는다
히스토리
- JS 모듈 관리를 위한 코딩 표준을 정의하려는 노력이 있었음(CommonJS와 AMD)
- CommonJS
- JS의 활용성을 높이려는 자발적 워킹그룹
- JS를 범용 프로그래밍 언어로 만드는 것이 목적
- 2009년 1월 Kevin Dangoor가 SSJS(서버-사이드 자바스크립트)에 대한 아이디어를 제시하고 사람들을 모으기 시작
- JS 모듈 관리에 관한 코딩 표준을 제시함
- AMD(Asynchronouse Module Definition)
- 브라우저에서의 JS 모듈 활용성을 높일 목적으로 CommonJS에서 파생됨
- AMD는 CommonJS와 interoperable
- jQuery를 비롯 다수의 오픈소스 솔루션이 AMD를 지지
- jQuery의 경우, 1.7부터 AMD 모듈 등록 기능을 지원하기 시작
- CommonJS와 마찬가지로 JS 모듈 관리에 관한 코딩 표준을 제시함
- RequierJS
- AMD 표준을 준수하는 가장 인기 있는 JS Loader
- 기존 JS 로딩의 문제(<script> 태그를 이용 JS 파일을 로딩할 경우...)
- 로딩이 시퀀셜하게 진행
- JS 파일간 dependency가 없을 경우 시퀀셜하게 로딩하는 것은 시간 낭비
- JS 파일간 dependency가 있을 경우 개발자가 script 태그 배열 순서를 신경 써야 함
- RequireJS를 비롯한 asynchronous loader의 역할
- JS를 비롯한 모든 리소스를 가능한 병렬로 로딩
- JS 파일간 dependency를 JS Loader가 지능적으로 관리
전망, 결론
- CommonJS, AMD가 해결하려는 문제의 핵심은 모듈화
- 모듈화는 JS가 보다 범용적인 언어로 자리매김하는 단초가 될 것
- 모듈화는 JS framework(이후 f/w) 패러다임이 변화하는 토대가 될 것
- 지금까지는 모든 것을 해결하는 다목적 f/w가 주류
- 글로벌 네임스페이스를 차지하는 대형 f/w은 다른 JS 코드와 충돌하기 쉽다
- 특정 영역에 집중하는 작은 모듈이 관리하기 쉽다
- 이제부터는 필요한 기능별로 f/w 모듈을 로드하여 사용하는 시대
- 특히 크기가 중요한 모바일 환경에서 중요성 증대
- HTML5가 지원되는 스마트폰 환경에서 활용사례 증가 예상(로컬 스토리지를 통해 모듈 로딩 성능 향상 가능)
