JS 파일로 함수 호출

js 파일 활용하기

학원에서 프로젝트를 진행하고 있는데 기존의 jsp 페이지에서 작성하던 ajax 와 함수들을 js 페이지를 만들어 함수를 호출 받아서 사용하기로했다.

jsp 페이지에서 작성해도 되지만 함수를 js 파일로 정리를 해두면 더욱 깔끔한 코딩을 짜고 나중에 유지보수에도 유용하다.
또한 기존 jsp 페이지에선 함수안에서 다른 함수를 호출하면 너무 긴 코드가 되는데 js 에선 함수만 불러오면 된다.

wiki-btn on click 처리

가장먼저 버튼을 누를 경우에 진행되는 이벤트를 처리했다.

예시로, 불러온 위키 제목을 누르면 해당 위키의 내용이 화면에 출력되는 기능을 만들었다.

$(function(){

    // 특정 위키 클릭시 불러오는 메서드
    $('.content-body').on('click','.wiki-btn',function(){

        //특정 위키의 wiki_no 불러옴. 
        let wiki_no = $(this).siblings('input').val();
        wikiView(wiki_no);

    })

})

on click 이벤트는 $(function() 내부에서 진행시켜야 한다.

위의 내용은

class 가 content-body 인 div 안에 있는 class 가 wiki-btn 인 버튼을 누르면 let wiki_no 라고 선언한 변수에 input 에 들어가있는 value 값을 찾아 넣어주고 wikiView 함수에 value 를 넣어 준다는 의미이다.

또한 동적 자원 처리를 위해 delegate 형식으로 처리했다.
그냥 on click 이라면 $('.wiki-btn').on('click',function(){
으로 작성 할 수 있다.

wikiView(wiki_no) 함수

다음은 wikiView 함수 생성을 해야한다.

클릭을 하면 이 함수가 실행된다.

const 로 함수를 지정해준다.

// 특정 위키 불러오는 함수
const wikiView = function(wiki_no){
        window.scrollTo({top:0, left:0, behavior:'auto'});

        data = 'wikiView'+wiki_no;
        title = '';
        url = getContextPath()+'/'+manager_id+'/'+project_title+'/wiki/'+wiki_no;
        history.pushState(data,title,url);

        $.ajax({
            url : getContextPath() + '/restapi/project/wikis/'+ wiki_no
            , type : 'get'
            , data : {

            },
            success : function(res) {

                $('.title-wiki').children('span').text(res.wiki_title);
                $('.wiki-writer').children('span:first').text(res.proj_user_nick);
                $('.wiki-writer').children('span:last').text(moment(res.wiki_write_date).fromNow());
                $('.wiki-content').children('span').text(res.wiki_cont);

                $.each(res, function(i, v) {
                })
            },
            error : function(xhr, error, msg) {
                // 조회중인 프로젝트 번호를 세션에서 못 받아 올 경우, 메인 홈페이지로 보낸다.
                if(xhr.status == 400){
                    window.location.href = getContextPath();
                }
                console.log(xhr);
                console.log(error);
                console.log(msg);
            },
            dataType : 'json'
        })

on click 이벤트를 처리할 때 넣어준 wiki_no 를 사용한다. 특정 위키를 불러오기 떄문에 ajax 의 타입은 get 으로 적어준다.
성공시 각 class 에 있는 span 에 값들을 넣어주게 된다.