02 개발자 도구 사용하기
2강에서는 브라우저의 개발자 도구(developer console)를 사용해 보겠습니다.
프런트엔드 웹 개발자에게 브라우저의 개발자 도구는 없어서는 안 되는 필수 도구입니다. 크롬뿐만 아니라 인터넷 익스플로러(Internet explorer), 파이어폭스(Firefox), 사파리(Safari) 등 다른 브라우저에서도 개발자 도구를 지원합니다.
Tip
프런트엔드 웹(Frontend web) 개발은 이름 그대로 웹 사이트를 구성할 때 가장 바깥에서 보이는 부분을 만드는 일이라는 뜻입니다. 프런트엔드가 ‘앞쪽’이라는 뜻이니까요. 한마디로 웹 사이트를 실행했을 때 우리 눈에 보이는 부분을 잘 개발하기 위한 기술이라고 생각하면 됩니다.
지금부터 개발자 도구를 사용해서 자바스크립트의 실행 결과를 어떻게 확인하고 활용하는지 알아보겠습니다. 또한 자바스크립트 코드가 어떤 순서로 실행되는지도 알아보겠습니다.
지난 강과 마찬가지로 HTML 페이지에서 실행할 자바스크립트 코드를 작성해 보겠습니다. 지난 강에서는 alert() 명령을 이용해 화면에 경고 창을 띄웠습니다. 오늘은 console.log() 명령을 이용해서 메시지를 출력해 보겠습니다.
1 서브라임 텍스트 3에서 File → New File을 누릅니다.