Javascript 1-1 기본 개념

⭐Javascript⭐

1995년 넷스케이프에서 개발되어, 현재 대부분의 브라우저에서 사용되며 서버 측까지 범용적으로 사용되고 있는 프로토타입 기반의 객체지향 언어.

 
 

📌 HTML과 자바스크립트의 상호작용

* html = 기본 구조, css = 스타일, Javascript = 동적 기능 제어

• HTML: 웹 페이지의 구조를 정의하는 마크업 언어
• Javascript: 웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어

Javascript는 HTML의 기본 구조 위에 동적인 기능을 추가하여 더욱 풍부한 사용자 경험을 제공 가능.
 

---

📌 ECMAScript(ES)란?

= 자바스크립트의 표준 규격을 정의한 스크립트 언어.

 

✅ 역할

• 문법, 기능 정의:
  ECMAScript는 자바스크립트의 기본 문법, 데이터 타입, 함수, 객체 모델 등의 동작을 정의
  → 자바스크립트 엔진이 일관된 방식으로 해석과 실행이 가능
• 버전 관리:
  자바스크립트의 발전에 따라 ECMAScript도 이에 맞춰 업그레이드 되고 있음.
  
  

💠 ES6(또는 ECMAScript 2015)의 주요 기능

• let, const를 통한 변수 선언
• Arrow function (=>)
• class
• 모듈 시스템 (import, export)
• Template literal (백틱 ``을 사용한 문자열)
• Promise 비동기 처리
• Destructuring (구조 분해 할당)
  
  

💠 최신 주요 기능

• ES7: 배열의 includes() 메서드, 지수 연산자 **
• ES8: async/await 비동기 처리 방식, 객체의 Object.entries(), Object.values() 메서드
• ES9: 비동기 반복문 (for await of), 객체의 spread/rest 연산자
• ES10: Array.flat(), Array.flatMap() 등의 배열 처리 기능
• ES2020: BigInt 숫자 타입, Promise.allSettled(), null 병합 연산자 (??) 등
• ES2021: 논리 연산자 &&, ||에 대한 할당 기능, WeakRef, Promise.any() 등

+ babel과 같은 트랜스파일러를 사용하여 구형 브라우저에서도 최신 자바스크립트 코드를 사용할 수 있도록 변환 가능.

 

---

📌 브라우저의 동작 과정

 
* 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것!

① 사용자가 URL 입력
- 사용자가 웹 사이트의 주소를 입력 또는 클릭 시 요청 시작.

② DNS 조회
- DNS(=Domain Name System)은 인터넷 프로토콜의 한 종류.
브라우저: 입력된 URL의 이름을 IP주소로 변환하기 위해 DNS 조회를 하여 IP 주소를 찾음.

③ 서버에 요청 전송 (HTTP/HTTPS)
브라우저: 해당 IP 주소로 HTTP/HTTPS 프로토콜을 이용하여 서버에 요청 전송.
(주로 GET요청 사용)

④ 서버의 응답- 서버: 브라우저로부터 요청 받은 리소스를 응답으로 전송.
(이때 응답에는 상태 코드도 포함됨.)

⑤ HTML 파싱 및 DOM 생성
- 브라우저가 HTML 파일을 받으면 이를 파싱 후 DOM(Document Object Model) 생성.
* DOM? → HTML 문서를 트리 구조로 나타낸 것. 각 HTML 태그가 노드로 변환됨.

⑥ CSS 파싱 및 CSSOM 생성
- CSS 파일을 파싱하여 CSSOM(CSS Object Model) 생성.
* CSSOM? → 스타일 규칙으로 DOM과 함께 웹 페이지의 스타일을 결정하는 데 사용됨.

⑦ Javascript 파싱 및 실행
- 브라우저: js 파일을 다운로드 및 파싱하여 실행.
Javascript 코드: DOM/CSSOM 관리 및 수정 가능.

⑧ 렌더 트리 생성 및 레이아웃 계산
- DOM + CSSOM => 렌더트리(Render Tree) 생성.
렌더트리: 화면에 구현되는 요소들만 포함함.

⑨ 페인팅(Painting)
- 브라우저가 렌더트리를 바탕으로 화면에 요소를 그리는 과정을 Painting이라고 함.

⑩ Reflow 및 Repaint
- JS or CSS가 DOM or CSSOM을 변경하면 브라우저는 렌더트리 재생성과 레이아웃 재계산을 수행.
이 과정을 Reflow라고 하며 다시 화면을 그리는 과정을 Repaint라고 함.

⑪ 인터랙션 처리
- 브라우저는 사용자의 클릭, 스크롤, 입력 등의 이벤트를 매우 빠르게 처리하고 동작함.
* Time to Interactive (TTI)? → DNS 조회와 SSL 연결이 이루어지는 첫 요청부터 페이지가 상호작용할 준비가 될 때까지 얼마나 걸리는지를 측정하는 단위.

 

 
 

☑️요약

● HTML/CSS/JS 파일 요청
● HTML → DOM → CSSOM 생성
● 렌더 트리 생성
● 레이아웃 계산
● 페인팅
● 사용자 인터랙션 처리

 +) 필요에 따라, Reflow/Repaint
 

이처럼 브라우저는 동기적으로 HTML, CSS, Javascript를 처리함.