[JS] 자바스크립트 기초
정의
- 웹페이지에 생동감을 넣기 위해 만들어진 프로그래밍 언어. 한 마디로 웹 페이지를 동적으로 표현하기 위한 프로그래밍 언어.
- 자바스크립트로 작성한 프로그램을 스크립트(script)라 칭함
- 스크립트는 웹페이지의 HTML 안에 작성 가능하며, 웹페이지를 불러올 때 스크립트가 자동으로 실행됨.
- 특별한 컴파일 없이 보통의 문자 형태로 작성 및 실행이 가능함
- 이런 관점에서 자바스크립트는 자바와 매우 다른 언어임
자바와 자바스크립트 밈.
??? : 자바랑 자바스크립트랑 둘이 이름이 비슷하니 친구네용? 꺄르륵!
자바, 자바스크립트: (정색)
지나가는 설명자: 자바와 자바스크립트는 코끼리와 바다 코끼리 처럼. 둘이 완전 다른 애임.
(옆에서 본 남자친구가 이거 보더니 아싸가 인싸되고 싶어하는 글같다고 했다. 뻐큐!!)
아무튼. 위 짧은 대본처럼 자바스크립트는 자바와 다른 언어라는 것을 인지하면 됩니다.
왜 다른데 자바스크립트인가 의문이 있을 수 있는데, 쉽게 그 이유를 표현하자면 자바스크립트를 만든 사람이 자바 유명세에 숟가락 얹고자 서로 무관한 언어임에도 이름을 이렇게 지었다고 합니다.
- 자바스크립트는 서버에서도 실행 가능함.
여기까지 오기 전의 내용만 보았을떄, 자바스크립트는 브라우저에서만 작동할 수 있다고 착각할 수 있는데 아닙니다. 자바스크립트 엔진(JavaScript Engine)이라 불리는 프로그램이 있는 모든 디바이스에서도 동작 가능합니다.
브라우저에는 '자바스크립트 가상 머신'이라 불리는 엔진이 내장되어 있습니다. 종류로는 ( 엔진 - 브라우저 )
V8 - Chrome, Opera / SpiderMonkey - Firefox / IE - 버전에 따라 Trident 혹은 Chakra / ChakraCore - ME /
SquirrelFish - Safari
엔진의 동작.
1. [파싱] - 엔진(브라우저라면 내장 엔진)이 스크립트를 읽음
2. [컴파일] - 읽어 들인 스크립트를 기계어로 전환함
3. [실행] - 기계어로 전환된 코드가 실행됨 (기계어로 전환되어있기에 속도가 빠름)
엔진은 프로세스 각 단계마다 최적화를 진행함. 컴파일 후에도 실행 중인 코드를 감시하며, 코드로 흘러가는 데이터를 분석하고, 분석 결과를 토대로 기계어에 전환된 코드를 다시 최적화 하기도 하며, 스크립트 실행 속도를 더욱 높임.
브라우저에서 할 수 있는 일
- 메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않음 (애초에 이러한 접근이 필요하지 않은 브라우저를 대상으로 만들어진 언어임)
- 자바스크립트의 능력은 실행 환경에 상당한 영향을 받음.
Node.js 환경 : 임의의 파일을 읽거나 쓰고, 네트워크 요청을 수행하는 함수를 지원함.
브라우저 환경 : 웹 페이지 조작, 크랄이언트와 서버의 상호작용에 관한 모든 일을 함
- 브라우저 환경에서 할 수 있는 일
(1) 페이지에 새로운 HTML 추가 혹은 기존 HTML/스타일 수정
(2) 마우스 클릭, 포인터 움직임, 키보드 키 눌림 등 사용자 행동에 반응
(3) 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운/업로드 (ajax, comet과 같은 기술)
(4) 쿠키를 가져오거나 설정, 사용자에게 질문을 건네거나 메시지 보여주기
(5) 클라이언트 측에 데이터 저장하기 (로컬 스토리지)
브라우저에서 할 수 없는 일
- 보안을 위해 브라우저는 자바스크립트 기능에 제약을 걸어놓음
- 악성 웹페이지가 개인 정보에 접근하거나 사용자의 데이터 손상을 막기 위함
- 제약 사항
(1) 웹페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사/실행시 제약 받을 수 있음
--> 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀있기 때문
모던 브라우저를 사용하면서 파일을 다룰 수 있ㅋ으나, 접근은 제한되어 있음.
사용자가 브라우저 창에 파일을 끌어다 두거나, <input> 태그로 파일을 선택할 때와 같이 특정 상황에서만 파일 접근을 허용해야 함
카메라/마이크와 같은 디바이스와 상호 작용하려면 사용자의 명시적 허가가 있어야 함
(2) 브라우저 내 탭과 창은 대게 서로 정보를 알 수 없음. 허나 자바스크립트를 사용하면, 한 창에서 다른 창을 열 때 예외가 적용됨.
허나, 이 경우에도 도메인이나 프로토콜, 포트가 다르다면 페이지에 접근할 수 없음.
이런 제약사항을 '동일 출처 정책(Same Origin Policy)'라 부름. 이를 피하려면, 두 페이지는 데이터 교환에 동의해야 하며,
동의와 관련된 특수한 자바스크립트 코드를 포함하고 있어야 함.
이러한 제약사항은 사용자의 보안을 위해 만들어졌으며, http://anaysite.com에서 받아온 페이지가 http://gmail.com에서 받아온
페이지 상의 정보에 접근해 중요한 개인정보를 훔치는 것을 막기 위함.
(3) 자바스크립트를 이용하면 페이지를 생성한 서버와 쉽게 정보를 주고받을 수 있으나, 타 사이트나 도메인에서 데이터를 받아오는 것은
불가능함. 가능하다 하여도 원격 서버에서 명확한 승인을 해줘야 함. (http 헤더 등) 이 역시 보안을 위해 만들어진 제약사항.
브라우저 환경 밖. 예를 들어 서버라면 이러한 제약은 존재하지 않았을 것임. 다만, 모던 브라우저에선 추가 권한 허가를 요청하는
플러그인이나 익스텐션 설치가 허용됨.
자바스크립트만의 강점
1. HTML/CSS와 완전히 통합할 수 있음
2. 간단한 일은 간단하게 처리할 수 있음
3. 모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨
-> 위 세 가지를 모두 지원하는 브라우저 연관 기술은 자바스크립트뿐임.
이런 특징 때문에 자바스크립트는 브라우저 인터페이스를 만들 때 가장 널리 사용되고 있음
이 외에도 자바스크립트를 이용해 서버나 모바일 앱 등을 만드는 것도 가능함
요약
1- 자바스크립트 외에도 TypeScript가 있는데, 이는 개발을 단순화 하고, 복잡한 시스템을 지원하려는 목적으로 '자료형의 명시화(strict data typing)에 집중해 만든 언어. MS사가 개발함.
2- 자바스크립트는 브라우저에서만 쓸 목적으로 고안된 언어였으나, 현재는 다양한 환경에서 쓰이고 있음.
3- 오늘날 자바스크립트는 브라우저 환경에서 가장 널리 사용되는 언어로 자리매김함. html/css와 완전한 통합이 가능함.
4- 자바스크립트로 '트랜스파일'할 수 있는 언어는 많음. 각 언어마다 고유한 기능을 제공함. 자바스크립트를 숙달한 뒤 이 언어들을 살펴볼 것을 추천함.