# ๐Ÿ–ผ๏ธ BOM (Browser Object Model)

# ๐Ÿง‘๐Ÿผโ€๐Ÿš€ BOM์„ ์•Œ์•„์•ผ ํ•˜๋Š” ์ด์œ 

โ—์œ ์ €์—๊ฒŒ ๊ฒฝ๊ณ ์ฐฝ์„ ๋„์šฐ๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ, โ—์œ ์ €์˜ yes or no์™€ ๊ฐ™์€ ์„ ํƒ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ์‘๋‹ต์„ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ โ—์œ ์ €๊ฐ€ ๋ธŒ๋ผ์šฐ์ € ์ฐฝ์„ ๋‹ซ๊ธฐ ์ „์— ์ •๋ง ๋– ๋‚  ๊ฒƒ์ธ์ง€ ํ™•์ธํ•˜๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ โ—์œ ์ €๊ฐ€ ์ ‘์†ํ•œ ํ™˜๊ฒฝ์„ ์•Œ๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ โ—ํ˜„์žฌ url ์œ„์น˜ ๋ฐ, ์ ‘์† history๋ฅผ ์•Œ๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ

์—ฌ๋Ÿฌ ui๋ฅผ ์ง์ ‘ ๋งŒ๋“ค๊ณ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์ง์ ‘ ์ œ์–ดํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ, ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋ณธ API๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ํ›จ์”ฌ ๋น ๋ฅด๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ ํ”„๋กœํ† ํƒ€์ดํ•‘์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

# ๐Ÿ™‹๐Ÿปโ€โ™‚๏ธ ์ด ๋ฌธ์„œ๋ฅผ ๋ณด๊ณ  ๋‚˜๋ฉด

  • ๏ธalert์„ ์ด์šฉํ•˜๋ฉฐ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ฉ”์„ธ์ง€๋ฅผ ๋„์šธ ์ˆ˜ ์žˆ๋‹ค.
  • confirm์„ ์ด์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ๋™์ž‘์„ ๊ฒฐ์ •ํ•  ์ˆ˜ ์žˆ๊ฒŒ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • prompt๋ฅผ ์ด์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ ๊ฐ’์„ ๋ฐ›์•„์˜ฌ ์ˆ˜ ์žˆ๋‹ค.
  • ์‚ฌ์šฉ์ž๊ฐ€ ํŽ˜์ด์ง€๋ฅผ ๋– ๋‚˜๊ธฐ ์ „์— ํ™•์ธํ•˜๋Š” ๊ฒฝ๊ณ  ๋ฉ”์„ธ์ง€๋ฅผ ๋„์šธ ์ˆ˜ ์žˆ๋‹ค.

# ๐Ÿ–ผ๏ธ BOM: Browser Object Model

BOM(Browser Object Model)์€ ์›น ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์˜ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ ๊ฐ์ฒด์ฒ˜๋Ÿผ ๋‹ค๋ฃจ๋Š” ๋ชจ๋ธ์ž…๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๊ตฌํ˜„์€ ๋˜์–ด์žˆ์ง€๋งŒ, ์ •์˜๋œ ํ‘œ์ค€์ด ์—†์–ด ๋ธŒ๋ผ์šฐ์ € ์ œ์ž‘์‚ฌ ๋งˆ๋‹ค ์„ธ๋ถ€์‚ฌํ•ญ์ด ๋‹ค๋ฅด๊ณ  ๋‹ค์†Œ ํ•œ์ •์ ์ด๋ผ๋Š” ํŠน์ง•์ด ์žˆ์Šต๋‹ˆ๋‹ค. BOM์˜ ์—ญํ• ์€ ์›น ๋ธŒ๋ผ์šฐ์ €์˜ ๋ฒ„ํŠผ, URL ์ฃผ์†Œ ์ž…๋ ฅ ์ฐฝ, ํƒ€์ดํ‹€ ๋ฐ” ๋“ฑ ์›น๋ธŒ๋ผ์šฐ์ € ์œˆ๋„์šฐ ๋ฐ ์›นํŽ˜์ด์ง€์˜ ์ผ๋ถ€๋ถ„์„ ์ œ์–ดํ• ์ˆ˜ ์žˆ๊ฒŒ๋” ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. window ๊ฐ์ฒด๋ฅผ ํ†ตํ•ด ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” ๋Œ€ํ‘œ์ ์ธ BOM ๊ฐ์ฒด๋“ค์ž…๋‹ˆ๋‹ค.

  • 1) window: Global Context. ๋ธŒ๋ผ์šฐ์ € ์ฐฝ ๊ฐ์ฒด
  • 2) screen: ์‚ฌ์šฉ์ž ํ™˜๊ฒฝ์˜ ๋””์Šคํ”Œ๋ ˆ์ด ์ •๋ณด ๊ฐ์ฒด
  • 3) location: ํ˜„์žฌ ํŽ˜์ด์ง€์˜ url์„ ๋‹ค๋ฃจ๋Š” ๊ฐ์ฒด
  • 4) navigator: ์›น๋ธŒ๋ผ์šฐ์ € ๋ฐ ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ ์ •๋ณด ๊ฐ์ฒด
  • 5) history: ํ˜„์žฌ์˜ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ ‘๊ทผํ–ˆ๋˜ URL history
Tip `beforeunload`์ด๋ฒคํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํŽ˜์ด์ง€๋ฅผ ๋ฒ—์–ด๋‚  ๋•Œ ํ™•์ธ ๋ฉ”์„ธ์ง€๋ฅผ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹จ, ํฌ๋กฌ์—์„œ๋Š” ๊ฒฝ๊ณ ์ฐฝ์— ๋ฌธ๊ตฌ๊ฐ€ ๋‚˜ํƒ€๋‚˜์ง„ ์•Š์Šต๋‹ˆ๋‹ค.
window.onbeforeunload = function() {
    return '์ž‘์„ฑ ์ค‘์ธ ๋ฉ”์‹œ์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.'
}

# ๐Ÿ“˜ ์ •๋ฆฌ

  • BOM์€ ์›น ๋ธŒ๋ผ์šฐ์ €์˜ ๊ธฐ๋Šฅ๋“ค์„ ๊ฐ์ฒด์ฒ˜๋Ÿผ ๋‹ค๋ฃจ๋Š” ๋ชจ๋ธ์ด๋‹ค.
  • ์ •์˜๋œ ํ‘œ์ค€์ด ์—†์–ด ๋ธŒ๋ผ์šฐ์ € ์ œ์ž‘์‚ฌ๋งˆ๋‹ค ๊ตฌํ˜„์ด ๋‹ค๋ฅด๋‹ค.
  • BOM์—์„œ ์ œ๊ณตํ•˜๋Š” API๋ฅผ ์ ๊ทน ํ™œ์šฉํ•˜๋ฉด, ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.