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

 

JavaScript

자바스크립트는 웹페이지에 동적인 효과를 주기 위해 만들어진 프로그램이다.

자바스크립트로 작성한 프로그램이 스크립트이다.

웹사이트가 로딩된 이후에 CSS와 HTML 구성 요소들을 변경할 수 있게 해주고,

이를 통해 웹 페이지를 인터랙티브 하게 만들고, 

사용자의 참여도도 높일 수 있다.

 

자바 스크립트의 장점

- HTML/CSS와 완전히 통합할 수 있다.

- 간단한 일은 간단하게 처리할 수 있게 해준다.

- 모든 주요 브라우저에서 지원하고, 기본 언어로 사용된다.

 

이 세 가지를 모두 지원하는 브라우저 연관 기술은 JS뿐이다.

이를 이용해서 서버나 모바일 앱도 만들 수 있다.

 

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

자바스크립트로 트랜스파일이 가능한 언어 

1. Coffee Script

: 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드 작성이 가능,

Ruby 개발자들이 선호함

 

2. TypeScript

: 개발을 단순화하고 복잡한 시스템을 지원하려는 목적으로,

자료형의 명시화에 집중해 만든 언어로

Microsoft가 개발함

 

3. Flow

자료형을 강제하지만, Typescript와는 다른 방식이다.

Facebook이 개발

 

4. Dart

: 모바일 앱과 같이 브라우저가 아닌 환경에서

동작하는 고유의 엔진을 가진 독자적 언어

Google이 개발함.

 

http://blog.wishket.com/css-vs-html-vs-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%8C%80%EC%B2%B4-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%B8%EA%B1%B8%EA%B9%8C/

 

CSS (Cascading Style Sheets)

: HTML로 만들어진 문서의 스타일을 지정하는 방식을 규정하는 스타일 시트 언어이다.

웹 사이트를 시각적으로 화려하게, 매력적으로 보이게끔 기능을 제공해준다.

 

 

HTML (Hypertext Markup Language)

: 문서 및 웹 페이지가 표시되는 방법을 규정하는 언어이고,

블록을 구성하는 데 사용되는 언어이다.

HTML를 이용하면 웹페이지의 구조를 만들 수 있다.

 

 

HTML은 마크업(표기)언어이고,

CSS, JS는 HTML을 보강하는 언어이다.

---

마크업 언어 (Mark Up)

: 태그를 이용해서 문서나 데이터의 구조를 명시하는 언어를 지칭한다.

각 정보가 어떤 의미를 가지는 지 직관적이게 표시해주는 것이 바로 마크업이다.

 

예를 들자면,

홍길동 20162020 컴퓨터공학과

-> 이런식으로 작성하는 것보단,

 

이름 : 홍길동

학번 : 20162020

학과 : 컴퓨터공학과

-> 이렇게 홍길동은 이름이고, 20162020은 학번이며, 컴퓨터공학과는 학과에 해당한다는 것을

좀 더 직관적으로 파악하기 편하게끔 해주는 게

마크업에 해당한다.

 

<제목> 바로 실행해보면서 배우는 HTML/CSS </제목>
<부제목> 구름과 함께하는 쉽고 빠르게 배우는 HTML과 CSS </부제목>
<내용> HTML과 CSS의 전반적인 설명을 담은 내용 </내용>

---

스크립트 (Script)

스크립트는 연극에서의 스크립트를 따온 말이다.

배우의 대사를 중점으로 배우의 표정, 등장과 퇴장, 무대 장치등을 중심으로 지시해놓은 내용이다.

프로그래밍의 스트립트 언어는 기존에 이미 존재하는 소프트웨어를 제어하기 위한 용도로 쓰인다.

 

스크립트는 인터프리터(<->컴파일러) 방식에 사용하기 위해 나온 것으로,

응용 소프트웨어와 상호작용하면서 제어한다.

인터프리터 방식은 소스 코드를 직접 바로바로 실행하기에 디버깅이 편리하다.

 

디버깅(Debugging)

: 오동작 되는 현상을 해결하는 것이고,

오류들을 찾아내기 위한 테스트 과정이다.

이렇게 발생하는 버그들을 잡기 위해 지속적으로 업데이트를 한다.

 

스크립트 특징

1. 코드를 작성함과 동시에 인터프리터가 기계어로 번역하고 실행함

2. 실행 과정 상에 번역 과정이 포함되어 있기 때문에 속도가 느리다.

3. 문법적 제약이 일반적으로 적다.

4. 운영체제를 신경 쓸 필요 없이 한 번만 작성하면 된다.

 

---

컴파일 언어

: 소스 코드를 목적 코드로 옮기는 것이다.

번역과 실행이 따로 이루어진다.

컴파일러 = 번역기

 

컴파일 과정

소스 파일 (소스 코드) -> 번역 -> 실행 가능한 프로그램 생성(바이너리 파일) -> 실행 

 

컴파일러 장점

1. 속도가 빠르다 (런타임 빠름)

: 기계어로 수행하기 때문이다.

 

2. 보안이 높다

0과 1만으로 되어 있기 때문이다.

 

컴파일러 단점

1. 인터프리터에 비해 개발 속도가 느리다. ( = 빌드 시간이 오래 걸린다)

소스 코드를 조금만 수정을 가해도 컴파일을 다시 해야하기 때문이다.

 

---

인터프리터 언어

: 소스 코드를 한 줄씩 읽어 들이면서 동시에 번역하고 실행한다.

스크립트 언어가 대표적인 인터프리터 언어이다.

 

인터프리터 과정

소스 파일 -> 번역 and 실행

인터프리터에 의해 번역과 실행이 동시에 이루어지고,

실행 파일이라는 것이 존재하지 않는다.

 

인터프리터 장점

1. 개발 속도가 빠르다

: 그때 그때의 실행 결과를 바로 알 수 있다.

 

인터프리터 단점

1. 속도가 느리다.

: 한 줄마다 읽고 해석하여 수행하기 때문이다.

2. 보안성이 낮다.

: 코드를 열면 다 보이기 때문이다.

 

* 부가 설명 *

소스 코드 : 일정한 형식의 컴퓨터 명령

소스 파일 : 소스 코드가 저장된 텍스트 파일

---

컴파일러 & 링크 & 빌드 & 런타임

 

1. 컴파일러 (=번역가)

: 기계어로 자동 번역하는 프로그램

 

2. 링크

: 편리성을 위해 소스 코드를 다른 파일에 분리하고

이 파일을 모아 하나의 실행 가능한 파일을 만들면

이를 두고 파일들을 링크했다고 한다.

이 때 사용되는 프로그램이 링커이다.

 

컴파일러와 링커가 만든 목적 파일의 차이점

컴파일러는 생성한 목적 파일 실행 불가

링커가 생성한 파일은 실행 가능

 

3. 빌드

컴파일 + 링크 = 빌드

이 때 사용되는 프로그램이 빌더이다.

소스코드 작성 -> 컴파일 -> 목적 파일 생성 -> 목적 파일들을 링크 -> 실행 가능한 목적 파일 생성 

=> 이 모든 과정이 빌드이다.

 

4. 런타임

컴파일 과정을 마친 프로그램은 사용자에 의해 실행되고,

이러한 응용 프로그램이 실행되고 있는 동안의 동작을 런타임이라고 한다.

런타임 환경 = 프로그래밍 언어가 구동되는 환경

---

자바스크립트 런타임

: 자바스크립트 엔진, Web API, 콜백 큐, 이벤트 루프, 렌더 큐로 구성된다.

 

(크롬 기준)

1. 자바스크립트 엔진 : V8

- V8은 싱글 스레드를 제공한다.

(SpiderMonkey는 Firefox, ChakraCore는 Microsoft Edge, SquirrelFish는 Safari)

 

- 엔진 작동 원리-

(1) 엔진이 스크립트를 읽는다 (파싱)

(2) 읽어 들인 스크립트를 기계어로 전환한다. (컴파일)

(3) 기계어로 전환된 코드가 실행, 실행속도 빠름

=> 엔진은 프로세스 각 단계마다 최적화를 진행한다. 

컴파일이 끝나고 실행중인 코드를 감시하면서,

이 코드로 흘러가는 데이터를 분석하고,

분석 결과를 토대로 기게어로 전환된 코드를 다시 최적화하면서

스크립트 실행 속도는 더욱 빨라진다.

 

 

2. Web API

- 자바스크립트 엔진에서 정의되지 않았던 setTimeout이나 HTTP 요청 메서드, DOM 이벤트 등의

메서드를 지원한다.

 

3. 콜백 큐

: Web API 결괏값을 쌓아 두는 큐이다.

 

4. 이벤트 루프

: 콜 스택과 콜백 큐를 관찰하는 역할이다.

스택이 비어있으면 콜백 큐의 첫 번째 콜백을 스택에 쌓는다.

콜 스택이 비어있을 때까지 기다리다가 콜 스택이 비게 되면,

콜백 큐의 첫 번째 콜백을 스택에 쌓는다.

 

렌더 큐와 이벤트 큐의 차이점?

렌더 큐의 콜백의 우선순위가 더 높다. 

따라서 렌더 큐의 콜백이 먼저 콜 스택에 들어가게 된다.

 

---

※ 자바 스크립트 심화편 ※

 자바 스크립트는 싱글 스레드, 논-블로킹 언어이다.

 

싱글 스레드

하나의 힙 영역과 하나의 콜 스택을 가진다.

하나의 콜 스택을 가진다!?

-> 한 번에 한 가지 일만 할 수 있다. (정지-대기 방식과 비슷한 듯...?)

 

메모리 힙 

: 정보를 저장하는 공간, 메모리 할당이 발생하는 공간,

객체는 대부분 구조화 되지 않은 메모리 영역인 힙 영역 내부에 할당

 

콜 스택

: 실행 중인 코드를 트래킹 하는 공간,

자바 스크립트 코드 실행을 위해 제공된 싱글 스레드

메모리 힙에서 작업 수행에 필요한 것을 찾아 수행하는 공간

즉 함수의 호출 순서를 저장한다.

 

함수를 실행하면 스택의 가장 위에 해당 함수가 쌓이고,

함수에서 리터이 일어나면 스택의 가장 위쪽에서 함수를 꺼낸다.

 

 이미지 출처 :    https://new93helloworld.tistory.com/358  

---

콜 스택이 멈춘 상태 = 블로킹 상태

버튼을 클릭해도 반응이 없는 상태를 의미한다.

 

블로킹 해결 방법 : 논-블로킹, 비동기 콜백

 

 

 

 

---

참고 출처

ko.javascript.info/intro

자바스크립트란?

참고 출처 : edu.goorm.io/learn/lecture/16322/%ED%95%9C-%EB%88%88%EC%97%90-%EB%81%9D%EB%82%B4%EB%8A%94-html5-css3/lesson/805180/html%EC%9D%B4%EB%9E%80

구름EDU - 모두를 위한 맞춤형 IT교육

beomy.github.io/tech/javascript/javascript-runtime/

[JavaScript] 자바스크립트 런타임

beomy.github.io/tech/javascript/javascript-runtime/

[JavaScript] 자바스크립트 런타임