[TAB 구현 심화_3]_Spring에서 tab 구현해보기 (feat 메모리 저장)

목표]

 

위와 같이 동작하면서 닫고 새로 열기 전까지는 파일을 로드하거나 통신하지 않도록 하였습니다.]

 

코드 & 설명]

 

각각의 메뉴버튼에 리스너를 달아줍니다.

openCheck 함수와 createTemplate 함수를 만들어서 사용하였습니다.

 

openCheck 함수]

이전 포스팅에 있는 localstorage를 이용하여 해당 tabname에 맞는 이름이 열려있는지 닫혀있는지를 판별합니다.

만약 열려있으면 true 닫혀있으면 false를 반환합니다.

 

따라서 위에서 tab이 중복으로 열리는것을 방지한 코드입니다.

 

createTemplate 함수]

function creatTemplate(menuname) {
    //이름 변경
    let url;
    let name;
    switch (menuname) {
        case 'menu1':
            name = "메뉴1"
            url = 'menu/menu1.do'
            $globalStorage.setValue('menu1', 'open');
            break;
        case 'menu2':
            name = "메뉴2"
            url = 'menu/menu2.do'
            $globalStorage.setValue('menu2', 'open');
            break;
        case 'menu3':
            name = "메뉴3"
            url = 'menu/menu3.do'
            $globalStorage.setValue('menu3', 'open');
            break;
    }


    // 템플릿 만드는 곳
    let node = document.createElement('li');
    node.classList.add(menuname);

    let tabname = menuname + 'tab';
    let tabclosename = menuname + 'close';

    const template = `<span>
        <a href="javascript:void(0);" id="\${tabname}"}">\${name}</a>
        <button id="\${tabclosename}"}">닫기</button>
        <span>`

    node.innerHTML = template;
    tabmenu.appendChild(node);

    //$('#tabmenu').append(template);
    //메뉴 생성시 해당 카운트 새야함. -> globalvariable
    //지금 마지막으로 열려있는곳 activate
    setActivate(url);


    $('#tabcontent').load(url, function () { //~~에 로드한다. 즉 해당 url의 값을 산하에 두겠다는 의미
        //히스토리 저장하기
        let newContent = document.querySelector('#content');
        let id = $random.random();
        setHistory(url, newContent, id)

    });

    //template click listener

    $("#" + tabclosename).click(function () {

        let close = document.querySelectorAll(("." + menuname));
        close.forEach(function (close) {
            close.remove();
        });

        $globalStorage.setValue(menuname, 'close');
        let indexkey = index(url);
        console.log(indexkey)

        if (_historyTab.activate == url) {

            if (indexkey.key.length == 1) {

                let oldElement = document.querySelector('div#content');
                oldElement.remove();
                //
                delete history[url];

            }else{

            console.log('activate')
            let oldElement = document.querySelector('div#content');
            let siburl = indexkey.siblingid;

                if(indexkey.index ==0){
                    let next = indexkey.nextId
                    siburl = indexkey.key[next];
                }

            console.log(siburl);
            content.replaceChild(history[siburl].content, oldElement);
            setActivate(siburl);

            delete history[url];
            }
        } else {
            delete history[url];
        }


    });

    $(document).on("click", "#" + tabname, function () {
        //replaceChild 와야함
        let oldElement = document.querySelector('div#content');
        content.replaceChild(history[url].content, oldElement);
        setActivate(url);

    });


}

핵심 동작 코드입니다.

 

중복으로 열리지 않았다면 해당 tab의 이름을 판별합니다.

해당 메뉴에 맞는 url 주소, 메뉴 이름 등을 지정하고 해당 tab이 열렸다는것을 globalStorage에 저장합니다.

 

그리고 나서는 메뉴이름과 닫기버튼이 있는 tab 메뉴 template를 만들고 appendchild를 이용해서 생성합니다.

 

setActivate 함수]

템플릿을 만들고 해당함수를 호출합니다. 이는 _historyTab이라는 객체를 만들고 해당 탭이 열려있는 상태 ( focus ) 인지 확인하고 그 상태를 저장하게 됩니다.

 

생성과 동시에 해당화면이 표시되기 때문에 호출하였습니다.

 

url 주소를 이용해서 load 함수를 사용하는 방법은 이전 포스팅에 있기 때문에 생략하겠습니다. [ Sethistory 사용 ]

 

이제부터 이전 포스팅인 심화 2와 다른점을 설명하겠습니다.

 

탭이 열린순서를 저장하는 방법을 1에서는 stack 2에서는 linkedlist 구조를 사용해보았습니다. 그러나 한계점을 느꼇고 이번에는 닫히는 시점을 기준으로 index를 지정하는 방법을 사용하였습니다.

 

index함수]

 

 

history 객체는 핵심이라 다시 설명하겠습니다.

해당 객체를 선언하고 setHistory 함수에 해당 content의 url, 해당 컨텐츠가 덮어쓰기전의 content, 랜덤id를 받습니다.

해당 객체는 url 주소가 key 값이 되서 추후 content를 추적하게 됩니다.

 

다시 index 함수로 넘어가겠습니다.

 

index함수에서는

Object.key와

indexOf를 사용하였습니다.

 

Object.keys()

Object.keys() 메소드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다.

Array.prototype.indexOf()

indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.

https://developer.mozilla.org/

MDN Web Docs

해당 히스토리는

history {

url 주소: "",

url 주소: ""

}

의 형태의 객체이며 object.key를 사용해서 url 주소를 기준으로 배열로 바뀌게 됩니다.

그리고 이를 다시 indexof를 사용해서 url주소를 기준으로 배열을 생성하였기 때문에 url 주소를 넣습니다.

key는 url 주소가 담긴 배열이 되고

index는 해당 url 주소를 기점으로 index번호를 매길 수 있게 됩니다.

 

history 객체에는 메뉴버튼을 누른 순서대로 저장이 될 것이고 이를 이용해서 indexof를 사용하여 번호를 그때그때 메기는 것입니다.

 

아래의 조건문은 index가 0인데 이전을 찾을경우 -1은 존재할수 없기 때문에 0으로 바꾸는 것이며

그뒤의 조건문은 마지막번호의 메뉴를 닫을 때 마지막 인덱스숫자를 앞의 메뉴에 넘겨주는 것입니다.

그리고 이러한 정보를 객체로 리턴합니다.

 

 

다시 createTemplate 함수]

let indexkey = index(url);

를 이용해서 indexkey.[return 값] 을 이용합니다.

if문들은 각 예외에 대한 처리입니다.

 

지우는 방법을 설명드리자면

객체를 지우는 방법은 delete를 사용합니다.

delete object.property
delete object['property']

이런식으로 사용이 가능하며

index는 결국 history의 순서를 따라가기 때문에 닫히는 액션일 때 마다 history의 해당 [url]을 삭제하는 것입니다.

 

자료구조를 사용하는 방법보다는 indexof,와 Object.key를 이용해서 구현할 수 있었습니다.