[포트폴리오 페이지]_12단계_SPA 구현을 위한 History 객체 만들기

[환경]

 

개발툴 : IntelliJ

DB : oracle

프레임워크 : spring , mybatis

---

개발 목표 : 기존에 만든 게시판에서 SPA 을 유지하기 위해 common 파일 생성

---

common.js 파일을 사용할 위치를 지정해 줍니다. ( 자유 )

let _commons = function() {

return _Self ={

}

}

const $commons=_commons();

의 형식을 가지고 있습니다.

다른 jsp 파일에서 해당 경로의 script 파일을 추가하고

commons 를 호출하여 해당 공통 함수들을 사용할수 있고, 페이지 전체의 객체를 만들어 참조할 수 있습니다.

 

제가 할 것은 SPA 유지를 위해 데이터를 보관할 history 라는 객체를 만들 것입니다.

let history={
};

비어있는 객체를 만들고

하단에 다음과 같은 함수를 생성합니다.

history:{
    sethistory: function(url,newContent,id){
        let content = newContent;
        history[url]={
            content : content,
            id : id
        }
        console.log(history[url]);
    },
    gethistory: function(url){
        console.log('get' + history[url]);
        return history[url];
    },
    deletehistory : function(url){
        delete history[url];
    }
},

이제 commons.history 에 접근을 하면 아래의 sethistroy, gethistory deletehistory 등의 함수를 사용 가능합니다.

 

전체 구문]

let _commons = function() {

let history={};

   return _Self ={
            history:{
                sethistory: function(url,newContent,id){
                    let content = newContent;
                    history[url]={
                        content : content,
                        id : id
                    }
                    console.log(history[url]);
                },
                gethistory: function(url){
                    console.log('get' + history[url]);
                    return history[url];
                },
                deletehistory : function(url){
                    delete history[url];
                }
            }

   } 

}

const $commons=_commons();

코드 설명]

1] sethistory

sethistory: function(url,newContent,id){
    let content = newContent;
    history[url]={
        content : content,
        id : id
    }
    console.log(history[url]);
},

url -> history 객체를 찾아갈 key의 기능을하는 고유 url

newContent -> 저장 할 element

id -> 추후 확장시 사용할 랜덤한 수

 

상위의 history ={}; 라는 비어있는 객체에

url를 키로 하여금 데이터를 저장합니다.

 

2] gethistory

gethistory: function(url){
    console.log('get' + history[url]);
    return history[url];
},

url 을 파라미터로 받아서 해당 url과 일치하는 key를 가진 객체를 반환합니다.

 

3] deletehistory

deletehistory : function(url){
    delete history[url];
}

url 을 파라미터로 받아 해당하는 key를 가진 객체를 삭제합니다.

 

이처럼 사용하는 이유는

뒤로가기 라는 기능을 구현시 url이 바뀌지 않고, 이전에 검색한 기록 등이 남아 있는 화면을 보여주기 위해서 사용합니다.

 

이를 사용해서 CRUD 게시판 만들기 등에 사용할 것입니다.

 

감사합니다.