[JavaScript] url 파라미터 활용하기

📌문제

기존에는 제출이 성공하거나 실패할 경우 사용자에게 안내하기 위해 다음과 같이  `Controller` 메서드 내에 `PrintWriter`를 사용하여 직접 스크립트 코드로 `alert`를 띄우도록 했다.

 

 

	response.setCharacterEncoding("utf-8");
        response.setContentType("text/html; charset=utf-8");
        PrintWriter w = null;

        try {
            w = response.getWriter();
        } catch (IOException e) {
//            throw new RuntimeException(e);
            return "redirect:/another";
        }

        if(result == 1){
            w.println("<script> alert('성공!');");
        }else{
            w.println("<script> alert('실패.');");
        }

        w.println("location.href='/another' </script>");
        w.close();

 

 

물론 이렇게 작성하더라도 바라던대로 `alert` 창이 뜨긴 하지만, 코드의 가독성이 매우 떨어지고 스크립트 코드를 백단에서 작성하게 되면서 오류 발생의 가능성이 높아진다. 또 alert 창을 모달로 구현하거나 성공/실패 메시지를 프론트단 내에서 자유롭게 처리하려면 백에서 프론트로 코드만을 넘기는 것이 더 적절해보였다. (백과 프론트의 역할 분리)

 

 

📌해결

REST API를 사용하는 등 여러가지 방법이 있었지만 나같은 경우 프론트단에서 데이터를 호출하는 것이 아니라 `form`으로 데이터를 제출한 뒤 서버단에서 처리를 마치고 성공 여부만 넘겨주고 싶었기 때문에 기존의 `PrinterWriter` 코드를 모두 삭제하고 반환 url만 변경해주었다.

 

        if(result == 1){
            return "redirect:/another?code=success";
        }

        return "redirect:/another?code=fail";

 

 

반환 url에 성공 여부를 파라미터로 보내준다면 프론트단에서 활용할 수 있을 거라고 판단했다. 검색해보니 자바스크립트에는 현재 url을 불러오는 함수와 해당 url에 존재하는 파라미터를 가져오는 함수가 있었다!

 

다음과 같이 스크립트 코드를 작성하면 코드에 따라 원하는 로직을 처리할 수 있다.

 

 

    const url = new URL(window.location.href);
    const urlSearchParams = url.searchParams;
    const code = urlSearchParams.get("code");

    switch (code){
        case 'success' :
            alert('성공!');
            break;
        case 'fail' :
            alert('실패.');
    }

 

 

 

📌발전

프론트에서 백과 통신하여 성공/실패 여부에 따라 코드를 작성할 수 있는 ajax 또는 axios를 활용할 수 있다.

ajax는 jQuery, axios는 axios를 설치하여 사용할 수 있는 라이브러리. 최근에는 jQuery보다는 React를 더 활용하는 추세로, React 또는 Vue와 호환성이 좋은 axios를 사용하는 것이 더 적절해보인다. React를 공부해보자!

 

 

📌참고

[Javascript] 현재 페이지 URL 가져오기

[Javascript] URL 파라미터 값 가져오기 (쿼리스트링 값)