front-end development

JavaScript console.log(): 개발자의 필수 도구

지식루프 2026. 1. 22. 11:49

728x90

JavaScript console.log(): 개발자의 필수 도구

지금까지 우리가 사용한 방법의 문제점은?

지금까지 우리는 값을 출력하기 위해 alert()를 사용해 왔습니다.

javascript

let age = 32;
let adultYears = age - 18;
alert(adultYears);  // 팝업창으로 출력

alert()의 장단점

장점:

✅ 화면에 바로 결과를 볼 수 있습니다
✅ 사용하기 간단합니다

단점:

❌ 매번 확인 버튼을 클릭해야 합니다
❌ 여러 개를 출력하면 하나씩 닫아야 합니다
❌ 작업 흐름이 중단됩니다
❌ 코드를 테스트할 때 불편합니다

실제로 경험해 보셨나요?

javascript

alert("첫 번째 값");  // 확인 클릭
alert("두 번째 값");  // 또 확인 클릭
alert("세 번째 값");  // 또또 확인 클릭
// 😫 너무 번거롭습니다!

더 나은 방법이 있을까요?

있습니다! 바로 **개발자 도구의 콘솔(Console)**을 사용하는 것입니다.

개발자 도구 콘솔이란?

브라우저에는 **개발자 도구(Developer Tools)**라는 강력한 기능이 내장되어 있습니다.

개발자 도구 열기:

Windows/Linux: F12 또는 Ctrl + Shift + I
Mac: Cmd + Option + I
또는 페이지에서 우클릭 → 검사 선택

개발자 도구가 열리면 여러 탭이 보입니다:

Elements: HTML 구조 확인
Console: JavaScript 실행 및 로그 확인 ⭐
Network: 네트워크 요청 확인
등등...

콘솔에서 무엇을 할 수 있나요?

1. 에러 메시지 확인

javascript

// 코드에 에러가 있으면 콘솔에 표시됩니다
undefinedVariable;  // Uncaught ReferenceError 표시

2. 값 출력하기 (오늘 배울 내용!)

javascript

console.log("안녕하세요!");  // 콘솔에 출력

3. 코드 직접 실행하기

콘솔 창에서 직접 JavaScript 코드를 입력하고 실행할 수 있습니다

console.log()란 무엇인가요?

console.log()는 콘솔에 값을 출력하는 메서드입니다.

기본 문법

javascript

console.log("출력할 내용");

구조 분석:

console: 브라우저가 제공하는 내장 객체
.: 점 표기법 (메서드 접근)
log(): console 객체의 메서드
(): 괄호 안에 출력할 값을 전달

alert()와 비교하기

alert() 사용:

javascript

let name = "Max";
alert(name);  // 팝업창 뜸 → 확인 클릭 필요

console.log() 사용:

javascript

let name = "Max";
console.log(name);  // 콘솔에 조용히 출력

차이점:

특징alert()console.log()

출력 위치	팝업창	개발자 도구 콘솔
작업 중단	예 (확인 필요)	아니오
연속 출력	불편함	편리함
사용자 노출	모두에게 보임	개발자만 봄
개발 중 사용	불편	편리 ⭐

실제로 사용해 볼까요?

예제 1: 기본 사용법

javascript

console.log("안녕하세요!");
console.log(42);
console.log(true);
```

**콘솔 출력 결과:**
```
안녕하세요!
42
true

중요: 팝업창이 뜨지 않고 콘솔에만 출력됩니다!

예제 2: 여러 값 출력하기

javascript

let age = 32;
let name = "Max";
let city = "Seoul";

console.log(age);
console.log(name);
console.log(city);
```

**콘솔 출력 결과:**
```
32
Max
Seoul

한 번에 쭉 볼 수 있어서 훨씬 편리합니다!

예제 3: 계산 결과 확인하기

javascript

let age = 32;
let adultYears = age - 18;
console.log(adultYears);  // 14

age = 45;
adultYears = age - 18;
console.log(adultYears);  // 27
```

**콘솔 출력 결과:**
```
14
27

alert()처럼 확인 버튼을 누를 필요가 없습니다!

console은 어떤 객체인가요?

console은 브라우저가 자동으로 제공하는 내장 객체입니다.

console 객체의 구조

javascript

console  // 객체
  ├── log()       // 메서드 (일반 로그)
  ├── error()     // 메서드 (에러 로그)
  ├── warn()      // 메서드 (경고 로그)
  ├── info()      // 메서드 (정보 로그)
  └── clear()     // 메서드 (콘솔 지우기)

IDE에서 확인하기

코드 에디터에서 console.을 입력하면:

javascript

console.  // ← 점을 찍으면 자동완성 목록 표시
```

**자동완성 목록:**
- 🟣 **log** - 메서드 (보라색 상자)
- 🟣 **error** - 메서드
- 🟣 **warn** - 메서드
- 🔵 **memory** - 속성 (파란색 상자)

보라색 상자는 메서드, 파란색 상자는 속성입니다!

## console.log()의 매개변수 이해하기

### 메서드 정보 확인하기

IDE에서 `console.log`에 마우스를 올리면 정보가 표시됩니다:
```
console.log(message?: any, ...optionalParams: any[]): void

이게 무슨 뜻일까요?

message?: any
- message: 매개변수 이름
- ?: 선택사항 (optional)
- any: 모든 타입 가능 (문자열, 숫자, 객체 등)
...optionalParams: any[]
- 추가로 여러 개의 매개변수를 받을 수 있음
- 개수 제한 없음
: void
- 반환값이 없음
- return을 사용하지 않음

여러 값을 한 번에 출력하기

javascript

let name = "Max";
let age = 32;
let city = "Seoul";

// 한 줄에 여러 값 출력
console.log(name, age, city);
```

**콘솔 출력 결과:**
```
Max 32 Seoul

쉼표로 구분해서 여러 값을 전달할 수 있습니다!

라벨과 함께 출력하기

javascript

let age = 32;
let adultYears = age - 18;

console.log("나이:", age);
console.log("성인 연수:", adultYears);
```

**콘솔 출력 결과:**
```
나이: 32
성인 연수: 14

무엇을 출력하는지 명확하게 알 수 있습니다!

다양한 값 타입 출력하기

문자열

javascript

console.log("Hello World");
console.log('안녕하세요');

콘솔에서: 문자열은 보통 흰색으로 표시됩니다.

숫자

javascript

console.log(42);
console.log(3.14);
console.log(-10);

콘솔에서: 숫자는 보통 보라색이나 파란색으로 표시됩니다.

불리언

javascript

console.log(true);
console.log(false);

콘솔에서: 불리언은 파란색으로 표시됩니다.

배열

javascript

let hobbies = ["sports", "cooking", "reading"];
console.log(hobbies);
```

**콘솔에서:** 배열은 펼쳐서 내용을 확인할 수 있습니다.
```
▶ (3) ['sports', 'cooking', 'reading']

화살표를 클릭하면 각 요소를 볼 수 있습니다!

객체

javascript

let person = {
  name: "Max",
  age: 32,
  greet() {
    console.log("Hello!");
  }
};

console.log(person);
```

**콘솔에서:** 객체도 펼쳐서 속성과 메서드를 확인할 수 있습니다.
```
▶ {name: 'Max', age: 32, greet: ƒ}

실전 활용 예제

예제 1: 함수 디버깅

javascript

function calculateAdultYears(userAge) {
  console.log("입력된 나이:", userAge);  // 입력값 확인
  
  let result = userAge - 18;
  console.log("계산 결과:", result);      // 결과 확인
  
  return result;
}

let myAdultYears = calculateAdultYears(32);
console.log("최종 값:", myAdultYears);
```

**콘솔 출력:**
```
입력된 나이: 32
계산 결과: 14
최종 값: 14

함수가 올바르게 작동하는지 각 단계를 확인할 수 있습니다!

예제 2: 객체 메서드에서 사용

javascript

let person = {
  name: "Max",
  age: 32,
  
  greet() {
    console.log("안녕하세요! 저는 " + this.name + "입니다.");
  },
  
  celebrateBirthday() {
    this.age++;
    console.log("생일 축하합니다! 이제 " + this.age + "살입니다.");
  }
};

person.greet();
person.celebrateBirthday();
```

**콘솔 출력:**
```
안녕하세요! 저는 Max입니다.
생일 축하합니다! 이제 33살입니다.

메서드 안에서도 자유롭게 console.log()를 사용할 수 있습니다!

예제 3: 계산 과정 추적

javascript

let calculator = {
  add(a, b) {
    console.log("더하기:", a, "+", b);
    return a + b;
  },
  
  multiply(a, b) {
    console.log("곱하기:", a, "×", b);
    return a * b;
  }
};

let sum = calculator.add(5, 3);
console.log("결과:", sum);

let product = calculator.multiply(4, 7);
console.log("결과:", product);
```

**콘솔 출력:**
```
더하기: 5 + 3
결과: 8
곱하기: 4 × 7
결과: 28

자신의 함수/메서드 정보 확인하기

IDE는 우리가 만든 함수와 메서드에 대한 정보도 제공합니다!

함수 정보 확인

javascript

function calculateAdultYears(userAge) {
  return userAge - 18;
}

// calculateAdultYears에 마우스를 올리면
calculateAdultYears(32);
```

**IDE가 보여주는 정보:**
```
function calculateAdultYears(userAge: any): number

의미:

userAge: any: 매개변수를 받음 (타입은 any)
: number: 숫자를 반환함

메서드 정보 확인

javascript

let person = {
  greet() {
    console.log("Hello!");
  }
};

// greet에 마우스를 올리면
person.greet();
```

**IDE가 보여주는 정보:**
```
greet(): void

의미:

(): 매개변수 없음
: void: 반환값 없음

이 정보들이 함수/메서드를 올바르게 사용하는 데 도움이 됩니다!

console의 다른 유용한 메서드들

console.error() - 에러 메시지

javascript

console.error("오류가 발생했습니다!");

콘솔에서: 빨간색으로 표시되어 눈에 띕니다.

console.warn() - 경고 메시지

javascript

console.warn("경고: 이 기능은 곧 제거될 예정입니다.");

콘솔에서: 노란색으로 표시됩니다.

console.clear() - 콘솔 지우기

javascript

console.clear();

콘솔의 모든 내용을 지웁니다.

console.table() - 표 형식으로 출력

javascript

let users = [
  { name: "철수", age: 25 },
  { name: "영희", age: 28 },
  { name: "민수", age: 30 }
];

console.table(users);

콘솔에서: 깔끔한 표 형식으로 데이터를 보여줍니다!

alert()는 언제 사용하나요?

alert()를 사용하는 경우

javascript

// ✅ 사용자에게 중요한 알림
alert("결제가 완료되었습니다!");

// ✅ 사용자 확인이 필요한 경우
alert("정말 삭제하시겠습니까?");

console.log()를 사용하는 경우

javascript

// ✅ 개발 중 디버깅
console.log("함수 실행됨");

// ✅ 변수 값 확인
console.log("현재 상태:", status);

// ✅ 코드 흐름 추적
console.log("1단계 완료");
console.log("2단계 시작");

원칙:

사용자를 위한 것 → alert()
개발자를 위한 것 → console.log()

중요한 주의사항

1. console.log()는 개발자만 볼 수 있습니다

javascript

console.log("비밀번호: 12345");  // 일반 사용자는 안 보지만...

주의:

대부분의 사용자는 개발자 도구를 열지 않습니다
하지만 누구나 열 수 있습니다
민감한 정보(비밀번호, 개인정보 등)는 절대 로그하지 마세요!

2. 실제 서비스에서는 제거하세요

javascript

// 개발 중
console.log("디버깅: 사용자 ID =", userId);

// 배포 전에 제거!

개발이 끝나면 console.log()를 제거하거나 주석 처리하세요.

3. 너무 많이 사용하지 마세요

javascript

// ❌ 과도한 로깅
console.log("함수 시작");
console.log("변수 a:", a);
console.log("변수 b:", b);
console.log("변수 c:", c);
console.log("계산 중...");
console.log("결과:", result);
console.log("함수 종료");

// ✅ 적절한 로깅
console.log("입력:", a, b, c);
console.log("결과:", result);

실전 디버깅 팁

팁 1: 구분선 사용하기

javascript

console.log("========== 사용자 로그인 ==========");
console.log("사용자명:", username);
console.log("로그인 시간:", loginTime);
console.log("====================================");

로그를 구분하기 쉬워집니다!

팁 2: 의미 있는 라벨 붙이기

javascript

// ❌ 나쁜 예
console.log(x);
console.log(y);

// ✅ 좋은 예
console.log("총 금액:", totalPrice);
console.log("할인 금액:", discount);
console.log("최종 금액:", finalPrice);

팁 3: 조건부 로깅

javascript

let debugMode = true;

function calculate(x, y) {
  if (debugMode) {
    console.log("계산 시작:", x, y);
  }
  
  let result = x + y;
  
  if (debugMode) {
    console.log("계산 결과:", result);
  }
  
  return result;
}

필요할 때만 로그를 볼 수 있습니다!

전체 예제: alert()에서 console.log()로 변환

Before: alert() 사용

javascript

let age = 32;

function calculateAdultYears(userAge) {
  let result = userAge - 18;
  return result;
}

let totalAdultYears = calculateAdultYears(age);
alert(totalAdultYears);  // 팝업 표시

age = 45;
totalAdultYears = calculateAdultYears(age);
alert(totalAdultYears);  // 또 팝업 표시

let person = {
  name: "Max",
  greet() {
    alert("Hello!");  // 또또 팝업 표시
  }
};

person.greet();

문제점: 팝업을 3번이나 닫아야 합니다! 😫

After: console.log() 사용

javascript

let age = 32;

function calculateAdultYears(userAge) {
  let result = userAge - 18;
  return result;
}

let totalAdultYears = calculateAdultYears(age);
console.log(totalAdultYears);  // 콘솔에 조용히 출력

age = 45;
totalAdultYears = calculateAdultYears(age);
console.log(totalAdultYears);  // 콘솔에 조용히 출력

let person = {
  name: "Max",
  greet() {
    console.log("Hello!");  // 콘솔에 조용히 출력
  }
};

person.greet();
```

**콘솔 출력:**
```
14
27
Hello!

장점: 한 번에 모든 결과를 볼 수 있고, 팝업을 닫을 필요가 없습니다! ✨

다음 단계

console.log()는 JavaScript 개발의 가장 기본적이면서도 강력한 도구입니다. 앞으로:

더 복잡한 디버깅 기법 배우기
브라우저 개발자 도구 깊이 활용하기
브레이크포인트(Breakpoint) 사용하기
실제 프로젝트에서 효과적으로 활용하기

이런 고급 기술들도 차근차근 배워나갈 것입니다!

핵심 정리

✅ console.log()는 콘솔에 값을 출력하는 메서드입니다

개발자 도구 콘솔에만 표시됩니다

✅ console은 브라우저 내장 객체입니다

javascript

console.log(value);     // 일반 로그
console.error(message); // 에러 로그
console.warn(message);  // 경고 로그
console.clear();        // 콘솔 지우기

✅ alert() vs console.log()

alert(): 사용자를 위한 팝업
console.log(): 개발자를 위한 로그

✅ 여러 값을 한 번에 출력 가능

javascript

console.log(value1, value2, value3);

✅ 모든 타입의 값 출력 가능

문자열, 숫자, 불리언, 배열, 객체 모두 가능

✅ 반환값이 없습니다 (void)

return이 없는 메서드입니다

✅ 개발 시 주의사항

민감한 정보는 로그하지 않기
배포 전 제거하기
적절히 사용하기

✅ 디버깅의 기본 도구

변수 값 확인
함수 흐름 추적
에러 원인 파악

console.log()는 JavaScript 개발자의 가장 친한 친구입니다! 지금부터 alert() 대신 console.log()를 적극적으로 활용하여 더 효율적으로 코드를 작성하고 디버깅하세요! 💪🚀

728x90

'front-end development' 카테고리의 다른 글

JavaScript DOM 완벽가이드 - Part 2: DOM 트리 구조 이해하기 (0)	2026.01.24
JavaScript DOM 완벽가이드 - Part 1: DOM이란 무엇인가? (개념 이해) (0)	2026.01.23
JavaScript 메서드(Method): 객체 안의 함수 활용하기 (0)	2026.01.22
main을 화면 중앙에 배치하려면? margin: auto vs text-align: center (0)	2025.09.13
인라인 요소의 두 종류 - 대체 인라인, 비대체 인라인 (0)	2025.09.10

현재글JavaScript console.log(): 개발자의 필수 도구

지식루프

경제, 영어, 사회, IT, 직장생활 등 지식을 공유합니다.

250x250

HTML, 이재명, 지식루프, 맥북, 코인, 주가전망, CSS, 영어공부, 건강, 직장인일병구하기, 커피한잔뉴스레터, 암호화폐, react, 윤석열, 자바스크립트, 주식, 지식루프영어, 트럼프, 기업분석, 직일구,

Today :
Yesterday :

« 2026/02 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28