📌 참고 사이트
자바스크립트란?
ko.javascript.info
📋 자바스크립트의 정의
웹페이지에 생동감을 불어넣기 위해 (동적으로 만들기 위해) 만들어진 언어
📍 스크립트
➡️ 자바스크립트로 작성한 프로그램이다.
➡️ 웹페이지의 HTML 안에 작성할 수 있다.
➡️ 웹페이지를 불러올 때 스크립트가 자동으로 실행된다.
➡️ 준비나 컴파일 없이 보통의 문자 형태로 작성과 실행이 가능하다.
📍 자바스크립트의 실행
➡️ 자바스크립트는 브라우저와 서버, 자바스크립트 엔진이 들어 있는 모든 디바이스에서 동작 가능하다.
➡️ 브라우저에는 '자바스크립트 가상 머신' 이라는 엔진이 내장되어 있다.
➡️ 엔진의 종류는 다양하고 각각의 코드네임을 가지고 있다.
ex) V8 (Chrome, Oprea 브라우저에서 쓰임), SpiderMonkey (Firefox에서 쓰임), ChakraCore (Microsoft Edge에서 쓰임), SquirrelFish (Safari에서 쓰임)
만약 'X 라는 기능은 V8에서만 지원한다.' 라는 식의 문장을 만나면 'X 기능은 Chrome과 Oprea에서만 지원하는구나.' 라고 생각하면 된다.
📍 자바스크립트 엔진
➡️ 자바스크립트 코드를 실행하는 소프트웨어 구성 요소이다.
➡️ 최초의 자바스크립트 엔진은 단순한 인터프리터(기계어로 번역 X, 한줄씩 읽어나가며 명령을 바로 실행)였지만 관련된 최신 엔진은 성능 향상을 위해 적시 컴파일(프로그램 실행 중 기계어로 번역)을 사용한다.
➡️ 브라우저에서 자바스크립트 엔진은 DOM (Document Object Model, HTML 문서를 트리 구조로 취급, 각 노드는 문서의 일부)을 통해 렌더링 엔진 (웹 페이지의 HTML 문서 및 기타 리소스를 시각적 표현으로 변환하는 역할)과 함께 실행된다.
JavaScript engine - Wikipedia
From Wikipedia, the free encyclopedia Implementation of JavaScript A JavaScript engine is a software component that executes JavaScript code. The first JavaScript engines were mere interpreters, but all relevant modern engines use just-in-time compilation
en.wikipedia.org
📍 자바스크립트 엔진의 동작
1️⃣ 파싱: 엔진이 스크립트를 읽는다.
2️⃣ 컴파일: 읽어 들인 스크립트를 기계어로 전환한다.
3️⃣ 실행: 기계어로 전환된 코드가 실행된다.
* 기계어로 전환된 코드는 실행 속도가 빠르다.
* 엔진은 각 단계마다 최적화를 진행한다. 실행 중인 코드로 흘러가는 데이터를 분석하고, 그것을 토대로 기계어 코드를 다시 최적화하기도 한다.
📋 브라우저에서 할 수 있는 일
➡️ 페이지에 새로운 HTML을 추가하거나 기존 HTML, 스타일 등을 수정하기
➡️ 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동(이벤트)에 반응하기
➡️ 네트워크를 통해 원격 서버에 요청을 보내거나 파일 다운로드, 업로드하기 (AJAX, COMET 등의 기술 사용)
➡️ 쿠키를 가져오거나 설정하기
➡️ 사용자에게 질문을 건네거나 메시지 보여주기
➡️ 로컬 스토리지를 이용해 클라이언트 측에 데이터 저장하기
* AJAX
클라이언트 측에서 다양한 웹 기술을 사용해 비동기식으로 웹 애플리케이션을 만드는 웹 개발 기술이다.
비동기식으로 만든다는 것은 앱이 기존 페이지의 표시 및 동작을 방해하지 않고 백그라운드에서 서버의 데이터를 보내고 검색할 수 있다는 의미이다.
빌트인 XMLHttpRequest(브라우저에서 서버로 HTTP 요청을 비동기적으로 전송하는 메서드를 포함하는 JS 클래스) 객체는 웹페이지에서 AJAX를 실행하는 데 사용되어 웹사이트가 페이지를 새로고침하지 않고 화면에 콘텐츠를 로드할 수 있게 한다.
요즘에는 구현 시 JSON을 사용한다.
Ajax (programming) - Wikipedia
Ajax (programming) - Wikipedia
From Wikipedia, the free encyclopedia Group of interrelated Web development techniques Ajax (also AJAX ; short for "Asynchronous JavaScript and XML")[1][2] is a set of web development techniques that uses various web technologies on the client-side to crea
en.wikipedia.org
* COMET
계속되는 HTTPS 요청을 통해 브라우저가 명시적으로 데이터를 요청하지 않고도 웹 서버가 브라우저에 데이터를 푸시할 수 있는 웹 애플리케이션 모델이다.
Comet (programming) - Wikipedia
Comet (programming) - Wikipedia
From Wikipedia, the free encyclopedia Web application model Comet is a web application model in which a long-held HTTPS request allows a web server to push data to a browser, without the browser explicitly requesting it.[1][2] Comet is an umbrella term, en
en.wikipedia.org
* 쿠키
사용자가 어떤 웹사이트를 방문할 경우 사용자의 웹 브라우저를 통해 인터넷 사용자의 컴퓨터나 다른 기기에 설치되는 작은 기록 정보 파일이다.
쿠키는 소프트웨어가 아니다.
HTTP 쿠키 - 위키백과, 우리 모두의 백과사전 (wikipedia.org)
HTTP 쿠키 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. HTTP 쿠키(HTTP cookie)란 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 사용자의 웹 브라우저를 통해 인터넷 사용자
ko.wikipedia.org
📋 브라우저에서 할 수 없는 일
보안을 위해 자바스크립트로 할 수 없는 기능들이 있다.
➡️ 메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않는다.
➡️ 웹페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행 시 제약을 받을 수 있다.
➡️ 카메라나 마이크 같은 디바이스와 상호작용하려면 사용자의 명시적인 허가가 있어야 한다.
➡️ 동일 출처 정책: 브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없다. (자바스크립트를 사용해 한 창에서 다른 창을 열 때는 제외 but 도메인, 프로토콜, 포트가 다르면 페이지 접근 불가)
➡️ 타 사이트나 도메인에서 데이터를 받아오는 것은 HTTP 헤더 등을 이용해 원격 서버에서 명확히 승인을 해주지 않는 이상 불가능
📋 자바스크립트만의 강점
➡️ HTML, CSS와 '완전히' 통합 가능
➡️ 간단한 일은 간단하게 처리 가능
➡️ '모든' 주요 브라우저에서 지원하고 기본 언어로 사용됨.
➡️ 브라우저 인터페이스, 서버, 모바일 앱을 만드는 것이 '모두' 가능
📋 자바스크립트 너머의 언어들
최근에는 브라우저에서 실행되기 전에 자바스크립트로 트랜스파일할 수 있는 새로운 언어들이 많이 등장하였다.
CoffeScript, TypeScript, Flow, Dart 등이 있고, 각 언어마다 고유한 기능을 제공한다.
모두 자바스크립트에 대한 이해가 있어야 한다.
'Javascript study' 카테고리의 다른 글
| 고정 소수점 방식과 부동 소수점 방식 (0) | 2023.07.03 |
|---|---|
| [Javascript] 변수와 상수 (0) | 2023.07.03 |
| [Javascript] 엄격 모드 (0) | 2023.07.01 |
| [Javascript] 코드 구조 (0) | 2023.06.30 |
| [Javascript] Hello, world! (0) | 2023.06.30 |
댓글