[데브코스 웹 풀스택 과정 TIL] 11주차 - TypeScript 기초

저번주 부로 스프린트 프로젝트가 끝났다. 이 말인즉슨 자바스크립트 파트가 지나고 타입스크립트 파트가 시작된다는 것이다.

또 달리 말하면 블로그에 다시 글을 쓰기 시작했다는 것이다. 연말에 회고록 쓰고 얼마만인지도 모르겠다.

이번 편에는 타입스크립트 자체의 내용보다는 프로그래밍에 관한 내용이 주가 될 예정이다.

---

컴파일 기반 언어를 이해해야 하는 이유?

타입스크립트라면서 웬 갑자기 컴파일 기반 언어가 나오는가 싶은데 이 둘이 특성이 비슷하기 때문에 그렇다.

일단 설명을 해보면

첫째, 모든 프로그래밍 언어의 동작 원리는 거의 비슷하다. 쉽게 말하면 개념과 문법이 거의 비슷하다는 것이다. 이는 C 나 C++로 짠 코드와 자바스크립트로 짠 코드를 보면 알 수 있다. 전해지는 말 중에 'C언어를 먼저 배우고 나면 다른 언어를 익히는데 시간이 줄어든다'는 말이 근거가 없는 것이 아닌 이유이기도 하다. 개인적인 감상으로는 함수형 언어와 같은 일부 언어를 제외하면 대부분의 언어들이 구조가 비슷하다고 생각한다.

둘째, 타입스크립트는 변수에 자료형을 붙이기 때문이다. 당연한 말일수도 있겠지만 변수에 자료형을 붙이지 않는 자바스크립트에 자료형을 붙인 것이 타입스크립트인데, 이게 자료형을 기본적으로 선언해야 하는 컴파일 기반 언어와 상당히 흡사하다. 당연히 이를 이해하려면 컴파일 기반 언어를 알고 있는 것이 상당히 유리하다.

또, 코드의 메모리 구조나 동작 원리를 이해하는 데에도 많은 도움을 준다.

---

프로그래밍의 개념

프로그래밍?

당연하게도 소프트웨어 개발자가 프로그램을 만들고 제공하는 과정을 이른다. 설명이 화려하거나 거창할 것도 없다.(...)

개발의 3단계 과정

소프트웨어 개발은 크게 구상, 설계, 구현 세 단계로 나눌 수 있다.

한 문장으로 설명하면

일단 무엇을 만들지 생각하고(구상 / 추상적), 그 생각을 구체화하여 문서화하고(설계 / 추상 → 구체화), 설계가 끝나면 실제로 구현을 한다.

가 된다.

컴파일

사람의 언어(프로그래밍 언어 / ex. C, C++, JS, 등등...)를 컴퓨터가 이해할 수 있는 언어(=기계어, 이진수로 이루어짐)로 바꾸어 주는 과정이다.

프로그램 작성 과정

보통 설계 --> 원시코드 작성 --> 컴파일 --> 링크의 과정으로 이루어지는데, 최근에는 컴파일과 링크를 한데 묶어 빌드로 칭하기도 한다.

---

변수와 자료형

변수는 데이터를 담을 수 있는 일종의 '그릇' 역할을 한다. 그렇다면 메모리에 그에 맞는 공간이 필요할 텐데 그 공간의 크기는 선언된 타입이나 값의 타입을 보고 시스템이 결정한다.

메모리의 기본 단위

메모리가 기본으로 사용하는 기본 단위는 1 byte(=8 bit)이다. 예를 들면 32비트 정수의 경우 1개 당 4바이트를 사용한다.

문제는 이 메모리에 저장된 값을 불러낼 때이다.

메모리 상에 이런 값들이 수없이 많이 있기 때문에 사람이 메모리 주소를 일일이 기억하는 것은 사실상 불가능하다. 이 때문에 값의 주소에 별칭을 붙여서 사용하게 되는데 이것이 우리가 아는 변수이다.

메모리 영역

프로그램이 실행되면 코드 영역, 스택 영역, 힙 영역, 데이터 영역의 구조로 메모리 공간이 생성된다. 우리가 여기서 볼 것은 스택, 힙 영역이다.

스택 영역은 지역 변수와 매개변수를 저장하며 데이터가 들어온 순서대로 바닥부터 쌓이며, 빠져나갈 때에는 그의 역순으로 빠진다(자료구조 중 스택 구조와 동일).

힙 영역은 코드 작성 시 사용자가 직접 할당하는 메모리 공간으로, 스택과 달리 먼저 들어온 순서대로 들어오고 나간다(자료구조 중 큐 구조와 동일).

해당 내용을 조금 더 자세히 잘 정리한 포스트가 있어 참고하면 좋을 듯하다.(링크)

자료형

자료형은 선언한 변수에 얼마만큼의 메모리 공간을 할당해 줄지를 결정한다. 음식 종류에 따라 다른 모양과 용량의 그릇을 사용하는 것과 같은 이치이다.

또 코드를 작성하다 보면 다양한 자료형(ex. 정수, 실수, 문자, 등등...)을 볼 수 있는데, 다양한 자료형을 제공하는 이유는 메모리 공간을 효율적으로 활용하기 위해서이다.

문자형의 경우 문자를 표현하기 위해 각 문자별로 10진수 정수 0~127 범위에서 각각 매핑을 한 아스키 코드를  사용한다. (Reference: ASCII - Wikipedia)

---

상수

상수는 변하지 않는 수로 변수의 형태를 하고 메모리 상에 값이 있으나 변수와는 달리 그 값을 바꿀 수 없다.

사용법은 변수 선언 시 const를 붙여주면 된다.

/* 예시 */
const int a = 10;  // a를 10으로 초기화

a = 20; // 상수이므로 값을 변경할 수 없어 오류를 뱉어냄

참고할 점은 초기화를 하지 않고 상수를 선언하는 경우에도 가비지 값을 가지고 있을지언정 그 값을 변경할 수 없다.

/* 예시 */
const int a;  // 임의의 가비지 값을 가지고 있음

a = 20; // 상수이므로 값을 변경할 수 없어 오류를 뱉어냄