1. Routing

1. Routing(๋ผ์šฐํŒ…)

๋ผ์šฐํŒ…

๋ผ์šฐํŒ…(routing)์€ ์–ด๋–ค ๋„คํŠธ์›Œํฌ ์•ˆ์—์„œ ํ†ต์‹  ๋ฐ์ดํ„ฐ(ํŒจํ‚ท)๋ฅผ ๋ณด๋‚ผ ๋•Œ ์ตœ์ ์˜ ๊ฒฝ๋กœ๋ฅผ ์„ ํƒํ•˜๋Š” ๊ณผ์ • โ†’ ๋ผ์šฐํ„ฐ๊ฐ€ ์ด๋ฅผ ์ˆ˜ํ–‰ ์ตœ์ ์˜ ๊ฒฝ๋กœ๋Š” ์ฃผ์–ด์ง„ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์žฅ ์งง์€ ๊ฑฐ๋ฆฌ๋กœ ๋˜๋Š” ๊ฐ€์žฅ ์ ์€ ์‹œ๊ฐ„ ์•ˆ์— ์ „์†กํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒฝ๋กœ

โšก ๏ธ๊ฐ€์žฅ ๋น ๋ฅธ ์ตœ์ ์˜ ๊ฒฝ๋กœ๋ฅผ ์ฐพ์•„ ์š”์ฒญ์„ ๋น ๋ฅด๊ฒŒ ์ „๋‹ฌ ๋ฐ์ดํ„ฐ๋Š” ๋ณดํ†ต ์ถœ๋ฐœ์ง€์—์„œ ๋ชฉ์ ์ง€๋กœ ๊ฐ€๋Š” ๋™์•ˆ ์—ฌ๋Ÿฌ๊ฐœ์˜ ๋ผ์šฐํ„ฐ๋ฅผ ๊ฑฐ์น˜๋ฉฐ ์—ฌ๋Ÿฌ๋ฒˆ์˜ ๋ผ์šฐํŒ…์„ ์ˆ˜ํ–‰(๋ผ์šฐํŒ…์€ ๋ณดํ†ต ์ดˆ๋‹น ์ˆ˜๋ฐฑ๋งŒ๋ฒˆ ๋ฐœ์ƒ) Ex. ๐ŸšŒ ๋Œ€์ค‘๊ตํ†ต ์ตœ์  ๋ฐฉ๋ฒ• ์„ ํƒ

routing

๋ผ์šฐํŒ… ๊ตฌํ˜„ํ•˜๊ธฐ

๐Ÿ”— ์‹ค์Šต ๋งํฌ : Home, About Page ๋ถ„๋ฆฌ ๋ฐ ๋ผ์šฐํŒ… ์ฒ˜๋ฆฌ ๊ตฌํ˜„

์ผ๋ฐ˜์ ์ธ ์›น ์‚ฌ์ดํŠธ๋Š” URL์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ์›น ํŽ˜์ด์ง€๋ฅผ ๋ณด์—ฌ์คŒ ํ•˜๋‚˜์˜ ์›น ํŽ˜์ด์ง€๋ฅผ ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ๋กœ ๋งŒ๋“ค๊ณ , URL์— ๋”ฐ๋ผ ์ ์ ˆํ•œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ณด์ด๊ฒŒ ํ•จ์œผ๋กœ์จ ๊ตฌํ˜„ (์ปดํฌ๋„ŒํŠธ๋ฅผ ์—ฌ๋Ÿฌ ์กฐ๊ฐ์œผ๋กœ ๋‚˜๋ˆ ์„œ, ์ฃผ์†Œ์— ๋”ฐ๋ผ ์กฐ๊ฐ์„ ๋ณด์—ฌ์ฃผ๋„๋ก ํ•˜๋Š” ๊ฒƒ)

  • location.pathname์— ๋”ฐ๋ผ ๊ฐ๊ธฐ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๋„๋ก ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ

function App() {
    const {pathname} = window.location;

    return (
        <div>
            <Header/>
            <main>
                {pathname === '/' && <HomePage/>}
                {pathname === '/about' && <AboutPage/>}
            </main>
            <Footer/>
        </div>
    );
}

2. HTML DOM API

HTML DOM API

HTML์˜ ๊ฐ ์š”์†Œ์˜ ๊ธฐ๋Šฅ์„ ์ •์˜ํ•˜๋Š” ์ธํ„ฐํŽ˜์ด์Šค์™€, ์ด๋“ค์ด ์˜์กดํ•˜๋Š” ์ง€์› ํƒ€์ž… ๋ฐ ์ธํ„ฐํŽ˜์ด์Šค๋กœ ๊ตฌ์„ฑ

HTML DOM API์— ํฌํ•จ๋œ ๊ธฐ๋Šฅ

  • DOM์„ ํ†ตํ•œ HTML ์š”์†Œ ์ ‘๊ทผ ๋ฐ ์ œ์–ด

  • ์–‘์‹(form) ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•œ ์ ‘๊ทผ ๋ฐ ์กฐ์ž‘

  • 2D ์ด๋ฏธ์ง€์˜ ์ฝ˜ํ…์ธ  ๋ฐ HTML ์ปจํ…์ŠคํŠธ(<canvas>)์™€ ์ƒํ˜ธ ์ž‘์šฉํ•˜์—ฌ ๊ทธ ์œ„์— ๊ทธ๋ฆผ์„ ๊ทธ๋ฆฌ๊ธฐ

  • HTML ๋ฏธ๋””์–ด ์š”์†Œ(<audio>๋ฐ <video>)์— ์—ฐ๊ฒฐ๋œ ๋ฏธ๋””์–ด ๊ด€๋ฆฌ

  • ์›น ํŽ˜์ด์ง€์—์„œ ์ฝ˜ํ…์ธ  ๋Œ์–ด์„œ ๋†“๊ธฐ(Drag and drop)

  • ๋ธŒ๋ผ์šฐ์ € ํƒ์ƒ‰ ๊ธฐ๋ก์— ๋Œ€ํ•œ ์ ‘๊ทผ

  • Web Components, Web Storage, Web Workers, WebSocket ๋ฐ Server-sent events์™€ ๊ฐ™์€ ๋‹ค๋ฅธ API์— ๋Œ€ํ•œ ์ง€์› ๋ฐ ์—ฐ๊ฒฐ ์ธํ„ฐํŽ˜์ด์Šค

Location

Location

HTML DOM API ์ค‘ ํŽ˜์ด์ง€ ๊ธฐ๋ก ์ธํ„ฐํŽ˜์ด์Šค ๋ธŒ๋ผ์šฐ์ €์˜ ๊ธฐ๋ก์— ๋Œ€ํ•œ ์ •๋ณด์— ์•ก์„ธ์Šคํ•˜๊ณ  ํ•ด๋‹น ๊ธฐ๋ก์„ ํ†ตํ•ด ๋ธŒ๋ผ์šฐ์ €์˜ ํ˜„์žฌ ํƒญ์„ ์•ž๋’ค๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ์Œ

Location ์ธํ„ฐํŽ˜์ด์Šค๋Š” ๊ฐ์ฒด๊ฐ€ ์—ฐ๊ฒฐ๋œ ์žฅ์†Œ(URL)๋ฅผ ํ‘œํ˜„ Location ์ธํ„ฐํŽ˜์ด์Šค์— ๋ณ€๊ฒฝ์„ ๊ฐ€ํ•˜๋ฉด ์—ฐ๊ฒฐ๋œ ๊ฐ์ฒด์—๋„ ๋ฐ˜์˜๋˜๋Š”๋ฐ, Document์™€ Window ์ธํ„ฐํŽ˜์ด์Šค๊ฐ€ ์ด๋Ÿฐ Location์„ ๊ฐ€์ง€๊ณ  ์žˆ์Œ ๊ฐ๊ฐ Document.location๊ณผ Window.location์œผ๋กœ ์ ‘๊ทผ ๊ฐ€๋Šฅ

Window.location

Window.location

Window.location ํ”„๋กœํผํ‹ฐ์— ์ ‘๊ทผํ•˜๋ฉด ์ฝ๊ธฐ ์ „์šฉ์ธ Location ์˜ค๋ธŒ์ ํŠธ๋ฅผ ์–ป์–ด์˜ฌ ์ˆ˜ ์žˆ์Œ ์ด๋Š” ํ˜„์žฌ ๋„ํ๋จผํŠธ์˜ ๋กœ์ผ€์ด์…˜์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๋‹ด๊ณ  ์žˆ์Œ

// window๋Š” Global์ด๊ธฐ ๋•Œ๋ฌธ์— ์ƒ๋žต ๊ฐ€๋Šฅ
// ๋‘ ๊ฐ€์ง€๋Š” ๋™์ผํ•œ ๊ฒƒ  

location
Window.location

๐Ÿฆ https://github.com/ShinjungOh ํŽ˜์ด์ง€์—์„œ ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•  ๊ฒฝ์šฐ

โ–ถ๏ธ location Location {ancestorOrigins: DOMStringList, href: 'https://github.com/ShinjungOh', origin: 'https://github.com', protocol: 'https:', host: 'github.com', โ€ฆ}

pathname

pathname

'/' ๋ฌธ์ž ๋’ค URL์˜ ๊ฒฝ๋กœ๋ฅผ ๊ฐ’์œผ๋กœ ํ•˜๋Š” DOMString pathname ์ธํ„ฐํŽ˜์ด์Šค์˜ ์†์„ฑ์€ Location์— ๋Œ€ํ•œ URL์˜ ๊ฒฝ๋กœ๋ฅผ ํฌํ•จํ•˜๋Š” ๋ฌธ์ž์—ด

  • ๊ฒฝ๋กœ๊ฐ€ ์—†์œผ๋ฉด pathname์ด ๋น„์–ด์žˆ์Œ

  • ๊ฒฝ๋กœ๊ฐ€ ์žˆ์œผ๋ฉด pathname ์ฟผ๋ฆฌ ๋ฌธ์ž์—ด์ด๋‚˜ ์กฐ๊ฐ์„ ํฌํ•จํ•˜์ง€ ์•Š๊ณ  URL์˜ ๊ฒฝ๋กœ๊ฐ€ ๋’ค์— ์˜ค๋Š” ์ดˆ๊ธฐ '/'๋ฅผ ํฌํ•จ

๐Ÿฆ https://github.com/ShinjungOh ํŽ˜์ด์ง€์—์„œ ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•  ๊ฒฝ์šฐ

โ–ถ๏ธ location.pathname '/ShinjungOh'

hash

hash

'#' ๋ฌธ์ž ๋’ค URL์˜ ํ”„๋ž˜๊ทธ๋จผํŠธ ์‹๋ณ„์ž๋ฅผ ๊ฐ’์œผ๋กœ ํ•˜๋Š” DOMString

๐Ÿฆ https://developer.mozilla.org/ko/docs/Web/API/Location#์˜ˆ์ œ ํŽ˜์ด์ง€์—์„œ ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•  ๊ฒฝ์šฐ

โ–ถ๏ธ location.hash '#%EC%98%88%EC%A0%9C'

encodeURI('์˜ˆ์ œ')

'#%EC%98%88%EC%A0%9C'
decodeURI(location.hash)

'#์˜ˆ์ œ'

Last updated