[JS] 자바스크립트 데이터 입출력 방식📝

coco030030 2025. 4. 2. 12:23

자바스크립트 출력 방식이 필요한 이유

자바스크립트는 사용자와 소통하는 언어입니다. 다음과 같은 상황에서 출력 방식이 필요해요:

웹 페이지에 정보 보여주기
사용자에게 알림 메시지 전달하기
사용자의 확인/취소 응답 받기
개발 중 코드 디버깅하기

주요 출력 방식 4가지 비교

방식	어디에 보이나요?	주로 언제 사용하나요?	사용자가 보나요?
innerHTML	웹 페이지 내부	웹페이지에 내용 표시할 때	✅ YES
alert()	팝업 창	중요 알림이나 경고 메시지	✅ YES
console.log()	개발자 도구 콘솔	디버깅할 때	❌ NO (개발자만)
confirm()	확인/취소 버튼 있는 팝업	사용자 결정이 필요할 때	✅ YES

1. innerHTML: 웹 페이지에 내용 표시하기

<script>
window.onload = function() {
  document.querySelector('#demo').innerHTML = "이 내용이 웹페이지에 보입니다";
}
</script>

<h1 id="demo"></h1>

이해하기: innerHTML은 마치 빈 상자(HTML 요소)에 내용물(텍스트/HTML)을 넣는 것과 같습니다.

실생활 비유: 전광판에 메시지 표시하기

window.onload란?: 페이지가 완전히 로드된 후 코드를 실행하라는 명령(defer와 비슷한 역할)

2. alert(): 팝업으로 알림 표시하기

<script>
  alert('중요 알림입니다!');
</script>

이해하기: alert()는 모든 작업을 멈추고 사용자에게 알림 메시지를 표시합니다.

실생활 비유: 누군가 하던 일을 멈추게 하고 "잠깐만요! 중요한 얘기가 있어요"라고 말하는 것

3. console.log(): 개발자만 보는 비밀 메시지

<script>
  console.log('이 메시지는 개발자만 볼 수 있어요');
</script>

이해하기: console.log()는 개발자 도구 콘솔에만 보이는 메시지를 출력합니다.

실생활 비유: 노트에 메모 남기기 (자신만 볼 수 있음)

확인방법: F12 또는 우클릭 > 검사 > Console 탭

4. confirm(): 사용자에게 결정권 주기

<script>
  if(confirm("제출하시겠습니까?")) {
    alert("정상적으로 제출되었습니다");
  } else {
    alert("제출이 취소되었습니다");
  }
</script>

이해하기: confirm()은 사용자에게 "예/아니오" 질문을 하고 그 응답에 따라 다른 행동을 취합니다.

실생활 비유: "영화 보러 갈래?"라고 물어보고 답변에 따라 다르게 행동하기

초보자가 이해해야 할 핵심 포인트

innerHTML: HTML 요소의 내용을 변경할 때 사용
alert(): 사용자에게 중요한 알림을 전달할 때 사용
console.log(): 개발 중에 코드를 테스트하고 디버깅할 때 사용
confirm(): 사용자의 확인이 필요한 작업 전에 사용

응용해 보기: 나만의 간단한 웹 앱 만들기

아래 코드를 직접 입력해 보세요. 각 부분이 어떻게 작동하는지 이해하면서 작성해 보세요:

<!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>
  <button id="nameBtn">이름 입력</button>
  <button id="secretBtn">비밀 메시지</button>
  <button id="checkBtn">확인하기</button>
  <div id="output"></div>

  <script>
    // 이름 입력 버튼
    document.getElementById('nameBtn').onclick = function() {
      // 사용자에게 이름 입력받기 (새로운 입력 방식!)
      var name = prompt("이름을 입력하세요:");

      // 웹페이지에 결과 표시하기
      document.getElementById('output').innerHTML = 
        "<p>안녕하세요, <strong>" + name + "</strong>님!</p>";
    };

    // 비밀 메시지 버튼
    document.getElementById('secretBtn').onclick = function() {
      // 개발자 콘솔에만 메시지 표시
      console.log("이 메시지는 개발자 도구에서만 볼 수 있어요!");
      alert("개발자 도구(F12)를 열어서 Console 탭을 확인해보세요!");
    };

    // 확인하기 버튼
    document.getElementById('checkBtn').onclick = function() {
      // 사용자에게 확인 받기
      if(confirm("진행하시겠습니까?")) {
        document.getElementById('output').innerHTML = 
          "<p style='color:green;'>확인되었습니다!</p>";
      } else {
        document.getElementById('output').innerHTML = 
          "<p style='color:red;'>취소되었습니다.</p>";
      }
    };
  </script>
</body>
</html>

당신의 지식 확인하기

웹페이지에 텍스트를 표시하려면 어떤 방법을 사용하나요?
→ innerHTML
사용자에게 경고 메시지를 보여주려면 어떤 함수를 사용하나요?
→ alert()
개발 중 변수 값을 확인하려면 어떤 함수를 사용하나요?
→ console.log()
사용자에게 "예/아니오" 질문을 하려면 어떤 함수를 사용하나요?
→ confirm()

4가지 출력 방식 예제

1. innerHTML: 웹페이지에 글씨 넣기

<!DOCTYPE html>
<html>
<body>
  <!-- 글씨를 넣을 곳 -->
  <p id="demo"></p>

  <script>
    // demo라는 id를 가진 곳에 글씨 넣기
    document.getElementById("demo").innerHTML = "안녕하세요!";
  </script>
</body>
</html>

효과: "안녕하세요!"라는 글씨가 화면에 나타납니다.

2. alert: 팝업 알림창 보여주기

<!DOCTYPE html>
<html>
<body>
  <script>
    // 알림창 띄우기
    alert("안녕하세요!");
  </script>
</body>
</html>

효과: "안녕하세요!"라는 팝업창이 뜹니다.

3. console.log: 개발자만 볼 수 있는 메시지

<!DOCTYPE html>
<html>
<body>
  <script>
    // 개발자 도구에 메시지 남기기
    console.log("이 메시지는 개발자만 볼 수 있어요");
  </script>
</body>
</html>

효과: F12 키를 눌러 개발자 도구를 열면 메시지가 보입니다.

4. confirm: 예/아니오 질문하기

<!DOCTYPE html>
<html>
<body>
  <script>
    // 예/아니오 질문하기
    var answer = confirm("계속 진행할까요?");

    // 답변에 따라 다른 알림 보여주기
    if(answer) {
      alert("네를 선택했습니다.");
    } else {
      alert("아니오를 선택했습니다.");
    }
  </script>
</body>
</html>

효과: "계속 진행할까요?"라는 질문에 예/아니오로 답하면 그에 맞는 알림이 나옵니다.

버튼 하나로 출력하는 더 쉬운 예제

<!DOCTYPE html>
<html>
<body>
  <!-- 버튼 하나 만들기 -->
  <button onclick="showMessage()">여기를 클릭하세요</button>

  <!-- 메시지가 나타날 곳 -->
  <p id="message"></p>

  <script>
    // 버튼 클릭시 실행될 함수
    function showMessage() {
      // 화면에 메시지 표시하기
      document.getElementById("message").innerHTML = "버튼을 클릭했습니다!";

      // 알림창도 함께 보여주기
      alert("버튼 클릭 성공!");
    }
  </script>
</body>
</html>

이 예제는:

버튼 하나만 있습니다
클릭하면 화면에 메시지가 나타납니다
동시에 알림창도 뜹니다