코어 자바스크립트(1) - 자바스크립트란?

gyeol2678·2022년 6월 3일
core JS

Summary

  • 정의
  • 브라우저에서 할 수 있는 일
  • 브라우저에서 할 수 없는 일
  • 강점
  • 연관 언어들

Javascript란?

정의

자바스크립트는 객체 기반의 프로그래밍 언어이자, 스크립트 언어이다. 웹페이지를 작성할 때 HTML, CSS와 함께 사용하고 컨텐츠를 바꾸거나 움직이는 등 동적 처리를 담당한다. 예를 들면, 웹페이지가 주기적으로 갱신되거나 사용자와 상호작용이 가능하도록 만들어주는 것이다.

자바스크립트로 작성한 프로그램을 script라고 부른다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다.

자바스크립트는 브라우저뿐만 아니라 서버에서도 실행할 수 있고, 이 외에도 '자바스크립트 엔진'이 들어있다면 모든 디바이스에서 동작이 가능하다. 특히 브라우저에는 '자바스크립트 가상머신'으로 불리는 엔진이 내장되어 있는데, 종류는 다음과 같다.

  • V8 - Chrome, Opera에서 사용.
  • SpiderMonkey - Firefox에서 사용.
  • Internet Explorer는 버전에 따라 'Trident - Microsoft Edge'나 'Chakra - Safari' 사용.

엔진 동작 기본 원리
1. (웹페이지에서) 내장 엔진이 스크립트를 읽는다(Parsing)
2. 읽은 스크립트를 기계어로 전환한다(Compile)
3. 기계어로 전환된 코드가 실행된다

브라우저에서 할 수 있는 일

자바스크립트는 기본적으로 메모리나 CPU 같은 Low-Level 영역의 조작을 허용하지 않는다. 애초에 이러한 접근이 필요치 않은 브라우저를 대상으로 만든 언어이기 때문이다.
자바스크립트의 능력은 실행 환경에 상당한 영향을 받는다. Node.js 환경에서는 임의의 파일을 읽거나 쓰고, 네트워크 요청을 수행하는 함수를 지원한다.
브라우저 환경에서는 웹페이지 조작, Client & Server의 상호작용에 관한 모든 일을 할 수 있다.
브라우저에서 자바스크립트로 할 수 있는 일은 다음과 같다.

  • 웹페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기
  • 마우스 클릭이나 포인터의 움직임, 키 눌림 등과 같은 사용자 행동에 반응하기
  • 네트워크를 통해 원격 서버에 요청을 보내거나 파일 다운로드/업로드(AJAX, COMET)
  • 쿠키 가져오기/설정하기, 사용자에게 질문을 건네거나 메시지 보여주기
  • Client 측에 데이터 저장하기(Local Storage)

브라우저에서 할 수 없는 일

브라우저는 보안을 위해 자바스크립트의 기능에 제약을 걸어놓았다. 이는 악성 웹페이지가 개인정보에 접근하거나 사용자의 데이터를 손상하는 것을 막기 위해 만들어졌다.

  • 웹페이지 내의 스크립트는 디스크에 저장된 임의의 파일을 읽기/쓰기/복사/실행할 때 제약을 받을 수 있다. 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀있기 때문이다.
    모던 브라우저를 사용하면 파일을 다루는 것은 가능하지만 접근은 제한되어 있다. 사용자가 브라우저에 파일을 '드래그 해오거나', <input> 태그로 파일을 선택할 때와 같이 특정 상황에서만 파일 접근을 허용한다
    카메라나 마이크 같은 디바이스와 상호 작용하려면 사용자의 명시적인 허가가 있어야 한다.
  • 브라우저 내의 탭과 창은 대개 서로의 정보를 알 수 없다. 그런데 자바스크립트를 사용해 한 창에서 다른 창을 열 때는 예외가 적용된다. 하지만 이 경우에도 Domain, Protocol, Port가 다르다면 페이지에 접근할 수 없다(Same Origin Policy)
  • 자바스크립트를 이용해 페이지를 생성한 서버와 정보를 주고받을 수 있지만, 타 사이트나 도메인에서 데이터를 받아오는 건 기본적으로 불가능하다. 이를 가능하게 하려면 HTTP 헤더 등을 이용해 원격 서버의 명확한 승인을 받아야 한다

자바스크립트만의 강점

여러 장점이 있지만 다음을 모두 지원하는 브라우저 연관 기술은 자바스크립트가 유일하다. 이 때문에 브라우저 인터페이스를 만들 때 가장 널리 사용되고 있고, 서버나 모바일 앱을 만드는 것 역시 가능하다.

  • HTML/CSS와 완전히 통합할 수 있다
  • 모든 주요 브라우저에서 지원하고, 기본 언어로 사용된다

자바스크립트와 연관된 언어들

자바스크립트가 모든 기능을 담아내진 못하기 때문에, 이에 파생해서 다양한 언어가 개발 됐다. 해당 언어들은 브라우저에서 실행 되기 전에 자바스크립트로 변환(transpile)된다.

  • TypeScript는 개발을 단순화하고 복잡한 시스템 지원을 목적으로 '자료형의 명시화(strict data typing)'에 집중해 만든 언어이다(feat. Microsoft)
  • Flow 역시 자료형을 강제하는데, TypeScript와는 다른 방식을 사용한다(feat. Facebook)
  • Dart는 모바일 앱과 같이 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어이다(feat. Google)

요약

  • 자바스크립트는 브라우저에서만 쓸 목적으로 고안된 언어이지만, 지금은 다양한 환경에서 쓰이고 있다
  • 오늘날 브라우저 환경에서 가장 널리 사용되는 언어이다. HTML/CSS와 완전한 통합이 가능하다
  • 자바스크립트로 '변환'이 가능한 언어들이 개발 됐고, 각 고유한 기능을 제공한다
profile
gyeol2678
이전 포스트

Ch_4_JS(6)

다음 포스트

코어 자바스크립트(2) - Hello, world!

0개의 댓글