개요
효율적인 JavaScript 개발을 위해 3가지 측면의 지식이 필요하다.
- Write Code Efficiently (By IDE)
사용하는 IDE가 달라 이 부분은 생략했다.
- Find Help
- Use MDN!
모든 명령어를 외우는 것은 불가능하다. (많을 뿐 아니라 언어가 계속 발전하고 기능이 추가되므로.) 일반적인 언어의 원리와 코드 작성에 대해 학습하고, 구체적인 명령어나 특정 기능은 찾아서 사용할 수 있어야 한다.
- Debug Your Code
- Read and utilize error messages
- Use console.log() to gain insight into your code(flow)
- Use the Chrome debugging tools
발생한 오류를 찾고 해결할 수 있는 능력도 길러야 한다!
Find Help: 1. MDN
MDN Web Docs
- MDN: Mozilla Developer Network
- 지금은 Mozilla가 관리하는 사이트가 아니라, 여러 개발자가 힘을 모아 만든 웹 개발 참조 및 가이드 자료집.
- 구글 검색 시, 'MDN + 검색키워드'로 검색하면 좋다.
- ex.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/parseInt
- ex.
ECMAScript 표준
- 현재 개발 중이며 진행상화고 표준에 대해 문서화되어 있다.
- 개발자가 사용할 내용이 아니며, 브라우저 공급 업체에게 중요한 문서.
- 다만, 후방에서 어떤 작업이 이루어지고 있는지 궁금한 경우 참고 가능.
Debug Your Code
1. 오류 메시지
- 크롬 개발자 도구(
F12버튼으로 접근)의 콘솔 창에 뜨는 오류 메시지를 잘 읽어보자!- 시크릿 모드로 접근하면 페이지 변경이나 스크립트 실행 작업이 미치는 영향을 방지할 수 있다.
- 어느 부분에서 에러가 발생했는지도 바로 확인 가능하다.
- 붉은 동그라미를 누르면 바로 개발자 도구에서 '소스 코드'로 이동한다.
- 이는 브라우저가 런타임 동안 오류를 발견했음을 의미한다.
2. console.log
런타임 오류가 아니라 논리적 오류는 브라우저의 에러 메시지가 뜨지 않는다. (브라우저 입장에서는 정상 작동이므로) 이런 경우, console.log 디버깅을 이용해 코드의 흐름을 살펴볼 수 있다.
3. 중단점 사용 📌
크롬의 개발자 도구 중 Sources 파트에서 중단점을 활용할 수 있다.
중단점을 사용하면 브라우저가 특정 부분에서 코드 실행(Code execution)을 중지한다. 단, 모든 기록은 일시적으로 브라우저에 저장되므로, 새로고침 이나 함수가 종료되면 디버깅 설정은 모두 사라진다.
- 중단점을 설정하고 버튼을 누르면, 다음과 같이 노란색으로 중단 부분이 활성화된다.
- (노란색 중단 부분 전에 중단된다.)
- 커서를 올려놓는 것으로 객체가 담고있는 다양한 프로퍼티도 조회할 수 있다.
변수 값 조회를 통한 디버깅
한줄씩 코드를 내려가며 브라우저가 산출한 값을 확인할 수 있다. 만약 코드가 논리적 오류를 가지고 있다면, 이 디버깅을 통해 한줄마다 문제점을 갖고 있지 않는지 확인 가능하다.
중단점 버튼
- 첫번째 버튼: 중단점의 정지를 다시 진행시킬 수 있다.
- 두번째 버튼: 코드의 아랫줄로 이동한다. (메서드로 이동하지 않는다.)
- 세번째 버튼: 다음 함수로 이동한다. (메서드가 있는 경우 메서드로 이동한다.)
호출 스택
- 가장 위에 있는 것은 현재 실행중인 함수이고, 그 아래는 해당 함수를 호출하는 다른 함수다.
변수 조회
- 전역변수와 지역변수도 조회 가능하다.
- 여기서 변수를 직접 변경하고, 중단점 버튼으로 코드를 계속 진행하며 코드의 작동 여부를 확인할 수 있다.
감시자 watch
- Watch에 특정 변수를 등록하여 해당 변수의 변화 양상을 살펴볼 수 있다.
- 복잡한 표현식 (
enterdNumber + currentResult와 같은)을 추가하여 코드 실행될 때마다 결고를 추적하는 것도 가능하다.
조건부 중단점
- 중단점 설정부위에 우클릭한 후, Add conditional breakpoint...를 클릭해 조건부 중단점을 설정할 수 있다.
- 입력한 숫자가 99를 넘고 add 버튼을 누르는 경우 코드 진행이 중단된다.
- 입력한 숫자가 99를 넘지 않고 add 버튼을 누르는 경우 코드 진행이 중단되지 않는다.
이벤트 리스너 중단점
- 특정 이벤트에 중단점을 설정해 해당 이벤트가 발생할 때마다 코드 실행을 중단시킬 수 있다.
- Event Listener Breakpoints > Mouce > click을 체크해 클릭 시 정지되도록 설정 가능.
- 버튼 클릭 시 코드가 정지되나, 문서의 다른 곳을 클릭하면 정지되지 않는다.
- 이는, 버튼만 클릭 이벤트에 연결되어 있기 때문이다.
개발자 도구에서 직접 코드 변경
- 브라우저에서 직접 코드를 변경하고
ctrl + s를 하면 브라우저에만 저장이 된다.- app.js옆에 주의 표시가 뜨는데, 파일의 변경이 브라우저에만 있다는 주의 표시다.
- 브라우저에서 즉각적으로 코드의 정상 작동 여부를 확인할 수 있으나, 꼭 IDE에 코드를 옮겨 저장해야 한다.
Reference
Good Luck!