RequireJS를 사용하여 JavaScript 참조 코드를 최적화하는 방법_기본 지식

RequireJS는 자바스크립트 코드의 속도와 품질을 향상시키는 동시에 코드를 더 쉽게 읽고 유지 관리할 수 있는 효과적인 방법입니다.

이번 글에서는 RequireJS와 이를 활용하는 방법을 소개하겠습니다. 파일 가져오기 및 모듈 정의에 대해 논의하고 최적화 측면도 다룹니다.

간단히 말하면 require.js는 JavaScript 코드를 파일과 모듈로 분리하는 동시에 각 모듈 간의 종속성을 관리할 수 있는 스크립트 로더입니다.

파일 가져오기

RequireJS를 사용하기 전에 해당 라이브러리와 AMD(Asynchronous Module Definition) 파일을 다운로드해야 합니다. 그런 다음 다음과 같이 문서 헤드에 있는 require.js 파일에 연결합니다.

 
<script src="require.js" data-main="main"></script>

data-main 속성이 무엇인지 물어볼 수도 있습니다. RequireJS를 사용하면 문서 헤드에서 require를 호출할 때 이 예에서는 main인 자바스크립트 애플리케이션의 기본 파일에도 연결됩니다. Node.js(RequireJS는 파일 이름 끝에 .js 접미사를 자동으로 추가합니다.)

main.js 파일에서는 RequireJS를 구성하고, 모듈을 로드하고, 파일을 가져올 때 사용할 기본 경로를 정의해야 합니다.

요구기능

RequireJS는 간단한 require 함수를 사용하여 스크립트를 가져옵니다. 이 예에서 RequireJS는 JQuery를 가져옵니다.

require(["jquery"], function($) {
 $(‘#mydiv”).html(‘Hello this is RequireJS talking”);
});

RequireJS의 장점 중 하나는 읽기가 매우 쉽다는 것입니다. 위 코드에서 require 함수는 먼저 jquery.js라는 파일을 가져온 다음 $를 익명 함수에 매개변수로 전달하는 것을 볼 수 있습니다. 이 작업이 완료되면 마음대로 JQuery 코드를 사용할 수 있습니다.

이제 코드에는 일반적으로 jquery.js 파일의 jQuery 라이브러리가 포함되어 있지 않습니다. 대부분의 플러그인 및 프레임워크와 마찬가지로 일반적으로 GitHub 또는 Google CDN에서 가져오도록 선택하므로 실제 경로를 구성해야 합니다. :

require.config({
 paths: {
  "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
 }
});

이는 Google을 통해 jquery를 가져올 수 있다는 의미입니다. (이 예에서는 "jquery" 이름을 사용했습니다. 원하는 이름을 사용해도 됩니다.)

모듈 정의

AMD 모드를 사용한다는 것은 우리의 코드가 모듈로 구성될 수 있다는 것을 의미합니다. 모듈에 두 줄의 코드만 넣을 수도 있고, 100줄의 코드를 넣을 수도 있습니다. 모두 모듈을 통해 달성하려는 목표에 따라 다릅니다.

모듈을 정의하려면 다음과 같이 작성할 수 있습니다.

define(function () {
 function add (x,y) {
  return x + y;
 }
});

여기에서는 종속성 없이 add 함수를 정의했는데, 이 함수가 제대로 작동하려면 jquery가 필요한 경우 정의 코드는 다음과 같을 수 있습니다.

define([‘jquery'], function () {
 function place(mydiv) {
$(mydiv).html(‘My Sample Text');
 }
});

이 구문을 사용하여 JavaScript에 먼저 jquery를 가져온 다음 코드를 실행하여 언제든지 jquery를 사용할 수 있도록 지시합니다. 프레임워크나 플러그인뿐만 아니라 Javascript 파일에 정의된 모듈을 사용할 수도 있습니다.

최적화

보시다시피 RequireJS는 파일을 모듈로 구성하고 필요할 때만 가져올 수 있는 강력한 도구입니다. 단점은 JavaScript 파일이 많은 경우 가져오는 시간도 많이 필요하므로 RequireJS에는 모든 파일의 데이터를 수집하여 압축 파일에 넣을 수 있는 최적화 프로그램이 포함되어 있습니다.

전반적으로 RequireJS는 웹 애플리케이션에서 Javascript를 구성하고 최적화하는 훌륭한 도구입니다.