티스토리 뷰

몸부림의 흔적

# PHP와 HTML의 관계 (+ 자바스크립트 & 스위치의 관계에 대해서. 왜 URL로 정보를 주고 받아야 하는지.)

eblessyou 2026. 5. 14. 15:37

 

내 질문:

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>계산기</title>

  <style>
    body{
      font-family: Arial, sans-serif;
      padding:40px;
      background:#f5f5f5;
    }

    .wrap{
      width:400px;
      margin:0 auto;
      background:#fff;
      padding:30px;
      border-radius:10px;
      box-shadow:0 0 10px rgba(0,0,0,0.1);
    }

    .input-group{
      margin-bottom:20px;
    }

    label{
      display:inline-block;
      width:70px;
      font-weight:bold;
    }

    input{
      padding:8px;
      width:200px;
    }

    button{
      padding:10px 15px;
      margin-right:5px;
      cursor:pointer;
    }

    .result{
      margin-top:30px;
      padding:20px;
      background:#efefef;
      border-radius:5px;
      font-size:20px;
      font-weight:bold;
    }
  </style>
</head>
<body>

<?php

$result = "";

if(
  isset($_GET['num1']) &&
  isset($_GET['num2']) &&
  isset($_GET['yon'])
){

  $num1 = $_GET['num1'];
  $num2 = $_GET['num2'];
  $yon  = $_GET['yon'];

  switch($yon){

    case "+":
      $result = $num1 + $num2;
      break;

    case "-":
      $result = $num1 - $num2;
      break;

    case "*":
      $result = $num1 * $num2;
      break;

    case "/":

      if($num2 != 0){
        $result = $num1 / $num2;
      }else{
        $result = "0으로 나눌 수 없습니다.";
      }

      break;

  }

}

?>

<div class="wrap">

  <h2>간단 계산기</h2>

  <div class="input-group">
    <label>숫자1 :</label>

    <input
      type="number"
      id="num1"
      placeholder="수1"
      value="<?php echo isset($_GET['num1']) ? $_GET['num1'] : ''; ?>"
    />
  </div>

  <div class="input-group">
    <label>숫자2 :</label>

    <input
      type="number"
      id="num2"
      placeholder="수2"
      value="<?php echo isset($_GET['num2']) ? $_GET['num2'] : ''; ?>"
    />
  </div>

  <button onclick="calc('+')">+</button>
  <button onclick="calc('-')">-</button>
  <button onclick="calc('*')">*</button>
  <button onclick="calc('/')">/</button>

  <div class="result">

    결과 :
    <?php echo $result; ?>

  </div>

</div>

<script>

function calc(yon){

  const num1 = document.getElementById("num1").value;
  const num2 = document.getElementById("num2").value;

  location.href =
    "ex12_calc_script.php?num1=" + num1 +
    "&num2=" + num2 +
    "&yon=" + encodeURIComponent(yon);

}

</script>

</body>
</html>

 

강사님이 이 코드를 보여주면서,

+ - * / 버튼을 누르면 함수 calc이 실행되면서,

그 다음으로 이게 스위치로 값이 간다고 했는데,

어떻게 그렇게 처리가 되는 건지 이해가 잘 안 돼서.

 

이 안에서 어떤 시스템으로 돌아가는 건지 알려줄래?

그리고 함수가 밑에 정의가 되어 있는데도 어떻게 위에 있는 스위치에서 받아지는 건지도 궁금해.

 

 

좋아, 이 부분은 PHP + JavaScript + 브라우저 요청 흐름이 한 번에 섞여 있어서 처음 보면 헷갈리기 정말 쉬워.
근데 흐름만 정확히 이해하면 “아 버튼 누르면 이렇게 데이터가 이동하는구나”가 딱 보이게 돼.

핵심은:

JavaScript가 URL에 값을 실어서 다시 현재 PHP 파일을 요청하고,
PHP는 그 요청값($_GET)을 받아서 switch로 계산한다.

이 구조야.

전체 흐름 먼저 보기

버튼 클릭부터 결과 출력까지 흐름을 순서대로 적으면:

1. 사용자가 버튼 클릭
↓
2. onclick="calc('+')" 실행
↓
3. JS 함수 calc('+') 호출
↓
4. location.href 로 새로운 URL 요청
↓
5. 브라우저가 PHP 파일을 다시 실행 요청
↓
6. PHP가 $_GET 값 받음
↓
7. switch($yon) 실행
↓
8. 결과 계산
↓
9. HTML 다시 출력
↓
10. 결과 화면 표시
 

1. 버튼 누르면 무슨 일이 발생하나?

이 부분:

 
<button onclick="calc('+')">+</button>
 

버튼을 누르면:

 
calc('+')
 

이 함수가 실행돼.

즉:

 
yon = '+'
 

값을 가지고 함수가 호출되는 거야.

2. calc 함수 내부

이 부분이 핵심이야.

 
function calc(yon){

  const num1 = document.getElementById("num1").value;
  const num2 = document.getElementById("num2").value;

  location.href =
    "ex12_calc_script.php?num1=" + num1 +
    "&num2=" + num2 +
    "&yon=" + encodeURIComponent(yon);

}
 

여기서 하는 일은:

입력값 읽기

예를 들어:

num1 = 10
num2 = 5
yon = +
 

URL 만들기

그러면 최종적으로 이런 URL이 만들어져:

ex12_calc_script.php?num1=10&num2=5&yon=%2B
 

%2B는 URL에서 +를 안전하게 보내기 위해 인코딩된 값이야.

실제로는:

yon=+
 

의 의미라고 생각하면 돼.

3. location.href가 뭐냐?

이게 진짜 중요해.

 
location.href = "주소";
 

의 의미는:

브라우저가 그 주소로 이동해라

야.

즉:

 
location.href = "ex12_calc_script.php?num1=10&num2=5&yon=+";
 

되면 브라우저가:

GET 방식으로
ex12_calc_script.php 요청
 

을 다시 보내는 거야.

4. PHP는 어떻게 값을 받는가?

브라우저가 이런 요청을 보내면:

ex12_calc_script.php?num1=10&num2=5&yon=+
 

PHP는 자동으로:

 
$_GET
 

배열에 담아줘.

즉:

 
$_GET['num1'] => 10
$_GET['num2'] => 5
$_GET['yon']  => +
 

이렇게 들어가.

5. 그래서 switch가 실행되는 거야

여기:

 
$yon = $_GET['yon'];
 

그러면:

 
$yon = "+"
 

이 들어감.

그 다음:

 
switch($yon)
 

실행.

즉 실제로는:

 
switch("+")
 

가 되는 거야.

그래서 case "+" 가 실행됨

 
case "+":
  $result = $num1 + $num2;
  break;
 

즉:

 
$result = 10 + 5;
 

되어서:

 
$result = 15;
 

됨.

6. 결과가 화면에 출력

여기:

 
<?php echo $result; ?>
 

PHP가 HTML 안에 결과를 끼워 넣어.

최종 HTML은 브라우저에 이렇게 전달됨:

 
결과 : 15
 

가장 헷갈리는 부분

"함수가 아래 있는데 왜 위에서 호출되나요?"

이건 JavaScript 동작 방식 때문이야.

HTML 먼저 다 읽고

script도 읽는다

브라우저는 페이지를 위에서 아래로 읽어.

마지막에:

 
<script>

function calc(yon){
  ...
}

</script>
 

이걸 읽으면:

"아 calc라는 함수를 메모리에 등록해놔야지"

하고 기억해둠.

버튼 클릭은 "나중"에 발생함

중요한 건:

 
<button onclick="calc('+')">
 

이게 페이지 읽는 순간 바로 실행되는 게 아니라는 거야.

이건:

"클릭되면 calc 실행해"

라는 이벤트 등록만 해놓은 상태야.

실제 클릭은:

  • 페이지 로딩 완료 후
  • 사용자가 버튼 누를 때

발생함.

그 시점엔 이미 아래 script까지 다 읽은 상태라:

 
calc()
 

함수를 알고 있는 거야.

쉽게 비유하면

브라우저가:

1. 버튼 발견
→ "클릭하면 calc 실행해야지 메모"

2. 아래로 내려감
→ "아 calc 함수는 이거구나 저장"

3. 사용자가 클릭
→ 저장해둔 calc 실행
 

이 순서야.

PHP와 JavaScript는 실행 시점이 다르다

이거 엄청 중요해.

                     구분실행                                          위치실행                                                   시점
PHP 서버 페이지 요청 순간
JavaScript 브라우저 페이지 받은 후

실제 시간 흐름

[1]
브라우저가 PHP 요청

↓

[2]
서버에서 PHP 실행
switch 실행도 여기서 함

↓

[3]
완성된 HTML 반환

↓

[4]
브라우저가 HTML 읽음

↓

[5]
JS 함수 등록

↓

[6]
사용자가 버튼 클릭

↓

[7]
calc() 실행

↓

[8]
다시 PHP 요청
 

즉:

버튼 누를 때마다 PHP 파일이 새로 실행되는 구조

인 거야.

핵심 한 줄 요약

calc 함수는:

 
URL에 값을 담아서 PHP 파일을 다시 요청하는 역할
 

switch는:

 
그 요청값($_GET)을 받아 계산하는 역할
 

이 둘이 GET 방식으로 연결되어 있는 거야.

 

 

내 질문:

'4. location.href 로 새로운 URL 요청

↓

5. 브라우저가 PHP 파일을 다시 실행 요청'

이 부분이랑,

'location.href = "ex12_calc_script.php?

num1=10&num2=5&yon=+";

되면 브라우저가:

GET 방식으로 ex12_calc_script.php 요청

을 다시 보내는 거야.'

이 부분이 이해가 안돼.

왜 굳이 url로 값을 보내고 받아야 하는 거야?

 

그리고 왜 자바스크립트가 먼저 동작하고 

switch가 나중에 실행이 되는 건지 아직 이해가 안 됐어.

더 알기 쉽게 설명해줘.

 

 

좋아.
지금 헷갈리는 건 사실 “웹이 어떻게 움직이는지” 자체야.
이걸 이해하면 PHP가 왜 GET을 쓰는지, 왜 switch가 나중에 실행되는지 한 번에 이해돼.

핵심은:

PHP는 서버에서 실행되고, JavaScript는 브라우저에서 실행된다.

둘이 서로 다른 장소에 있다는 걸 먼저 이해해야 해.

먼저 아주 쉽게 비유할게

웹사이트를 음식점이라고 생각해보자.

                            역할                                                                       실제 웹
손님 브라우저
주방 서버(PHP)
주문서 URL(GET 방식)

지금 네 코드에서 일어나는 일

사용자가:

10
5
+
 

입력하고 버튼 누름.

그러면 브라우저(JavaScript)가:

"주방(PHP)한테 계산 요청해야겠다"
 

라고 생각함.

근데 문제는:

브라우저와 PHP는 서로 다른 장소에 있음.

엄청 중요함

JavaScript

사용자 컴퓨터(브라우저)
 

에서 실행됨.

PHP

서버 컴퓨터
 

에서 실행됨.

그림으로 보면

[사용자 브라우저]
  JavaScript 실행됨
        ↓ 요청
=========================
      인터넷
=========================
        ↓
[서버]
  PHP 실행됨
 

즉:

JS와 PHP는 직접 연결된 게 아님
 

이거야.

그래서 URL로 보내는 거야

브라우저는 서버에게 요청할 때:

주소(URL)
 

를 사용해.

예를 들면:

https://naver.com
 

도 서버 요청이잖아?

그런데 값을 같이 보내고 싶다?

그러면 URL 뒤에 붙여서 보냄.

이걸 GET 방식이라고 함.

예시

ex12_calc_script.php?num1=10&num2=5&yon=+
 

이건 사실:

ex12_calc_script.php

야 계산 좀 해줘.
근데:
num1은 10이고
num2는 5고
연산은 +야
 

라는 "주문서"인 거야.

그러면 PHP는 어떻게 받냐?

서버(PHP)가 요청서를 읽음.

 
$_GET['num1']
 

이건:

URL에서 num1 값 꺼내기
 

라는 뜻이야.

그래서 switch가 실행됨

 
$yon = $_GET['yon'];
 

결국:

 
$yon = "+"
 

됨.

그 다음:

 
switch($yon)
 

실행.

즉:

 
switch("+")
 

되는 거야.

네가 가장 헷갈리는 부분

"왜 JS가 먼저고 switch는 나중인가?"

이건 실행 장소 때문에 그래.

실제 시간 순서

1단계

브라우저가 PHP 페이지 요청

"ex12_calc_script.php 주세요"
 

2단계

서버에서 PHP 실행

이때:

 
switch()
 

도 실행됨.

근데 아직 버튼 안 눌렀으니까:

 
$_GET 비어있음
 

그래서 계산 안 함.

여기 중요

PHP는:

페이지 만들 때 딱 한 번 실행
 

되고 끝나.

3단계

완성된 HTML이 브라우저로 옴.

이제 브라우저 화면에 보임.

4단계

브라우저가 JavaScript 읽음.

 
function calc(){}
 

등록함.

5단계

사용자가 버튼 클릭

여기서 처음으로:

 
calc('+')
 

실행됨.

즉:

버튼 클릭은 PHP가 끝난 "이후"에 발생함.

6단계

JavaScript가 URL 만들어서 다시 서버 요청

 
location.href =
"ex12_calc_script.php?num1=10&num2=5&yon=+";
 

7단계

브라우저가 다시 PHP 실행 요청

이제 서버 입장에서는:

"아 이번엔 값이 같이 왔네?"
 

됨.

8단계

PHP 실행

 
$_GET['yon'] => "+"
 

됨.

이제 switch 실행 가능.

핵심 이해 포인트

PHP는 버튼 클릭을 "모름"

왜냐면 PHP는 서버에 있으니까.

JavaScript만 버튼 클릭을 감지 가능

왜냐면 브라우저에 있으니까.

그래서:

1. JS가 버튼 클릭 감지
2. 서버(PHP)에게 요청
3. PHP가 계산
 

이 순서가 되는 거야.

아주 쉽게 표현하면

JavaScript

"사용자가 + 눌렀어요!"
 

를 감지하는 역할.

PHP

"오케이 계산해줄게"
 

역할.

그럼 왜 굳이 새로 요청해야 하냐?

왜냐면:

PHP는 이미 실행이 끝났기 때문.

이게 진짜 핵심이야.

PHP는 계속 살아있는 게 아님

C언어 프로그램처럼 계속 실행되는 게 아니라:

요청 들어옴
→ 실행
→ HTML 생성
→ 종료
 

이 구조야.

그래서 계산하려면?

다시 PHP를 실행시켜야 함.

방법은:

브라우저가 다시 요청 보내기
 

뿐이야.

그 요청 방법 중 하나가:

 
location.href
 

인 거고.

이걸 이해하면 Ajax도 이해됨

나중에 배우게 될:

 
fetch()
axios()
ajax()
 

도 사실 똑같아.

본질은:

JS가 서버(PHP)에게 값 보내기
 

야.

다만:

                                       방식                                                                                 특징 
location.href 페이지 새로고침
fetch/ajax 새로고침 없이 통신

차이만 있음.

마지막 핵심 정리

버튼 클릭은 누가 감지?

JavaScript
 

계산은 누가 함?

PHP
 

JS와 PHP는 왜 연결 안 됨?

서로 다른 컴퓨터에서 실행되니까
 

그래서 어떻게 전달?

URL(GET 방식)로 서버 요청
 

switch는 왜 나중에 실행?

JS가 요청을 보내야
PHP가 다시 실행되기 때문

 

 

By. ChatGPT

 

저작자표시 비영리 변경금지 (새창열림)

'몸부림의 흔적' 카테고리의 다른 글

# 스프링부트(Spring Boot), 마이베티스(MyBetis), 템플릿(Thymeleaf), 스프링 시큐리티, 전자정부표준 프레임워크 - 예습으로 개념 미리 훑어보기 (feat. 객체와 클래스, 자바와 자바스크립트)  (0) 2026.05.19
# UX와 UI에 대해서 - 이해하기 쉽게 알아보기 (+ React/Vue, API 개념까지)  (1) 2026.05.18
# PHP에서의 변수 종류 (전역변수와 지역변수, 그 외 변수들)  (0) 2026.05.14
# PHP문법 응용하여 문제 풀기 - 학교와 학년 선택해서 제어 후 값 출력하기  (0) 2026.05.12
# 내PC 서버와 웹 호스팅 서버의 차이 / 네이버나 구글 웹사이트는 어떻게 서버를 구축하나 / 도메인 연결 의미  (1) 2026.05.11