Node 버전 설정
강의는 LTS인 18버전으로 진행되기에, 기존에 사용하던 버전에서 업데이트 했습니다.
nvm i 원하는버젼이후 node -v를 통해 버전을 확인해보니, 자동으로 설치한 버전으로 변경되어있었습니다.
배운 내용들
브라우저 동작 원리
간단하게 통신, 렌더링, 스크립트 실행으로 구분됩니다.
- 통신
- 요청 및 응답: 사용자가 주소 표시줄에 URL을 입력하거나 링크를 클릭하면, 브라우저는 해당 웹 서버에 HTTP 또는 HTTPS 요청을 보냅니다.
- 서버 처리: 요청이 웹 서버에 도달하면 서버는 필요한 자원(HTML, CSS, JavaScript, 이미지 등)을 찾거나 생성하여 응답으로 보냅니다.
- 데이터 전송: 서버는 해당 데이터를 응답으로 브라우저에 전송하며, 브라우저는 이 데이터를 받아들여 처리합니다.
- 렌더링
- HTML 및 CSS 파싱: 브라우저는 받은 HTML을 파싱하여 DOM (Document Object Model) 트리를 구축하고, CSS를 파싱하여 CSSOM (CSS Object Model) 트리를 구축합니다.
- 렌더 트리 생성: DOM과 CSSOM 트리를 결합하여 렌더 트리를 만듭니다. 렌더 트리는 화면에 표시되어야 할 내용만 포함합니다.
- 레이아웃: 렌더 트리의 각 노드에 대해 그 위치와 크기를 계산하는 과정입니다. 이를 통해 각 요소의 화면에서의 정확한 위치가 결정됩니다.
- 페인팅: 레이아웃 단계에서 결정된 위치와 크기 정보를 사용하여 실제 픽셀로 화면에 그리는 과정입니다.
- 스크립트 실행
- JS 파싱 및 실행: 브라우저는 HTML 파싱 중에
- DOM 및 JavaScript 상호 작용: JavaScript는 DOM API를 사용하여 웹 페이지의 요소에 접근하고 수정할 수 있습니다. 이를 통해 동적인 웹 페이지 효과와 상호 작용이 가능합니다.
- 이벤트 리스너: 사용자의 행동(클릭, 스크롤 등)에 반응하기 위해 JavaScript에서 이벤트 리스너를 추가할 수 있습니다. 이 리스너는 특정 이벤트가 발생할 때 실행될 함수를 지정합니다.
이외에도
1. https://d2.naver.com/helloworld/59361
2.https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8
3. https://poiemaweb.com/js-browser
위 사이트에서 추가적으로 공부할 수 있는 것 같습니다!
오늘 하루만에 공부를 끝낼 수 있는 내용은 아니니, 조금씩 공부 해야겠습니다.
호이스팅
호이스팅은 JS에서 실행 컨텍스트가 생성될 때, 변수 및 함수 선언에 사용된 식별자들을, 미리 메모리에 저장하는 동작을 의미합니다.
이때, let과 const는 호이스팅되지만 다르게 동작합니다.
let과 const로 선언된 변수도 호이스팅되지만, 얘네에겐 임시 사각 지대(Temporal Dead Zone, TDZ)라는 것이 있습니다. 이는 변수가 선언되기 전의 코드 영역을 의미하며, 이 지대에서 변수에 접근하려고 하면 ReferenceError가 발생합니다.console.log(bar); // ReferenceError: Cannot access 'bar' before initialization let bar = 5;var로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어져 문제가 없지만,
let과 const는 선언 단계와 초기화 단계가 분리되어 진행되기 때문입니다.
메모리 관련
JS 엔진이 가지는 가상 머신은 메모리 모델을 구현하고 있습니다.
각각 Heap, Call Stack이며 Heap은 참조 타입을, Call Stack은 원시 타입을 관리합니다.const a = 10; const b = 20; // 식별자 a, b는 메모리 주소값과 값이 순차적으로 Call Stack에 쌓이게 됩니다. const arr = [1,2,3]; // 배열 그리고 객체도 마찬가지로 Call stack에 쌓이지만, // 값에 해당하는 부분은 Heap에 생성된 배열 영역의 메모리 주소를 참조하게 됩니다.Heap의 경우, 메모리가 필요에 따라 동적으로 변경됩니다.
때문에 const로 선언한 식별자 arr에 push()와 같은 함수로 값을 추가할 수 있습니다.
Call Stack에 할당된 메모리는 변경할 수 없습니다.
가비지 컬렉터
JAVA처럼, JS에도 가비지 컬렉터가 존재하여 메모리 누수와 관련된 오류를 줄여주고 있습니다.
가비지 컬렉션은 Mark & Sweep 알고리즘을 사용합니다.
최상단 Window 객체에서부터, DOM 트리를 타고 쭈욱 내려오며 참조되는 것들에 Mark를 합니다.
이때 가지에 연결되지 않는, 즉 참조되지 않은 객체는 "접근 불가능"하다고 간주됩니다.
이러한 접근 불가능한 객체를 메모리에서 해제하는데, 이를 Sweep 방식이라 부릅니다.
그럼 가비지 컬렉터는 언제 작동할까요?
객체가 접근 불가능하게 되는 시점에서 즉시 실행되는 것은 아닙니다.
주기적으로, 혹은 메모리가 부족할때 등 엔진에 따라 다양한 방식과 상황에 작동합니다.
가비지 컬렉터는 한계와 문제점도 있습니다.
- 불필요한 객체의 참조:
- 객체가 필요 없어지더라도 그 객체에 대한 참조가 계속 유지되면 가비지 컬렉터는 그 객체를 메모리에서 제거하지 않습니다.
이는 의도치 않은 메모리 누수를 초래할 수 있습니다.- 가비지 컬렉션 비용:
- 가비지 컬렉션 동작은 CPU 자원을 사용합니다. 따라서 큰 애플리케이션에서는 가비지 컬렉션의 비용이 큰 문제가 될 수 있습니다.
가비지 컬렉션이 실행되면 애플리케이션의 실행이 일시 중단될 수 있고, 이는 특히 실시간 성능이 중요한 게임이나 그래픽스 헤비 애플리케이션에서 문제가 될 수 있습니다
클로저
외부 함수보다 중첩 함수가 더 오래 유지되는 경우, 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다. 이러한 중첩 함수를 클로저(closure)라고 부른다.
사실 클로저를 til에 적기에는, 난이도도 높고 분량을 많이 잡아먹어 나중에 주제 정리할 때 자세히 기록하겠습니다. 오늘은 간단하게만 작성하고 넘어가겠습니다.
아래는 클로저를 사용하여 정보 은닉을 구현한 코드입니다.
정보 은닉은 사용자나 다른 시스템 요소로부터 특정 데이터나 구현 세부 사항을 숨기는 것을 의미합니다.// 카운트 상태 변수 let num = 0; // 카운트 상태 변경 함수 const increase = function () { // 카운트 상태를 1만큼 증가 시킨다. return ++num; }; console.log(increase()); // 1 console.log(increase()); // 2 console.log(increase()); // 3
자투리
- NaN과 Infinity 모두 Number 타입이다.
- Control Flow vs Data Flow ?
- Control Flow : 조건문, 반복문, 함수 호출 등에 의해 결정되는 프로그램 내부의 실행 순서나 방향.
- Data Flow : 프로그램 내에서 데이터가 어떻게 이동하고, 변환되며, 저장되는지를 설명.
어떤 array 변수에 filter나 forEach등을 통해 변경되기도 합니다.
Control Flow은 프로그램의 로직과 실행 순서를 결정하고, Data Flow은 프로그램 내에서 정보가 어떻게 처리되는지를 결정합니다.
마치며
처음으로 작성하는 TIL인지라, 많이 부족한 면을 느꼈습니다.
다른분들 TIL 작성하시는 것을 많이 보고 배우며 개선해나가겠습니다.
