[JavaScript] JavaScript 기초 6 (BOM, DOM, 화살표함수, 콜백함수, 이벤트)

BOM (Browser Object Model)

BOM이란?

자바스크립트가 브라우저 자체를 제어하고 정보를 얻기 위해 사용하는 객체 모델을 말한다.

API (Application Programming Interface)

서로 다른 프로그램이나 시스템이 데이터를 주고받고 기능을 사용할 수 있도록 연결해주는 중간 통로

BOM을 구성하는 4대 객체

1. window 객체

• 자바스크립트에서 브라우저 창을 대표하는 최상위 객체로, 전역 범위에서 정의된 변수나 함수, 타이머, 팝업, 브라우저 정보 등 대부분의 기능을 포함하고 있다.
• HTML 페이지를 로드하면 브라우저는 자동으로 window 객체를 생성하며, 자바스크립트 코드에서 명시적으로 window를 쓰지 않아도 사용할 수 있다.

2. location 객체

• 자바스크립트에서 현재 웹 페이지의 URL(주소) 정보를 다루고 제어할 수 있게 해주는 window 객체의 하위 객체

3. history 객체

• 브라우저의 방문 기록을 제어할 수 있는 객체로, 사용자가 이전에 방문했던 페이지로 이동하거나 앞으로 다시 이동할 수 있는 기능을 제공.

4. navigator 객체

• 브라우저에 대한 정보를 제공하는 객체로, 사용자의 브라우저 종류, 버전, 운영체제, 언어 설정, 온라인 여부 등 다양한 환경 정보를 확인할 수 있도록 해준다.
• 이 정보의 존재 유무로 사용자인지 봇인지 구분 가능하다.
• geolocation : 사용자의 위치 정보를 가져오기 위한 API로, GPS, Wifi, IP 주소 등을 이용해 현재 위치를 알아낸다. 사용자의 명시적인 동의가 있어야 작동한다.

DOM (Document Object Model)

DOM이란?

HTML 문서를 트리 구조의 객체로 표현한 것으로, 자바스크립트를 통해 웹 페이지의 요소를 선택하고 내용이나 스타일을 변경하며, 요소를 추가 / 삭제하는 등 동적인 화면 조작을 가능하게 해주는 인터페이스를 말한다.

DOM의 작동 원리

1. 브라우저가 HTML 파일을 읽음
2. HTML 태그를 하나하나 분석하여 트리 구조의 객체를 생성
3. 각 태그는 노드라는 객체가 됨
4. 자바스크립트는 DOM 객체를 통해 화면을 제어함

Document 객체

• 웹 페이지 전체를 표현하는 최상위 DOM 객체로, HTML 문서에 접근하고 조작할 수 있는 핵심 객체
• 브라우저가 HTML 파일을 로드하면 자동으로 document 객체가 생성되며, 이 객체를 통해 웹 페이지의 요소들을 선택하거나 생성, 수정, 삭제할 수 있다.

화살표함수와 콜백함수

자바스크립트에서 this가 바뀌는 문제

• this가 선언 시점이 아니라 "호출되는 방식"에 따라 결정됨
• 같은 함수라도 어떻게 호출하느냐에 따라 this가 전혀 다른 대상을 가리킬 수 있음

// 브라우저 환경: this === window, 일반 함수 호출은 전역 객체를 가리킴
function show() {
    console.log(this)
}
show()

// this === obj, 점 앞의 객체가 this가 됨
const obj1 = {
    name: "김사과",
    show() {
        console.log(this.name)
    }
}
obj1.show()

화살표 함수

• function 키워드 대신 => 기호를 사용하여 함수를 더 간결하게 작성하는 방법
• ES6부터 도입된 문법으로 코드를 짧게 만들고, this 바인딩 문제를 해결함

// 콜백함수를 호출하면 this가 바뀌는 문제가 발생
// setTimeout안에 함수는 일반 함수 호출 -> this === window
const obj2 = {
    name: "김사과",
    show() {
        setTimeout(function () {
            console.log(this.name)
        }, 1000)
    }
}
obj2.show()

// 화살표 함수
const obj3 = {
    name: "김사과",
    show() {
        setTimeout(() => {
            console.log(this.name)
        }, 1000)
    }
}
obj3.show()

동기 vs 비동기

동기 (Synchronous)

• 동기는 작업이 순서대로 하나씩 실행되는 방식
• 앞에 있는 작업이 끝나야 다음 작업을 실행

비동기 (Asynchronous)

• 느린 작업을 기다리지 않고, 나중에 따로 실행될 작업은 뒤로 미뤄놓고 다음 코드부터 먼저 실행하는 방식
• 기본적으로 한 줄씩 처리하는 단일 스레드 언어. 모든 작업을 동기로 처리하면, 느린 작업이 있으면 전체 프로그램이 멈추게 됨.
• 비동기가 필요한 작업
  • 서버에서 데이터 가져오기
  • 파일 읽기
  • 이미지 로딩
  • 타이머, 사용자 이벤트 등

콜백 함수

• 다른 함수의 인자로 전달되어, 그 함수 내부에서 나중에 호출되는 함수
• 어떤 작업이 끝난 후 실행되어야 할 코드를 함수로 전달해주는 방식
• 비동기 처리나 배열 메서드에서 자주 사용됨
• 일반 함수나 화살표 함수 모두 콜백 함수로 사용할 수 있다.

// 콜백 함수
function greet(name, callback) {
    console.log("안녕, " + name + "!")
    callback()
}

function sayBye() {
    console.log("빠이 ~")
}

greet("김사과", sayBye)

const numbers = [1, 2, 3, 4]
const doubled = numbers.map(n => n * 2)
console.log(doubled)

function doSomething(callback) {
    console.log("작업 시작!")
    callback()
}

doSomething(() => {
    console.log("작업 완료!")
})

const calc_add = (a, b) => a + b
const calc_multiply = (a, b) => a * b

function calculater(num1, num2, action) {
    if (num1 < 0 || num2 < 0) return
    const result = action(num1, num2)
    return result
}
console.log(calculater(10, 3, calc_add))
console.log(calculater(10, 3, calc_multiply))

이벤트 (Event)

• 사용자가 웹 페이지와 상호작용할 때 발생하는 특정 동작이나 상황을 의미한다.
• 버튼 클릭, 키보드 입력, 마우스 이동, 폼 제출, 창 닫기 등
• 특정 반응(동작)을 하도록 코드를 작성한다.
  • 이벤트 리스터를 등록
  • addEventListener()
• 이벤트 문법
  • 대상 + 이벤트 종류 + 실행할 함수

마우스

함수	동작
click	클릭
dblclick	더블 클릭
mousedown	마우스 버튼을 눌렀을 때
mouseup	마우스 버튼을 뗐을 때
mouseenter	마우스를 요소 위에 올렸을 때
mouseleave	요소에서 마우스가 벗어났을 때
mousemove	마우스를 움직일 때

키보드

함수	동작
keydown	키를 누르는 순간
keyup	키를 눌렀다 뗐을 때

폼

함수	동작
submit	폼이 제출될 때
input	입력값이 변경될 때
change	입력이 끝나고 값이 변경될 때
focus	입력창에 포커스가 생길 때
blur	입력창에서 포커스가 사라질 때

문서

함수	동작
load	페이지가 모두 로드되었을 때
resize	브라우저 크기를 변경할 때
scroll	페이지를 스크롤할 때

터치 (모바일)

함수	동작
touchstart	화면을 터치했을 때
touchmove	터치한 채로 움직일 때
touchend	터치를 뗐을 때

 

드래그

함수	동작
dragstart	요소를 누를 때
drag	요소를 움직일 때
dragend	요소에서 뗐을 때

const eventBtn = document.getElementById("eventBtn")
eventBtn.addEventListener("click", function () {
    alert("addEventListener로 연결된 이벤트")
})

eventBtn.addEventListener("mouseenter", function () {
    eventBtn.style.backgroundColor = 'deeppink'
})

eventBtn.addEventListener("mouseleave", function () {
    eventBtn.style.backgroundColor = ''
})

document.getElementById("clickArea").addEventListener("click", function (event) {
    alert(`클릭한 위치: X=${event.clientX}, Y=${event.clientY}\n` +
        `이벤트 타입: ${event.type}\n` +
        `이벤트 대상: ${event.target.id}`
    )
})

document.getElementById('inputBox').addEventListener("keydpown", function (event) {
    console.log("입력된 키: ", event.key)
    console.log("코드: ", event.code)
    console.log("이벤트 발생한 요소: ", event.target)
})

document.getElementById("inputBox").addEventListener("keypress", function(event) {
    if(event.key === 'Enter'){
        event.preventDefault()
        alert("엔터키는 막았어요")
    }
})

이벤트 객체

• 이벤트가 발생했을 때 브라우저가 자동으로 생성해 이벤트 핸들러 함수에 전달하는 이벤트 관련 정보 묶음 객체
• 어떤 요소에서 이벤트가 발생했는지(target), 어떤 종류의 이벤트인지(type), 마우스 좌표나 키 입력 정보 등 다양한 데이터를 담고 있다.