#1. [Javascript] 개발 환경 구축

2024-01-01 1 분 소요

브라우저 개발자 도구 이용하기

크롬에서 F12키를 눌러 개발자 도구를 표시합니다.

요소

html요소가 표시됩니다.

콘솔

간단한 자바스크립트의 결과를 확인할 수 있습니다. console 로 출력한 정보가 표시될 뿐만 아니라, 다음처럼 1 + 2를 입력하여 간단한 명령문을 실행하고 결과를 확인할 수 있습니다. 여러줄 입력을 원할땐 Shift + Enter키를 입력하면 됩니다.

console의 주요 함수는 다음과 같습니다.

항목	내용
`console.assert(표현식, obj1, obj2...)`	표현식이 `false`인 경우 전달된 `obj`들을 출력합니다. `true`인 경우 아무것도 하지 않습니다.
`console.dir(obj)`	`obj`를 상호 작용이 가능한 트리 형태로 출력합니다.
`console.log(obj1, obj2...)`	`obj`들을 출력합니다.
`console.warn(obj1, obj2...)`	경고 중요도로 `obj`들을 출력합니다.
`console.error(obj1, obj2...)`	에러 중요도로 `obj`들을 출력합니다.
`console.trace()`	스택 추적을 출력합니다.

소스

현 URL의 사이트 폴더 구조와 소스코드를 표시합니다.

Node.js는 Chrome의 V8 자바스크립트 엔진을 이용한 런타임 환경입니다. 이를 이용하면 브라우저외 환경에서 자바스크립트를 실행할 수 있으며, 서버 애플리케이션등에 많이 사용됩니다.

Node.js(https://nodejs.org/)에서 다운로드 받고 설치합니다.
다음처럼 잘 설치되었는지 버전을 확인합니다. npm은 Node.js를 설치할때 자동으로 설치되며, 웹페이지에서 패키지를 다운로드 받아 설치하는 역할을 합니다.
node를 실행하면 가상환경(REPL(Read Eval Point Loop))으로 코드를 직접 실행할 수 있습니다. 종료하려면 Ctrl+C를 2번 누릅니다.

test.js 새파일을 만들고 테스트 코드를 입력합니다.

 for (var i = 0; i < 3; ++i) {
     console.log("i값 : ", i);
 }

Code Runner

Code Runner를 이용하면 Ctrl+Alt+N을 눌러 빠르게 실행 결과를 확인할 수 있습니다.

Live Server

Live Server를 이용하면 브라우저 실행을 좀더 편하게 할 수 있습니다.

Activity Bar의 Extensions을 클릭하여 Live Server를 설치합니다.
그러면 상태 표시줄에 Go Live 버튼이 생깁니다.
index.html과 test.js를 작성합니다.
Go Live 버튼을 클릭하면, 버튼 캡션이 Port:XXXX와 같이 변경되며, index.html이 서버로 로딩되어 브라우저에 표시됩니다.
코드 수정후 저장하면 변경 내용이 즉시 반영되어 표시됩니다.
서버를 종료하려면 Port:XXXX을 클릭합니다.