자바스크립트는 프론트엔드 개발언어로 웹에 관련된 다양한 API가 자바스크립트 기반으로 제작되고 있다. 그러므로 웹페이지를 제작하고자 한다면 자바스크립트로 만들어진 다양한 기능들을 사용하기 위해 자바스크릡트를 알 필요가 있다.
개발에앞서 환경을 갖출 필요가 있다.
자바스크립트를 개발하는데있어 에디트플러스, 노트패드++, 아톰, 서브라임 텍스트, 브라켓, 웹스톰, 비주얼 스튜디오 코드 등의 다양한 툴이 이를 지원하지만
필자는 Microsoft사의 편집기 프로그램인 비주얼 스튜디오 코드(Visual Studio Code)를 사용할 것이다.
또한 개발한 프로그램을 확인하려면 브라우저가 필요한데 이는 chrome 브라우저를 쓰도록 한다.
[다운로드 링크]
chrome 브라우저는 개발자를 위한 강력한 도구를 갖추고 있다. 물론 다른 브라우저도 이를 지원하지만 필자는 크롬 브라우저를 선택하겠다.
크롬에서 지원하는 이 강력한 도구는 개발자 도구라고 불리며 다음은 이를 활성화 방법들이다.
1. 키보드에서 F12 혹은 ctrl + shift + i
2. 우측 상단의
개발자 도구를 보면 Elements, Console, Source 등의 패널이 있는데 다음은 패널의 기능을 설명한 표이다.
Elements |
HTML(Element), 요소에 적용된 스타일(CSS)을 검사할 수 있다. |
Console |
자바스크립트 오류 체크는 물론 디버깅(debugging)을 할 수 있다. |
Source |
브라우저가 자바스크립트 소스를 파싱(parsing)해오는 과정을 보여준다. 소스패널도 오류체크와 디버깅(debugging)을 할 수 있다. |
----추가예정----