부트캠프를 수강하는 같은 팀원들끼리 나중의 면접, 수업에 대한 깊은 이해를 위해서 ⌜모던 자바스크립트 Deep Dive⌟ 를 특정 장까지 읽고 설명하는 Study를 진행하기로 했습니다.

수업을 진행하는 7개월 남짓의 시간동안 1독 할 수 있기를...!
그리고 이 내용이 프로그래밍을 시작하는 저와같은 초보들에게도 도움이 될 수 있는 글이 될 수 있도록 잘 기록으로 남겨보겠습니다.

오늘 정리해 볼 장은 1-5장까지의 내용을 정리해보겠습니다.

주요 내용
1장 프로그래밍
2장 자바스크립트란?
3장 자바스크립트 개발 환경과 실행 방법
4장 변수
5장 표현식과 문

1. 프로그래밍

• 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션
• 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업 -> "코드"
• Computational thinking(컴퓨팅 사고)

1) 컴파일러(Compiler) / 인터프리터(Interpreter)

기계어로 직접 명령을 전달하는 것에 대한 대안으로 사람이 이해할 수 있는 약속된 구문(문법)으로 구성된 "프로그래밍 언어"를 사용하여 프로그램을 작성한 후, 그적을 컴퓨터가 이해할 수 있는 기계로 변환하는 일종의 번역기

2) 구문과 의미

console.log("Hello World")

• 프로그래밍의 언어는 구문과 의미로 이뤄짐
• 프로그램을 할 때 올바른 문법을 준수하는 것도 맞지만 의미가 있어야 함
• 프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것

2. 자바스크립트란

1) 자바스크립트의 변천사

(1) 시작

약 90%의 시장 점유율로 웹 브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경향 프로그래밍 언어를 도입하기로 결정하고, 그래서 탄생한 것이 "브렌던 아이크"가 개발한 "자바스크립트"

(2) 이름의 변천사

1996년 3월, "모카 Mocha"
넷스케이프 커뮤니케이션즈의 웹 브라우저인 넷 스케이프 내비케이터2에 탑재
1996년 9월, "라이브스크립트"
1996년 12월, "자바스크립트"

(3) 표준화

1996년 8월,
마이크로소프트(MS)는 자바스크립트의 파생 버전인 "JScript"를 인터넷 익스플로어에 탑재.

넷스케이프 커뮤니케이션즈와 MS는 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하여 표준화보다는 적당한 호환성을 갖춤

크로스 부라우징 이슈
브라우저에 따라 웹페이지가 정상적으로 동작하지 않음.

1996년 11월
넷스케이프 커뮤니케이션즈는 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구인 ECMA 인터네셔널에 자바스크립트 표준화 요청

1997년 7월 ECMAScript
ECMA-62라 불리는 자바스크립트 포반 사양이 완성되었으나, 상표권 이슈로 ECMAScript로 명명.

1999년 ECMAScript3
정규 표현식, try... catch

2009년 ECMAScript 5(EC5)와 HTML5 공개
JSON, stirt mode, 접근자 프로퍼티, 프로퍼티 어트리뷰트 제어, 향상된 배열 조작 가능(forEach, map, filtter, reduce, some, every)

2015년 ECMAScript 6
let/const 키워드, 화살표 함수, 클래스, 모듈 등과 같이 범용 프로그래미밍 언어로서 갖춰야 할 기능들을 대거 도입하는 큰 변화가 생기고, 이후 버전은 비교적 작은 기능을 추가하는 수준으로 매년 공개할 것 예고

2) 자바스크립트의 성장

초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 활용되었는데 이전에는 어떤 것이 있었는지 살펴보겠습니다.

(1) Ajax

1999년, 자바스크립트를 이용해 서버와 브라우가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능으로 등장합니다.

이전의 웹페이지는 화면이 전활 될 때마다 서버로 새로운 HTML을 전송 받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로 구동되어서 화면이 순간적으로 깜박이는 현상이 발생하고, 변경할 필요 없는 부분도 렌더링하여 불필요한 데이터 통신과 성능면에서도 불리했습니다.

Ajax는 서버로부터 필요한 데이터만 전송 받아 변경해야 하는 방식이 가능해졌습니다. 빠른 성능과 부드러운 화면 전환을 제공하였습니다.

2005년, 구글이 발표한 구글 맵스는 Ajax 기반으로 동작하는 대표적인 웹 애플리션 프로그래밍 언어로 자바스크립트의 가능성을 확인하는 계기를 마련하였습니다.

(2) jQuery

2006년, 다소 번거롭고 논란이 있던 DOM(Document Object Model)을 더욱 쉽게 제어하고,, 크로스 브라우징 이슈도 어느 정도 해결하였습니다. jQuery는 넓은 사용자 층을 순식간에 확보하고, 자바스크립트보다 직관적인 jQuery를 선호하는 개발자가 양성되기도 했습니다.

(3) V8 자바스크립트 엔진

2008년, 구글 맵스를 통해서 자바스크립트의 가능성을 확인하고, 더욱 빠르게 동작하는 자바스크립트의 엔진의 필요성이 대두될 때 이러한 요구를 만족하는 빠른 성을 보여주는 엔진으로 V8 자바스크립트 엔진이 등장하게 되었습니다.
데스크톱 애플리케이션과 유사한 사용자 경험(UX)을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하게 되었습니다.
이 당시, 웹 서버에서 수행되던 로직이 대거 클라이언트(브라우저)로 이동했고, 웹 애플리케이션 개발 영역에서 프론트엔드 영역이 주목받는 계기로 작용하게되었습니다.

(5) Node.js

2009년, 라이언 달이 발표한 Node.js는 구글 V8자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 입니다.
브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시키는 환경입니다.
다양한 플랫폼에 적용할 수 있지만 서버 사이드 애플리케이션 개발에 주로 사용되며, 이에 필요한 모듈, 파일 시스템, HTTP등 내장 API를 제공합니다.
프론트엔드와 백엔드 영역에서 자바스크립트를 사용할 수 있다는 동형성은 별도의 언어를 학습하기 위한 시간을 덜 수 있다는 장점이 있습니다.
Node.js는 비동기I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋습니다. 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 Single Page Application 에 적합하고, CPU 사용률이 높은 애플리케이션에는 권장하지 않습니다.

(6) SPA 프레임워크

모던 웹 애플리케이션은 데스크톱 애플리케이션과 비교해도 손색이 없는 성능과 사용자 경험을 제공하는 것이 필수가 되었고, 더불어 개발 규모와 복잡도도 상승되었습니다.
이전의 개발 방식으로는 복잡해진 개발 과정을 수행하기 어려워졌고, 이러한 니즈에 따라서 많은 패턴과 라이브러리가 출현했습니다. 하지만, 변경에 유연하면서 확장하기 쉬운 애플리케이션 아키텍처의 구축을 어렵게 했고, 필연적으로 프레인워크가 등장하였습니다.
Component Based Delvelopment 방법론을 기반으로 하는 SPA의 대중화가 시작되며, Angular, React, Vue.js, Sevlte등 다양한 프레임워크와 라이브러리 또한 많은 사용층을 확보하고 있습니다.

3) 자바스크립트의 특징

1) 웹 브라우저에서 동작하는 유일한 프로그래밍 언어

2) 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어

• 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장접을 겹합해 비교적 처리 속도가 느린 인터프리터의 단점 보완
• 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신 코드를 생성하고 최적화

3) 멀티 패러다임 프로그래밍 언어

• 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍 지원

3. 변수

1) 변수의 필요성

10+20

위와 같은 연산이 있다고 했을 때, 자바스크립트 엔진은 + 연산을 수행하기 위해 먼저, 연산자의 좌변과 우변의 숫자 값(피연산자)를 기억합니다.

이 때 컴퓨터는 CPU를 통해서 연산, 메모리를 통해 데이터를 기억합니다.

메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이고, 셀 하나의 크기는 1바이트(8비트)이며, 컴퓨터는 셀의 크기 즉 1 바이트 잔위로 데이터를 저장하거나 읽습니다.

각 셀은 공유의 메모리 주소를 갖는데, 이 주소는 메모리 공간의 위치를 나타내며 0부터 시작해서 메모리의 크기만큼 정수로 표현됩니다.

ex. 4GB -> 0 ~ 4,294,967,295(0x00000000 ~ 0xFFFFFFFF)

컴퓨터는 모든 데이터(종류 상관 없이)를 2진수 처리하여, 2진수로 저장됩니다.

"10 + 20" 을 연연산해서 만들어낸 30을 재사용 할 수 없습니다. 계속 재사용을 하거 싶다면 결과 30이 저장된 메모리 주소에 집접 접근하는 방법 밖에 없습니다. 하지만 메모리 주소에 직접 접그하는 방법은 치명적인 오류를 발생시킬 가능성이 매우 높은 위험한 일입니다. 실수로 운영체제가 사용하고 있는 값을 변경하면 시스템을 멈추게 하는 치명적인 오류가 발생할 수 있기에 자바스크립트는 직접적인 메모리 제어를 하지 않습니다.

만약 개발자의 직접적인 메모리 제어를 허용해도 문제가 될 수 있는데, 메모리 주소는 코드가 실행될 때 메모리 상황에 따라 임의로 결정되어 동일한 컴퓨터, 동일한 메모리에서 실행을 해도 코드가 실행될 때마다 값이 저장될 메모리 주소도 변경됩니다.

위와 같은 상황에서 "변수"를 활용합니다.

(1) 변수

: 하나릐 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 -> 값의 위치를 가리키는 상징적인 이름

var result = 10+20;

위와 같이 코드를 작성하게되면, 30이라는 값을 result에 저장하려 재사용 할 수 있습니다.

• 변수 이름 : result
• 변수 값 : 30
• 할당(대입, 저장) : 변수에 값을 저장하는 것
• 참조: 변수에 저장된 값을 읽어 들이는 것

변수 할당을 통해서 메모리에 값을 저장하고, 재사용이 가능하며, 사람이 이해할 수 있는 언어로 명명한 변수 이름을 통해 변수에 저장된 값의 의미를 알고 가독성을 높일 수 있습니다.

(2) 식별자

• 어떤 값을 구별해서 식별할 수 있는 고유한 이름, 변수의 또 다른 이름

• 값이 아니라 메모리 주소를 기억하고 있어서 메모리 공간에 저장된 값에 접근 가능
  

• 변수, 함수, 클래스 등의 이름은 모두 식별자 -> 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식.별.자.

(3) var을 활용한 변수 선언

: 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것 -> 변수 생성하는것

1️⃣ var 키워드 선언

var score

키워드 : 자바스크립트 엔진은 키워드를 만나면 자신이 수행해야할 약속된 동작을 수행

2️⃣ 변수 이름을 등록하고 값을 저장할 메모리 공간 확보

• 아직 변수에 값을 할당하지 않아서 메모리 공간이 비어있을 것으로 생각할 수 있으나, 확보된 공간에는 undefined 이 암묵적으로 할당되어 초기화
• 초기화를 거치지 않을 경우 이전에 다른 애플리켕션이 사용했던 값이 남아있을 수 있는데 이러한 "쓰레기 값" 이 출력
• 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러) 발생

undefined : 원시 타입의 값
실행 컨텍스트 : 변수 이름을 비롯한 모든 식별자가 등록되는 곳. 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 활용을 제공하고 코드의 실행 결과를 실제로 관리하는 영역. key, velue의 형식인 객체로 등록되어 관리

3️⃣ 변수 실행과 호이스팅

console.log(score);
var score;

위와 같이 변수를 참조하는 코드가 먼저오고, 변수가 나중에 선언되면 선언되지 않는 변수로 인해 "참조에러"가 발생하는 것이 아니라 undefined 가 출력되는 것을 확인 할 수 있습니다.

변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문입니다. 자바스크립트 엔진은 아래와 같이 실행됩니다.

• 소스코드 평가 과정 진행
• 선언문을 찾아내어 선언문 먼저 실행
• 평가 과정이 끝나면 변수 선언을 포함한 모든 선언문 제외 소스코드 실행

호이스팅 Variable Hoisting
: 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

(4) 값의 할당

var score; // 변수 선언
score = 80; // 변수 할당

var score = 80; // 변수 선언 + 할당

위의 코드는 동일하게 동작합니다.
자바스크립트 엔진은 변수 선언과 값의 하당을 2개의 문으로 나누어 각각 실행하기 때문입니다.

이때 주의할 점은 변수 선언과 값의 할당의 실행 시점이 다르다는 것입니다.

• 변수 선언 : 런타임 이전
• 값의 할당 : 소스코드가 순차적으로 실행되는 런타임에 진행

console.log(score); // undefined

var score = 80;

console.log(score); // 80

(5) 값의 재할당

var score = 80; 
score = 90;

위와 같이 나와져있으면, 자바스크립트 엔진은 80 받은 값을 초기화하여 undefined로 한 다음, 90이라는 값을 받는다.

상수 : 위와 같이 재할당을 받았을 때, 변수를 변경할 수 없는 값을 지칭
const : 재할당이 금지되어 변수를 상수로 표현 가능 -> 반드시 상수만을 위해 사용하지 않음

90이라는 값을 받았을 때, 90 이전의 값인 undefined, 80은 어떤 변수도 값으로 갖고 있지 않아 식별자와 연결이 안되어있습니다. 이러한 불필요한 값들은 가비지 콜렉에 의해 메모리에서 자동 해제 되지만, 언제 해제될지 예측할 수 없습니다.

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

언매니지드 언어와 매니지드 언어
: 자바스크립트 같이 메모리의 할당과 해제를 담당하는 가비지 콜렉터가 있는 언어를 매니지드 언어라고 부릅니다. 개발자의 역량에 의존하는 부분이 적어져 어느 정도 일정한 생산성을 확보할 수 있다는 장점이 있지만 성능면에서 손실을 감수 할 수 밖에 없다는 단점이 있습니다.
C언어의 경우, malloc(), free() 같은 메모리 제어 기능을 제공하는 언매니지드 언어의 경우 개발자의 역량에 따라서 최적의 성능을 확보할 수 있지만, 치명적인 오류를 생산할 가능성도 있습니다.

(6) 식별자 네이밍 규칙

• 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러기호($)를 포함 가능
• 시작은 문자, 언더스코어(_), 달러기호($)로 가능
• 예약어(프로그래밍 언어에서 사용되고 있거나 사용될 예정의 단어)는 식별자로 사용 불가능
• 쉼표를 통해서 하나의 문에서 여러 개 한번에 선언 가능(가독성때문에 잦은 사용 ❌
• 알파벳 이외의 언어 사용 ❌
• 대소문자 구분 (아래의 예시는 각가의 별개의 변수로 인식)

 var firstname
 var fristName
 var FRISTNAME

[4가지 유형의 네이밍 컨벤션]
// 카멜 케이스 (일반적인 변수나 함수의 이름)
var firstName; 

// 스네이크케이스 
var first_name

// 파스칼 케이스 (생성자 함수, 클래스 이름)
var FirstName 

// 헝가리언 케이스 
var strFistName; // type + identifier
var $elem = document.getElementById('myId'); // DOM 노드 
var observable$ = fromEvent(document, 'click'); // RxJS 옵저버블

4. 표현식과 문

1) 값

: 식(표현식)이 평가되어 생성된 결과

var sum = 10+20 // 값: 30

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간을 식별하게 붙인 이름이고, 변수에 할되는 것은 값입니다. 위의 코드의 sum 변수에 할당되는 것은 "10+20"이 아니라 "30"입니다.

2) 리터럴

• 값에서 살펴본 예제와 같이 식을 생성할 수 있지만, 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법
• 사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글 등) 또는 미리 약속된 기호('', "", [],{})등으로 표기한 코드

3 // 숫자 리터널 "3"

3) 표현식

: 값으로 평가될 수 있는 문.
표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조(리터널도 표현식)

// 리터널 표현식
10 
'Hello'

// 식별자 표현식(선언이 이미 존재한다고 가정)
sum
person.name
arr[1]

// 연산자 표현식
10 + 20
sum  = 20
sum != 10

// 함수/메서드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()

동치 : 표현식과 표현식이 평가된 값은 동등한 관계
1+2 =3에서 1+2 와 3은 동치

4) 문

: 프로그램을 구성하는 기본 단위이자 최소 실행 단위 (토큰으로 구성)

토큰(token): 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소

5) 세미클론(;)

• 문의 종료를 의미
• 자바스크립트 엔진은 세미클론을 통해서 문이 종료한 위치를 파악하고 순자적으로 하나씩 문을 실행
• 0개 이상의 문을 중괄호{} 로 묶은 코드 블록 뒤에는 ❌ -> 자체 종결성을 갖기에 안 붙임
• 세미콜론은 옵션, ASI(세미콜론 자동 삽입 기능)이 암묵적으로 수행하기에 생략 가능
  - 아직 논쟁중이나, 세미콜론이 자동으로 삽입시, 간혹 개발자의 예상과 다르게 삽입되어 다르게 동작
  

6) 표현식 구분 방법

• 표현식 : 값으로 평가 될 수 있는 문
• 표현식이 아닌 문 : 값으로 평가 될 수 없는 문
  ** 값을 넣어보고 확인

// 표현식이 아닌 문
var num = 100;

// 표현식인 문
100 + num // 110

//할당문 
num = 100; //100