JavaScript 질문 정리 | 1~5장

1장

• 프로그래밍이란

• 컴퓨터와 커뮤니케이션하는 것
• 컴퓨터는 0과 1밖에 모르니까 정확하고 상세하게 얘기해주는 작업

http://mm.sookmyung.ac.kr/~bigrain/class/2012/c/chap01.pdf

 

• 프로그래밍 언어란

• 컴퓨터와 사람이 소통할 수 있도록 만들어진 언어.
• 고급언어(인간이 이해할 수 있는 프로그래밍 언어) > 저급언어(기계어, 어셈블리어)
• 사람과 컴퓨터 사이의 커뮤니케이션 수단이다.

 

• 컴파일러 특징/ 인터프리터 특징 그리고 그 둘의 차이점이란

 

컴파일러 언어	인터프리터 언어
코드 실행 전, 컴파일 시간에 소스코드 전체를 한번에 기계어로 변환후 실행함.	런타임(코드 실행 단계)때 문 단위로 한 줄씩 중간 코드(intermediate code)인 바이트코드로 변환 후 실행
실행 파일 생성	실행 파일 생성 X
컴파일, 실행 단계가 분리되어있음	인터프리터 단계와 실행 단계 분리 X 인터프리터는 한 줄씩 바이트 코드로 변환하고 즉시 실행
컴파일은 딱 한번만 수행됨	코드 실행 될 때 마다, 인터프리터 과정 반복 수행
실행시엔 실행만 하면 되므로 코드 실행 속도가 빠름	인터프리트 단계랑 실행 단계가 분리되어있지 않아 반복 수행하므로 속도가 느림

• 인터프리터 언어 나무위키

https://namu.wiki/w/%EC%9D%B8%ED%84%B0%ED%94%84%EB%A6%AC%ED%84%B0

 

• 원시.목적.실행 프로그램

https://nyhya.tistory.com/173

 

 

컴파일 => 인터프리터

자바스크립트를 사용하는 사람은 개발자가 아니라고 생각했기 때문에,, 컴파일 과정을 제외하고  

한줄식 해석해서 실행한다...

 

스크립트 언어 (인터프리터 언어와 비슷)

 

인터프리터 대화형?

https://ybdata-sci.tistory.com/14

 

 

2장

• 자바스크립트 표준

넷스케이프와 JScript를 만든 MS는 점유율을 위해 서로 다른 기능을 추가. 크로스 브라우징 이슈가 발생. 이것을 표준화 하기 위해 ECMA international에서 만든 ECMAScript 등장. (JAVA때문에 정식 명칭으로JAVASCRIPT를 사용하지 못했음)

 

• Ajax

동적인 웹페이지를 만들기 위해 개발된 기법 중하나. 웹 페이지에서 변경된 부분만 서버에서 받아와서 렌더링 할 수 있다. MS에서 만들었지만 구글에서 지메일, 구글맵스에서 인기끌기 시작했다.

 

• V8자바스크립트 엔진

구글 맵스로 자바스크립트로 웹 어플리케이션 구축 가능성이 보이자 더 빠르게 동작하는 자바스크립트 엔진 필요성이 대두됬다. 그렇게 2008년 V8 자바스크립트 엔진은 이러한 요구에 부합하는 빠른 성능을 보여줬다.

이로서 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동했고 프런트엔드 영역이 주목받는 계기가 되었다.

 

• Node.js

자바스크립트 언어사용해서 프론트+백 둘다 가능 : 동형성

독립시켜서 자바스크립트 엔진을 구동할 수 있게 환경 제공. 서버, 머신러닝 등 가능해졌다.

Node.js는 비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작함으로서 요청처리 성능이 좋다. 따라서 Node.js는 데이터를 실시간으로 처리하기 위해 잦은 I/O가 발생하는 SPA(Single Page Application)에 적합하다.

 

• SPA프레임워크

모던 웹 어플리케이션에서 데스크톱 어플리케이션과 비교했을 때 손색없을 정도의 사용자 경험이 요구되었고 그에따라 개발 규모, 복잡도도 상승했다.

이전의 개발방식으로는 복잡해진 개발 과정을 수행하기 어려워졌다. 그래서 수많은 패턴과 라이브러리가 등장하게 된다. 그 결과 개발에 많은 도움을 주었지만 아키텍처의 구축을 어렵게 했고 필연적으로 프레임워크가 등장하게 된다.

CBD(Component based development)방법론을 기반으로 하는 SPA가 대중화되면서 Angular, React, Vue.js, Svelte 등 다양한 SPA 프레임워크/라이브러리 또한 많은 사용층을 확보하고 있다.

 

• 자바스크립트 특징

• 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어!

 

• 웹어플리케이션과 데스크탑어플리케이션

 

• 객체지향언어 vs 함수형언어의 차이

 

• AJAX는 SSR의 단점을 해결하기 위해 나온, SPA를 가능하게 하는 기술인데 요즘엔 SPA를 잘 사용하지 않고 SSR로 넘어가는 중이라고 들었는데 그렇다면 AJAX은 이제 사용하지 않나요?

 

• JS엔진에 따른 컴파일과정 차이?

 

3장 ~ 5장

• 변수 재할당 시 왜 메모리셀을 지우고 덮어쓰지 않고 새로운 공간을 할당해서 만드는가?

var a = 1; 
var b = a; 
a = 2; 
b = ? // 기대하는 값 1
// 메모리 셀에 1이 저장되어 있고 a, b가 같은 곳을 가리키고 있다.
// 다음 a가 새로운 메모리 셀을 참조해야 원하는 값을 얻을 수 있다.

 

• 런타임이란 무엇인가?

소스코드를 실행하는 시점

 

• 가비지콜렉터란 무엇인가?

가비지 콜렉터는 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제하는 기능이다.

변수에 값을 재할당하게 되면 , 새로운 메모리 공간을 확보하고, 그 공간에 값을 저장하게 된다. 

그러면 기존에 참조되었던 메모리 공간은 아무도 참조하지 않는 공간이 된다.

사실 참조되고 있는 메모리엔 OS가 lock을 걸어두어 다른 프로세스가 이 메모리에 접근하지 못하게 한다.

따라서 값을 재할당 하여 아무도 참조되지 않는 메모리는 lock을 해제해주어야 한다.

가비지 컬렉터는 참조되지 않는 메모리의 lock을 해제하는 역할을 한다.

 

가비지 컬렉터를 가지고 있는 언어와 가지고 있지 않은 언어 두가지로 분할할 수 있는데,

매니지드 언어와 언매니지드 언어다.

 

매니지드 언어는 자바스크립트 처럼 메모리 할당 및 해제를 위한 메모리 관리를 개발자가 할 수 없고, 더이상 사용하지 않는 메모리 해제는 가비지 콜렉터가 수행한다.

언매니지드 언어는 C언어를 예로 들 수 있으며, 개발자가 명시적으로 메모리를 할당하고 해제할 수 있다.

개발자가 주도적으로 메모리 제어를 할 수 있어서, 역량에 따라 최적의 성능을 낼 수 있지만, 메모리를 직접 관리하는 것은 치명적인 오류를 발생시킬 가능성이 있어서 위험하다.

 

가비지 컬랙터의 알고리즘은 다음과 같이 2개가 있다.

참조 블로그 : https://feel5ny.github.io/2017/11/30/JS_02/

Mark and sweep. 표시하고 지우기

가장 널리 쓰이는 방법. 변수가 컨텍스트 안에서 사용할 것으로 정의되면 그 변수는 그 컨텍스트 안에 있는 것으로 표시된다.

GC가 작동하면

1. 메모리에 저장된 변수 전체를 표시.
2. 컨텍스트에 있는 변수, 컨텍스트에 있는 변수가 참조하는 변수의 표시를 지운다.
3. 표시가 지워지지 않는 변수는 삭제한다.

즉, GC가 처음에 전체에 표시를 하고 참조중인거는 표시를 지운 뒤에 표시가 남아있는 변수들은 참조중이 아니라는 거니까 삭제한다.

Reference counting 참조 카운팅

1. 각 값이 얼마나 많이 참조 됬는지 추적한다. 참조된 값은 카운트 1.
2. 다른 변수가 같은 값을 참조하면 참조 카운트가 늘어난다.
3. 해당 값을 참조했던 변수가 새로 다른값을 할당하면 원래 값에서 1이 줄어든다.
4. 값의 참조 카운트가 0이 되면 해당 값에 접근할 방법이 없는 것이니 메모리를 회수해도 안전하다.
5. 다음 가비지 컬렉터 실행 시 카운터가 0이었던 값이 사용하고 있던 메모리를 회수한다.

참조 카운팅 알고리즘은 두 오브젝트가 서로를 참조하면 문제가 발생한다. 그래서 NULL을 할당해서 참조했던 값으로부터 연결을 끊어줘야 한다. 이런 이유로 브라우저에서는 대부분 표시하고 지우기 방법을 쓴다.

 

 

• 호이스팅 현상은 왜 생기는 것인가?

선언부가 런타임 이전에 먼저 실행

console.log(x); // undefined

var x; // 선언 - 런타임 이전에 호이스팅
x = 1; // 할당 - 런타임때 할당됨

console.log(x); // 1

 

자바스크립트 엔진에서 .. 인터프리터 + 컴파일러

 

변수 선언은 런타임 이전에 동작한다면? 컴파일 타임에 실행된다? 아니다

인터프리터 단계를 두개로 나눈다. 런타임과 런타임 이전 단계

인터프리터 한줄한줄 실행 전에 따로 실행하는(런타임 이전) 작업이 있다.

 

• 리터럴이란 무엇인지 간단하게 설명해보자

값을 생성하기 위해 미리 약속한 표기법/ 사람이 이해할 수 있는 문자 (컴퓨터가 가지고 있는 단어사전 같은 개념.)

var a = 10+10;

값은 식이 평가되서 생성된 결과물.

식은 표현식인데 값으로 평가될 수 있는 문이다.

 

• 식별자란 무엇인가

특정 값을 구별해서 식별할 수 있는 고유한 이름

변수 이름(식별자)과 메모리 주소와 1:1 맵핑됨!

식별자는 메모리 공간안의 주소를 알아낼 수 있는 것을 뜻함.

 

• 변수란 무엇인가

하나의 값을 저장하기 위해 확보한 메모리 공간. 또는 메모리 주소 이름

 

• 값이란 무엇인가

식이 평가되어 생성된 결과

 

• 컴퓨터의 연산 기본 단위 1바이트가 8비트인 이유

영어권에서 시작했으니까 처음에는 영어 + 특수기호를 다 담기 위해서 아스키코드(127개)를 표현하기 위해 7비트 사용.

패리티 비트 용도로 넣은것이 1비트였지만, 나중에는 실제로 패리티 비트를 사용하지 않게 되었다. 

그래도 관습적으로 8비트를 1바이트로 사용하여 8비트가 1바이트가 되었다.

 

하지만 문자를 7비트로 표현하기는 역부족이여서... 8비트를 사용하는 ANSI 코드 탄생!

하지만 나중엔 ANSI로도 부족해져서 16비트를 사용하는 유니 코드(UTF-8) 탄생!

- 아스키 코드(2^7 = 128개)

- ANSI 코드(2^8 = 256개)

- 유니코드(2^16 = 65536)

 

• 표현식

표현식은 값으로 평가될 수 있는 문(statement)임.

표현식이 평가되면 새로운 값을 생성하거나 기존값을 참조함.

리터럴은 값으로 평가되어, 리터럴도 표현식임

즉 값으로 평가될 수 있는 문은 모두 표현식이다.

표현식은 값처럼 사용할 수 있음.

 

• 토큰

문법적으로 더이상 나눌 수 없는 문에서 기본 요소

 

• 문

프로그램을 구성하는 기본단위이자. 최소 실행 단위. 컴퓨터에 내리는 명령. 명령문이라고도 부른다. 할당문 등등

 

• 토큰

문법적으로 더이상 나눌 수 없는 문에서 기본 요소

 

• 세미콜론을 붙여야하는지? 안붙여도 되는지?

개발자의 의도와 다르게 작동할 수 있어서 붙여주는 것이 좋다.

 

• 표현식인 문과 표현식이 아닌 문

변수에 할당해보면 값이 평가되는지에 따라 구분 가능.