콘솔로그 찍는 방법과 디버깅하는 방법

💡 핵심 요약 (TL;DR)

콘솔로그 찍는 방법과 디버깅하는 방법의 동작 원리를 이해하고 실제 프로젝트에 적용하기 위한 실무 가이드다. 그때 아주 유용하게 사용할 수 있는 것이 바로 console.log 찍기이다.

비전공자가 IT개발자로, 커리어전환기5

쌩초보를 위한 콘솔로그 찍는 방법과 디버깅하는 방법

코플릿문제를 풀다보면 도대체 어디서 잘못되었는지 궁금할 때가 있다.
그때 아주 유용하게 사용할 수 있는 것이 바로 console.log 찍기이다.

TWIL

• 콘솔로그찍는 방법

아래와 같은 예제 console.log를 찍어봤다.

function sumDigits(num) {
  let n = num.toString();
  let arr = n.split('');
  return arr.reduce(function(acc, curr, idx, original){
   console.log('-----------------')//=>줄긋기
   console.log('넘어온 값', acc)
   console.log('현재값', curr);
   if(curr === '-'){
     return acc;
  }
  if(original[idx-1] === '-'){
    return -(Number(curr)) + Number(acc);
  }
  else {
    return Number(curr) + Number(acc);
  }
 }, 0);
  console.log(value)
}

sumDigits(-123)
/*
-----------------
넘어온 값 0
현재값 -
-----------------
넘어온 값 0
현재값 1
-----------------
넘어온 값 -1
현재값 2
-----------------
넘어온 값 1
현재값 3

최종 값은 4
*/

• 위 예시에서 디버깅해서 풀어 써보면 아래와 같다

개발자도구에서 함수 아래부분에 그냥 debugger라고 적어주면 된다!
완전 쉬움

function sumDigits(num) {
  debugger;
  
  let n = num.toString();
  let arr = n.split('');
  return arr.reduce(function(acc, curr, idx, original){
   if(curr === '-'){
     return acc;
  }
  if(original[idx-1] === '-'){
    return -(Number(curr)) + Number(acc);
  }
  else {
    return Number(curr) + Number(acc);
  }
 }, 0);
}
sumDigits(-123)

콘솔로그는 에러난 코드 또는 알아 보고싶은 코드 바로 윗줄에 찍는 게 좋음

#TIL