멋사 19일차 TIL - DOM & BOM & 비동기 프로그래밍 📚¶

📅 학습 날짜¶

2025년 8월 25일 (월)

📝 오늘 배운 내용 요약¶

🌳 오전: DOM (Document Object Model) - 웹페이지 요소 조작
🌐 오후: BOM (Browser Object Model) - 브라우저 제어
🚀 오후: 비동기 프로그래밍 - Promise, async/await

🌳 DOM (Document Object Model)¶

DOM이 뭔가요?¶

DOM은 웹페이지의 HTML을 JavaScript로 조작할 수 있게 해주는 도구입니다. 쉽게 말해, 웹페이지의 내용을 프로그램으로 바꾸거나 추가할 수 있게 해줍니다.

🔧 주요 기능들¶

1. 요소 찾기¶

// ID로 찾기 (가장 많이 사용)
const button = document.getElementById('myButton');

// 클래스명으로 찾기
const items = document.getElementsByClassName('item');

// CSS 선택자로 찾기 (편리함)
const title = document.querySelector('#title');
const allButtons = document.querySelectorAll('.btn');

2. 요소 만들고 추가하기¶

// 새로운 요소 만들기
const newDiv = document.createElement('div');
newDiv.textContent = '안녕하세요!';

// 페이지에 추가하기
document.body.appendChild(newDiv);

3. 요소 삭제하기¶

// 요소 삭제
element.remove();

💡 실제 활용 예제¶

// 버튼을 클릭하면 새로운 아이템이 추가되는 코드
const addButton = document.getElementById('add-btn');
const itemList = document.getElementById('item-list');
const textInput = document.getElementById('text-input');

addButton.addEventListener('click', function() {
    const newItem = document.createElement('li');
    newItem.textContent = textInput.value;
    itemList.appendChild(newItem);
    textInput.value = ''; // 입력창 비우기
});

🌐 BOM (Browser Object Model)¶

BOM이 뭔가요?¶

BOM은 브라우저 자체를 JavaScript로 제어할 수 있게 해주는 도구입니다. 새 창을 열거나, 페이지를 이동하거나, 브라우저 정보를 알아낼 수 있습니다.

🔧 주요 객체들¶

1. window 객체 - 브라우저 창 제어¶

// 알림창 띄우기
window.alert('안녕하세요!');

// 확인/취소 선택하기
const result = window.confirm('정말 삭제하시겠습니까?');

// 사용자 입력받기
const name = window.prompt('이름을 입력하세요:');

2. location 객체 - 현재 페이지 URL 정보¶

// 현재 페이지 주소 확인
console.log(location.href);

// 다른 페이지로 이동
location.href = 'https://www.google.com';

// 페이지 새로고침
location.reload();

3. navigator 객체 - 브라우저 정보¶

// 브라우저 종류 확인
console.log(navigator.userAgent);

// 언어 설정 확인
console.log(navigator.language); // 예: "ko-KR"

// 인터넷 연결 상태 확인
console.log(navigator.onLine); // true/false

4. 타이머 함수들¶

// 3초 후에 한 번 실행
setTimeout(function() {
    console.log('3초가 지났습니다!');
}, 3000);

// 2초마다 반복 실행
const timer = setInterval(function() {
    console.log('2초마다 실행됩니다!');
}, 2000);

// 타이머 정지
clearInterval(timer);

🚀 비동기 프로그래밍¶

비동기가 뭔가요?¶

기다리지 않고 다른 일도 동시에 하는 프로그래밍 방식입니다.

🏪 실생활 예시¶

동기: 은행에서 번호표 뽑고 순서 기다리기
비동기: 온라인 주문하고 배송 기다리면서 다른 일하기

📱 JavaScript에서의 비동기 처리¶

1. Promise - 약속 같은 것¶

// 피자 주문하는 함수 (시간이 걸림)
function orderPizza() {
    return new Promise((resolve, reject) => {
        console.log('🍕 피자 주문 중...');

        setTimeout(() => {
            const success = Math.random() > 0.2; // 80% 확률로 성공

            if (success) {
                resolve('🍕 맛있는 피자 완성!');
            } else {
                reject('😢 재료가 떨어졌습니다');
            }
        }, 3000);
    });
}

// Promise 사용하기
orderPizza()
    .then(result => {
        console.log('성공:', result);
    })
    .catch(error => {
        console.log('실패:', error);
    });

2. async/await - 더 쉬운 방법 (추천! ⭐)¶

// 위와 같은 기능을 더 쉽게
async function buyPizza() {
    try {
        console.log('피자 주문 시작!');
        const result = await orderPizza(); // 피자가 올 때까지 기다림
        console.log('받은 피자:', result);
        console.log('맛있게 먹겠습니다! 🍽️');
    } catch (error) {
        console.log('주문 실패:', error);
        console.log('다른 음식을 주문해야겠네요...');
    }
}

buyPizza();

🌤️ 실제 활용 예제 - 날씨 정보 가져오기¶

// 날씨 API 호출하는 함수
async function getWeather(city) {
    console.log(`${city}의 날씨 확인 중...`);

    // 실제로는 진짜 API를 호출합니다
    return new Promise((resolve) => {
        setTimeout(() => {
            const weather = {
                city: city,
                temperature: Math.floor(Math.random() * 30) + 5,
                condition: '맑음'
            };
            resolve(weather);
        }, 1000);
    });
}

// 여러 도시 날씨를 동시에 확인
async function checkMultipleWeather() {
    try {
        const cities = ['서울', '부산', '대구'];

        // 모든 도시의 날씨를 동시에 요청
        const weatherPromises = cities.map(city => getWeather(city));
        const results = await Promise.all(weatherPromises);

        results.forEach(weather => {
            console.log(`${weather.city}: ${weather.temperature}°C, ${weather.condition}`);
        });
    } catch (error) {
        console.log('날씨 정보 가져오기 실패:', error);
    }
}

checkMultipleWeather();

🎯 오늘의 핵심 정리¶

DOM (오전 학습)¶

웹페이지 조작: HTML 요소를 찾고, 추가하고, 삭제하기
이벤트 처리: 버튼 클릭, 키보드 입력 등에 반응하기
동적 웹페이지: 사용자와 상호작용하는 웹사이트 만들기

BOM (오후 학습)¶

브라우저 제어: 새 창, 알림창, 페이지 이동
브라우저 정보: 사용자 환경 확인하기
타이머: 일정 시간 후 코드 실행하기

비동기 프로그래밍 (오후 학습)¶

효율적 처리: 기다리는 시간에 다른 일하기
Promise: 미래에 완료될 작업 약속하기
async/await: 비동기 코드를 동기처럼 쉽게 작성하기

💪 내일 할 일¶

[ ] DOM 조작 연습 프로젝트 만들기
[ ] 실제 웹 API와 연동해보기
[ ] 비동기 처리 더 깊이 공부하기

🤔 어려웠던 점¶

비동기 개념: 처음에는 코드 실행 순서가 헷갈렸음
Promise 체이닝: .then() 연결하는 방법이 복잡했음
에러 처리: try/catch 사용하는 타이밍

💡 깨달은 점¶

async/await가 Promise보다 훨씬 이해하기 쉬움
DOM 조작으로 정말 동적인 웹페이지를 만들 수 있음
비동기 처리는 사용자 경험을 크게 개선함

📚 추가 공부하면 좋을 것들¶

Fetch API로 실제 서버와 통신하기
이벤트 위임(Event Delegation) 패턴
웹 컴포넌트(Web Components)
RxJS 같은 반응형 프로그래밍 라이브러리

🔗 관련 학습 자료¶

📚 DOM & BOM 상세 가이드 - 오늘 학습한 DOM과 BOM의 완전 가이드
🚀 비동기 프로그래밍 완벽 정리 - Promise와 async/await 마스터하기

오늘도 고생했다! 내일은 더 재미있는 프로젝트를 만들어보자! 🎉