JS I/0

프로그램이 세상과 소통하는 창구인 입출력 방법에 대해 알아보겠습니다.

입출력은 사용자로부터 정보를 받고(입력), 처리된 결과를 화면이나 콘솔에 보여주는(출력) 모든 과정을 말합니다.

---

1. 데이터를 보여주는 방법 (출력)

자바스크립트에서 결과를 확인하거나 사용자에게 메시지를 전달할 때 사용하는 대표적인 방법들입니다.

① console.log() - 개발자의 영원한 친구

브라우저의 개발자 도구(F12) 콘솔 창에 내용을 출력합니다. 사용자에게는 보이지 않으므로, 주로 코드가 잘 작동하는지 확인하는 디버깅 용도로 사용합니다.

JavaScript

 

console.log("콘솔에 출력되는 메시지입니다.");
console.log(10 + 20); // 30

② alert() - 경고창 띄우기

브라우저 상단에 작은 알림창을 띄웁니다. 사용자가 '확인'을 누르기 전까지는 다음 코드가 실행되지 않고 멈춰있습니다.

JavaScript

 

alert("환영합니다! 로그인이 완료되었습니다.");

③ document.write() - 웹 문서에 직접 쓰기

HTML 문서(body)에 직접 내용을 출력합니다. 주로 테스트 용도로만 사용하며, 실제 서비스에서는 기존 내용을 덮어씌울 위험이 있어 자주 쓰지 않습니다.

JavaScript

 

document.write("웹 페이지 화면에 직접 글자를 씁니다.");

---

2. 데이터를 받는 방법 (입력)

사용자로부터 직접 정보를 받아오는 가장 기초적인 브라우저 함수들입니다.

① prompt() - 텍스트 입력받기

사용자에게 질문을 하고 글자를 입력받을 수 있는 대화상자를 띄웁니다. 입력받은 값은 항상 **문자열(String)**로 저장된다는 점을 주의해야 합니다.

JavaScript

 

let name = prompt("이름을 입력해 주세요.", "홍길동"); 
console.log("당신의 이름은 " + name + "이군요!");

② confirm() - 찬성/반대 물어보기

"예/아니오"를 선택할 수 있는 창을 띄웁니다. 확인을 누르면 true, 취소를 누르면 false를 반환하여 조건문과 함께 자주 쓰입니다.

JavaScript

 

let isDelete = confirm("정말로 삭제하시겠습니까?");
if (isDelete) {
    console.log("삭제되었습니다.");
} else {
    console.log("취소되었습니다.");
}

---

3. 입출력 활용 시 주의사항

1. 자료형 변환: prompt()로 받은 숫자는 문자로 인식되므로, 계산을 하려면 Number() 함수 등을 사용해 숫자로 바꿔줘야 합니다.
2. 사용자 경험(UX): alert나 prompt는 브라우저를 멈추게 하므로 너무 자주 사용하면 사용자가 불편함을 느낄 수 있습니다.
3. 현대적인 방식: 실제 웹 앱에서는 이런 기본 함수들 대신 HTML의 <input> 태그와 DOM 조작을 통해 더 세련되게 입출력을 처리합니다.

---

학습 정리

• 출력은 주로 개발 시엔 console.log, 사용자 알림엔 alert를 사용한다.
• 입력은 prompt로 문자열을, confirm으로 참/거짓 값을 얻을 수 있다.
• 브라우저 기본 대화상자는 실행을 일시 정지시킨다는 특징이 있다.

---

입출력의 기본기를 탄탄하게 다지셨습니다!