지난 시간까지 자바스크립트의 전반적인 내용을 훑어봤어요.
이번 시간부터는 프로그래밍의 기본 원리부터 시작해 TypeScript를 활용한 리액트를 배워볼 예정이에요.
프로그래밍의 기본 원리
프로그래밍의 기본 원리를 알아야 코드를 작성하다 문제가 생겼을 때 어디서 발생한 것인지 쉽게 파악하고 이해할 수 있어요.
컴파일 언어
자바스크립트는 인터프리터 언어인데 왜 갑자기 컴파일 언어를 다루는지 의문이 들 수 있어요. 이는 앞으로 우리가 배울 타입스크립트가 컴파일 언어이기 때문이에요.
컴파일 언어란 코드를 한 줄씩 읽어가는 인터프리터 방식과 달리, 소스코드 전체를 컴퓨터가 이해할 수 있는 기계어로 한 번에 변환한 뒤 실행하는 언어를 말해요. 번역하는 과정에서 시간이 다소 걸릴 수 있지만, 한 번 번역해 두면 런타임에서는 아주 빠르게 실행된다는 장점이 있어요.
변수와 메모리 구조
변수 사용 이유
변수는 필요한 값을 저장해 두기 위해 사용해요. 실질적인 데이터가 저장된 복잡한 메모리 주소를 매번 외우기 힘들기 때문에, 알아보기 쉬운 변수라는 이름을 지어 편리하게 기억하고 접근하는 것이에요.
메모리 영역
변수가 저장되는 메모리 구조는 크게 네 가지로 나뉘어요.
- 코드 영역: 사용자가 작성한 코드가 저장되는 공간이에요.
- 데이터 영역: 전역 변수, 정적(static) 변수가 저장되는 공간이에요.
- 힙(Heap) 영역: 프로그래머가 동적으로 자유롭게 할당하고 사용하는 공간이에요.
- 스택(Stack) 영역: 지역 변수, 매개 변수 등이 임시로 저장되는 공간이에요.
원시 타입과 참조 타입
데이터 타입에 따라 값이 메모리에 저장되는 방식이 달라요. 원시 타입은 스택 영역에 실제 값이 직접 저장돼요. 반면 참조 타입은 실제 데이터가 힙 영역에 저장되고, 스택 영역에는 그 힙 영역의 주소값이 저장되는 방식이에요.
| 스택 영역 (주소) | 스택 영역 (값) | 힙 영역 (주소) | 힙 영역 (값) | |
|---|---|---|---|---|
| 원시 타입 | 0x01 | 10 | ||
| 참조 타입 | 0x10 | 0x100 | 0x100 | [1, 2, 3] |
가비지 컬렉터 (Garbage Collector)
가비지 컬렉터는 더 이상 사용되지 않는 메모리를 알아서 정리해 주는 기능이에요. 예를 들어 변수 a 에 10을 할당했다가 20으로 재할당하면, 기존 메모리 공간의 값이 바뀌는 것이 아니라 새로운 메모리 주소에 20이 저장돼요. 이때 참조를 잃은 기존의 10이 차지하던 메모리를 정리하여 낭비를 막아주는 역할을 해요.
자료형
자바스크립트는 동적 타입 언어라 자료형을 엄격하게 명시하지 않지만, 자료형을 명확히 사용하게 되면 해당 데이터가 메모리에 얼만큼의 공간을 할당해야 할지 명확해지기 때문에 메모리 공간의 낭비를 막을 수 있어요.
상수
상수는 변수와 달리 변하지 않는 값을 의미해요. 변수와 비교하면 두 가지 큰 차이점이 있어요.
- 재할당 여부: 변수는 값을 재할당할 수 있지만, 상수는 한 번 값이 정해지면 재할당이 불가능해요.
- 초기화 시점: 변수는 선언만 먼저 하고 나중에 값을 할당해도 되지만, 상수는 선언과 동시에 반드시 초기화를 해주어야 해요.
사용자 데이터 입력 원리
C언어에서는 데이터를 입력받기 위해 scanf 함수를 사용할 때 & 기호를 붙여요. 이는 단순히 변수 이름에 값을 저장하는 것이 아니라, 해당 변수가 위치한 메모리 주소를 찾아가 그곳에 직접 값을 저장한다는 의미예요. 자바스크립트를 포함한 다른 언어들에서도 내부적으로는 이와 같은 원리로 메모리 주소를 통해 데이터의 입력과 할당이 이루어져요.
