[The RED : 프론트엔드 Back to the Basics] 6. 좋은 코드, 디버깅

posinity·2023년 6월 22일

1. 좋은 코드란?

간결하고 명확한 코드

주석으로 설명을 보조하는 것도 좋지만, 되도록이면 코드만 읽고도 의도를 알 수 있게 작성해야 한다.

리팩토링 - 마틴 파울러 책 추천. 2편은 자바스크립트 기반으로 되어 있어 더 좋다.

하나의 함수, 메소드, 클래스는 각각 명확한 하나의 책임만 지니도록 함.

이 코드를 접속사없이 한 문장으로 설명할 수 없으면 이 코드가 명확한지 다시 한번 고민해보자.

순환 복잡도(CC, Cyclomatic Complextity)

코드가 얼마나 복잡한지 측정하는 방법인데 코드 경로의 수를 더해서 복잡도 측정.
아주 간단히 말하면 분기가 발생하는 조건문, 반복문이 많아질 수록 복잡도 증가.
complexity-report라는 도구가 있긴 한데, 굳이 측정할 필요는 없다고 생각.

2. 디버깅

일반적인 디버깅의 단계

  1. 정상 시스템의 동작, 그러니까 기대하는 동작을 정의한다.
  2. 원인을 섣불리 추측하지 않고, 일단은 "모른다"고 생각하고 출발한다.
  3. 근본적인 원인을 알 때까지 최대한 많은 데이터를 모으며 현상을 관찰한다.
  4. 증상이 아닌 원인을 수정한다.

버그를 정의할 때 필요한 세 가지

  1. 재현 과정 : 프론트엔드는 브라우저를 리로드하든 버튼을 클릭하든, 어떤 식으로든 사용자의 액션이 있어야 발생하는 버그가 대부분. 또한 버그가 발생하는 플랫폼은 사용자의 환경이다. 시스템마다 미묘한 차이, 사용자가 웹 브라우저에 설치한 확장 기능, 사용자의 인터넷 환경의 느림이나 불안정 등으로도 버그가 생길 수 있음. 똑같은 환경을 재현하는 것이 중요함.

  2. 기대 동작 : 왜 이것을 에러라고 인식했는가?
    주문 버튼을 클릭했는데 주문 완료까지 3초가 걸렸다. 이건 에러일 수도 있고 아닐 수도 있다. 에러가 되려면 "결제는 1초 안에 완료되어야 한다"는 기대 동작이 있어야 한다.
    유의미한 버그가 되려면 "한국어 입력에 문제가 있다" (x) -> "'패스트캠퍼스'를 입력했는데 캠 부분의 받침이 분리되어야 캐ㅁ으로 된다" (o) 라고 제대로 작성해야 한다.

  3. 에러 메세지 : 주니어가 시니어로 가려면 에러 메시지를 잘 읽고 해석할 수 있어야 한다. 해석이라는 건 영어 메시지를 한국어로 번역하라는 의미가 아니라, 그 메시지가 내포하고 있는 의미까지 알아야 한다는 뜻이다.

profile
문제를 해결하고 가치를 제공합니다

0개의 댓글