Posts [JS] 코어 자바스크립트 #1.1: 자바스크립트란?
Post
Cancel

[JS] 코어 자바스크립트 #1.1: 자바스크립트란?

자바스크립트란?

정의

  • 자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어이다.
  • 자바스크립트로 작성한 프로그램을 스크립트(script) 라고 부른다.
  • 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다.
  • 스크립트는 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있다.

자바스크립트를 사용하는 이유

  • 자바스크립트는 브라우저에서만 쓸 목적으로 고안된 언어이지만, 지금은 다양한 환경에서 쓰이고 있다. 브라우저뿐만 아니라 서버에서도 실행할 수 있다. 자바스크립트 엔진이있는 모든 디바이스에서 동작한다.
  • 자바스크립트 엔진이란 자바스크립트 코드를 실행하는 프로그램/인터프리터를 말한다.
  • 브라우저엔 ‘자바스크립트 가상 머신’이라 불리는 엔진이 내장되어 있다.
    • Chrome, Opera: V8
    • FireFox: SpiderMonkey
    • IE: Trident, Chakra
    • Microsoft Edge: ChakraCore
    • Safari: SquirrelFish

엔진 동작 원리

  1. parsing: 엔진(브라우저라면 내장 엔진)이 스크립트를 읽는다.
  2. complie: 읽어 들인 스크립트를 기계어로 전환한다.
  3. run: 기계어로 전환된 코드가 실행된다. 기계어로 전환되었기 때문에 실행 속도가 빠르다.
  • 엔진은 프로세스 각 단계마다 최적화를 진행한다.
    • 컴파일이 끝나고 실행 중인 코드를 감시하면서, 이 코드로 흘러가는 데이터를 분석하고, 분석 결과를 토대로 기계어로 전환된 코드를 다시 최적화하기도 한다.
    • 이러한 과정을 거치면 스크립트 실행 속도는 더욱 더 빨라진다.

브라우저에서 자바스크립트로 할 수 있는 일

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

브라우저에서 자바스크립트로 할 수 없는 일

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

  • 웹페이지 내 스크립트디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받을 수 있다. 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀있기 때문이다

    모던 브라우저를 사용하면 파일을 다룰 순 있으나 접근이 제한되어 있다. 단 사용자가 브라우저 창에 파일을 ‘끌어다 두거나’ <input> 태그를 통해 파일을 선택할 때와 같이 특정 상황에서만 파일 접근을 허용한다.

    카메라나 마이크 같은 디바이스와 상호 작용하려면 사용자의 명시적인 허가가 있어야 한다.

  • 브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없다. 그러나 도메인이나 프로토콜, 포트가 같은 경우에 한해 자바스크립트를 사용해 한 창에서 다른 창을 열 때는 예외가 적용된다.

    이러한 ‘동일 출처 정책(Same Origin Policy)’을 피하려면 두 페이지데이터 교환에 동의해야 하고, 동의와 관련된 특수한 자바스크립트 코드를 포함하고 있어야 한다.

  • 자바스크립트를 이용하면 페이지를 생성한 서버와 쉽게 정보를 주고받을 수 있다. 하지만 타 사이트나 도메인에서 데이터를 받아오는 건 불가능하다. 원격 서버에서 명확히 승인을 해주면 가능하다.

  • 브라우저 환경 밖, 예를 들어 서버라면 이러한 제약은 존재하지 않을 것이다.

  • 다만, 모던 브라우저에선 추가 권한 허가를 요청하는 플러그인이나 익스텐션 설치가 허용된다.

자바스크립트만의 강점

  • 브라우저 인터페이스를 만들 때 가장 많이 사용되지만 서버나 모바일 앱을 만드는 것도 가능하다.

  • HTML/CSS와 완전히 통합할 수 있다.
  • 간단한 일은 간단하게 처리할 수 있게 해준다.
  • 모든 주요 브라우저에서 지원하고, 기본 언어로 사용된다.

자바스크립트 ‘너머의’ 언어들

브라우저에서 실행 되기 전에 자바스크립트로 트랜스파일(transpile, 변환) 할 수 있는 새로운 언어들이 등장했다.

  • CoffeeScript: 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드를 작성할 수 있다.
  • TypeScript: 개발을 단순화 하고 복잡한 시스템을 지원하려는 목적으로 ‘자료형의 명시화(strict data typing)’에 집중해 Microsoft가 개발한 언어이다.
  • Flow: TypeScript처럼 자료형을 강제하는데, 다른 방식을 사용한다. Facebook이 개발하였다.
  • Dart: 모바일 앱과 같이 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어이다. Google이 개발하였다.
This post is licensed under CC BY 4.0 by the author.

학원 #44일차: 파일 입출력: byte stream

💻 HTTP #6: HTTP 메시지

Loading comments from Disqus ...