AJS: Atlassian JavaScript Library

AJS: Atlassian JavaScript Library에 대한 소개

웹 애플리케이션 개발의 세계에서는 사용자 경험을 향상시키고 인터페이스를 간편하게 조작하기 위해 다양한 라이브러리와 프레임워크가 사용됩니다. 그 중 Atlassian의 제품군(JIRA, Confluence 등)에서 사용되는 AJS(Atlassian JavaScript Library)는 Atlassian의 웹 애플리케이션을 더 효율적으로 개발하고 유지보수하기 위해 고안된 강력한 도구입니다.

AJS란 무엇인가?

AJS는 Atlassian이 자사의 제품에서 사용하는 JavaScript 라이브러리입니다. 이 라이브러리는 jQuery를 기반으로 하여 다양한 유틸리티 함수와 메서드를 제공하며, 이를 통해 Atlassian 제품의 사용자 인터페이스를 쉽게 조작할 수 있습니다. AJS는 일반적인 jQuery 함수와 매우 유사하게 작동하지만, Atlassian의 특화된 기능들이 추가되어 있습니다.

AJS의 주요 기능

DOM 조작

AJS는 jQuery와 유사한 방식으로 DOM 요소를 선택하고 조작할 수 있습니다. 이를 통해 개발자는 HTML 문서를 동적으로 변경하고, 이벤트를 바인딩하며, 다양한 애니메이션 효과를 추가할 수 있습니다.

AJS.$('#elementId').text('Hello, AJS!');

`AJS.$('#elementId').text('Hello, AJS!');` 코드는 Atlassian JavaScript Library(AJS)를 사용하여 특정 HTML 요소의 텍스트 내용을 변경하는 코드입니다. 이 코드의 각 부분을 자세히 설명하면 다음과 같습니다.

AJS	Atlassian JavaScript Library를 나타냅니다. Atlassian의 제품군에서 자주 사용되는 유틸리티 함수와 메서드를 포함하고 있습니다.
$	jQuery와 동일한 기능을 제공하는 함수입니다. AJS는 jQuery를 래핑하여 사용하기 때문에, `$`를 통해 jQuery 메서드를 사용할 수 있습니다.
('#elementId')	jQuery의 id 선택자를 사용하여 HTML 문서 내에서 id가 `elementId`인 요소를 선택합니다.
.text('Hello, AJS!')	선택한 요소의 텍스트 내용을 변경하는 jQuery 메서드입니다. 이 메서드는 요소의 현재 텍스트를 'Hello, AJS!'로 설정합니다.

즉, 이 코드는 id가 `elementId`인 HTML 요소를 찾아서 그 요소의 텍스트 내용을 'Hello, AJS!'로 변경합니다. 예를 들어, 다음과 같은 HTML 코드가 있을 때

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atlassian Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://path-to-atlassian-js-library.js"></script>
    <script>
        $(document).ready(function(){
            AJS.$('#elementId').text('Hello, AJS!');
        });
    </script>
</head>
<body>
    <div id="elementId">Old Text</div>
</body>
</html>

위 코드가 실행되면, `div` 요소의 텍스트 내용이 'Old Text'에서 'Hello, AJS!'로 변경됩니다.

이 코드는 jQuery의 문법을 사용하고 있으며, AJS 라이브러리를 통해 jQuery 기능을 호출하는 방법을 보여줍니다. AJS는 Atlassian의 웹 애플리케이션에서 사용되기 때문에, 이와 같은 방식으로 HTML 요소를 쉽게 조작할 수 있습니다.

이벤트 핸들링

AJS는 클릭, 마우스 오버, 키보드 입력 등 다양한 이벤트를 쉽게 처리할 수 있도록 도와줍니다. 이는 사용자 상호작용을 감지하고 이에 대응하는 코드를 작성하는 데 매우 유용합니다.

AJS.$('#button').on('click', function() {
    alert('Button clicked!');
});

AJS		Atlassian JavaScript Library의 객체입니다. 이 객체를 통해 jQuery의 $ 함수에 접근할 수 있습니다.
$ ('#button')	선택	jQuery의 선택자 함수입니다. 이 함수는 jQuery 객체를 반환하여 DOM 조작을 가능하게 합니다. id가 button인 HTML 요소를 선택하는 jQuery 선택자입니다. 이는 문서에서 id가 button인 요소를 찾아서 반환합니다.
.on('click', function() { ... });	이벤트 바인딩	선택한 요소에 이벤트 핸들러를 등록하는 jQuery 메서드입니다. 여기서 on 메서드는 첫 번째 인수로 이벤트 유형('click')을 받고, 두 번째 인수로 이벤트가 발생했을 때 실행될 콜백 함수(function)를 받습니다.
function() { alert('Button clicked!'); }	이벤트 핸들	버튼이 클릭될 때 실행될 콜백 함수입니다. 이 함수는 alert 메서드를 호출하여 'Button clicked!'라는 메시지를 경고 창으로 표시합니다.

AJAX 통신

AJS는 서버와 비동기 통신을 쉽게 처리할 수 있도록 AJAX 기능을 제공합니다. 이를 통해 페이지를 새로고침하지 않고도 데이터를 주고받을 수 있습니다.

AJS.$.ajax({
    url: '/api/data',
    method: 'GET',
    success: function(data) {
        console.log(data);
    }
});

$.ajax({ ... })

jQuery의 AJAX 메서드입니다. 이 메서드는 비동기 HTTP 요청을 보낼 수 있도록 합니다.

parameters

url: '/api/data': 요청을 보낼 서버의 URL을 지정합니다. 여기서는 /api/data로 GET 요청을 보냅니다.

method: 'GET': HTTP 요청 메서드를 지정합니다. 여기서는 데이터를 가져오기 위해 GET 메서드를 사용합니다.

success: function(data) { ... }: 요청이 성공적으로 완료되었을 때 호출될 콜백 함수를 지정합니다. 이 함수는 서버로부터 반환된 데이터를 인수로 받습니다

UI 컴포넌트

AJS는 모달, 툴팁, 드롭다운 메뉴 등 다양한 UI 컴포넌트를 제공합니다. 이러한 컴포넌트들은 사용자 인터페이스를 보다 풍부하고 직관적으로 만들어줍니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atlassian Dialog Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://path-to-atlassian-js-library.js"></script>
    <script>
        $(document).ready(function(){
            // 다이얼로그를 보여주는 코드
            AJS.dialog2("#example-dialog").show();
        });
    </script>
    <style>
        /* 다이얼로그 스타일 */
        #example-dialog {
            display: none; /* 기본적으로 숨김 */
            width: 400px;
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #fff;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div id="example-dialog">
        <h2>Example Dialog</h2>
        <p>This is an example dialog powered by AJS.</p>
        <button onclick="AJS.dialog2('#example-dialog').hide();">Close</button>
    </div>
</body>
</html>

AJS.dialog2("#example-dialog").show();

dialog2:	AJS 라이브러리에서 제공하는 다이얼로그 관리 함수입니다. 이 함수는 특정 HTML 요소를 다이얼로그로 처리하고 조작할 수 있게 합니다.
("#example-dialog")	jQuery 선택자입니다. id가 example-dialog인 HTML 요소를 선택합니다.
.show()	선택한 다이얼로그 요소를 화면에 표시하는 메서드입니다. 다이얼로그가 보이도록 설정합니다.

AJS 사용 예제

AJS를 실제로 어떻게 사용하는지 예제를 통해 알아보겠습니다. 다음은 `loadingSpinner` 클래스를 가진 요소에 로딩 스피너를 추가하는 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atlassian Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://path-to-atlassian-js-library.js"></script>
    <script>
        $(document).ready(function(){
            // 'loadingSpinner' 클래스를 가진 요소에 스피너를 추가합니다.
            AJS.$('.loadingSpinner').spin();
        });
    </script>
</head>
<body>
    <div class="loadingSpinner"></div>
</body>
</html>

위 예제에서는 문서가 준비되면 `loadingSpinner` 클래스를 가진 `div` 요소에 로딩 스피너가 추가됩니다. 이는 사용자에게 데이터 로딩 중임을 시각적으로 나타낼 때 유용합니다.

결론

AJS는 Atlassian의 제품을 개발하고 유지보수하는 데 있어 매우 강력하고 유용한 도구입니다. jQuery를 기반으로 하여 익숙한 문법을 제공하면서도 Atlassian 제품에 특화된 기능들을 추가적으로 제공하여 개발자들이 보다 효율적으로 작업할 수 있도록 도와줍니다.

Atlassian 제품을 개발하거나 커스터마이징하는 경우 AJS를 적극 활용해 보세요. 이를 통해 더욱 풍부한 사용자 경험을 제공할 수 있을 것입니다.

저작자표시 비영리 변경금지

'Programming' 카테고리의 다른 글

Javascript $ (0)	2024.06.21
AJAX란? (0)	2024.06.21
UML - ER Diagram (0)	2024.06.21
UML - Class Diagram (0)	2024.06.21
SQL 명령어 (0)	2024.06.20

생각하는 톱니바퀴

AJS: Atlassian JavaScript Library