WEB Front-End/Javascript

requireJS를 통한 모듈화 - javascript define 함수 사용법

hyg4196 2021. 10. 21. 17:29
반응형

 

공부를 하다 보니 

 

define([
    '../test04.js',
], function(test04) {
    var getTest = function(str){
        console.log("hi"+str);
    }
    
    return {
        getTest :  getTest
    };
});

define() 이라는 함수를 만나게 되었다..

 

최근 자바스크립트 모듈화 및 의존성관리에 관심이 생기게 되었습니다.

 

회사에서 맡아서 진행하는 프로젝트가 오래된 서비스이다 보니 아직 까지 모듈화 및 의존성 관리가 제대로 이루어 지고 있지 않고 있어 (html코드에 script 코드를 포함시키는 방식… 순서 꼬이면 난리가 나서 새로운 코드를 작성할때도 일단 다 가져다 쓰고 있습니다…) 코드를 유지보수하는데 점점 어려움을 겪고있어 계속 이런식으로 유지보수를 하는것은 옳은 방법이 아닌것 같다는 생각을 했습니다.

 

이번에 기존 기능을 angularJS로 포팅하는 작업을 진행할 예정인데, 이번 작업을 시작으로 의존성 관리 방식을 바꾸고 모듈화작업을 함께 진행해보고 싶어 (많이 늦었지만…) 공부를 시작하게 되었습니다.

 

모듈화 및 의존성 관리 방법으로 대표되는 2가지 방식이 있는데 (commonJS와 AMD…) 프론트앤드쪽 모듈화에서는 AMD 방식이 효율적이라는 의견이 많아 require.js에 대해서 공부를 시작했습니다.

 

제가 최종적으로 완성해보고 싶은것은 angularJS + require.js를 이용하여 간단한 웹애플리케이션을 만들어 보는것 입니다.

 

https://requirejs.org/docs/download.html

 

Download RequireJS

All you need to start using require.js in the browser. The r.js file allows you to run the optimizer as well as run modules in Node, Rhino, Nashorn or xpcshell. If you are running in Node, and want to use npm to install this file via npm, see the Use with

requirejs.org

 

해당 사이트에서 RequireJS 를 긁어온다.

 

Require.js 를 만들고 긁어온 코드를 넣는다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div class="test001">
        <h2>test</h2>
    </div>

    <div id="test002">
        test
    </div>

    <!-- <script src="test02.js"> </script> -->

    <script src="require.js"></script>
    <script type="text/javascript">
        require(["jquery-1.6.2.min.js"]);
        require(["test02.js"]);
    </script>

</body>
</html>

 

불러올때 require.js 를 불러온 후 내가 만든 test02.js 를 src 로 불러오니 오류가 났다.

 

찾아보니 require 한 후에 뒤에 불러올 파일들은

require(["test02.js"]); 

 

이렇게 불러와야 에러가 안난다구 한다.. (자세한건 더 공부해봐야 할것 같다.. 이유는 아직 모르겠다 ㅠㅠㅠ

 

 

define([
    '../test04.js',
], function(test04) {
    var getTest = function(str){
        console.log("hi"+str);
    }
    
    return {
        getTest :  getTest
    };
});

그다음 파일 '경로' 를 주고 그 파일을 넣을 변수를 function() 안에 넣는다.

 

그리고 이곳에서 만든 함수를 다른 define 한 경로에서 사용하게 하고싶으면 return 을 주고 해당 함수를 가져올 수 있게 해주어야한다.

 

return 안해주면 못씀...

 

그리고 

 

return {

        getTest :  getTest

    };

 

이렇게 하면 test.getTest('넣을값'); 이렇게 해줘야 사용가능하고

 

return getTest;

 

이렇게 하면 test('넣을값'); 이렇게 해주면 되는 것 같다.

 

회사에선 맨 위처럼 객체처럼 사용했길래 메모 해보았다.. ㅎㅎㅎ

 

 

해당 함수를 찾아보면 글이 엄청 긴데, 일단 단순하게 어떤 함수인지 파악하려고

 

이렇게 요약 해보았다..

 

해당 글은 상당히 짧지만, 대충 파악하는데 문제 없다고 생각한다.

반응형