PHP 마법 학교 2기 10강: [완결] 나만의 마법 도서관, ‘함수로 만드는 종합 주문서’

안녕하세요! 가족과 함께하는 스마트 라이프입니다. 드디어 자바스크립트 연금술 시리즈인 ‘PHP 마법 학교 2기’의 마지막 시간이 되었습니다! 그동안 우리는 색을 바꾸고, 계산을 하고, 조건에 따라 판단하며 데이터를 가방에 담는 법을 배웠죠. 오늘은 이 모든 조각 마법들을 하나로 묶어 언제든 꺼내 쓸 수 있는 ‘종합 주문서(함수 심화)’를 완성해 보겠습니다!

PHP 마법 학교 2기 10강: [완결] 나만의 마법 도서관, '함수로 만드는 종합 주문서'

1. 함수(Function)란 무엇인가요? ‘마법 주문서’

우리가 매번 길게 주문을 외울 필요 없이, “아브라카다브라!” 한마디에 불꽃이 튀고 노래가 나오게 할 수 있다면 얼마나 편할까요? 함수는 여러 줄의 코드를 하나의 이름 아래 묶어두는 마법 주문서와 같아요. 한 번 잘 적어두면 이름만 불러도 복잡한 마법이 척척 실행된답니다.

2. 종합 마법 주문서 작성하기 (코드)

사용자의 이름과 점수를 받아 등급을 매기고 화면에 멋지게 출력해주는 종합 함수를 만들어 봅시다.

<!DOCTYPE html>
<html>
<body>
  <h2>📜 마법사 자격 시험 결과</h2>
  
  <input type="text" id="wiz_name" placeholder="이름">
  <input type="number" id="wiz_score" placeholder="점수">
  <button onclick="issue_report()">결과지 출력!</button>

  <div id="report_card" style="margin-top:20px; padding:20px; border:5px double silver;"></div>

  <script>
    // 이것이 바로 종합 주문서(함수)예요!
    function issue_report() {
      let name = document.getElementById("wiz_name").value;
      let score = Number(document.getElementById("wiz_score").value);
      let result_area = document.getElementById("report_card");
      
      let grade = "";

      // 1. 판단 마법 (조건문)
      if (score >= 90) { grade = "최고위 마법사"; }
      else if (score >= 70) { grade = "중급 마법사"; }
      else { grade = "수습 마법사"; }

      // 2. 출력 마법 (DOM 조작)
      result_area.innerHTML = "<h3>" + name + " 마법사님의 성적표</h3>" +
                             "<p>점수: " + score + "점</p>" +
                             "<p>최종 등급: <b>" + grade + "</b></p>";
      
      // 3. 연금술 마법 (스타일 변경)
      if (grade === "최고위 마법사") { result_area.style.background = "gold"; }
      else { result_area.style.background = "white"; }
    }
  </script>
</body>
</html>

3. 입력(Parameter)과 출력(Return)

함수는 마치 자판기 같아요.
1. 입력: 동전과 버튼(재료)을 넣으면
2. 처리: 안에서 기계가 윙윙 돌아가며 음료수를 준비하고
3. 출력: 시원한 캔(결과)이 툭 튀어나오죠.
함수라는 주문서를 하나 잘 만들어두면, 재료만 바꿔서 수만 번이고 똑같은 효과를 낼 수 있답니다.

PHP 마법 학교 2기 10강: [완결] 나만의 마법 도서관, '함수로 만드는 종합 주문서'

4. 아이들과 함께하는 ‘마법 레시피’ 놀이

아이와 함께 ‘라면 끓이기 레시피’를 적어보세요. 1. 물 끓이기, 2. 면 넣기, 3. 스프 넣기… 이 전체 과정을 ‘라면 마법’이라는 이름의 함수로 부르기로 약속하는 거죠. 나중에 배가 고플 때 긴 설명 대신 “라면 마법 실시!”라고 외치게 해보세요. 복잡한 절차를 하나의 이름으로 압축하는 추상화(Abstraction)의 개념을 아주 쉽게 이해하게 됩니다.

마치며: 자바스크립트 연금술사 졸업!

축하합니다! PHP 마법 학교 1기(서버)와 2기(화면)를 모두 마쳤습니다. 이제 여러분은 서버에서 데이터를 가져오고, 그 데이터를 화면에서 화려하게 움직이게 할 수 있는 ‘풀스택(Full-stack) 마법사’의 기초를 닦았습니다. 여러분의 홈페이지가 이제는 진짜 살아있는 생물처럼 느껴지지 않나요? 다음 시리즈에서는 더 깊고 신비로운 마법으로 다시 만나요!

관련 게시물