[JavaScript(8)] 코드품질을 높이는 방법

 

 

안녕하세요~  경제적 자유입니다.

오늘은 JavaScript의 디버깅, 코딩 스타일, 주석, 닌자코드를 리뷰해보려고 합니다.

 

OverView

---

지금까지 변수, 함수, 배열 메서드, 객체 같은 문법을 공부했다면, 이제는 “코드를 어떻게 더 잘 작성하고, 어떻게 문제를 찾고, 어떻게 안정적으로 유지할 것인가?”를 생각해야 합니다.

 

하지만 조금 더 공부하다 보면 이런 고민이 생깁니다.

• “왜 에러가 났지?”
• “내 코드가 다른 사람이 봐도 이해될까?”
• “주석은 많이 쓰는 게 좋은 걸까?”
• “내 함수가 진짜 제대로 동작하는지 어떻게 확인하지?”
• “최신 문법을 쓰면 모든 브라우저에서 동작할까?”

오늘 다룰 내용은 바로 이런 질문들과 연결됩니다.

 

쉽게 말하면, JavaScript 문법이 “재료”라면, 디버깅, 코딩 스타일은 그 재료를 가지고 실제로 쓸 수 있는 좋은 프로그램을 만드는 방법에 가깝습니다.

 

추가로 더 자세히 공부하고 싶다면 아래 MDN 문서를 참고해보세요.

• 참고 링크: MDN - Array.prototype.forEach()

 

 

개념 설명

---

 

 

1. Chrome 디버깅이란?

Chrome 디버깅이란 Chrome 개발자 도구를 사용해서 JavaScript 코드가 실행되는 과정을 확인하고, 에러의 원인을 찾는 과정입니다.

 

JavaScript 코드는 위에서 아래로 실행됩니다.

그런데 코드가 길어지면 어느 순간 이런 문제가 생깁니다.

하지만 함수가 여러 개로 나뉘고, 조건문과 반복문이 섞이고, DOM 이벤트까지 들어가면 코드 흐름을 눈으로만 따라가기 어려워집니다.

 

이때 사용하는 것이 디버깅입니다.

 

디버깅은 단순히 에러를 고치는 것만 뜻하지 않습니다.

코드가 어떤 순서로 실행되는지, 변수에 어떤 값이 들어있는지, 어느 지점에서 예상과 달라지는지를 확인하는 과정입니다.

 

function introduce(person) { 
	const message = `안녕하세요, 
    저는 ${person}입니다.`; 
    
    debugger; //여기서 멈추게 됩니다.
    
    return message; 
    
} 


const result = introduce("상구"); 
console.log(result);

F12를 누르면 실행이 됩니다!

 

---

 

2. 코딩 스타일이란?

 

 

코딩 스타일이란 코드를 읽기 쉽고 일관성 있게 작성하기 위한 규칙입니다.

 

function greet(person){return "안녕하세요, "+person+"님";}

function greet(person) {
  return `안녕하세요, ${person}님.`;
}

 

둘 다 실행은 됩니다만!  두 번째 코드가 훨씬 읽기 쉽습니다.

 

코드를 나중에 다시 읽을 때, 또는 다른 사람과 협업할 때 이해하기 쉽게 만드는 중요한 습관입니다.

 

왜 필요한가?

 

개발자는 코드를 작성하는 시간보다 읽는 시간이 더 많습니다.

 

내가 오늘 작성한 코드도 한 달 뒤에 보면 남의 코드처럼 느껴질 수 있습니다.

그래서 코드는 컴퓨터만 이해하면 되는 것이 아니라, 사람도 이해할 수 있어야 합니다.

 

좋은 코딩 스타일은 다음과 같은 장점이 있습니다.

• 코드의 의도를 빠르게 파악할 수 있다.
• 실수를 줄일 수 있다.
• 협업할 때 충돌이 줄어든다.
• 디버깅이 쉬워진다.

 

const a = "상구";
const b = 20;

 

코드는 짧지만 의미를 알기 어렵기때문에 조금 더 명확하게 작성하면 좋습니다.

const userName = "상구";
const userAge = 20;

 

이렇게 작성하면 변수가 무엇을 의미하는지 바로 알 수 있습니다.

 

---

 

3. 주석이란?

 

 

주석이란 JavaScript 엔진이 실행하지 않는 설명용 문장입니다.

 

JavaScript에서는 주석을 두 가지 방식으로 작성할 수 있습니다.

 

// 한 줄 주석입니다.

/*
  여러 줄 주석입니다.
*/

주석은 코드에 설명을 남기기 위해 사용합니다.

하지만 주석은 많다고 무조건 좋은 것이 아닙니다.

 

좋은 코드는 먼저 코드 자체가 이해하기 쉬워야 합니다.

주석은 코드만으로 설명하기 어려운 의도, 배경, 주의사항을 보충할 때 사용하는 것이 좋습니다.

왜 필요한가?

 

• 왜 이런 방식으로 작성했는지 설명할 때
• 특정 로직의 의도를 남길 때
• 나중에 수정할 사람이 주의해야 할 내용을 알려줄 때
• 함수의 사용법이나 매개변수 정보를 설명할 때

 

 

---

4. 닌자코드란?

 

닌자 코드란 일부러 읽기 어렵게 작성한 코드를 비꼬는 표현입니다.

 

이름은 멋있어 보이지만, 실제로는 피해야 하는 코드입니다.

(근데 한번즈음은 아무도 이해하지 못하는 코드를 만들어보고 싶기는 합니다... 데헷..)

 

 

const x = p ? p[0] ? p[0] : "상구" : "상구";

 

위의 코드는 짧기는 합니다만, 한 번에 이해하기 어렵습니다.

 

코드를 작성한 사람은 “짧고 멋있다”고 생각할 수 있지만, 읽는 사람은 “이게 무슨 뜻이지?”라고 느낄 수 있습니다.

 

• 변수 이름이 너무 짧다.
• 조건문이 과하게 중첩되어 있다.
• 한 줄에 너무 많은 일을 한다.
• 같은 변수를 여러 의미로 재사용한다.
• 코드가 짧지만 의도가 보이지 않는다.

마무리

---

 

오늘은 JavaScript 코드를 더 잘 다루기 위한 개념들을 정리해봤습니다.

 

물론 JavaScript를 공부할 때는 변수, 함수 등 문법 자체가 더 중요하지만 실무 환경에서 함께 프로젝트를 할때는 깔끔하게 정리하는 것 일관된 규칙을 갖는 것이 매우 중요하다고 생각합니다.

 

이것을 위해서는 일관성있는 코딩스타일 필요시 적절한 주석을 달 수 있어야 하며 닌자 코드가 되는 일은 피해야 한다 생각합니다.

 

이런 일련의 모든 과정을 꼭 생각해서가 아니더라도 자연스럽게 되는 날까지... 

 

공부 화이팅!!