[에이블런] TIL(24.05.08): 웹개발 기초 (컴퓨터구조, 컴파일러, 자바스크립트 기초)

오늘 배운 내용

컴퓨터 구조

Memory Data 영역

Data 영역에는 const(상수)가 저장된다. (타입 크기 변경의 여지가 없음)

전역변수: 전역 + 상수

정적변수: 변하지 않는 상수

 

Memory code 영역

function (함수) 존재

 

⇒ 단위 시간당 n번 이상의 호출이 있다면 캐시 메모리로 이동

 

 

OS

프로세스 개수만큼 PCB 생성 (컨텍스트 스위칭이 일어남)

 

타임스탬프: 유닉스 타임 기준

 

---

• 순수함수: 입력값에 따른 출력값이 항상 동일한 함수
• 자바스크립트는 쓰레기값을 싫어한다! ⇒ 언어는 브라우저 내에서 돌기 때문에, 브라우저에는 이미 쓰레기값이 많다
• function add (a, b) {} ⇒ 매개변수(parameter)
• add(1, 2) ⇒ 인수(argument)

---

컴파일러

렉시컬

일종의 문화. 어떤 문맥인지 파악함

ex. 오늘 아침에 짜장면을 먹었다 / 오늘 같이 짜장면 먹자 ⇒ 이 두 개의 짜장면은 문맥상 서로 다른 것

var a = 1;
var b = 2;
var c = a + b;
if (c >= 3) //외부 스코프 변수
  console.log('Big!');
else
  console.log('Small!)

 

렉서

• Tokenizer(토크나이저): 토큰화 (var a = 1 ⇒ v, a, r, a, =, 1, ;)

 

Abstract Syntax tree

Annotated AST: 타입이 존재하는 AST

 

 

스코프함수

• 글로벌 스코프: 전역 스코프
• 함수 스코프: 함수 내의 스코프
• 블록 스코프: 코드 블록 내의 스코프

스코프만으로는 명확한 의미를 파악하기 어렵기 때문에 렉시컬을 쓴다.

 

 

intermediate code = object code

타입체크도 함

 

 

인터프리터 언어

인터프리터 언어는 아래와 같이 동작한다.

var a;
var b;
var c;
if (c >= 3)
  console.log('Big!');
else
  console.log('Small!);
a = 1;
b = 2;
c = a + b;

먼저 선언을 진행한 뒤 초기화!

---

 

타입스크립트 트랜스파일러 특징

binder 과정 존재

---

 

프로그램 언어의 구성 요소

변수 & 상수 

원시형 vs 객체/참조형

• 원시형 (Primitive) 타입 : 스택에 올라갈 수 있는 데이터프로그램 언어의 구성 요소. 즉, 스택에 갖고 있는 값이 원시값(실제값)
• 객체/참조형 (Reference) 타입: 스택의 값이 실제 값이 아닌 주소를 가리킴, 해당 주소는 힙의 값에 접근하는 참조값이다.
• 상수도 변수다!
• 스택: 서랍장 ⇒ 정해진 크기, 값 변경 싫어함, 변수 10개면 값 다 바뀜. 같은 주소 공간의 내용 바뀌지 x. 다른 주소공간 사용, 값이 할당될 때 메모리 공간 무조건 다시 생김
• 힙: 사막 (크기 차이) ⇒ 가변 크기

 

객체(object) → Class → 인스턴스(instance)

`this`: 객체의 실제값은 Heap에 들어있다. (무한대로 값이 늘어날 수 있는 변수는 Heap에 존재한다)

⇒ call by reference / 실제 Heap 주소에 인스턴스 존재.

⇒ 객체의 실제 메모리 공간을 this라고 부름

this.name = ‘max’;

 

위의 강조된 박스 전체가 this임

• 기본적으로 JS에서는 실제 메모리 공간이 public
• private 키워드 붙이면 외부에서는 접근 불가능함

 

GC(Gabage Collector)

• 메모리에서 아무도 사용하지 않는 공간을 수집해서 버림

바인딩과 할당

i = 1 // 메모리 공간에 1이라는 값을 담음

바인딩: 레퍼런스 타입에만 바인딩 가능, 커링의 기법 중 하나

 

500번지에 max 인스턴스 존재

⇒ `sam = max` 라는 코드가 가능할까? 가능하다면 강아지에게 강아지를 할당한다는 뜻인데, 현실적으로 말이 안된다.

따라서 이때 할당은 할당이라 부르지 않고 바인딩이라 한다.

max 값은 500(스택의 주소값)이다. sam을 max에 바인딩했기 때문에 sam의 스택 주소값도 500이 된다.

f() {
    this.name;
}

f.bind(max); 
// max의 this를 f에게 전달해준다.(f = max) 
// ⇒ 메모리 공간에 name이 없다면, undefined 리턴
// 너의 this는 앞으로 max의 힙 주소이다라는 뜻
f.bind(merry);

• functon도 레퍼런스 타입임(int, string, …등 원시 타입 아님. 무궁무진하게 변할 수 있음. 사이즈 가변)
  • ⇒ f는 heap의 주소를 갖고 있음 / max도 스택에 힙의 주소를 갖고 있음
• this가 필요한 이유? 
  • ⇒ 내 메모리 주소를 모르니까 (this = heap의 메모리 주소)
• this가 나를 가리키게 했는데 max를 가리키게 하는 게 바인딩임
• `f = max;` ⇒ f도 700번지, max도 700번지를 가리킴
• `f.bind(max)` ⇒ f의 this는 max이다
• `f.bind(중국집)` ⇒ 렉시컬 중국집. 메뉴판 주세요 하면 중국음식을 주는 것이 당연함.(문맥상)
• `f.bind(이탈리안레스토랑)` ⇒ 이탈리안 레스토랑 세계.
• f.bind(다크모드) ⇒ 템플릿처럼 사용
• 똑같은 코드를 완전히 다르게 사용할 수 있다. ex. 다크모드/일반모드

 

선언 vs 정의

• 선언: `var a;` ⇒ 메모리에 a의 위치가 잡히도록 함
• 정의(초기화): `a = 1;` 메모리 타입 확인 위해 첫 번째로 접근

 

문(statement), 표현식(expression), 리터럴(literal) 

• 문(statement): cpu의 연산 단위 (1+2, 1+로만으로는 연산 불가)
  • ;(세미콜론)은 statement의 종료를 의미
• 표현식: 값이 있는 어떤 문장
  • `f;`는 무엇일까? ⇒ 리터럴이 있으므로 표현식
• 리터럴: 값, 할당 및 메모리에 올라갈 수 있는 변수

⇒  ex. 1 : 숫자 리터럴

var f = func() {}

⇒ 값(object), 함수 리터럴

⇒ `f`라는 함수 표현식

 

 

오늘 잘한 점

최근 면접 준비를 하면서 자바스크립트 기본 개념에 대해 공부하고 있었다. this나 바인딩에 대해서는 유독 잘 이해가 되지 않았는데 이번 수업을 통해 this, 바인딩 개념에 대한 가볍게나마 이해를 할 수 있었다. 아직 남들에게 설명할 만큼 완벽한 이해를 하지는 못했지만 앞으로 추가 공부를 통해 개념을 더 다져나가야겠다. 

 

 

앞으로 개선해야 할 점

그간 프로그래밍 지식을 완전히 익히지 못한 채 암기를 시도했었다. 앞으로는 이해를 기반으로 관련 이론을 외울 수 있도록 해야겠다. 

오늘 공부한 내용을 정리하면서 더 개념을 채워나가야 할 부분이 보여서 해당 부분 위주로 복습해 볼 예정이다.