π 무λΆλ³ν console.log λ¨λ°: μ¬μ©μ νκ²½μ λ ΈμΆλλ λ―Όκ° μ 보μ μ±λ₯ μ ν
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);
// ...
}
}
}