[JavaScript] 자바스크립트 학습 환경

[JavaScript] 자바스크립트 학습 환경

크롬(Chrome) 개발자 도구

• 단축키 : [F12]

패널 구성

• Elements
• HTML, CSS 코드를 볼 수 있다.

크롬 개발자 도구(Chrom developer tools)

• 화살표 아이콘 : 마우스 위치의 요소에 적용된 내용, 해당 코드의 위치 등을 확인할 수 있다.
• 모바일 아이콘 : 해당 페이지를 다양한 사이즈, 디바이스에서 구동되는 모습을 확인할 수 있다.

• Console
• 에러 메시지를 확인할 수 있다.
• 출력 코드를 이용해 콘솔에 메시지를 띄울 수 있다.
• Source
• 소스를 파싱해오는 과정을 보여준다.
• 파싱(parsing) : 저장된 값을 원하는 값으로 가공하여 읽어 옴
• 오류 체크 및 디버깅을 할 수 있다.

에디터(Editor)

• PC에서 기본 제공하는 Notepad(Win.-메모장, Mac-텍스트 편집기)에서도 가능하다.
• 가독성과 편의 기능을 위해 특화된 에디터를 사용한다.
• VS code(Visual Studio Code), Atom, Sublime Text etc.

VS code

• VS code의 이점
• 상대적으로 가볍다.
• 다양한 확장 기능을 이용할 수 있다.
• 다운로드 링크 : https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

확장 기능 설치

VS code 확장 기능(extend)