스크립트 언어(scripting language)란 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어를 가리킨다. 스크립트 프로그래밍 언어라고도 한다. 스크립트 언어는 응용 프로그램과 독립하여 사용되고 일반적으로 응용 프로그램의 언어와 다른 언어로 사용되어 최종사용자가 응용 프로그램의 동작을 사용자의 요구에 맞게 수행할 수 있도록 해준다. 스크립트(scripts)는 연극 용어인 스크립트에서 유래되었으며 초창기 스크립트 언어는 배치언어(batch languages) 또는 작업 제어 언어(job control language)라고도 불리었다.
컴파일러
컴파일러 제작을 통해서 새로운 언어를 만들 수 있다. 언어의 규칙 및 실행되는 커맨드를 작성하여 컴파일러를 작성.
- 인터프리터 : 고급 명령어 → 중간 단계 언어 → 프로그램이 실행 (자바랑 비슷하내. JVM이 바이트코드를 실행)
- 컴파일러 : 고급명령어 → 기계어
디버그
개발자 도구
- 도구 자체에서 커맨드 실행 가능.
alert
console.log
Javascript, Jquery
자바스크립트는 브라우저 내에 DOM 조작
JQUERY는 자바스크립트 라이브러리
- 선택자 기능
- HTTP 통신 AJAX 기능
Introduce
자바스크립트는 싱글 스레드 기반으로 Java, C, Python 과 다르게 먼저 실행된 코드가 완료되기 전에 해당 코드보다 나중에 실행된 코드가 더 먼저 끝날 수 있다.
다음의 코드의 결과는 1, 2 순서로 출력이 된다. b() 함수를 먼저 호출했는데도...
function a () {
setTimeout(() => {
console.log("1");
}, 1000);
}
function b() {
setTimeout(()=> {
console.log(2);
}, 3000);
}
b();
a();
// 1
// 2Call Stack
자바스크립트 엔진은 메모리 힙과 단일 Call Stack을 가지고 있다. 그래서 한 번에 단 하나의 함수만 처리 할 수 있다.
다음의 코드를 보자.
function a() {
b();
console.log("a");
}
function b() {
console.log("b");
}
a();
// b
// a해당 코드에서는 Call Stack 에 다음과 같이 쌓인다.
- a() :
a() 함수를 제일 먼저 호출했기 때문이다. - a() -> b() :
a() 함수 내부에서 제일 먼저 b() 함수를 호출했기 때문이다. - a() -> b() -> console.log("b") :
b() 함수 내부에서 제일 먼저 console.log("b")를 호출했기 때문이다. - a() -> b()
- a()
- a() -> console.log("a")
- a()
- 종료
이런 식으로 작동을 하지만, 자바스크립트에서는 자바스크립트 엔진만으로 동작하는게 아니라, Web API, Task Queue, Event Loop 도 함께 동작을 한다.
CallStack, Web API, Task Queue, Event Loop
브라우저
- 브라우저도 결국 하나의 프로그램일 뿐이다. 정확히 인지할 것.
- 스크립트 → 인터프리터 → 엔진위에서 실행
- javascript를 통해서 DOM 조작
- Jquery는 자바스크립트 라이브러리
렌더링 엔진 동작 과정
HTML 문서 파싱 → DOM 트리 생성 (컨텐츠 트리) → CSS 파싱 → 렌더 트리 구축 → 렌더 트리 배치(위치배정) → 렌더 트리 그리기
- 크롬은 c++로 개발되었음.
- DOM 트리는 스크립트가 조작하는 오브젝트
- 렌더트리는 화면에 그림을 그리기 위한 오브젝트
- 단계별 진행이 아닌 점진적 진행을 함. 더 나은 사용자 경험을 위해서 (병렬처리)
⇒ 데이터 파싱을 통해서 화면을 그리고, 자바스크립트를 자바스크립트 엔진을 실행 DOM 조작, WEB API 실행
Web API 는 브라우저에서 제공되는 API 로 주로 Ajax, Timeout 등의 비동기 작업을 수행한다. 그래서 자바스크립트에서 setTimeout 과 같은 함수를 실행하면 다음과 같이 동작한다.
- 자바스크립트를 인터프리터로 해석 후 자바스크립트 엔진이 실행.
- 자바스크립트 엔진에서 Web API 로 setTimeout 함수와 함께 콜백까지 전달. 전달 뒤 Call Stack 에서 제거
- Web API에서 setTimeout 함수를 실행
- 완료와 동시에 Task Queue 전달 및 Web API 에서 제거
- Event Loop 가 Call Stack 이 비어있는지 (실행 중인 작업이 있는지), Task Queue에 Task 가 존재하는지 판단해 Task Queue 의 작업을 Call Stack에 옮긴다.
위와 같은 과정을 반복한다.
이런 식으로 해서 자바스크립트가 비동기적으로 진행된다는 것이다. 어쨌든 코드 실행은 순서대로 하는 것 같다. 결과가 보장이 안 될뿐~
