[코딩 팁] 자바스크립트로 동적 URL 생성 후 팝업 띄우기

안녕하세요! 오늘은 자바스크립트를 활용해 동적으로 URL을 생성하고 팝업 창을 여는 방법을 알아보겠습니다.
이 과정은 데이터를 전달하고, 해당 데이터를 기반으로 동작하는 새로운 화면을 팝업 형태로 띄우고 싶을 때 유용하게 사용할 수 있습니다.
특히, 관리 시스템에서 중간검사, 상세 보기, 수정 페이지 등을 구현할 때 매우 많이 활용되니 꼭 배워두세요! 😄

🎯 어떤 기능인가요?

예를 들어, 사용자가 입력한 값(출고일, 주문일, 로트 번호 등)을 서버에 전달해서 스크린 중간검사 페이지를 팝업으로 열고 싶다고 가정해봅시다.
이를 위해 URL에 필요한 데이터를 붙여 넣고, 해당 URL을 새로운 팝업 창에서 열도록 구현한 코드입니다.

코드 설명: 버튼 클릭 시 팝업 띄우기

아래는 코드를 한 줄씩 친절히 설명한 내용입니다.

1. 버튼 클릭 이벤트 등록

$(document).on('click', '#loadmidInspectScreenBtn', function() {

#loadmidInspectScreenBtn라는 ID를 가진 버튼이 클릭되었을 때 아래의 동작을 수행하도록 설정합니다.

2. 사용자가 입력한 값 읽기

    var num = $("#num").val();
    var outDate = $("#outdate").val();
    var orderDate = $("#orderdate").val();
    var prodCode = $("#prodCode").val();
    var warrantyNum = $("#warrantyNum").val();
    var delivery = $("input[name='delivery']:checked").val();
    var outworkplace = $("#outworkplace").val();
    var outputplace = $("#outputplace").val();
    var lotNum = $("#lotNum").val();

$("#id").val()를 통해 각 입력 필드나 선택된 옵션 값을 읽어옵니다.
예를 들어, 출고일(outDate)나 로트 번호(lotNum) 등의 값이 저장됩니다.
$("input[name='delivery']:checked").val()는 선택된 라디오 버튼 값을 읽어오는 방법입니다.

3. URL 생성

    var url = '/output/viewMidInspectScreen.php?num=' + num 
              + '&outdate=' + encodeURIComponent(outDate)
              + '&orderdate=' + encodeURIComponent(orderDate)
              + '&prodCode=' + encodeURIComponent(prodCode)
              + '&warrantyNum=' + encodeURIComponent(warrantyNum)
              + '&delivery=' + encodeURIComponent(delivery)
              + '&outputplace=' + encodeURIComponent(outputplace)
              + '&outworkplace=' + encodeURIComponent(outworkplace)
              + '&lotNum=' + encodeURIComponent(lotNum);

동적으로 URL을 구성합니다.
데이터를 GET 방식으로 서버에 전달하기 위해 각 데이터를 변수명=값 형태로 추가합니다.
encodeURIComponent()는 URL에 안전하게 데이터를 포함시키기 위해 사용됩니다. (특수문자 처리)

4. 팝업 열기

    customPopup(url, '스크린-중간검사', 800, 900);

customPopup 함수는 팝업을 띄우는 역할을 합니다.
url은 열고자 하는 페이지의 주소이며, '스크린-중간검사'는 팝업 창 제목입니다.
마지막 두 개의 값(800, 900)은 팝업 창의 너비와 높이를 설정합니다.

💡 커스텀 팝업 함수 예제

만약 customPopup 함수가 없다면, 아래처럼 직접 구현해 사용할 수 있습니다.

function customPopup(url, title, width, height) {
    var left = (screen.width - width) / 2;
    var top = (screen.height - height) / 2;
    window.open(url, title, `width=${width},height=${height},top=${top},left=${left},resizable=yes`);
}

✨ 최종 정리

이 코드는 사용자가 입력한 데이터를 기반으로 동적 URL을 생성하고 팝업 창을 여는 기본적인 방법을 보여줍니다.
웹 애플리케이션에서 상세 보기, 검사 페이지, 혹은 미리 보기 기능을 구현할 때 유용하게 활용될 수 있습니다.

이제 여러분도 이 방식을 사용해 더 멋진 웹페이지를 만들어 보세요!
궁금한 점이 있으면 댓글로 남겨 주세요. 😊

🚀 관련 키워드

동적 URL 생성
팝업 창 띄우기
jQuery 이벤트 핸들링
JavaScript encodeURIComponent