August 12, 2025

πŸ™ˆ λ¬΄λΆ„λ³„ν•œ console.log λ‚¨λ°œ: μ‚¬μš©μž ν™˜κ²½μ— λ…ΈμΆœλ˜λŠ” 민감 정보와 μ„±λŠ₯ μ €ν•˜

JavaScript
μ„±λŠ₯
λ³΄μ•ˆ
디버깅
Lint/Formatter
μ•„ν‚€ν…μ²˜
μ—λŸ¬μ²˜λ¦¬

Summary

console.logλ₯Ό ν”„λ‘œλ•μ…˜ μ½”λ“œμ—μ„œ μ œκ±°ν•˜μ§€ μ•ŠμœΌλ©΄ λ³΄μ•ˆ 취약점, μ„±λŠ₯ μ €ν•˜, μ½”λ“œ 가독성 μ €ν•˜ λ“±μ˜ λ¬Έμ œκ°€ λ°œμƒν•©λ‹ˆλ‹€. ν”„λ‘œλ•μ…˜ 배포 전에 console.logλ₯Ό μ œκ±°ν•˜κ±°λ‚˜, ν™˜κ²½ λ³€μˆ˜λ₯Ό μ‚¬μš©ν•˜μ—¬ μ œμ–΄ν•˜κ³ , λ¦°νŒ… 도ꡬλ₯Ό ν™œμš©ν•˜μ—¬ μžλ™ν™”ν•΄μ•Ό ν•©λ‹ˆλ‹€.

Why Wrong?

console.logλŠ” 개발 κ³Όμ •μ—μ„œ 디버깅을 μœ„ν•΄ 맀우 μœ μš©ν•˜μ§€λ§Œ, ν”„λ‘œλ•μ…˜ μ½”λ“œμ— λ¬΄λΆ„λ³„ν•˜κ²Œ 남겨진 console.logλŠ” μ—¬λŸ¬ 문제λ₯Ό μ•ΌκΈ°ν•©λ‹ˆλ‹€. 첫째, λ―Όκ°ν•œ 정보가 μ‚¬μš©μž μ½˜μ†”μ— λ…ΈμΆœλ˜μ–΄ λ³΄μ•ˆ 취약점을 λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€. λ‘˜μ§Έ, λΈŒλΌμš°μ € μ½˜μ†”μ— κ³Όλ„ν•œ λ‘œκ·Έκ°€ 좜λ ₯되면 μ„±λŠ₯ μ €ν•˜λ₯Ό μœ λ°œν•  수 μžˆμŠ΅λ‹ˆλ‹€. 특히 반볡적으둜 μ‹€ν–‰λ˜λŠ” μ½”λ“œ 블둝 내뢀에 console.logκ°€ μ‘΄μž¬ν•˜λ©΄ λ”μš± μ‹¬κ°ν•œ μ„±λŠ₯ λ¬Έμ œκ°€ λ°œμƒν•©λ‹ˆλ‹€. μ…‹μ§Έ, ν”„λ‘œλ•μ…˜ ν™˜κ²½μ—μ„œ λΆˆν•„μš”ν•œ λ‘œκ·ΈλŠ” μ½”λ“œμ˜ 가독성을 λ–¨μ–΄λœ¨λ¦¬κ³  μœ μ§€λ³΄μˆ˜λ₯Ό μ–΄λ ΅κ²Œ λ§Œλ“­λ‹ˆλ‹€.

How to Fix?

ν”„λ‘œλ•μ…˜ 배포 전에 λͺ¨λ“  console.log ν˜ΈμΆœμ„ μ œκ±°ν•˜κ±°λ‚˜, ν™˜κ²½ λ³€μˆ˜λ₯Ό ν™œμš©ν•˜μ—¬ 개발 ν™˜κ²½μ—μ„œλ§Œ λ‘œκ·Έκ°€ 좜λ ₯λ˜λ„λ‘ μ„€μ •ν•΄μ•Ό ν•©λ‹ˆλ‹€. console.debug, console.info, console.warn, console.error λ“± 둜그 λ ˆλ²¨μ„ ν™œμš©ν•˜μ—¬ μ€‘μš”λ„μ— 따라 둜그λ₯Ό κ΄€λ¦¬ν•˜κ³ , λΆˆν•„μš”ν•œ λ‘œκ·ΈλŠ” μ œκ±°ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€. λ˜ν•œ, eslint와 같은 λ¦°νŒ… 도ꡬλ₯Ό μ‚¬μš©ν•˜μ—¬ ν”„λ‘œλ•μ…˜ μ½”λ“œμ— λ‚¨μ•„μžˆλŠ” console.logλ₯Ό μžλ™μœΌλ‘œ κ°μ§€ν•˜κ³  μ œκ±°ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

Before Code (Bad)

function processUserData(user) {
  console.log('User data:', user); // ν”„λ‘œλ•μ…˜ ν™˜κ²½μ—μ„œ λ…ΈμΆœλ  수 μžˆλŠ” 둜그
  console.log('Processing started...');

  // ... λ³΅μž‘ν•œ 둜직 ...

  console.log('Processing completed.');
  return user;
}

function calculateSomething(data) {
 for (let i = 0; i < 10000; i++) {
    console.log(i);
    // ...
  }
}

After Code (Good)

function processUserData(user) {
  if (process.env.NODE_ENV === 'development') {
    console.debug('User data:', user); // 개발 ν™˜κ²½μ—μ„œλ§Œ 둜그 좜λ ₯
    console.debug('Processing started...');
  }

  // ... λ³΅μž‘ν•œ 둜직 ...

  if (process.env.NODE_ENV === 'development') {
    console.debug('Processing completed.');
  }
  return user;
}

function calculateSomething(data) {
  if (process.env.NODE_ENV === 'development') {
    for (let i = 0; i < 10; i++) { // 개발 ν™˜κ²½μ—μ„œλ§Œ 둜그 좜λ ₯, 반볡 횟수 μ€„μž„
      console.debug(i);
      // ...
    }
  }
}