(크롬) 개발자 도구는 웹 개발에 다양한 기능을 제공한다.
Elements - 로딩된 웹 페이지의 DOM과 CSS를 편집하여 렌더링 된 뷰를 확인해 볼 수 있다. 단, 편집한 내용이 저장되지는 않는다.
Console - 로딩된 웹 페이지의 에러를 확인하거나 자바스크립트 소스코드에 포함시킨 console.log 메소드 결과를 확인해 볼 수 있다.
Sources - 로딩된 웹 페이지의 자바스크립트 코드를 디버깅 할 수 있다.
Network - 로딩된 웹 페이지에 관련한 네트워크 요청 (request) 정보와 퍼포먼스를 확인 할 수 있다.
Application - 웹 스토리지,세션,쿠키를 확인하고 관리 할 수 있다.
Console -
개발자 도구의 Console 패널은 자바스크립트 코드에서 에러가 발생하여 애플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴보아야 할 곳이다. 구현 단계에서는 에러가 빈번하게 발생하므로 항상 콘솔을 열어둔 상태에서 개발을 진행하는 것이 좋다. 콘솔을 열어두지 않으면 에러가 발생했는지 조차 알 수 없는 경우가 있다.
*HTML 안에 직접 스크립트를 작성하는 방식은 대게 스크립트가 아주 간단할 때만 사용 가능
( 스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에, 성능상의 이점이 있다. 여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용한다. 스크립트 파일을 한 번만 다운받으면 되는것.이를 통해 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라진다.)
<script type="text/javascript"><!--
...
//--></script>
외부 스크립트
<script src="/path/to/script.js"></script>여기서 /path/to/script.js는 사이트의 루트에서부터 파일이 위치한 절대 경로를 나타낸다. 현재 페이지에서의 상대 경로를 사용하는 것도 가능. 같은 폴더 내에 있는 파일인 "script.js"를 src="script.js"로 참조하는 것처럼.
URL 전체 속성으로도 사용가능
<script src="https:///lodash.js"></script>
복수의 스크립트를 HTML에 삽입하고 싶다면, 여러개의 스크립트 태그 사용
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
*src 속성이 있으면 태그 내부의 코드는 무시된다.
<script src="file.js"></script>
<script>
alert(1);
</script>엄격모드 - use strict
반드시 최상단에 위치시킬것.
"use strict";
// 이 코드는 모던한 방식으로 실행됩니다.
...strict 모드에서는 일반적인 JavaScript의 의미에 몇가지를 변경한다.
코드의 문제를 더 빨리 알리고 소스를 더 빨리 안내하므로, 디버깅에 유용.
비 strict모드의 동일한 코드보다 빠르게 수행할 수 있다.
발생가능한 에러를 예방한다.
변수
데이터를 저장할때 쓰이는 이름붙은 저장소이다. 온라인 쇼핑몰 애플리케이션을 구축하는 경우 상품이나 방문객 등의 정보를 저장할 때 변수를 사용한다.
javascript에서는 let 키워드를 사용해 변수를 생성한다.
let message;
message ='Hello'; // 문자열을 저장합니다.
alert(message); // 변수에 저장된 값을 보여줍니다.javascript에서는 변수 명명 시 두 가지 제약 사항이 있다.
1.변수명에는 오직 문자와 숫자, 그리고 기호 $ 와 _ 만 들어갈 수 있다.
2.첫 글자는 숫자가 될 수 없다.
let userName;
let test123;
let $ = 1; // '$' 라는 이름의 변수를 선언합니다.
let _ = 2; // '_' 라는 이름의 변수를 선언합니다.
alter($+_); // 3상수
변화하지 않는 변수를 선언할 땐, let 대신 const 를 사용한다.
const myBirthday = '21.09.1996';이렇게 const로 선언한 변수를 '상수(constant)'라고 부른다. 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생한다.
const myBirthday = '21.09.1996';
myBirthday = '00.00.2000'; // error, can't reassign the constant!대문자 상수
기억하기 힘든 값을 변수로 할당해 별칭으로 사용한다.
이런 상수는 대문자와 밑줄로 구성된 이름으로 명명한다.
const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";색상을 고르고 싶을 때 별칭을 사용할 수 있게 되었다
let color = COLOR_ORANGE;
alert(color); // #FF7F00var, let, const를 사용해 변수를 선언할 수 있다. 선언된 변수엔 데이터를 저장할 수 있다.
let – 모던한 변수 선언 키워드.
var – 오래된 변수 선언 키워드. 잘 사용하지 않는다.
const – let과 비슷하지만, 변수의 값을 변경할 수 없다.
변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어져야 한다.
