서른일곱번째 수업 | JavaScript

김자영 강사님

JavaScript DOM, Event

브라우저의 렌더링 과정

1. HTML 파싱
   • 브라우저가 서버로부터 HTML 문서를 수신하면, 이를 토큰화하고 구문 분석(Syntax Analysis) 하여 DOM(Document Object Model) 트리를 생성한다.
   • DOM 트리는 HTML의 구조를 나타내는 트리 구조로, 문서 내 각 요소를 노드로 표현한다.
2. CSS 파싱
   • 브라우저는 HTML에서 참조된 CSS 파일을 로드한 후, 이를 파싱하여 CSSOM(Css Object Model) 트리를 만든다.
   • CSSOM은 스타일 규칙과 상속 관계를 반영하여 생성된다.
3. 자바스크립트 파싱 및 실행
   • 자바스크립트 엔진이 HTML에 포함된 자바스크립트 코드를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 실행한다.
   • DOM이나 CSSOM을 수정할 수 있으며, 수정된 결과는 다시 렌더링에 반영된다.
4. 렌더 트리 생성
   • DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다.
   • 렌더 트리는 화면에 실제로 표시될 요소만 포함한다.
5. 레이아웃: 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산한다. 이는 사용자의 뷰포트 크기를 고려한다.
6. 페인팅: 레이아웃 단계에서 계산된 정보를 사용하여 요소를 화면에 그린다.
7. 컴포지팅(Compositing): 여러 레이어를 합쳐 최종 이미지를 화면에 렌더링한다.

DOM

DOM(Document Object Model)은 HTML, XML 문서의 계층적 구조와 내용을 트리 구조로 표현하며, 이를 동적으로 조작할 수 있도록 API를 제공한다. 브라우저에서 문서를 조작하거나 표시할 때 핵심적인 역할을 한다.

트리 구조

• DOM은 문서의 각 구성 요소(HTML 태그, 속성, 텍스트)를 노드로 표현한다.
• 노드는 문서의 계층적 구조를 반영하여 부모, 자식, 형제 관계를 가진다.
• 트리 구조를 통해 문서의 특정 요소를 탐색하고 조작할 수 있다.

노드의 유형

• Document 노드: 트리의 최상위 노드로, 문서 자체를 나타낸다.
• Element 노드: HTML 요소(<div>, <p> 등)를 나타낸다.
• Attribute 노드: HTML 요소의 속성을 나타낸다.
• Text 노드: HTML 요소 안의 텍스트를 나타낸다. 리프 노드(자식 노드가 없음).

DOM API

• 요소 탐색
  - getElementById(): 특정 ID를 가진 요소 반환
  • getElementsByClassName(), getElementsByTagName(): 클래스나 태그 이름으로 요소 검색.
  • querySelector(), querySelectorAll(): CSS 선택자를 사용하여 요소 검색.
• 요소 생성 및 추가
  - createElement(): 새 요소 생성.
  • appendChild(), insertBefore(): 요소를 추가하거나 삽입.
• 요소 삭제
  - remove(): 선택된 요소를 삭제.
• 속성 조작
  - getAttribute(), setAttribute(): 속성값 가져오기 및 설정.
  • removeAttribute(): 속성 제거.
• 텍스트 및 HTML 조작
  - textContent: 텍스트 내용 가져오기 및 설정.
  • innerHTML: HTML 코드 가져오기 및 설정.
• DOM 조작의 활용
  - 콘텐츠 변경: 텍스트, 이미지, 링크 등을 동적으로 추가, 삭제, 변경.
  • 스타일 변경: CSS 스타일을 동적으로 설정.
  • 이벤트 처리: 사용자 입력(클릭, 키보드 입력 등)에 반응하여 동작 수행.
  • 구조 탐색: 특정 요소와 그 부모, 자식, 형제 요소 탐색.

파이썬 기본문법

히히

반복문

for 반복문

for문은 자바스크립트에서 반복적으로 코드를 실행할 때 사용하는 기본적인 반복문이다. 주로 반복횟수가 명확할 때 사용된다.

for (초기화; 조건식; 증감식) {
	// 반복 실행할 코드
}

1. 초기화
   • 반복을 시작하기 위해 변수(주로 제어변수)를 초기화하는 구문.
   • 반복문이 실행되기 전에 한 번 실행된다.
2. 조건식
   • 반복을 계속 수행할지 결정하는 조건을 정의한다.
   • 조건이 true인 동안 코드 블록이 실행된다.
   • 반복문이 실행될 때마다 이 조건이 평가된다.
3. 증감식
   • 반복을 제어하는 변수의 값을 변경한다.
   • 코드 블록이 실행된 후 매번 실행된다.

while 반복문

while문은 조건식이 true일 동안 특정 코드를 반복 실행한다. 반복 횟수가 명확하지 않을 때 주로 사용되며, 조건이 만족되지 않으면 실행을 종료한다.

while (조건식) {
	// 조건이 true일 동안 실행할 코드
}

1. 조건식을 평가
   • 조건식이 true면 코드 블록 실행.
   • 조건식이 false면 반복 종료.
2. 코드 실행 후 다시 조건 평가
   • 반복문이 끝나면 조건식을 다시 평가한다.
   • 조건식이 계속 true면 반복한다.

• while문은 조건식이 항상 true이면 무한 루프에 빠질 수 있다. 이를 방지하려면 반복문 안에서 조건을 변화시키는 코드를 반드시 포함해야 한다.

while vs. for

• while
  - 조건이 명확하지 않은 반복 작업에 적합.
  • 조건이 false가 될 때까지 실행.
• for
  - 반복 횟수가 명확할 때 사용.

do while문

do while문은 코드를 먼저 실행한 후 조건을 검사하여 반복을 결정하는 반복문이다. 즉, 최소 한 번은 코드 블록이 실행된다.

do {
	// 실행할 코드
} while (조건);

1. 코드 블록 실행
   • 조건을 확인하기 전에 코드 블록이 먼저 실행된다.
2. 조건 평가
   • 조건식이 true이면 다시 반복 실행.
   • 조건식이 false이면 반복 종료.
   • 조건식이 false여도 첫 번째 실행은 보장된다.

do while vs. while

특징	while	do while
조건 확인 순서	먼저 조건을 확인하고, 참이면 실행 시작	먼저 코드를 실행한 후 조건을 확인
최소 실행 여부	조건이 false면 한 번도 실행되지 않을 수 있음	조건이 false여도 최소 한 번은 실행됨
사용 사례	반복 여부를 조건으로 미리 결정해야 할 때	실행 후 조건에 따라 반복 여부를 결정할 때

함수

선언적 함수

선언적 함수(Declarative Function) 는 함수 선언 방식 중 하나로, function 키워드를 사용하여 함수를 정의한다. 함수의 이름을 명시적으로 지정하며 호이스팅(hoisting) 이 적용된다.

function 함수이름(매개변수1, 매개변수2, ...) {
	// 실행할 코드
    return 반환값;
}

1. 함수의 이름이 필수
   • 함수 선언 시 이름을 반드시 지정한다.
2. 호이스팅 지원
   • 함수가 정의된 위치와 관계없이 코드 상단으로 끌어올려져 사용할 수 있다.
   • 함수 선언 전에 호출이 가능하다.
3. 명확성과 재사용성
   • 함수의 이름으로 호출하기 때문에 디버깅과 코드 가독성이 좋다.

함수 표현식

함수 표현식(Function Expression) 은 함수를 변수에 할당하여 사용하는 방식이다. 함수 선언과는 달리 익명 함수 또는 기명 함수를 변수에 저장하여 정의한다.

const 변수이름 = function(매개변수1, 매개변수2, ...) {
	// 실행할 코드
    return 반환값;
};

1. 이름이 선택 사항
   • 함수 이름을 생략할 수 있어 익명 함수로 작성 가능하다.
   • 필요시 기명 함수(이름 있는 함수)로도 작성 가능하다.
2. 호이스팅 미지원
   • 함수 표현식은 선언 전에 사용할 수 없다. (변수가 초기화된 후에 호출 가능)
3. 재사용성과 간결함
   • 익명 함수로 정의하면 콜백 함수와 같은 일회성 작업에 유용하다.

선언적 함수 vs. 함수 표현식

특징	선언적 함수	함수 표현식
선언 방식	function 함수이름() {}	const 변수이름 = function() {}
이름	필수	선택
호이스팅	지원	지원하지 않음
사용 사례	재사용과 명확성을 강조할 때	콜백 함수, 일회성 작업
호출 가능 시점	선언 위치에 관계없이 호출 가능	정의 후

화살표 함수

화살표 함수(Arrow Function) 는 ES6에서 도입된 함수 정의 방식으로, 짧고 간결하게 함수를 작성할 수 있는 표현식이다. 화살표(=>)를 사용하여 정의하며, 기존 함수 표현식보다 코드가 더 간단해지고 this의 동작이 차별화된다.

const 함수이름 = (매개변수1, 매개변수2, ...) => {
	// 실행할 코드
    return 반환값;
};

1. function 키워드 생략
   • 화살표(=>)로 함수 정의를 간결하게 표현.
2. this 바인딩의 차이
   • 화살표 함수는 자신만의 this를 가지지 않고, 상위 스코프의 this를 상속한다.
   • 따라서 클래스나 콜백 함수에서 유용.
3. return 키워드 생략 가능
   • 코드 블록이 아닌 단일 표현식(한 줄 코드)인 경우 return 및 중괄호 {} 생략 가능.
4. 호이스팅 미지원
   • 함수 표현식처럼, 정의 후에만 호출 가능.

함수 표현식 vs. 화살표 함수

특징	함수 표현식	화살표 함수
this 바인딩	호출된 컨텍스트에 따라 결정	상위 스코프의 this를 상속
사용 용도	일반적인 함수	간단한 함수, 콜백 함수
선언 방식	const 함수이름 = function() {}	const 함수이름 = () => {}
return 생략 여부	항상 return 명시 필요	단일 표현식의 경우 생략 가능
호이스팅	지원하지 않음	지원하지 않음

콜백 함수

콜백 함수(Callback Function)는 다른 함수의 인수로 전달되어 해당 함수 내부에서 호출되는 함수이다. 자바스크립트에서 비동기 작업, 이벤트 처리, 배열 메서드 등의 작업을 처리할 때 필수적으로 사용된다.
1. 함수의 인수로 전달: 콜백 함수는 보통 특정 작업이 완료되거나 조건이 충족되었을 때 호출된다.
2. 함수 안에서 호출: 콜백 함수는 전달된 함수 내에서 정의된 조건에 따라 실행된다.

Personal Insight

어김없이 찾아온 월요일 이슈,,
연말이 다가올수록 주말은 더 바빠질 텐데, 체력 관리가 이제는 정말 중요해질 것 같다.
서버 작업을 하는 백엔드보다는 프론트엔드 개발이 개인적으로는 더 잘 맞는 것 같다.
확실히 집중도가 다르다.
화면에 직접 구현되는 걸 볼 때 더 흥미롭고 몰입도 잘 된다는 것을 배우게 된 이번 강의!
그렇다고 해서 하고 싶은 것, 잘할 수 있는 것, 편한 것만 하고 싶지는 않다.
어렵게 느껴지는 상황에서도 주어진 모든 환경에 최선을 다하는 사람이고 싶다.