Prologue

'모던 자바스크립트' 서적을 이용해서 Javascript의 기초 개념을 잡고 항상 찝찝하게 넘어갔던 부분들 (비동기, class, instance 등)을 깊이있게 다룰 예정입니다. 필요없는 내용들은 최대한 제거하면서 자바스크립트를 이해하는 과정에서 꼭 필요한 부분만 따로 정리하면서, 평소에는 그냥 지나쳤던 컴퓨터 공학 개념들도 자세히 다룰 예정입니다.

이 정리의 목표는 컴퓨터가 자바스크립트 언어를 어떻게 받아들이는지, 프레임워크에서 쉽게 사용하는 기능들이 어떤 방식으로 실행되는지 알아보는 것입니다. 처음 리액트를 배우고 다루면서 느낀 부족하고 찝찝한 기분을 씻고 정도로 다시 걸어보자는 마음으로 시작한 개인 스터디입니다.

1. 프로그래밍

1.1 정의

요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것

1.2 프로그래밍 언어

어떠한 문제를 해결하기 위해 사람이 이해할 수 있는 자연어가 아닌 컴퓨터가 이해할 수 있는 언어, 즉 기계어로 명령을 전달해야 한다. 기계어는 우리가 사용하는 언어와는 너무나도 체계가 다르기 때문에 모든 부분을 기계어로 전달 하는 것은 너무 비효율적이다. 기계어로 직접 명령을 전달하는 것을 대신할 가장 유용한 대안은 사람이 이해할 수 있는 약속된 구문으로 구성된 '프로그래밍 언어'를 사용해 프로그램을 작성한 후, 그것을 컴퓨터가 이해할 수 있는 기계어로 변환하는 일종의 번역기를 이용하는 것이다.

이 일종의 번역기를 컴파일러(compiler) 혹은 인터프리터(interpreter)라고 한다.

2. Javascript

2.1 Node.js

브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다. node.js의 등장으로 자바스크립트는 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 프로그래밍 언어가 되었다. 이제 프론트엔드 영역은 물론 백엔드 영역까지 아우르는 웹 프로그래밍 언어의 표준으로 자리 잡고 있다.

2.2 SPA 프레임워크

모던 웹 애플리케이션은 데스크톱 애플리케이션과 비교해도 손색없는 성능과 사용자 경험을 제공하는 것이 필수가 되었고, 더불어 개발 규모와 복잡도도 상승했다. 이러한 요구에 발맞춰 CBD(Component Based Development) 방법론을 기반으로 하는 SPA(Single Page Application)가 대중화되면서 Angular, React, Vue.js, Svelte 등 다양한 SPA 프레임워크/ 라이브러리가 사용된다.

2.3 자바스크립트의 특징

자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다. 자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언이다. 대부분의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 인터프리터의 단점을 해결했다. 인터프리터는 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신 코드를 생성하고 최적화한다.

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다. 비록 다른 객체지향 언어와의 차이점에 대한 논쟁이 있긴 하지만 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다. 간혹 클래스, 상속, 정보 은닉을 위한 키워드가 없어서 객체지향 언어가 아니라고 오해하는 경우도 있지만 자바스크립트는 클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체지향 언어다.

3. 변수

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

애플리케이션은 데이터를 다룬다. 아무리 복잡한 애플리케이션이라 해도 데이터를 입력받아 처리하고 그 결과를 출력하는 것이 전부다. 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다. 우리는 10 + 20을 머릿 속에서 기억하고 계산을 해서 답을 구한다. 자바스크립트 엔진이 10 + 20이라는 식의 의미를 해석하면 + 연산을 수행하기 위해 먼저 + 연산자의 좌변과 우변의 숫자 값, 즉 피연산자를 기억한다. 컴퓨터는 사람과 달리 연산과 기억을 수행하는 부품이 나눠져 있다. 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다.

메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체다. 메모리 셀 하나의 크기는 1바이트(8비트)이며, 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽어들인다. 각 셀은 메모리 주소를 갖는다. 이 메모리 주소는 메모리 공간의 위치를 나타내며, 0부터 시작해서 메모리의 크기만큼 정수로 표현한다.

숫자 값 10과 20은 메모리 상의 임의의 위치(메모리 주소)에 기억(저장)되고 CPU는 이 값을 읽어들여 연산을 수행한다. 연산 결과로 생성된 숫자 값 30도 메모리 상의 임의의 위치에 저장된다. 성공적으로 연산이 끝났고 연산 결과도 메모리에 저장되었지만 문제가 있다. CPU가 연산해서 만들어낸 숫자 값 30을 재사용할 수 없다는 것이다. 10 + 20이라는 연산을 했다는 것은 그 연산 결과가 필요하고 이를 사용해 무언가를 하겠다는 의도가 있었을 것이다. 연산 결과를 단 한 번만 사용한다면 문제가 없겠지만 만약 연산 결과 30을 재사용하고 싶다면 메모리 주서를 ㅗㅇ해 연산 결과 30이 저장된 메모리 공간에 직접 접근하는 것 외에는 방법이 없다.

하지만 메모리 주소를 통해 값에 직접 접근하는 것은 치명적 오류를 발생시킬 가능성이 높은 매우 위험한 일이다. 따라서 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다. 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 메커니즘을 제공한다.

변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.

간단히 말하자면 변수는 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름이다. 우리는 변수를 통해서 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근할 수 있다.

자, 우리는 변수를 사용해서 10 + 20을 다시 살펴보자.

let result = 10 + 20;

10 + 20은 연산을 통해 새로운 값 30을 생성한다. 그리고 연산을 통해 생성된 값 30은 메모리 공간에 저장된다. 이때 메모리 공간에 저장된 값 30을 다시 읽어 들여 재사용할 수 있도록 값이 저장된 메모리 공간에 상징적인 이름을 붙인 것이 바로 변수다. 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름을 변수 이름(변수명)이라 한다. 그리고 변수에 저장된 값을 변수 값이라고 한다. 변수에 값을 저장하는 것을 할당(대입, 저장)이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조라 한다.