JS I/O (Input / Output) 입출력

 

🟨 JS I/O (Input / Output)

I/O는 프로그램이 외부와 데이터를 주고받는 모든 과정.

 

🟣 Output (출력)

프로그램이 외부로 데이터를 보내거나 보여주는 것.

 

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

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

• 브라우저의 개발자 도구(F12) 콘솔(Console)에 내용을 출력한다.
• 사용자 화면에는 보이지 않으며, 주로 코드가 정상적으로 동작하는지 확인하는 디버깅(Debugging) 용도로 가장 많이 사용된다.

 

🔹 alert() - 경고창 띄우기

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

• 브라우저 상단에 알림창을 표시한다.
• 사용자가 확인 버튼을 누를 때까지 다음 코드의 실행이 일시적으로 중단된다.
• 간단한 안내나 테스트에 사용할 수 있지만, 실제 서비스에서는 자주 사용하지 않는다.

 

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

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

• HTML 문서에 직접 내용을 출력한다.
• 페이지가 모두 로드된 후 실행되면 기존 문서 내용을 덮어쓸 수 있다.
• 주로 학습이나 테스트 목적으로 사용되며, 실제 서비스에서는 거의 사용하지 않는다.

 

---

 

🟣 Input (입력)

프로그램이 외부로부터 데이터를 받는 것.

 

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

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

• 사용자에게 입력 창을 띄워 값을 입력받는다.
• 입력된 값은 문자열(String) 형태로 반환된다.
• 사용자가 취소(Cancel) 버튼을 누르면 null이 반환된다.

 

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

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

• 확인(OK) 과 취소(Cancel) 버튼이 있는 선택 창을 띄운다.
• 확인을 누르면 true
• 취소를 누르면 false
• 주로 조건문(if)과 함께 사용한다.

 

❗  입출력 활용 시 주의사항 ❗ 

• 자료형 변환: prompt()로 입력받은 값은 항상 문자열(String)로 인식되므로, 숫자 계산을 수행하려면 Number(), parseInt(), parseFloat() 등을 사용하여 숫자(Number)로 변환해야 한다.
• 사용자 경험(UX): alert(), prompt(), confirm()은 대화상자가 표시되는 동안 사용자의 다른 작업을 막는 동기식(Synchronous) 방식으로 동작한다. 따라서 과도하게 사용하면 사용자가 불편함을 느낄 수 있으며, 웹 페이지의 사용성이 떨어질 수 있다.
• 현대적인 방식: 실제 웹 애플리케이션에서는 alert(), prompt(), confirm() 대신 HTML 폼(Form) 요소와 DOM 조작을 활용하여 입출력을 처리하는 경우가 많다.

📍  POINT 📍 

✔️ 출력은 주로 개발 중엔 console.log, 사용자 알림엔 alert 를 사용한다. ✔️

✔️ 입력은 prompt로 문자열을, confirm으로 참/거짓 값을 얻을 수 있다. ✔️

✔️ 브라우저 기본 대화상자는 실행을 일시 정지시킨다는 특징이 있다. ✔️