location.href - 페이지 이동

location.href 이란?

Return the entire URL (of the current page)

출쳐 : www.w3schools.com/jsref/prop_loc_href.asp

location.href는

문서객체모델(DOM) 중 하나인

Location 객체의 속성(Property) 입니다.

문서간의 페이지 이동을 위해 사용합니다.

 

제 짧은 견해로 프로그래밍은 결국 데이터 주고 받음 안에서 귀속되어 있고

하나의 문서에 많은 페이지를 담을 수 가 없고 또 페이지 간의 데이터 통신이 필요하기 때문에location.href는 알아두면 정말 유용하게 사용할 수 있습니다.

각설하고

 <script>
 $('table tr').on('click ', async function (e) {
      
            let tr = $(this);
            let td = tr.children();

            const advisor = td.eq(1).text();
            const title = td.eq(2).text();
            const type = td.eq(4).text();
          
            
            const data = new URLSearchParams(); // URL의 쿼리 문자열에 대해 작업할 data 선언
                  data.append("advisor",advisor);
                  data.append("title",title);
                  
            const url = '/api/editor/getContent'
            const option = {
                method: 'POST',
                body:data
            }
            
            const res = await fetch(url, option);
            const resByJson = await res.json();

            const escapedAdvisor = encodeURIComponent(advisor);
            
            const escapedTitle = encodeURIComponent(title);
            const escapedContent = encodeURIComponent(resByJson[0]._id[0]);
            const escapedType = encodeURIComponent(type);

            return location.href = `/views/common/advice/modify?advisor=${escapedAdvisor}&title=${escapedTitle}&content=${escapedContent}&type=${escapedType}`;  
           
        });
        </script>

보통 특정 페이지의 값을 클릭 했을 때 서버에서 수행할 값을 데이터와 같이 넘긴 후에 그에 해당하는

응답 값을 받아 다음 페이지에 해당하는 값을 담아 넘기는 형식으로 많이 사용합니다.

간단하게 정리하면

view 1 -> (fetch) -> server -> view 1 ->(location.href) -> view 2

이런 식으로 데이터가 이동 된다고 말할 수 있겠네요.

location.href는 관련 url만 담아 넘겨주면 그만인데 이때 주의 해야 할 것 있습니다.

파라미터를 갖고 있는 url이라면 인코딩(encodeURIComponent)을 한 데이터 값을 파라미터로 넘겨야 하며

또한 그 파라미터를 받는 페이지에서는 다음과 같이 디코딩(decodeURIComponent)를 해줘야 합니다.

 

$(document).ready(function() {
  

    let params = location.search.substr(location.search.indexOf('?')+1);
    temp = decodeURIComponent(params).split("&");
    
    let advisor = temp[0].split("=")[1];
    let title = temp[1].split("=")[1];
    let content = temp[2].split("=")[1];
    let type = temp[3].split("=")[1];

    
    $('#modifyAdvisor').val(advisor);
    $('#modifyTitle').val(title);
    $('#modifyType').val(type).prop("selected", true);


})

 

이를 디버깅해서 찍어보면

   let params = location.search.substr(location.search.indexOf('?')+1); -> params = "advisor=5&title=5&content=5&type=md"
    temp = decodeURIComponent(params).split("&");
    
    let advisor = temp[0].split("=")[1] -> advisor = "5"
    let title = temp[1].split("=")[1] -> title = "5"
    let content = temp[2].split("=")[1] -> content = "5"
    let type = temp[3].split("=")[1] -> type = "md"

    
    $('#modifyAdvisor').val(advisor); -> advisor = "5"
    $('#modifyTitle').val(title); -> title = "5"
    $('#modifyType').val(type).prop("selected", true); -> type = "md"

찍히는 걸 알 수 있습니다.

위에서 보면 아시겠지만 

url을 받아오면 ? & = 같은 값이 있어 이를 제외한 특정 값만 뽑아 특정 문서에 값을 넣는 과정이 포함 되어 있습니다.

학습을 위해 순수 자바스크립트와 jquery를 혼용했습니다.