입출력 (console)

1. 도입 (왜 배워야 하는가)

JavaScript에서 입출력은 프로그램이 사용자와 상호작용하는 기본적인 방법입니다. 특히 console 객체는 개발자가 프로그램의 상태를 확인하고 디버깅하는 데 필수적인 도구입니다. 만약 이 개념을 모른다면, 코드 실행 중 발생하는 오류를 쉽게 파악하지 못하거나, 프로그램의 흐름을 이해하기 어려워집니다. 이는 생산성을 저하시키고, 결과적으로 프로젝트의 품질에 악영향을 미칠 수 있습니다.

2. 핵심 개념 설명

실생활 비유

예를 들어, 요리사가 요리하는 동안 맛을 확인하기 위해 자주 시식을 하는 것과 비슷합니다. 요리사가 맛을 보고 조리법을 조정하는 것처럼, 개발자도 console을 통해 프로그램의 상태를 확인하고 수정합니다.

관련 용어 정리

3. 기본 코드 예제

가장 기본적인 사용법을 보여주는 코드입니다.

console.log("안녕하세요, 세계!"); // 문자열 출력
console.log(5 + 3); // 숫자 계산 결과 출력

실행 결과:

안녕하세요, 세계!
8

코드 한 줄씩 동작 설명

1. console.log("안녕하세요, 세계!");

- 문자열 "안녕하세요, 세계!"를 콘솔에 출력합니다.

2. console.log(5 + 3);

- 5 + 3의 결과인 8을 계산하여 콘솔에 출력합니다.

4. 실전 활용 예제

1. 디버깅 시 사용

쇼핑몰에서 장바구니에 추가된 상품의 정보를 확인할 때 사용합니다.

let cart = ["사과", "바나나", "체리"];
console.log("장바구니에 있는 상품:", cart);

상황 설명: 장바구니에 있는 상품 목록을 출력하여 확인합니다.

2. 오류 확인

사용자가 입력한 데이터를 검증할 때 console.error를 사용합니다.

let age = -1;

if (age < 0) {
    console.error("나이는 음수가 될 수 없습니다!");
}

상황 설명: 나이 입력 값이 음수일 경우 오류 메시지를 출력하여 개발자가 문제를 쉽게 파악할 수 있게 합니다.

5. 흔한 실수와 주의사항

1. console.log를 잊는 것

• 잘못된 코드:

let name = "홍길동";
// console.log(name); // 출력하지 않음

• 올바른 코드:

let name = "홍길동";
console.log(name); // 출력: 홍길동

2. 숫자와 문자열 혼동

• 잘못된 코드:

console.log("5" + 3); // 출력: 53 (문자열 결합)

• 올바른 코드:

console.log(parseInt("5") + 3); // 출력: 8 (정수 계산)

6. 정리

• console 객체를 사용하여 정보를 출력하고 디버깅할 수 있다.
• console.log, console.error, console.warn 등의 메서드를 활용하여 다양한 정보를 출력할 수 있다.
• 장바구니와 같은 실무 상황에서 유용하게 사용된다.
• 다음에 학습할 주제로는 변수와 데이터 타입을 추천합니다. 이를 통해 보다 복잡한 로직을 이해하고 다룰 수 있습니다.