[JS] 모던 JavaScript 튜토리얼#1 소개

자바스크립트란?

자바스크립트는 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어다. 자바스크립트로 작성한 프로그램을 script라고 부르며, 스크립트는 웹페이지의 HTML 안에 작성할 수 있다.

이렇게 작성한 스크립트는 웹페이지를 불러올 때 자동으로 실행된다.

자바스크립트는 브라우저 뿐만 아니라 서버에서도 실행이 가능하며, 자바스크립트 엔진(JavaScript engine)이 들어있는 모든 디바이스에서 동작한다.

 

엔진의 종류와 사용처는 아래와 같다.

• V8 : Chrome, Opera
• SpiderMonkey : Firefox
• IE : 버전에 따라 Tradent, Chakra

 

브라우저에서 할 수 있는 일

모던 자바스크립트는 메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않는다.

Node.js 환경에서는 임의의 파일을 읽거나 쓰고, 네트워크 요청을 수행하는 함수를 지원한다.

그리고, 아래와 같은 일도 할 수 있다.

• 페이지에 HTML 추가, 기존 HTML의 스타일 수정
• 마우스 클릭 등 사용자 행동에 반응
• 네트워크를 통한 서버에 요청보내기 (ex: AJAX)
• 쿠키 설정 또는 가져오기
• 클라이언트 측의 정보 저장(로컬 스토리지)

 

반대로, 보안을 위해 할 수 없는일도 존재한다.

브라우저에서 할 수 없는 일

• 파일을 다룰순 있으나 특정 상황에서만 파일 접근을 허용(ex: input태그를 통해 파일을 선택할 때)
• 브라우저 내 탭과 창은 서로 정보를 알 수 없다. (타 사이트나 도메인에서 데이터를 받아올 수 없다.
  => 원격 서버에서 HTTP헤더 등을 이용해 승인해 준다면 가능하다.

 

자바스크립트만의 강점

다양한 장점이 존재하지만 대표적으로 아래 3개를 소개하도록 한다.

• HTML/CSS와 완전히 통합 가능
• 간단한 일은 간단하게 처리할 수 있도록 도와줌
• 모든 주요 브라우저에서 동작, 기본언어로 사용됨

 

요 근래에는 브라우저에서 실행되기전 자바스크립트로 트랜스파일(Transpile, 변환)할 수 있는 새로운 언어들이 많이 등장했는데, 아래를 살펴보자.

• CoffeScript : 짧은 문법을 도입. Ruby♥
• TypeScript : 자료형의 명시화(strict data typing)에 집중하여 만든 언어. Microsoft 개발
• Flow : 자료형 집중. 그러나 TypeScript와는 다른방식. Facebook 개발
• Dart : 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어(ex: 모바일 앱). Google 개발

 

매뉴얼

MDN에는 다양한 예제와 정보가 있으니 적극 활용하도록 한다.

 

호환성 확인

자바스크립트는 새로운 기능이 정기적으로 추가되므로 특정 브라우저나 엔진이 내가 사용하려는 기능을 지원하는지 확인하려면 아래의 사이트에서 확인한다.

• https://caniuse.com/
• https://kangax.github.io/compat-table

 

 

https://ko.javascript.info/