자바스크립트 개발 환경 설정
편집 도구
웹문서를 다루고 그 안에 스크립트 코드를 넣어야 하기 때문에 웹문서를 편집할 수 있는 편집기가 필요하다.
코드 에디터를 사용하면 코드 자동완성, 문법 오류 감지, git 연동 등의 편리한 기능을 사용할 수 있고 가장 인기 있는 에디터는 마이크로소프트의 비주얼 스튜디오 코드(VS Code) 이다.
브라우저
모든 브라우저와 node.js는 자바스크립트 엔진을 내장하고 있으며 자바스크립트는 브라우저와 node.js 환경에서 실행할 수 있다.
브라우저의 호환성, 상호 운용성 등을 확인하기 위해서 브라우저는 웬만하면 모두 준비하는 것이 좋다.
개발자 입장에서는 개발자 도구가 편리해야하는데 크롬 브라우저가 제공하는 개발자 도구가 가장 막강하기 때문에 많이 사용된다.
개발자 도구는 웹개발에 유용한 다양한 기능을 제공한다. 자주 사용하는 개발자 도구 기능은 다음과 같다.
Elements : 로딩된 웹페이지의 DOM과 CSS 확인하고 편집하여 렌더링된 결과를 볼 수 있다.
Console : 로딩된 웹 페이지의 에러를 확인하거나 자바스크립트 소스에 포함된 console.log의 결과를 확인 할 수 있다.
Sources : 로딩된 웹 페이지의 자바스크립트 코드를 디버깅 할 수 있다.
Network : 로딩된 웹 페이지에 관련한 네트워크 요청 정보와 퍼포먼스 정보를 확인 할 수 있다.
Application : 웹 스토리지, 세션, 쿠키를 확인하고 관리 할 수 있다.
자바스크립트 코드 작성 영역
html에서 화면에 출력되는 것이 아닌 코드가 실행되는 영역을 위한 태그가 있는데 그것이 <script> 태그이다.
스크립트 코드는 head영역, body영역 어디에도 넣을 수 있고 여러번 넣을 수 있으며 한 곳에 몰아서 넣을 수도 있다.
<!DOCTYPE html>
<html>
<body>
<script src="/index.js"></script>
</body>
</html>
HTML parser가 script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다.
자바스크립트 실행이 완료되면 다시 HTML parser는 제어 권한을 받아서 브라우저가 중지 했던 시점부터 DOM 생성을 재개한다.
따라서 동기적으로 HTML, CSS, JavaScript를 실행하기 때문에 script 태그의 위치에 따라 블로킹이 발생하여 DOM 생성이 지연될 수도 있다.
어느 곳에 넣는지에 따라 장단점이 있지만 body 요소의 가장 아래에 자바스크립트를 넣는 것도 좋다.
HTML 요소들이 스크립트 실행으로 지연되지 않아서 페이지 로딩 시간이 단축되며 DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생하기 때문이다.
Live Server
HTML 파일을 브라우저에서 직접 열수도 있지만 경로 문제와 소스 코드를 수정 할 때마다 매번 새로고침을 해야 하므로 번거롭다. 이럴 때 vs code의 Live Server를 설치하면 가상 서버가 가동되고 이후 소스 코드를 수정 하면 변경사항이 가상 서버에 자동으로 반영된다.
'Frontend > JavaScript' 카테고리의 다른 글
| 자바스크립트 object 객체 (0) | 2023.03.21 |
|---|---|
| 자바스크립트 Array 객체 (0) | 2023.03.19 |
| 자바스크립트 연산자 (0) | 2023.03.17 |
| 자바스크립트 데이터 타입과 변수 (0) | 2023.03.14 |
| 자바스크립트의 탄생 배경 (0) | 2023.03.12 |
댓글