podo-javascript · cadst · Sep 27, 2025
diff --git a/Part2-9팀/project-01/이동국/Index.html b/Part2-9팀/project-01/이동국/Index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>놀이공원 요금 계산기</title>
+</head>
+<body>
+    <h1>🎢 놀이공원 요금 계산기</h1>
+    <p>나이에 따라 입장료가 다릅니다.</p>
+    <p>🚨 문제: 0살 아기의 요금을 계산할 수 없습니다. 어떻게 해결할까요?</p>
+
+    <h3>📋 요금표</h3>
+    <ul>
+        <li>0~3세: 무료</li>
+        <li>4~12세: 5,000원</li>
+        <li>13~64세: 10,000원</li>
+        <li>65세 이상: 3,000원</li>
+    </ul>
+
+    <button onclick="testAge(0)">0살 테스트</button>
+    <button onclick="testAge(3)">3살 테스트</button>
+    <button onclick="testAge(8)">8살 테스트</button>
+    <button onclick="testAge(25)">25살 테스트</button>
+    <button onclick="testAge(70)">70살 테스트</button>
+    <button onclick="testAge(null)">null 테스트</button>
+
+    <div id="result"></div>
+
+    <script src="age-bug.js"></script>
+</body>
+</html>
diff --git a/Part2-9팀/project-01/이동국/README.md b/Part2-9팀/project-01/이동국/README.md
@@ -0,0 +1,156 @@
+### 과제 1
+
+다음 코드의 결과를 예측하고 `?` 부분에 알맞은 답을 적어주세요
+
+```javascript
+console.log(typeof []); // object
+console.log(typeof null); // object
+console.log(null == undefined); // true
+console.log(null === undefined); // false
+```
+
+### 과제 2
+
+올바른 연산자를 선택하세요!
+
+```javascript
+const score = 0; // 0점도 유효한 점수
+const name = ""; // 빈 이름은 "익명"으로
+const url = null; // 아직 설정 안됨
+const isVip = false; // 의도적으로 일반회원
+
+// TODO: 올바른 연산자 선택
+const finalScore = score ?? 100; // 0점 유지하고 싶음
+const finalName = name || "익명"; // 빈 이름은 익명으로
+const finalUrl = url ?? "/default"; // null만 기본값으로
+```
+
+### 과제 3
+
+![img.png](img.png)
+
+**실행 방법**:
+
+1. `../project-01/assignment/index.html`을 브라우저에서 열기
+
+**문제 상황**:
+
+- 갓태어난 아이(0 살일때) 현재 잘못된 오류가 나오고있음, 올바르게 나오도록 수정하기
+- 각 step 별 문제를 해결하기
+
+## **미션**:
+
+#### step1. 조건문을 수정해서 0살도 올바르게 처리하기
+
+#### step2. 조건이 올바르게 수정되면 `calculatePrice` 를 `switch case` 문으로 변경 하기
+
+#### step3. `calculatePrice` 함수에 badge 파라미터를 추가하여 age,badge 를 받도록하기
+
+#### step4. `calculatePrice` 함수에 badge 값이 `"독립유공자"` 이면 `"무료"`라고 보여주기 (마치 0~3세 처럼)
+
+---
+
+### 멘토링시 각 step 을 구현한 이유와 해결과정을 설명해주 시면 좋습니다 🤡
+
+# 🤡 팁!! 반드시 읽어주세요 !!
+
+### 1️⃣ 자료형 8가지 + typeof 결과 (자료형 8가지 종류 암기)
+
+- JS 기본 자료형 8가지 말해주세요 하면 대답할수 있도록
+
+```javascript
+typeof 42; // "number"
+typeof "Hello"; // "string"
+typeof true; // "boolean"
+typeof [1, 2, 3]; // "object" ← 배열도 객체!
+typeof { name: "김멘티" }; // "object"
+typeof function () {}; // "function"
+typeof undefined; // "undefined"
+typeof null; // "object" ← 이게 함정!
+```
+
+### 2️⃣ Falsy 값 7가지 (익숙해지기)
+
+```javascript
+Boolean(false); // false
+Boolean(0); // false
+Boolean(""); // false
+Boolean(null); // false
+Boolean(undefined); // false
+Boolean(NaN); // false
+Boolean(0n); // false (BigInt)
+```
+
+### 3️⃣ || vs ??
+
+```javascript
+// || 연산자: falsy면 뒤로
+"" || "기본값"; // "기본값" ← 빈 문자열은 falsy
+0 || "기본값"; // "기본값" ← 0은 falsy
+false || "기본값"; // "기본값" ← false는 falsy
+
+// ?? 연산자: null/undefined만 뒤로
+"" ?? "기본값"; // "" ← 빈 문자열 그대로 유지
+0 ?? "기본값"; // 0 ← 숫자 0 그대로 유지
+false ?? "기본값"; // false ← 불린 false 그대로 유지
+null ?? "기본값"; // "기본값" ← null만 교체
+undefined ?? "기본값"; // "기본값" ← undefined만 교체
+```
+
+## 💡 실무 예제
+
+### 예제 1: 사용자 입력 처리
+
+```javascript
+function processUser(user) {
+  // 이름: 빈 문자열도 "익명"으로 처리하고 싶음
+  const name = user?.name || "익명";
+
+  // 나이: 0살도 유효한 값이므로 null/undefined만 기본값
+  const age = user?.age ?? 18;
+
+  // 활성상태: false도 유효한 값
+  const isActive = user?.isActive ?? true;
+
+  return { name, age, isActive };
+}
+```
+
+### 예제 2: 설정값 검증
+
+```javascript
+const config = {
+  debug: false, // 의도적으로 끈 상태
+  timeout: 0, // 의도적으로 타임아웃 없음
+  apiUrl: null, // 아직 설정 안됨
+  retries: undefined, // 아직 설정 안됨
+};
+
+// 각각 적절한 연산자 선택
+config.debug && console.log("디버그 모드"); // false면 실행 안됨
+config.timeout || console.log("타임아웃 미설정"); // 0이므로 실행됨
+config.apiUrl ?? console.log("API URL 미설정"); // null이므로 실행됨
+```
+
+### 예제 3
+
+```javascript
+// ❌ 잘못된 예
+
+if (user.age) {
+  // 0살 아기는 조건에 안 걸림!
+}
+
+// ✅ 올바른 예
+if (user.age != null) {
+  // 0살도 유효한 나이로 처리
+}
+
+// ❌ 잘못된 예
+const config = settings.timeout || 5000;
+// timeout이 0이면 의도와 다르게 5000이 됨
+
+// ✅ 올바른 예
+const config = settings.timeout ?? 5000;
+// timeout이 0이면 0 유지, null/undefined만 5000
+```
diff --git a/Part2-9팀/project-01/이동국/age-bug.js b/Part2-9팀/project-01/이동국/age-bug.js
@@ -0,0 +1,45 @@
+// 놀이공원 요금 계산기
+// 🚨 버그: 0살일 때 요금을 계산할 수 없음
+
+/*
+나이(age)에 따라 요금을 계산 하는 함수
+ */
+function calculatePrice(age, badge) {
+  switch (true) {
+    case badge === "독립유공자":
+      return "무료";
+    case age <= 3:
+      return "무료";
+    case age <= 12:
+      return "5,000원 (어린이)";
+    case age <= 64:
+      return "10,000원 (성인)";
+    case age >= 65:
+      return "3,000원 (경로우대)";
+    default:
+      return "❌ 나이를 알 수 없어서 요금을 계산할 수 없습니다.";
+  }
+}
+
+/*
+  전달받은 나이(age)에 따라 가격을 계산하고, HTML에 결과를 표시하는 역할
+ */
+function testAge(age) {
+  const result = calculatePrice(age);
+  const display = age === null ? "null" : `${age}살`;
+
+  // document → 브라우저가 HTML 문서를 객체로 표현한 것(DOM의 최상위 진입점)
+  // getElementById('result') → HTML에서 id="result"인 요소를 찾아 반환
+  // innerHTML → 해당 요소 안의 HTML 내용을 읽거나(가져오기) 변경(설정)하는 속성
+  document.getElementById(
+    "result"
+  ).innerHTML = `<h3>${display} 결과:</h3><p>${result}</p>`;
+}
+
+// 페이지 로드시 설명 표시
+window.onload = function () {
+  document.getElementById(
+    "result"
+  ).innerHTML = `<p>👆 위의 버튼들을 클릭해서 각 나이별 요금을 확인해보세요!</p>
+         <p><strong>특히 0살 버튼을 클릭해보세요. 무료여야 하는데...</strong></p>`;
+};
diff --git a/Part2-9팀/project-01/이동국/img.png b/Part2-9팀/project-01/이동국/img.png