[프로그래머스 FE 데브코스/TIL] 브라우저 동작원리, 메모리, 스코프

 

데브코스 첫날이네요!
앞으로 6개월 동안 강의를 들으면서는 노션에 메모하고, 중요하다고 생각하는 부분은 블로그에 쓰면서 생각을 정리하려고 합니다.
오전 시간과 주말을 잘 사용해야겠다는 생각이 첫날부터 드네요... 😅
오늘 신경 써서 보고 싶은 부분은 브라우저의 동작 원리, 메모리, 스코프와 클로저입니다.
그리고 키워드 var을 지양하는 이유를 호이스팅과 관련해서 한번 알아보라고 하셔서 이 부분도 정리해 보겠습니다. 

 

✔️ 브라우저의 동작 원리

• 브라우저의 동작은 크게 통신, 렌더링, 스크립트 실행으로 나눌 수 있습니다. 
  1. 통신
     • 브라우저와 서버와의 통신을 의미합니다.
       • 브라우저가 서버에 요청을 보내면 서버는 요청에 따라 특정 값을 응답합니다. 
       • ❗️요청은 한 번에 하나를 할 수도 있고, 한 번에 여러 개를 할 수도 있습니다. 
  2. 렌더링
     • DOM이라는 객체를 화면에 그리는 것을 의미합니다.
       • ❓DOM이란?
         • 통신을 통해 받은 HTML을 브라우저가 읽어서 생성됩니다. 
         • 트리구조로 이루어져 있습니다. 
  3. 스크립트 실행
     • 자바스크립트를 실행시키는 것을 의미합니다. 
     • 브라우저가 script tag를 통해서 js를 읽으면 바로 실행됩니다. 
     • 이를 통해 UI에 event를 등록하거나, 화면을 다크모드로 바꾸는 등 동적인 화면을 구성할 수 있습니다. 

 

✔️ 메모리

• 메모리는 할당 ➡️ 사용 ➡️ 해제 3가지 과정을 거칩니다. 
  
  1. 변수를 생성하면
  2. 우리가 사용할 수 있도록 메모리가 할당됩니다. 
  3. 할당된 메모리에 값을 넣어 사용할 수 있습니다. 
  4. 최종적으로 사용을 마치면 해제해서 메모리를 제거할 수 있습니다. 

 

• 메모리는 한정적입니다. 
  • 변수나 상수를 만들 때마다 메모리 공간은 줄어들어요! 
    • 메모리가 꽉 차게 되면 프로그램이 터지기 때문에 별도의 조치가 필요하겠죠?
      • 이를 방지하기 위해 자바스크립트 엔진은 Garbage Collector를 통해 메모리를 정리합니다.

 

• Garbage Collector
  • Garbage Collector는 Garbage Collection이라는 자동 메모리 관리 알고리즘을 통해 만들어진 객체로, 사용하지 않는 메모리를 해제하는 역할을 합니다. 
  • 덕분에 우리는 메모리를 크게 신경 쓰지 않고 코딩할 수 있습니다!

 

• 변수를 선언할 때 js 내부에서는 어떤 일이 발생하는지 예시 1과 함께 알아볼게요!

//예시1
let variable = 126;
let variable2 = variable;
variable = variable + 1;

1. let variable = 126; 코드가 실행되면 js는 변수의 고유 식별자 variable을 생성합니다.
2. 메모리에 주소가 할당됩니다. 
3. 생성된 주소에 값( = 126)이 들어갑니다. 
4. let variable2 = variable; 코드가 실행되면 식별자 variable2가 생성되고 variable2는 variable과 동일한 주소와 값을 가지게 됩니다. 
5. variable = variable + 1; 코드가 실행되면 메모리가 새로 할당되어 변수 variable은 새로운 주소와 값을 가지게 됩니다.

 

❗️ js에서 원시 타입은 변경이 불가하기 때문에 원시 타입의 값이 변경될 경우에는 항상 메모리가 새로 할당됩니다. 

 

 

• js 엔진은 가상 머신(virtual machine)으로 구성되어 있습니다. 
  • 가상 머신에는 메모리 모델이 구현되어 있습니다. 
    • Heap 영역과 Call Stack 영역입니다. 
      • Heap 영역 : 참조 타입이 들어갑니다.
      • Call Stack 영역 : 원시 타입이 들어갑니다. 

 

• 예시 2 와 함께 알아볼게요!

//예시2
let a = 10;
const b = 20;
const arr = [];
arr.push(5);
arr.push(3);
arr.push(1);

1. 차례대로 stack 영역에 쌓이게 됩니다. 
2. 배열( = [])은 객체 타입이기 때문에 참조 타입으로 분류되어 Heap 영역에 해당 배열의 영역이 생성되게 됩니다. 배열 변수 arr는 Call stack에 생성되고 배열 변수는 Heap 역역에서 생성된 배열의 메모리 주소를 참조합니다.

 

❓arr는 const로 정의된 상수인데 어떻게 push() 동작을 통해 요소가 추가될 수 있을까요?

• 배열에 값을 추가하면 Heap 역역에 할당되기 때문입니다. 
  • Heap 영역의 메모리는 동적으로 크기가 변할 수 있다는 특징을 가지고 있습니다!

 

❓사용을 마친 메모리는 어떻게 정리될까요?

• Garbage Collector에 의해 정리됩니다. 
  • Mark and Sweap Algorithm에 의해 작동하는데 이는 닿을 수 없는 주소를 더 이상 필요 없는 주소로 정의하고 지우는 알고리즘입니다. 
  • 예시 1에서도 처음 메모리 값(=126)은 이제 아무도 참조하지 않으니 Garbage Collector에 의해 정리되겠죠? 

 

✔️ 스코프

• 유효 범위라고도 부르며 변수가 어느 범위까지 참조되는 지를 뜻합니다. 
• global scope 전역 스코프
  • 어디서든 접근이 가능합니다. 
• local scope 지역 스코프
  • 해당 블록 내부에서 만 접근 가능합니다. 

 

• 예시 3을 통해 var을 사용했을 때 생기는 예상치 못한 오류를 함께 살펴볼게요!

console.log(a) //undefined
var a = 5;
{
    //호이스팅 되어 변수 선언이 상단으로 올라가 버린다. 
    //var은 함수 수준의 scope이다. 
    var a = 10;
    console.log(a); // 10
}
console.log(a) // 10

• var을 사용하면 호이스팅 되어 변수 선언이 함수 상단으로 올라가 버립니다.
  • 그래서 블록 내부에 새롭게 선언하더라도 블럭 외부 변수 값도 변하게 됩니다. 
  • ❓호이스팅이란?
    • 뜻 : 끌어올리기 
    • MDN 공식문서에 따르면 「JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로undefined 변수를 초기화합니다. 호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다.」 라고 서술되어 있습니다. 
    • 용어 설명
      • 선언 : 자바스크립트 엔진에게 해당 변수 존재를 알려줌
      • 초기화 : 값을 저장하기 위한 메모리 공간 확보
      • 할당 : 변수에 값을 저장
      • 참조 : 변수에 저장된 값을 읽어 들이는 것
        

 

• 즉, 블록 레벨 스코프를 따르지 않는 var 키워드의 특성상, 코드 블록(= {... }) 내의 변수 a는 전역 변수입니다. 그런데 이미 전역 변수 a가 선언되어 있습니다. var 키워드를 사용하여 선언한 변수는 중복 선언이 허용되므로 위의 코드는 문법적으로 아무런 문제가 없습니다. 단, 코드 블록 내의 변수 a는 전역 변수이기 때문에 전역에서 선언된 전역 변수 a의 값 5를 새로운 값 10으로 재할당하여 덮어씁니다. 

 

 

읽어주셔서 감사합니다! 😎