J.S의 동작원리/ 인터프리터? 호이스팅? 실행순서? -자스01-

오늘 다룰 내용:

• 학습 방법
• 역사와 정의에 대해서 간략히 알아보자!
• 변수와 실행 순서를 알아야 전문 지식이 늘어난다!

자신의 능력을 살짝 넘어서는 도전이 의도적 연습입니다.
"너무 쉬운 도전은 지루하고 너무 무모한 도전은 불안감만 줍니다."
-
무엇을 모르고 무엇을 아는지는 [시행착오]에서 부터 나오니 명심.

 

학습 방법

지속적인 향상을 위해
동작원리-> 코딩스킬 -> 프로젝트 사이클을
항시 마음 속에 새기고 실천하는 것이
코딩에 가장 도움되는 학습 법이다!

-모던 자바스크립트-

 

 

 

역사와 정의

 

01. 역사

간단하게 알고 있으면 좋을 자바스크립트에 역사를 쭉 훑어 보자!

 

먼저, 자바스크립트는 웹페이지에 보조적 기능을 담당하는 언어로서 경량프로그램에 속하는 프로그래밍 언어였으며 Branden Eich(브랜던 아이크)에 의해 만들어 졌다.

 

처음 출시 되었을때는 우리가 알고 있는 자바스크립트라는 이름이 아니였다. 아래 참조.

모카(Mocha)                      ->

라이브 스크립트(Live Script)       ->

자바스크립트(Java Script)

                                                       1996년 3월부터 12월까지 바뀐 이름 순서이다.

90년대에 웹페이지(HTML)사용시 무언가를 클릭하거나 업데이트, 이동을 할때에는 전체적으로 모든 요소를 리로딩 해야만 했고 이러한 구조적 로딩 지연은 다소 좋지 않은 웹 퍼포밍 이슈가 되었다. 1999년 서버와 브라우저가 비동기 방식으로 데이터를 교환하는 방식인 "Ajax 혹은 XMLHttpRequest" 등장하여 이를 해결하기에 이르렀으며. 이는 J.S언어를 사용한 비동기 방식에 시작이 되었다.

 

이를 통해 브라우저에 적용되는 JS들이 생겨 났고, 원조인 넷스케이즈와 마이크로 소프트사가 각자에 브라우저에 JS를 도입하기 시작하였지만 서로의 경쟁으로 인해 어떠한 웹페이지는 넷스케이즈에서 사용이 되지만 타사는 되지 않고 반대의 경우도 생겨나게 되었다. 이것이 Cross Browsing Issue에 대표적 예로 많은 소비자들이 불편을 제기하였던 큰 문제중 하나였다.

 

이를 해결하기 위해 우리가 주변에서 많이 듣는 ECMA 라는 이름으로 표준화된 JS를 사용하게 되었으며, JS의 특징인 DOM에 대한 어려운 접근성을 해결하기 위해 JQuery라는 것이 시장에 나왔다. 경량프로그래밍언어였던 J.S는 점점 입지를 다지게 되었고, 구글 맵스에서 J.S를 적극적으로 활용하면서 부터 프로그래밍 언어로서의 가능성이 확인이 되었다. 이로 인해 구글에 브라우저 엔진인 V8이 정착되어 시장에 널리 퍼지게 되었다.

 

이토록 J.S에 열광이였던 이유 중 하나는 단일 쓰레드에 있다.

 

우리가 흔히 웹페이지에 들어가서 활동을 할 때 간단한 로직을 살펴 보게 되면 I/O (Input / Output)방식이 굉장히 빈번한데; 무언가를 했을때 우리는 무언가를 받는다라고 생각하고 웹페이지를 보면 하나의 흐름으로 볼 수 있다, 이것이 I/O방식이다. 또한, 단일 쓰레드 즉, 하나의 실 같은 플로우를 상상해 보면 이것이 웹페이지에 적합하다는 것을 쉽게 알아 차릴 수 있다. 이러한 이점은 Single Page Aplication, 하나의 페이지로 구성되어 작동하는 방식에 탁월하다는 것임이 알려지게 되고 J.S의 무궁무진한 발전을 위해 라이언달이 Node J.S라는 이름으로 기존에 있던 브라우저에 종속되어 있던 경량 프로그래밍 언어로부터 독립 시켜 J.s runtime environment가 구성되어 졌다. 이러한 복잡도가 높아진 JS 사용 방식은 프레임워크를 탄생 시키게 되었고, 오늘날 Angular, React, Vue J.s, Svelte를 탄생 시켰다.

 

여기서 중요한 점은 역시 로직에 이동이라고 볼 수 있다. 예전에는 모든 로직들 예를 들면 무언가를 클릭 했을때 일어나는 현상 대표적으로 페이지 이동 등이 서버에서 관리되는 것이 아닌 웹으로 이동이 되었다는 것이다.

 

02.정의

자바스크립트는 일반적으로 프로그래밍 언어로서 기본 뼈대를 이루는 ECMA Script & 브라우저가 별도로 지원하는 클라이언트 사이드 Web API 즉, DOM, BOM,Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Worker등을 아우르는 개념 

인터프리터란 소스코드를 즉시 실행하고 한줄씩 해석하여 실행파일이 없는 반면,

컴파일러는 전체를 훑고 머신코드를 생성하여 실행파일 생성 최적화 후 코드를 실행한다.

 

자바 스크립트는 별도의 컴파일이 필요없는 인터프리터 언어이다.

브라우저의 자바스크립트 엔진들은 대게 (Chrome V8, Firefox의 SpiderMonkey) 인터프리터와 컴파일러를 결합하여 효율을 극대화 하였다.

 

 

 

변수와 실행 순서 (feat. 메모리구조)

 

변수를 알아보기 전에 우리는 데이터가 어떻게 저장이 되는지 알아야 한다.

 

대부분 CPU가 무엇인지 알고 있을 것이다. CPU = 두뇌라고 익히들 알고 있는 그것이다.

데이터를 가져오고, 디코딩하고, 실행하는 이 세 단계가 CPU의 핵심인데, 더 알고 싶은 사람은 컴퓨터 구조와 관련된 서적을 읽어 보기를 추천한다. CPU는 결과물을 출력하기 전에 컴퓨터의 RAM에서 입력을 가져와 명령문을 이해하고 처리하는데 여기서 메모리라는 개념이 중요하게 나온다. 메모리는 굉장히 복잡한데 프로세스와 가상메모리가 대표적이고 디스크 공간을 메모리처럼 활용하는 운영체제의 기법을 알아야 정확히 이해할 수 있다. 하지만 우리는 간단하게 CPU에 들어가기전 우리가 입력한 코드가 어느 메모리 공간에 생성되는지에 대하여 메모리의 구조를 알고 넘어가면 된다.

메모리 구조

본론으로 들어가기에 앞서 기억해야 할 것: (윗 내용 포함 대략적으로 이런게 있구나 하고 넘기면 된다.)

1. memory는 데이터를 저장할 수 있는 메모리 셀의 집합이다.

2. memory cell = 1Bite = 8bit 각각의 cell은 2진수로 된 메모리 주소를 갖게 된다.

3. 컴퓨터는 1바이트 단위로 데이터를 저장하고 읽어낸다.

4. 메모리 구조는 크게 스택, 힙, 데이터, 코드 영역으로 나뉜다.

10 + 20 = 30
각각의 요소들은 메모리 셀에 저장이 된다. (10 = memory cell, 20 = memory cell, 30 memory cell)

01. 변수란 무엇인가?

일반적으로 변수(Variable)라고 하면,

수학적인 의미로 변동이 심한, 가변적인, 변할 수 있는 숫자로 말할 수 있다.

비슷하긴 하지만, 프로그래밍에서의 변수는 "하나의 값을 저장할 수 있는 저장공간"이라는 정의가 더 알맞다.

 

식별자(identifier)란 간단히 말하면 고유 이름을 부여하는 것이다

var A = 10
// A라는 이름은 식별자 이고 값은 10이다. 이러한 공간 자체를 우리는 변수라 한다.

 

변수가 필요한 이유를 아래 사진에서 찾을 수 있다.

메모리 셀에 들어가는 과정

각각의 값들은 메모리에 저장이 되고 CPU가 주소값을 참조하여 활용하게 된다. 10 + 20의 답인 30 또한 어느 특정 주소값을 컴퓨터가 랜덤으로 지정하여 저장하게 된다. 우리는 이 저장된 값을 불러 오는데 문제가 생기는 것이다.

 

첫째, 우리는 주소값으로 메모리에 직접 접근하는 것이 허용 되지 않는다.

둘째, 우리는 메모리에 있는 것을 임의로 접근하여 변경하거나 주소값을 수정할 수 없다. - 이러한 경우 시스템 오류를 야기 하여 컴퓨터에 큰 문제를 일으킬 수 있다.

 

그렇다면, 우리는 이러한 제약을 우회하는 방법으로 변수를 사용하여 특정한 공간을 만들고 공간에 이름인 식별자를 사용하여 주소값을 대신하여 그 데이터를 불러낼 수 있게 된다.

var result = 10 + 20;
// result 라는 변수에는 값이 생기고 주소값 대신 우리는 result라는 식별자를 
// 사용하여 그 값을 재활용 할 수 있다.

console.log(result);
// result라는 공간을 출력하면 그 공간의 값이 출력이 된다.

02. 변수 선언과 할당

쉽게 말하자면, 

선언단계 = 변수의 이름을 등록하는 것이다. (평가 과정중 발생) 

초기화 단계 = 값을 할당하는 것이다. (런타임에서 발생)

 

변수 선언시, 메모리는 초기화의 과정을 거친다.

처음에 메모리가 텅텅 비어 있을 것이라고 생각하지만, 우리가 다른 웹(앱) 개발에 쓰였던 변수들이 사실 메모리에 남아있을수 있다. 이렇게 남아있던 쓰레기 값(garbage value) 을 undefined 라는 값으로 우선 초기화 하고 변수의 고유 이름인 식별자를 메모리에 등록 하는 것이다.

즉, 변수가 선언될 공간에 값을 지우고 undefiend라는 값을 넣는 것이 변수의 선언과 초기화인 것이다.

var result; // 변수 선언
result = 10; // 변수 할당. result에 10 이라는 숫자를 할당한다.

var result = 10; // 변수 선언과 할당. 위 두 줄의 코드와 같은 역할을 한다

이 그림을 보면, 질문이 하나 생길 수 있다. undefiend가 선언된 0x0100자리에 A가 할당 되는 것이 아닌 0x0101에 할당이 된다는 것이다. 이러한 이유는 절차를 생각하면 이해에 도움이 될것이다.

 

먼저 선언을 할 경우 초기화가 이루어지며 0x0100에 undefiend라는 값이 생기고 식별자로는 A가 지정이 된다.

하지만 A = 10이라고 할당을 할 경우, 컴퓨터는 그 값을 새로운 주소값에 저장을 하고 식별자를 0x0100에서 0x0101로 옮기게 된다. 이 때 0x0100은 Garbage가 되어 컴퓨터의 managed process 의 garbage collection을 통해 일정 시간이 되면 지워지게 된다.

P.s garbage collector는 memory leak을 방지하기 위해 주기적 검사후 garbage를 해지(release)하게 된다 / managed = J.S 언어, unmanaged = C언어 가 대표적이다.

 

03. 실행 순서

자바 스크립트의 실행 순서는 이러하다

엔진 -> 실행 컨텍스트 -> 식별자 & 스코프 관리 -> 실행

실행 컨텍스트란,
코드를 실행하기에 앞서 코드를 평가하고 실행할수 있는 환경을 제공해주는 관리 프로세싱 또는 영역을 말한다.
이 실행 컨텍스트 안에서는 위에서 아래로 실행을 하고 모든 선언문 var, let, const, function, function*, class등을 제외한 후의 환경/영역을 구성한다.

이러한 자바스크립트 과정에서 호이스팅이라는 문제가 발생하게 된다.

호이스팅이란, 변수선언이 소스코드가 한줄씩 순차적으로 실행되는 시점, 런타임이 아닌 그 이전 단계 평가과정중 먼저 실행이 되어 마치 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 작동하는 것이 변수 호이스팅이다.

console.log(test);

var test = 10

// test라는 변수가 출력 함수 전에 선언 되지 않았음에도 정상적으로 실행이 되는 것
// 마치 var test가 선두에 있는것처럼 작동

 

P.S

식별자 네이밍 컨벤션 (작명 규칙)

• String = 스네이크 (SNAKE_RULE)
• 변수, 함수 = 낙타등 (camelCase)
• 생성자 함수, 클래스 = 파스칼케이스 (PascalCase)

 

 

 

참고:

메모리 구조에 대해 더 알고 싶으면 여기로

https://st-lab.tistory.com/198

메모리 구조 [Memory Structure]

이 글을 쓰며 도움 받은 블로그 및 중간 변수 선언에 대한 출처

https://pie-archive.tistory.com/11

[Java Script] 모던 자바스크립트 DEEP DIVE: 시작 & 04. 변수