모던 자바스크립트 Deep Dive (1-5장)

자바스크립트의 태생적 특징

자바스크립트는 웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도를 목적으로 태어났지만 프론트엔드와 백엔드 영역의 프로그래밍 언어로 사용할 수 있는 범용 애플리케이션 언어로 성장하였다.

이에 따라 자바스크립트를 학습하는 방식 또한 기본 개념과 동작 원리를 깊이 있게 학습해야 한다.

기본 개념과 동작 원리 이해의 중요성

스스로 구현한 코드가 의도한 대로 정확히 동작해서 문제를 해결해야하기 때문에..

이를 위해서 기본 개념과 동작원리를 정확하게 이해하는 것이 중요하다. 이러한 기본 개념과 동작원리의 이해는 안정적이고 효율적인 코드를 생산할 수 있는 기본기이다.

학습 방법

1. 기본 개념과 동작 원리를 이해하려고 노력 --> 여러번 반복해서 학습

2. 단순히 라이브 코딩을 감상하거나 타이핑 하는 것이 아닌 의도적인 연습을 해야한다.

3. 프로젝트를 통해 더욱 깊이 이해하고 협업을 경험하면서 모르는 것과 아는 것을 구분하여 추가로 학습이 필요한 경우 다시 기본 개념과 동작 원리 이해로 돌아가 학습을 시작

01장 - 프로그래밍

프로그래밍이란?

컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션

이를 위해선 문제 해결 능력이 중요하고, 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이 프로그래밍이다.

컴퓨팅 사고

컴퓨터의 관점에서 문제를 사고하려면 해결 과제를 작은 단위로 분해하고 패턴화해서 추출하며, 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의해야 한다.

"걷다" 라는 기능을 구현할 때, 판단해야하는 상태(오른발이 왼발보다 앞에 있는가?)와 그 상태를 판단하는 시기, 그리고 판단 기준을 정의해야하며 이를 바탕으로 실행 여부를 결정함. 예를 들어 2족 보행 로봇의 디자인을 하면서 장애물이란 무엇(크기, 움직임 등)인지, 어떤 범위 내에 있는 것인지 명확히 수치화해서 정의해야함.(장애물을 피해야 하므로)

프로그래밍 언어

기계어(컴퓨터가 알아듣는 언어)는 사람이 사용하는 언어와 체계가 다르기 때문에 직접 명령을 전달하는 것은 매우 어려워서 컴파일러 혹은 인터프리터를 사용해서 컴퓨터와 대화한다.(프로그그래밍 언어를 기계어로 바꾸어줌)

이러한 프로그래밍 언어는 구문과 의미의 조합으로 표현된다.

구문과 의미

문법을 잘 안다고 해서 외국어를 잘한다고 말할 수 없듯이, 프로그래밍도 마찬가지로 문법에 맞는 문장을 구성하는 것은 물론 의미 를 가지고 있어야 언어의 역할을 충실히 수행할 수 있다.

const number = 'string';
console.log(number * number);

위 문장은 문법적으로 전혀 문제가 없지만 의미적으로는 옳지 않다.
number라는 이름의 변수에는 숫자를 할당하는 것이 의미적으로 옳다.

프로그래밍의 목적은 문제 해결이다.

02장 - 자바스크립트란?

자바스크립트의 탄생

1995년, 넷스케이프 커뮤니케이션즈에서 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입함. 이것이 브랜던 아이크라는 사람이 만든 자바스크립트이다.

처음에는 모카 -> 라이브스크립트 -> 자바스크립트라는 이름으로 바뀜

그러나 자바스크립트의 파생버전인 JScript가 출시되어 위기를 맞음.

자바스크립트의 표준화

마이크로소프트는 자바스크립트의 파생 버전인 JScript를 인터넷 익스플로러에 탑재함.

넷스케이프와 마이크로소프트는 자사 브라우저 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가! --> 크로스 브라우징 이슈 발생

이로 인해 표준화된 자바스크립트의 필요성이 대두됨 --> ECMA 인터내셔널에서 표준화된 자바스크립트인 ECMAScript가 탄생됨(상표권 문제 때문에 자바스크립트가 아닌 ECMAScript라고 불림)

2009년에 ECMAScript5가 HTML5와 함께 표준 사양이 출현하고, 2015년에 ECMAScript6가 공개되는데, 범용 프로그래밍 언어로서 갖춰야 할 기능들이 포함된다. 이 이후 버전업은 작은 기능을 추가하는 수준으로 매년 공개됨.

자바스크립트의 특징

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

인터프리터 언어이며 대부분의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 인터프리터의 단점을 해결함.

또한 JS는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어 이면서 다른 객체지향 언어와의 차이점이 있긴 하지만 클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체지향 언어다.

ES6 브라우저 지원 현황

인터넷 익스플로러를 제외한 모던 브라우저의 ES6 지원 비율은 96%~99%로 거의 100%에 육박함.

브라우저에서 아직 지원하지 않는 최신 기능을 사용하거나 인터넷 익스플로러나 구형 브라우저를 고려해야 하는 상황이면 바벨(Babel)과 같은 트랜스파일러를 사용

03장 - 자바스크립트 개발환경과 실행 방법

자바스크립트 실행 환경

브라우저와 Node.js의 용도가 다르기 때문에 이에따라 지원하는 API들이 다르다.

웹 브라우저

구글 크롬 브라우저를 사용

개발자 도구

• Elements(DOM과 CSS를 편집해서 렌더링 된 뷰를 확인해 볼 수 있다.)
• Console(로딩된 웹페이지의 에러를 확인하거나 console.log메서드의 실행결과를 확인할 수 있다.)
• Sources(로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있다.)
• Network(로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인할 수 있다.)
• Application(웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.)

콘솔

자바스크립트 코드에서 에러가 발생한 경우 가장 먼저 살펴봐야할 곳

브라우저에서 자바스크립트 실행

HTML파일의 script태그가 있다면 자바스크립트코드가 자동적으로 실행된다.

디버깅

Source패널에서 자바스크립트 코드를 디버깅 할 수 있다.

Node js

프로젝트 규모가 커짐에 따라 프레임워크 또는 라이브러리를 도입하거나 Babel, Webpack, ESLint등 여러가지 도구를 사용하기 위해 Node.js와 npm이 필요함.

Node.js와 npm소개

Node.js는 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행환경

npm은 자바스크립트 패키지 매니저로, Node.js에서 사용할 수 있는 모듈들을 패키지화 해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI를 제공한다.

04장 - 변수

변수란 무엇인가? 왜 필요한가?

예를 들어 10 + 20 이라는 식이 있다고 가정해보자.

컴퓨터가 값을 계산하기 위해서는 사람과 같이 10, 20 이 무엇인지, + 가 무엇인지에 대한 의미도 알아야하며 이를 저장할 공간이 필요하다. 이 공간을 컴퓨터에선 메모리라고 하는데 메모리에 접근을 하기 위해서는 메모리 주소를 알아야한다. 메모리 주소는 0xFFFFFFFF와 같은 16진수로 되어있는데 이 부분에 직접 접근하는 것은 치명적 오류를 발생시킬 가능성이 높다.

따라서 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 매커니즘을 제공한다.

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

변수에 값을 저장하는 것을 할당(대입, 저장) 이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조 라고 한다.

식별자

변수 이름을 식별자라 하며 어떤 값을 구별해서 식별할 수 있는 고유한 이름이다.

식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺고 있고, 메모리 주소를 기억하고 있다.

변수, 함수, 클래스 등의 이름은 모두 식별자이며 선언에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.

변수 선언

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

var(함수레벨 스코프), let, const같은 키워드를 사용해서 선언한다.

변수 선언 과정

변수 이름을 등록하고 값을 저장할 메모리 공간을 확보. undefined 값이 암묵적으로 할당되어 초기화된다. undefined는 js에서 제공하는 원시 타입.

변수 선언의 2단계 과정

• 선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
• 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 한다.(초기화 하지 않으면 쓰레기 값이 남아 있을 수 있어서 이러한 위험을 방지하기 위해 암묵적으로 초기화를 수행함)

  변수의 이름을 비롯한 모든 식별자는 실행 컨텍스트 에 등록이 되는데 이는 자바스크립트 엔진이 소스 코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역.
  이부분을 통해 식별자와 스코프를 관리한다.

변수 선언의 실행 시점과 변수 호이스팅

console.log(score); // undefined

var score; // 변수 선언문

이 경우 참조에러가 발생하지 않고 undefined가 출력되는데 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문.
이렇게 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라고 함.

값의 할당

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

한줄로 변수 선언과 값의 할당을 하여도 실제로 둘의 실행시점이 다르다.

변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행!
값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

값의 재할당

엄밀히 말하면 var 키워드로 선언한 변수는 선언과 동시에 undefined로 초기화 되기 때문에 변수에 처음으로 값을 할당하는 것도 재할당이다.

만약 값을 재할당 할 수 없어서 변수에 저장된 값을 변경할 수 없다면 그것은 상수(Constant) 이다. (상수는 단 한번만 할당할 수 있는 변수)

값을 재할당 할때 기존 공간에 새로운 값을 저장하는 것이 아닌 새로운 메모리 공간에 값을 저장하기 때문에 어떠한 식별자와도 연결되어 있지 않은 값들(더 이상 사용되지 않는 메모리)은 가비지 콜렉터에 의해 메모리에서 자동 해제된다.(가비지 콜렉터로 메모리 누수를 방지한다.)

언매니지드 언어 --> c와 같이 메모리 제어(malloc, free)를 개발자가 주도적으로 할 수 있는거

매니지드 언어 --> 개발자의 직접적인 메모리 제어를 허용하지 않음

식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어, 달러 기호를 포함할 수 있다.
• 식별자는 특수문자를 제외한 문자, 언더스코어, 달러 기호로 시작해야한다.
  예약어는 식별자로 사용할 수 없다.
  그외에로도 변수 이름은 변수의 존재 목적을 쉽게 알게 하기 위해 의미를 명확히 표현해야하며 이름을 선언할 시 의미를 생각하면서 심사숙고하여 정하는 것이 좋다.

네이밍 컨벤션

• 카멜케이스(firstName)
• 스네이크케이스(first_name)
• 파스칼 케이스(FirstName)

  가독성을 높이려면 카멜 케이스와 파스칼 케이스를 따르는 것이 유리하다.

05장 - 표현식과 문

값

10+20; // 30

10+20은 평가되어 숫자 값 30을 생성한다. 변수에는 10 + 20이 아닌 생성된 결과인 값인 30이 들어간다.
값이란 식이 평가되어 생성된 결과이다.

리터럴

3

숫자 리터럴 3이며 자바스크립트 엔진은 이를 평가해 숫자 값 3을 생성함.
리터럴 또한 값 이다.

즉 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법이다.

표현식

표현식은 값으로 평가될 수 있는 문 으로, 표현식이 평가 되면 새로운 값을 참조하거나 기존 값을 참조한다.

표현식의 예

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

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

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

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

값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다.

문

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다.

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

var sum = 1 + 2;

위 식은 문이다.
var, sum, = , 1, +, 2, ; 은 모두 토큰이다.

문의 예

// 변수 선언문
var x;

// 할당문
x = 5;

// 함수 선언문
function foo() {}

// 조건문
if(x>1) { console.log(x); }

// 반복문
for(var i = 0; i < 2; i++) { console.log(i); }

세미콜론과 세미콜론 자동 삽입 기능

세미 콜론은 문의 종료를 나타내며 자바스크립트에서는 세미콜론을 자동적으로 붙여주는 세미콜론 자동 삽입 기능(ASI)이 존재한다.

그러나 개발자의 예측과 일치하지 않는 경우가 있기 때문에 세미콜론 사용을 권장한다.

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

var x; // 변수 선언문은 값으로 평가될 수 없으므로 표현식이 아니다. (표현식이 아닌문)

x = 1 + 2; // 표현식이면서 완전한 문 (표현식인 문)

표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는것.

var foo = var x; // SyntaxError

표현식이 아닌 문은 값처럼 사용이 불가하여 SyntaxError 발생

var foo = x = 100; 

표현식인 문은 값처럼 사용 가능