PHP와 JavaScript에서 데이터를 효율적으로 공유하는 방법

PHP와 JavaScript에서 데이터를 효율적으로 공유하는 방법

웹 개발을 진행하면서 동일한 데이터를 PHP와 JavaScript 양쪽에서 반복적으로 선언해야 하는 경우가 자주 발생합니다. 예를 들어, 드롭다운 메뉴나 선택 항목 데이터를 PHP에서 선언하고 JavaScript에서도 재선언해야 하는 상황입니다. 이러한 중복은 유지보수를 어렵게 하고, 데이터의 불일치 문제를 초래할 가능성이 있습니다.

이번 글에서는 중복 선언 없이 데이터를 효율적으로 관리할 수 있는 방법을 소개합니다. PHP에서 데이터를 한 번만 선언하고, JavaScript에서 이를 동적으로 가져와 사용하는 구조를 구현해 보겠습니다.

---

중복 선언의 문제점

다음은 금전출납부 프로그램의 일부 코드입니다. 수입(incomeOptions)과 지출(expenseOptions) 데이터를 PHP와 JavaScript에서 각각 선언하고 있습니다.

PHP 코드 (fetch_modal.php)

$incomeOptions = [
    '거래처 수금' => '거래처에서 입금한 금액',
    '최초 현금 입력' => '금전출납부 시작',
    '개인대출(가수금)' => '개인대출(가수금)',
    '은행대출' => '은행대출'
];

$expenseOptions = [
    '급여(인건비)' => '직원 급여',
    '접대비' => '경조사비용',
    '통신비' => '전화요금, 인터넷요금',
    '세금과공과금' => '등록면허세, 취득세, 재산세등 각종세금',
    '차량유지비' => '유류대, 통행료',
    '보험료' => '차량보험료, 화재보험료등',
    // 생략...
];

JavaScript 코드

const incomeOptions = {
    '거래처 수금': '거래처에서 입금한 금액',
    '최초 현금 입력': '금전출납부 시작',
    '개인대출(가수금)': '개인대출(가수금)',
    '은행대출': '은행대출'
};

const expenseOptions = {
    '급여(인건비)': '직원 급여',
    '접대비': '경조사비용',
    '통신비': '전화요금, 인터넷요금',
    '세금과공과금': '등록면허세, 취득세, 재산세등 각종세금',
    '차량유지비': '유류대, 통행료',
    '보험료': '차량보험료, 화재보험료등',
    // 생략...
};

이와 같이 데이터를 중복 선언하면 다음과 같은 문제점이 발생합니다:

1. 유지보수 어려움: 데이터 수정 시 모든 선언된 위치를 찾아 수정해야 함.
2. 일관성 문제: 서로 다른 위치의 데이터가 일치하지 않을 가능성.
3. 가독성 저하: 코드가 길어지고 반복적인 선언으로 인해 복잡도가 증가.

이를 해결하기 위해 데이터를 한 번만 선언하고, 필요한 곳에서 이를 공유하는 구조를 만들어보겠습니다.

---

해결 방법: PHP에서 데이터를 JSON으로 공유

1. 공통 데이터를 API로 분리

먼저 공통 데이터를 관리하는 fetch_options.php 파일을 작성합니다. 이 파일은 PHP 데이터를 JSON 형식으로 반환하며, JavaScript에서 AJAX 요청으로 가져올 수 있도록 구성합니다.

<?php
// fetch_options.php
$incomeOptions = [
    '거래처 수금' => '거래처에서 입금한 금액',
    '최초 현금 입력' => '금전출납부 시작',
    '개인대출(가수금)' => '개인대출(가수금)',
    '은행대출' => '은행대출'
];

$expenseOptions = [
    '급여(인건비)' => '직원 급여',
    '접대비' => '경조사비용',
    '통신비' => '전화요금, 인터넷요금',
    '세금과공과금' => '등록면허세, 취득세, 재산세등 각종세금',
    '차량유지비' => '유류대, 통행료',
    '보험료' => '차량보험료, 화재보험료등',
    // 생략...
];

echo json_encode([
    'incomeOptions' => $incomeOptions,
    'expenseOptions' => $expenseOptions
], JSON_UNESCAPED_UNICODE);

이 파일은 데이터를 JSON 형식으로 반환하여 JavaScript에서 쉽게 처리할 수 있습니다.

---

2. JavaScript에서 데이터를 동적으로 로드

fetch_modal.php에서는 데이터 선언을 제거하고, JavaScript에서 fetch_options.php에 AJAX 요청을 보내 데이터를 가져옵니다.

function loadForm(mode, num = null) {
    $.ajax({
        type: "POST",
        url: "fetch_modal.php",
        data: { mode: mode, num: num },
        dataType: "html",
        success: function(response) {
            $(".modal-body").html(response);

            // 옵션 데이터를 fetch_options.php에서 가져오기
            $.getJSON("fetch_options.php", function(data) {
                const incomeOptions = data.incomeOptions;
                const expenseOptions = data.expenseOptions;

                // 드롭다운 메뉴에 옵션 추가
                const contentSelect = $("#content");
                contentSelect.empty();

                Object.keys(incomeOptions).forEach(key => {
                    contentSelect.append(new Option(key, key));
                });

                Object.keys(expenseOptions).forEach(key => {
                    contentSelect.append(new Option(key, key));
                });
            });

            $("#myModal").show();
        }
    });
}

---

3. HTML에서 데이터를 반영

fetch_modal.php의 드롭다운 메뉴는 데이터를 동적으로 추가하는 방식으로 수정합니다.

<div class="container-fluid">
    <div class="card">
        <div class="card-header text-center">
            <span class="fs-5">금전출납부 신규 등록</span>
        </div>
        <div class="card-body">
            <select id="content" class="form-control fs-6"></select>
        </div>
    </div>
</div>

---

결과

이제 데이터는 한 곳에서만 선언되며, 중복 없이 PHP와 JavaScript에서 효율적으로 공유됩니다.

장점

1. 중복 제거: PHP와 JavaScript에서 중복 선언 없이 데이터 관리 가능.
2. 유지보수 용이: 공통 데이터를 한 곳에서 관리하므로 수정이 간편.
3. 확장성 향상: 데이터를 추가하거나 변경하는 것이 매우 간단.

---

결론

웹 개발에서 데이터를 효율적으로 관리하는 것은 유지보수성과 생산성을 높이는 중요한 요소입니다. 이번 글에서는 PHP 데이터를 JSON으로 공유하고, JavaScript에서 이를 동적으로 가져오는 방법을 살펴봤습니다. 이러한 구조는 데이터 중복 선언을 제거하며, 다양한 프로젝트에 쉽게 적용할 수 있는 실용적인 방법입니다.

여러분의 프로젝트에서도 이 방법을 적용해보세요! 데이터 관리가 훨씬 간편해질 것입니다. 😊

---