2차_4주차_김다연_회고록 - hyeone999/Docs-JS_deepDive_Study GitHub Wiki

자바스크립트 비동기 프로그래밍 정리

1. 동기(Synchronous) vs 비동기(Asynchronous)

  • 동기 처리: 코드가 순서대로 실행됨. 앞 작업이 끝나야 다음 작업 진행 (→ 블로킹)
  • 비동기 처리: 기다리지 않고 다음 작업 실행. 결과가 준비되면 나중에 처리 (→ 논블로킹)
console.log('1');
setTimeout(() => console.log('2'), 1000);
console.log('3');
// 출력: 1 → 3 → 2

2. 실행 컨텍스트 & 콜 스택

  • 함수가 실행되면 실행 컨텍스트가 콜 스택에 쌓임 (push)

  • 실행이 끝나면 스택에서 제거됨 (pop)

  • 자바스크립트는 싱글 스레드 → 한 번에 하나의 작업만 가능

function sleep(callback, delay) {
  const start = Date.now();
  while (Date.now() - start < delay) {}
  callback();
}

sleep(() => console.log('A'), 3000);
console.log('B'); // 3초 후 출력됨 (동기 → 블로킹)

3. 비동기 처리 방식

  • 대표 API: setTimeout, fetch, Promise, async/await, 이벤트 핸들러 등

  • 비동기 처리는 Web API, 태스크 큐, 이벤트 루프가 협력하여 처리

setTimeout(() => console.log('foo'), 0);
console.log('bar'); // bar → foo 출력 (foo는 큐에 대기)

4. 이벤트 루프 동작 방식

1. 함수 실행 시 콜 스택에 쌓임

2. setTimeout 같은 비동기 작업은 Web API 영역에서 처리

3. 완료되면 태스크 큐(Task Queue) 또는 마이크로태스크 큐로 이동

4. 콜 스택이 비면 이벤트 루프가 큐에서 작업을 꺼내 실행

5. 콜백 함수 (Callback)

비동기 작업이 끝난 뒤 실행되는 함수

setTimeout(() => {
  console.log('1초 후 실행');
}, 1000);
  • 중첩이 많아지면 콜백 지옥 발생 → 가독성 낮음

6. 프로미스 (Promise)

  • 비동기 작업의 성공/실패를 처리하는 객체

  • then, catch, finally 메서드 사용

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('데이터 수신'), 1000);
  });
};

fetchData().then((data) => console.log(data));

7. async / await

  • Promise를 더 깔끔하게 사용할 수 있는 문법

  • 동기 코드처럼 비동기 흐름 작성 가능

async function getData() {
  const result = await fetchData();
  console.log(result);
}
  • 예외 처리: try-catch 구문 사용
async function safeFetch() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (e) {
    console.error('에러 발생', e);
  }
}

1. DOM이란?

  • DOM은 HTML, XML 문서를 트리 구조로 표현한 객체 모델입니다.
  • HTML 문서 내 모든 요소는 **노드(Node)**로 표현됩니다.
  • 자바스크립트를 통해 이 노드를 탐색하고 조작할 수 있습니다.
<body>
  <h1>Hello</h1>
  <p>Welcome!</p>
</body>

DOM을 구성하는 노드

어트리뷰트 노드: class="greeting" 같은 속성

텍스트 노드: 태그 내부의 텍스트 (Hello, World! 등)

2. DOM 요소 선택 방법

  • DOM 조작을 위해서는 먼저 HTML 요소를 선택해야 합니다.

✅ 선택 메서드 정리

메서드 반환값 설명
getElementById 단일 요소 ID로 선택
getElementsByClassName HTMLCollection 클래스 이름으로 선택
getElementsByTagName HTMLCollection 태그 이름으로 선택
querySelector 단일 요소 CSS 선택자로 첫 번째 요소 선택
querySelectorAll NodeList CSS 선택자로 모든 요소 선택

✅ 예제 코드

const title = document.getElementById("main-title");
const items = document.querySelectorAll(".item");

3. DOM 트리 탐색

선택한 요소를 기준으로 DOM 구조를 탐색할 수 있습니다. ✅ 자식, 부모, 형제 노드 탐색

const ul = document.getElementById("fruits");

ul.parentNode            // 부모 노드
ul.children              // 자식 요소 노드들
ul.firstElementChild     // 첫 번째 자식 요소
ul.lastElementChild      // 마지막 자식 요소

✅ 형제 노드 탐색

const banana = document.querySelector(".banana");

banana.previousElementSibling  // 이전 형제 요소
banana.nextElementSibling      // 다음 형제 요소

4. 노드 정보 확인

각 노드는 고유한 정보를 가지고 있습니다.

✅ 주요 프로퍼티

프로퍼티 설명
nodeType 노드 타입 (1: 요소, 3: 텍스트, 9: 문서 등)
nodeName 노드 이름 (예: DIV, #text, #document) 
const div = document.getElementById("foo");

console.log(div.nodeType);  // 1 (요소)
console.log(div.nodeName);  // "DIV"

5. 텍스트 조작

✅ 주요 프로퍼티

프로퍼티 대상 특징
nodeValue 텍스트 노드 텍스트 전용
textContent 모든 노드 자식 포함 전체 텍스트 처리
innerText 요소 노드 렌더링된 텍스트 기준 (비추천) 
const title = document.getElementById("foo");
title.textContent = "안녕하세요";

6. DOM 조작

HTML 요소를 동적으로 생성, 추가, 삭제할 수 있습니다.

✅ innerHTML

element.innerHTML = "<p>Hello</p>"; // 전체 교체

✅ insertAdjacentHTML

element.insertAdjacentHTML("beforeend", "<li>New Item</li>");

✅ createElement & appendChild

const newDiv = document.createElement("div");
newDiv.textContent = "새 요소";
document.body.appendChild(newDiv);

✅ remove()

newDiv.remove();

7. 어트리뷰트 조작

✅ 메서드 정리

작업 메서드
읽기 getAttribute(name)
설정 setAttribute(name, value)
삭제 removeAttribute(name)
확인 hasAttribute(name) 
const input = document.getElementById("user");

input.setAttribute("value", "ungmo2");
console.log(input.getAttribute("value")); // "ungmo2"
input.removeAttribute("type");

8. 스타일 조작

✅ 인라인 스타일

const box = document.querySelector(".box");

box.style.color = "blue";
box.style["background-color"] = "yellow";

✅ classList 조작

box.classList.add("active");
box.classList.remove("active");
box.classList.toggle("active");

✅ 모든 스타일 확인

const styles = getComputedStyle(box);
console.log(styles.backgroundColor); // rgb(255, 255, 255) 등

9. 이벤트 처리

  • 사용자와의 상호작용을 이벤트로 처리할 수 있습니다.
const btn = document.getElementById("toggle-btn");

btn.addEventListener("click", () => {
  document.querySelector(".box").classList.toggle("active");
});

마지막 회차 느낀점

자바스크립트 마지막 회차에서는 DOM과 비동기 프로그래밍을 공부했다. DOM은 HTML 구조를 자바스크립트로 조작하는 핵심 개념이지만, 처음 접했을 때는 구조가 낯설고 복잡해서 혼자 공부하는 데 어려움이 있었다. 하지만 다른 사람들의 정리나 예제를 참고하면서 개념을 시각적으로 이해하는 데 많은 도움이 되었고, DOM을 객체로 바라보는 관점이 생긴 것이 큰 수확이었다. 비동기 프로그래밍은 setTimeout, Promise 같은 개념을 통해 자바스크립트가 싱글 스레드에서도 어떻게 효율적으로 동작하는지를 배울 수 있었고, 특히 이벤트 루프의 구조를 이해하면서 자바스크립트가 내부적으로 얼마나 정교하게 설계되어 있는지를 느낄 수 있었다. 하지만 이해가 아쉬운 부분도 있어 더 혼자 공부해야겠다고 생각이 많이 들었다. 1차부터 2차까지 자바스크립트를 배우며 쉽지 않은 개념도 많았지만, 그만큼 확실히 얻어가는 게 많았고, 앞으로도 반복 학습을 통해 더 익숙해지고 싶다는 동기부여가 되었다.

⚠️ **GitHub.com Fallback** ⚠️