[The Modern JavaScript] The JavaScript language - Code quality

둡둡·2022년 12월 27일
0

Modern-JavaScript

목록 보기
5/10

Debugging in the browser

  • 디버깅(debugging)은 스크립트 내 에러를 검출하고 제거하는 일련의 과정
  • 모던 브라우저에는 대부분 개발자 도구 안에 디버깅 툴 사용

The "Sources" panel

  • [F12] : Chrome 개발자 도구
  • Sources > panel
    • 파일 탐색 영역 : 페이지를 구성하는 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)를 트리 형태로 보여줌
    • 코드 에디터 영역 : 선택한 파일의 소스 코드를 보여줌, 편집 가능
    • 자바 스크립트 디버깅 영역 : 디버깅 관련 기능 제공

Console

  • [Esc] : 개발자 도구 콘솔 창
  • 콘솔 창에 구문(statements)을 입력하고 실행하면 결과 출력

Breakpoints

  • 중단점(breakpoint)은 자바 스크립트의 실행이 중단되는 코드 지점
    • 실행 중지된 시점에 변수가 담고 있는 값을 확인 가능(디버깅)
  • 코드 영역에서 중단하려는 코드 좌측의 줄 번호 클릭
    • 마우스 오른쪽 클릭하여 조건부 중단점(conditional breakpoint) 설정 가능

The command "debugger"

  • 스크립트 내 "debugger" 명령어 입력 시 중단점과 같은 기능

Pause and look around

  • 디버깅 영역의 하위 패널
    • Watch : 표현식을 평가하고 결과 출력
    • Call Stack : 코드를 실행하는 경로 표시
    • Scope : 현재 정의된 모든 변수
      • Local : 함수의 지역 변수
      • Global : 전역 변수

Tracing the execution

  • 디버깅 영역 상단 버튼
    • Resume : 스크립트 재실행 [F8]
    • Step : 다음 명령어 실행 [F9]
    • Step over : 다음 명령어 실행, 들어가진 않음 [F10]
    • Step into : 비동기 동작을 감지하여 코드로 진입 [F11]
    • Step out : 실행이 끝날 때까지 계속 진행 [Shift + F11]
    • 모든 중단점 활성화/비활성화
    • 예외 발생 시 코드 자동 중지 활성화/비활성화

Logging

  • console.log : 콘솔 출력
  • 적절히 활용하여 디버거 없이도 함수 내부 동작을 파악

Coding Style

Syntax

Curly Braces

  • 중괄호는 상응하는 키워드와 같은 줄에 작성, 앞에 공백 한 칸
  • 한 줄인 구문은 중괄호 생략 가능, 간단하고 짧은 경우
  • 길어지는 경우 새로운 줄에 분리하여 가독성을 높여야 함

Line Length

  • 가로로 길어지는 경우 여러 줄로 나눠 작성하는 것을 권장
  • 여러 줄의 문자열은 백틱(`)으로 묶을 수 있음
  • 일반적으로 최대 가로 길이 80자나 120자로 제한

Indents

  • 가로 들여쓰기 : 스페이스 두 개 또는 네 개(tab)
  • 세로 들여쓰기 : 논리 블록 사이에 코드 분리
    • 변수 선언, 반복문, 리턴문 사이에 빈 줄을 넣어 코드 분리
    • 세로 들여쓰기 없이 아홉 줄 이상 연속해서 쓰지 않도록 주의

Semicolons

  • 모든 구문의 끝에 세미콜론 넣는 것을 권장
  • 필요 없는 경우에는 자바 스크립트 엔진에 의해 자동으로 생략됨

Nesting Levels

  • 중첩 레벨이 높아지지 않도록 주의
  • 경우에 따라 return문을 조합하여 가독성을 높일 수 있음

Function Placement

  • 코드 구조
    • 헬퍼 함수(function)들을 모아 선언한 뒤 실행 코드
    • [권장] 실행 코드 먼저, 함수들은 그 다음에 선언
    • 실행 코드 위에서 필요한 함수를 같이 혼합하여 선언

Style Guides

  • '어떻게 작성할지'에 대한 전반적인 코드 규칙을 담은 문서
  • 주로 기존의 스타일 가이드를 선택하여 참조하는 편
  • 대표적인 스타일 가이드
    • Google
    • Airbnb
    • Idiomatic.JS
    • Standard.JS
    • etc.

Automated Linters

  • 작성한 코드가 스타일 가이드를 준수하고 있는지, 스타일 개선과 관련 제안을 받을 수 있는 도구

  • 주로 플러그인 형태로 에디터와 통합하여 사용 가능

  • 대표적인 Linter

    • JSLint
    • JSHint
    • ESLint

Comments

  • // 한 줄 주석
  • /.../ 여러 줄 주석
  • 코드가 어떻게, 왜 동작하는지 등에 대한 설명

Bad comments

  • 코드에서 무슨 일이 일어나는지에 대한 설명(explanatory)은 불필요
  • Recipe: factor out functions
    • 함수 내 코드 일부를 새로운 함수로 분리해야할 때도 있음
    • self-descriptive code
  • Recipe: create functions
    • 코드가 길고 늘어지는 경우, 일부 기능을 함수로 만들어 분리하면 더 나은 코드 구조가 될 수 있음

Good comments

  • Describe the architecture
    • 고차원 수준의 컴포넌트 개요, 컴포넌트 간 상호작용, 상황에 따른 흐름 제어 등에 대한 설명, 일종의 '조감도' 역할
  • Document function parameters and usage
    • 함수 사용 예시, 파라미터, 반환 값 정보 등
    • JSDoc, WebStorm
  • Why is the task solved this way?
    • 해결 방법을 담고 있는 주석은 이전 실수를 방지할 수 있게 함
  • Any subtle features of the code and where they are used?
    • 세밀한 기능을 수행하는 코드가 있는지, 어디에 쓰이는 지에 대한 설명

Ninja code

  • 코드 짧게 쓰기
  • 글자 하나만 사용하기
  • 약어 사용하기
  • 포괄적인 명사 사용하기
  • 철자가 유사한 단어 사용하기
  • 동의어 사용하기
  • 이름 재사용하기
  • 언더스코어 사용하기
  • 과장 형용사 사용하기
  • 외부 변수 덮어쓰기
  • 부작용이 있는 코드 작성하기
  • 함수에 다양한 기능 넣기

Automated testing with Mocha

  • 수동으로 테스트하는 경우 일부 놓칠 수 있음

Behavior Driven Development

  • BDD (Behavior Driven Development)
  • 테스트(test), 문서(documentation), 예시(example)
  • 명세서(specification) 또는 스펙(spec)을 통해 코드와 기능에 대한 자세한 설명과 테스트를 수행
    • describe, it, assert.*, etc.
  • 명세서 초안 및 기본적인 테스트 작성 > 코드 작성 > 명세서 테스트 수행 > 에러 코드 수정 및 개선 > 테스트 통과 (기능이 완성될 때까지 반복) > 개발 완료

Polyfills and transpilers

  • 자바 스크립트에 대한 새로운 제안이 정기적으로 등록 및 분석되고, 가치가 있다고 판단되면 최종적으로 명세서에 등록됨
  • 바벨(Babel) : 트랜스파일러(transpiler), 하위 코드 호환

"Code quality", by Ilya Kantor, 2007-2022, https://javascript.info/code-quality

profile
괴발개발라이프

0개의 댓글