https://ko.javascript.info/code-quality
chrome으로 디버깅 하기
'sources'패널
- 파일탐색 영역 - 페이지를 구성하는 데 쓰인 모든 리소스(HTML, CSS, JS, img 등)를 트리 형태로 보여준다. extension이 나타날 때도 있다.
- 코드 에디터 영역 - 리소스 영역에서 선택한 파일의 소스코드를 보여준다. 소스 코드 편집도 가능하다.
- JS 디버깅 영역 - 디버깅에 관련된 기능 제공
콘솔
구문(statement)입력으로 실행하면 결과 출력
console.log(...) 함수로 콘솔에 출력 가능
중단점(breakpoint)
js의 실행이 중단되는 코드 내 지점, 실행이 중지된 시점에 변수가 어떤 값을 담고있는지 알수 있다. 실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있다.
- 항목을 클리해 해당 중단점으로 바로 이동
- 체크 박스 선택해제로 해당 중단점 비활성화
- 마우스 오른쪽 버튼으로 중단점 삭제 가능
- 마우스 오른쪽 버튼으로 조건부 중단점(conditional breakpoint)을 설정할 수 있다. Add conditional breakpoint를 클릭 후 작은창에 표현식을 입력하면, 표현식이 참인 경우에만 실행을 중지.
- 스크립트에
debugger;해주면 중단점 설정한 것과 같은 효과가 된다.
멈추면 보이는 것들
Watch- 표현식을 평가하고 결과를 보여준다.Call Stack- 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시Scope- 현재 정의된 모든 변수 출력
실행 추적 키
코딩 스타일
개발자는 가능한 한 간결하고 읽기 쉽게 코드를 작성해야 한다.
- 문법
- 중괄호
- 가로 길이
- 들여쓰기
- 세미콜론 ;
- 중첩레벨 적게,
continue로 깊어지는거 방지 - 함수의 위치 - 코드를 먼저, 함수는 그 다음에 선언
- 스타일 가이드 참고 - 코드를 어떻게 작성할지 전반적인 규칙을 담은 문서
- Linter로 정리
주석(comment)
좋은 코드에는 주석이 필요가 없다. 주석없이 코드 자체로 코드가 무슨 일을 하는지 쉽게 알수 있어야 한다.
리팩토링 팁
- 함수 분리 : 함수 내 코드를 자기 설명적인 새로운 함수로 명명
- 함수 만들기 : function 이름으로 깔끔하게 정리되게 가시화
좋은 주석
- 고차원 아키텍처를 설명하는 주석
- 함수 용례와 매개변수 정보를 담고있는 주석 (JSDoc)
- 문제 해결 방법 선택에 대한 설명 주석
안좋은 주석
- '코드가 어떻게 동작하는지'
- '코드가 무엇을 하는지'
닌자 코드 (지양)
- 무의미한 짧은 코드
- 가시성 떨어지는 변수
- 변수명 재사용
- 외부 변수 덮어쓰기
- 여러기능의 함수
테스트 자동화와 Mocha
BBD (Behavior Driven Developmenet)
테스트(test) + 문서(documentation) + 예시(example)
코드 작성 전에 코드가 무슨 일을 하는지 자연어로 표현한 명세서(specification)을 산출한다.
describe("pow", function() { // 구현 기능 설명
it("주어진 숫자의 n 제곱", function() { // 유스 케이스 설명
assert.equal(pow(2, 3), 8); // 실행 or error 반환
});
});개발 순서
- 명세서 초안작성, 초안 테스트
- 명세서 초안에 따라 코드 작성
- Mocha로 명세서 실행
- 테스트에 맞는 초안 완성
- 명세세서에 고려하지 않았던 유스케이스 추가후 테스트
- 테스트 모두 통과할때 까지 코드 수정
- 기능이 완성될떄 까지 반복
반복적인(iterative) 성격을 지닌다. 마지막엔 완전한 코드와 테스트를 확보할수 있다.
스펙 실행
- Mocha : 핵심 테스트 프레임워크,
describe,it같은 테스팅 함수와 테스트 실행 관련 주요함수 제공 - Chai : 다양한 assertion 제공
- Sinon : 함수 정보 정리, 내장함수 등 모방
셋다 브라우저 ssr에서 사용 가능
폴리필 (polyfill)
js가 진화하면서 새로운 제안(proposal)이 생기면 명세서에 등록된다. 모든 js엔진이 모든 기능을 구현하지 않기 때문에 바벨(babel)을 사용한다.
- 트렌스파일러
바벨은 코드를 재작성해주는 트랜스파일러 프로그램으로, 새로운 문법이 포함된 기존 코드를 구 표준 코드로 변경해준다. 웹팩(webpack)등의 모던 프로젝트 빌드 시스템은 코드가 수정 될 때마다 자동으로 트랜스파일러 해준다.
- 폴리필
js는 동적인 언어로 원하는 함수를 스크립트에 추가 할수 있고 기존 함수를 변경 할수도 있다. 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 폴리필이라고 한다.
To Infinity, and Beyond!