Overview

매우 오랜만에 작성하는 글, 중간에 여러 가지 일이 많앗다, 그리고, 갑자기 AI시대의 도래에 맞춰서 AI BackEnd Engineer 직무를 수행중이다. 작년 이떄쯤 부서 이동하게 되면서 AI 관련 업무를 수행하게 되었는데, 그와중에 개발한 서비스들은 혁신금융서비스로 지정되기도 하고 감회가 새롭다. 중간에 Pyhton도 하게되고, 여전히 Spring Framework(SpringBoot) 기반 웹어플리케이션 개발을 하기도하고, 각설하고, 계정계/기간계/사무계 데이터를 Cloud에 Serving하는 롤을 맞고 있다. 그러다 보니 Jquery를 쓰게 되어 느낀점과 간략한 내용에 대해 기록을 남기고자한다.

Contents

Jquery란?
JavaScript 라이브러리로 DOM 조작 및 이벤트 핸들링, JavaScript 코드 간결하게 작성하는 기능을 제공하는 라이브러리로, 현재 시장의 주도적인 React, Vue, Svelte등 SPA에 트렌드가 마니 밀린 라이브러리지만, 레거시 환경 폐쇄망(단절된 네트워크환경)에서유용하게 사용되고 있다.

Usage

의식에 흐름에 따라 여러가지 사용해본것에 대해 기입하고자 한다.

<script>
$(document).ready(function(){
});
</script>

화면이 Load될때 실행된다.

$(``)
docuemnt.querySelector(``)
docuemnt.querySelectorAll(``)

가장 기본적인 코드로 $(``)라는 선택자 키워드로 리턴타입은 동일하지만 CSS Selector 문법을 동일하게 사용하지만 코드가 축소된다.

$(`#tagId`)
$(`.tagClass`)
$(`div`)
$(`div.active`)

아이디는 #, 클래스는 . , 태그는 태그명으로 접근해서 가져온다,, CSS Selector

$(`div`).text()
$(`span`).text()

$(`input`).val()
$(`select`).val()
$(`textarea`).val()

$(`button`).text()
$(`button`).val()

button은 value 속성을 val(), 내부 텍스트는 text() 그외는 위 코드와 같이 가져온다.

<div class="className">
    <div class="chk_boxs">
        <div class="chk_box">
            <input type="checkbox">
        </div>
        <div class="chk_box">
            <input type="checkbox">
        </div>
    </div>
</div>
$(`.className .chk_boxs .chk_box:nth-child(2)`)
$(`.className .chk.boxs`).find(`.chk_box:nth-child(2)`)

find로 클래스 또는 태그, ID를 통해 태그를 찾을 수 있다.

$(`.className .chk.boxs`).prop(`diabled', false`);
$(`.className .chk.boxs`).prop(`checked', false`);
$(`.className .chk.boxs`).attr();
$(`.className`).css(`display`)
$(`.className .chk.boxs .chk_box`).is("checked")

prop로 tag의 Attribute를 변경할 수 있다.
attr도 tag의 Attribute를 획득 및 변경 할 수 있다.
prop는 DOM객체의 현재 상태를 반영하기 떄문에 동적 상태 확인 및 조작은 porp를 사용함이 적합할 수 있다.
css는 스타일을 획득한다.
is는 attribute의 값을 확인하여 true, false로 리턴한다.

$(`.className .chk.boxs`).hide();
$(`.className .chk.boxs`).show();

display를 block, none으로 변경한다.

$(`.className .chk.boxs .chk_box`).forEach(function(){
    let text = $(this).text();
    test.parent().remove();
});

$(`.className .chk.boxs`).filter(function(){
    return $(this).text() === `선택안함₩);
}).find(`input[type="checkbox"]`).prop(`checked', true`);

lamda식으로 익명 function내에서 $(this)로 요소에 접근할 수있다.
parent()는 선택된 요소의 부모요소를 가리킨다.(그 요소를 remove)
chainning 표현식을 지원하여 결과 값에 대한 후속 처리를한다.
find내 태그의 attribute를 []로 지정하여 접근할 수 있다.

<div class="className">
    <div class="chk_boxs">
        <div class="chk_box">
            <input type="checkbox">
            <span data-value="123">123</span>
        </div>
        <div class="chk_box">
            <input type="checkbox">
            <span data-value="345">345</span>
        </div>
    </div>
</div>

const result =$(`.className .chk.boxs .span`).map(function(index, element){
    // $(element).text(); // $(this).text();
    return $(this).data("data-value");
}).get();

get()은 배열로 리턴하게 되는데 span의 데이터를 배열로 가져온다.
map은 index와 element를 가지는 익명function으로 람다식으로 사용할 수 있다.

$(`.className .chk.boxs`).addClass(`loading`);
$(`.className .chk.boxs`).removeClass(`loading`);

addClass , removeClass 위 내용 처럼 클래스를 추가하고 제거한다.


마치며

업무를 하면서 이렇게 동적이 화면 및 JS를 해본 경험이 없었는데, 많은 도움이 되었다. 써놔본것에 대한 기록과 마지막으로 중요한건 Jquery의 DOM 조회가 리소스 사용을 많이한다고 하니 중복되는 selector는 변수에 담아서 재사용하면서 성능을 고려하면서 사용해야겠다고 생각하게 되었다.