[모던JS튜토리얼] 인트로

업데이트: March 27, 2022

태그: javascript, modernjs

카테고리: modernjs

INTRO

정의

자바스크립트는 웹페이지에 생동감을 부여하기위한 프로그래밍 언어.
JS로 작성한 프로그램을 Script라고 하는데, 이를 html에 작성하면 웹페이지 불러올 때 자동으로 실행된다.
스크립트는 특별한 준비나 컴파일이 필요하지 않다.
자바스크립트는 서버에서도 사용되고, 브라우저에서도 사용된다. 자바스크립트 가상 머신 엔진이 있으면 어디에서든 실행가능
브라우저엔 자바스크립트 가상 머신 엔진이 있다. |엔진 이름 | 사용| |—|—| |V8| Chrome, Opera| |SpiderMonkey| Firefox| |SquirrelFish| Safari| |ChakraCore| Edge| |Trident, Chakra|IE|

브라우저에서 할 수 있는 일

메모리, CPU같은 저수준 영역의 조작을 허용하지 않는다.
실행환경에 따라 영향을 받는다.
- Nodejs => 네트워크 요청, 파일 읽기 쓰기
- 브라우저 => 웹페이지 조작, 클라이언트와 서버간 상호작용

브라우저에서 할 수 있는 구체적인 예시

페이지에 HTML을 추가하거나 삭제, 스타일 수정
사용자의 행동에 반응(키입력, 마우스 클릭, 포인터 움직임 등)
네트워크를 통해 서버에 request를 날리거나, 파일 다운로드 및 업로드
쿠키를 가져오거나, 설정. 사용자에게 메시지 보여주기
로컬스토리지로 클라이언트 측에 데이터 저장

브라우저에서 할 수 없는 일

보안을 위해 몇 개 기능에 제약이 있다.

사용자가 브라우저 창에 파일을 끌어서 두거나, <input>태그를 통해 파일을 선택한 것 과 같은 특정상황이 아니면 디스크에 접근이 제약된다.
카메라, 마이크 등의 사용은 명시적인 허가가 필요하다.
동일 출처 정책(브라우저 내 탭과 창은 서로의 정보를 알 수 없다.)
페이지를 생성한 서버가 아닌 다른 사이트나 도메인에서 데이터를 받아오는 것은 불가능하다.

자바스크립트만의 강점

HTML, CSS와 완전 통합
간단한 일은 간단하게 처리
모든 브라우저에서 기본적으로 지원, 기본 언어로 사용된다.

자바스크립트 너머의 언어

사람마다 각기 다른 기능을 원하므로, JS의 문법이 모든 사람의 요구를 충족할 순 없다.

브라우저에서 실행되기 전에 JS로 변환할 수 있는 새로운 언어가 등장.

이름	특징
CoffeeScript	짧은 문법
TypeScript	자료형의 명시화, MS가 개발
Flow	자료형을 강제, TypeScript와 다른 방식, META가 개발
Dart	브라우저가 아닌 환경에서 동작하는 고유의 엔진 가짐, Google이 개발

위 중에 무엇을 하든, JS를 알아야한다.

명세서

튜토리얼 이외의 자료가 필요한 시점에 찾아볼 것들.

ECMA-262 명세서

자바스크립트라는 언어를 정의한다.
처음 보기엔 이해하기가 어려움 -> 일상적인 참고자료로는 불편함

메뉴얼

MDN

모질라 재단이 운영하는 MDN에 다양한 예제, 정보가 있다. JS뿐만아니라, HTML, CSS 등의 정보도 담고 있다.
함수, 메서드, 이벤트 등에 대해 예제로 설명하고 있어서 좋음.

호환성 표

특정 브라우저나 엔진이 내가 사용하려는 기능을 지원하는지 확인하기 위함.

caniuse

Helloworld

script 태그

<script>로 자바스크립트 프로그램을 HTML문서 대부분에 삽입할 수 있다.
스크립트 태그의 위치에 대한 설명은 How To Add JavaScript to HTML여기를 참고.

브라우저는 HTML을 읽으면서 DOM트리를 구성해나가다가 script태그를 만나면 안에 코드를 자동으로 처리한다.

<!DOCTYPE html>
<html>
  <body>
    <script>
      alert("Hello, world!");
    </script>
    <p>스크립트 끝</p>
  </body>
</html>

위의 HTML에선 브라우저가 스크립트 태그를 만나 alert를 브라우저에 발생시키는데, 확인버튼을 누르기 전까진 p태그가 생기지 않는 것을 볼 수 있다.

모던 마크업

더 이상 사용되지는 않지만, 오래된 코드에서 script의 attribute를 확인할 수 있다.

type 속성 HTML4 에선 script의 type을 명시했어야했는데, 모던 HTML표준에선 이 속성의 의미가 변경됨(JS 모듈에서 확인)
language 속성 현재 사용하고 있는 스크립트 언어를 나타낸다. 지금은 자바스크립트가 기본 언어이므로 속성의 의미가 퇴색됐다.
스크립트 전후에 위치한 주석 예전에는 모든 브라우저가 script태그를 읽을 수 있는 것이 아니었기에 이를 주석처리하기 위해 작성된 것. 15년간 모든 브라우저가 script태그를 읽을 수 있으므로 더 이상 사용되지 않는다.

외부 스크립트

대부분의 프로젝트에서 script를 파일로 소분해 가져오게된다.
분해한 각 파일을 src 속성을 사용해 HTML에 삽입한다.

<!DOCTYPE html>
<html>
  <body>
    <script src="alert.js"></script>
    <p>스크립트 끝</p>
  </body>
</html>

script태그의 경로에는 절대경로, 상대경로, 혹은 URL전체를 속성으로 사용할 수 있다.
스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋은데, 브라우저가 스크립트를 다운해 캐시에 저장하기 때문이다.
여러 페이지에서 동일한 스크립트를 사용하면 브라우저는 캐시로부터 스크립트를 가져온다.
src 속성이 있으면 script 태그 내부의 코드는 무시된다.

코드 구조

세미콜론

세미콜론으로 코드를 구분해 작성할 수 있다.

alert("Hello"); alert("World!"); 이렇게 한 줄에 작성할 수도 있지만, 가독성을 위해

alert("Hello");
alert("World!");

이렇게 작성한다.

줄바꿈이 있다면 세미콜론을 생략할 수 있다.
```
alert("Hello");
alert("World!");
```
JS는 줄 바꿈이 있으면 암시적세미콜론으로 인식한다.

모든 줄바꿈이 암시적 세미콜론은 아니다.
```
alert(3
+ 1 +
 2);
```
위와같은 코드에선 줄바꿈이 인식되지 않는다.

에러 예제
```
alert("error")
[1, 2].forEach(alert);
```
위와같은 코드는 아래와 같이 인식한다.
```
alert("error")[1, 2].forEach(alert);
```
자바스크립트는 대괄호 앞에 세미콜론이 없다고 가정하기에 세미콜론 자동삽입이 되지 않는다.

주석

한 줄짜리 주석은 두 개의 슬래시로 시작한다.
```
alert("Hello"); //Hello
alert("World!"); //World!
```

여러 줄의 주석은 /* ~ */로 작성한다.
```
alert("Hello"); /*Hello
alert("World!");
*/
```

중첩주석은 지원되지 않는다.

주석을 달아야 미래의 내가 알아본다.
많이 달자

엄격모드

use strict

ES5에서 기존 기능 중 일부가 변경되고, 새로운 기능이 추가되었다.
이에 따라 기존 코드들의 호환성 문제가 생기는데, 대부분의 변경사항은 기본적으로는 활성화되지 않는다.

하지만, use strict 지시자를 사용하면 이 변경사항이 활성화된다.

위치
1. 스크립트 최상단에선 해당 스크립트를 엄격모드로 실행한다.
2. 함수 상단에 작성되면 해당 함수만 엄격모드로 실행된다.

use strict를 사용하면 이전 방식으로 돌아갈 수는 없다.

권유 사항이다. 모던 JS에선 클래스와 모듈을 사용함에따라 use strict가 자동으로 적용된다. 이에 따라 use strict를 생략해도된다.

엘비