티스토리 뷰

Javascript/모던자바스크립트

[ 모던JS ] 코어 자바스크립트 - 자바스크립트 기본 (1 ~ 3)

서스포PAR 2022. 10. 25. 22:29

 

https://ko.javascript.info/

 

모던 JavaScript 튜토리얼

 

ko.javascript.info

 

 

 

 

💻 Hello, world! - ‘script’ 태그

✔ <script> 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있습니다.

 

<!DOCTYPE HTML>
<html>

<body>

  <p>스크립트 전</p>

  <script>
    alert( 'Hello, world!' );
  </script>

  <p>스크립트 후</p>

</body>

</html>

 

 

 

 

 

 

 

🔥 모던 마크업

<script type="text/javascript">
	<!-- ... 자바스크립트 내용 ... -->
</script>

 

✔ HTML4에선 스크립트에 type을 명시하는 것이 필수였습니다. 따라서 type="text/javascript" 속성이 붙은 스크립트를 어렵지 않게 찾을 수 있었습니다. 이젠 타입 명시가 필수가 아닙니다. 

 

 

🔮 외부 스크립트

<script src="/path/to/script.js"></script>

 

✔ 자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장할 수 있습니다. 이렇게 분해해 놓은 각 파일은 src 속성을 사용해 HTML에 삽입합니다.

 

✔ 복수의 스크립트를 HTML에 삽입하고 싶다면 스크립트 태그를 여러 개 사용하면 됩니다.

 

 

 

 

🚨 주의 🚨

- HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용합니다. 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋습니다.

- 여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용합니다.  이를 통해 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라집니다.

- <script> 태그는 src 속성과 내부 코드를 동시에 가지지 못합니다. 다음 코드는 실행되지 않습니다.

 

 

 

 

 

 

 

 

💖 코드 구조 - 문

alert('Hello');
alert('World');

 

✔ 문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미합니다.

 

✔ 코드엔 원하는 만큼 문을 작성할 수 있습니다. 이때, 서로 다른 문은 세미콜론으로 구분합니다.

 

 

 

 

 

🌟 코드 구조 - 세미콜론

alert('Hello')
alert('World')

 

✔ 줄 바꿈이 있다면 세미콜론(semicolon)을 생략할 수 있습니다.

 

✔ 자바스크립트는 줄 바꿈이 있으면 이를 ‘암시적’ 세미콜론으로 해석합니다. 이런 동작 방식을 세미콜론 자동 삽입(automatic semicolon insertion)이라 부릅니다.

 

대부분의 경우, 줄 바꿈은 세미콜론을 의미합니다. 하지만 '대부분의 경우’가 '항상’을 의미하진 않습니다.

 

 

alert(3 +
1
+ 2);

 

✔ 세미콜론 자동 삽입이 일어나지 않았기 때문에 6이 출력됩니다. 어떤 줄이 "+" 로 끝나면, 그 줄은 '불완전한 표현식’이므로 세미콜론이 필요하지 않다는 걸 직감하실 겁니다. 위 코드도 이런 의도로 동작합니다.

 

✔ 반면, 세미콜론이 정말로 필요하지만 자바스크립트가 이를 추정하지 ‘못하는’ 상황도 존재합니다.

 

 

 

 

 

🔊 코드 구조 - 주석

// 이 주석은 한 줄을 다 차지합니다.
alert('Hello');

alert('World'); // 이 주석은 문 다음 이어집니다.


/* 두 줄짜리 주석 예제
이것은 여러 줄의 주석입니다.
*/
alert('Hello');
alert('World');

 

✔ 한 줄짜리 주석은 두 개의 슬래시//로 시작됩니다.

 

✔ 여러 줄의 주석은 슬래시와 별표/*로 시작해 별표와 슬래시*/로 끝납니다.

 

✔ 단축키 :  Ctrl+Shift+/  or  Mac에서는 Ctrl 대신 Cmd를, Shift대신 Option을 사용.

 

 

 

 

 

 

💖 엄격 모드 - use strict

"use strict";

// 이 코드는 모던한 방식으로 실행됩니다.
...

 

✔ 지시자 "use strict", 혹은 'use strict'는 단순한 문자열처럼 생겼습니다. 하지만 이 지시자가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작합니다.

 

✔ use strict를 취소할 방법은 없습니다.

 

 

 

🙌 브라우저 콘솔

(function() {
  'use strict';

  // ...테스트하려는 코드...
})()

 

✔ 개발한 기능을 테스트하기 위해 브라우저 콘솔을 사용하는 경우, 기본적으로 use strict가 적용되어있지 않는다는 점에 주의하셔야 합니다.

 

✔ 'use strict’를 입력한 후, Shift+Enter키를 눌러 줄 바꿈 해 원하는 스크립트를 입력하면 됩니다. 아래와 같이 말이죠.

 

 

 

🚨  'use strict’를 꼭 사용해야 하나요 ?

- 모던 자바스크립트는 '클래스’와 '모듈’이라 불리는 진일보한 구조를 제공합니다(클래스와 모듈에 대해선 당연히 뒤에서 학습할 예정입니다). 이 둘을 사용하면 'use strict' 가 자동으로 적용되죠. 따라서 이 둘을 사용하고 있다면 스크립트에  "use strict" 를 붙일 필요가 없습니다.

-  코드를 클래스와 모듈을 사용해 구성한다면 "use strict"를 생략해도 됩니다. 그런데 아직은 이 둘을 배우지 않았으니 "use strict"를 귀한 손님처럼 모시도록 하겠습니다.

 

 

 

 

 

 

 

 

 

 

'Javascript > 모던자바스크립트' 카테고리의 다른 글

[ 모던JS ] 코어 자바스크립트 - 소개  (1) 2022.09.21
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함