ํ”ผ๋“œ๋กœ ๋Œ์•„๊ฐ€๊ธฐ
๐Ÿš€ WebVirt: Carga tu SPA en Android WebView con solo 3 lรญneas de cรณdigo
Dev.toDev.to
Frontend

150๋ผ์ธ์˜ WebView ์„ค์ • ์ฝ”๋“œ๋ฅผ 3๋ผ์ธ์œผ๋กœ ์ถ”์ƒํ™”ํ•œ ๊ฐ€์ƒ ์„œ๋ฒ„ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ WebVirt

๐Ÿš€ WebVirt: Carga tu SPA en Android WebView con solo 3 lรญneas de cรณdigo

Giovani Fouz2026๋…„ 4์›” 24์ผ3๋ถ„intermediate

Context

Android WebView ํ™˜๊ฒฝ์—์„œ React, Vue ๋“ฑ SPA์˜ Asset ๋กœ๋”ฉ ๋ฐ Routing ๊ตฌํ˜„ ์‹œ ๋ฐœ์ƒํ•˜๋Š” ๊ณผ๋„ํ•œ Boilerplate ์ฝ”๋“œ ๋ฌธ์ œ. WebViewAssetLoader ๋ฐ shouldInterceptRequest์˜ ์ˆ˜๋™ ์„ค์ •์œผ๋กœ ์ธํ•œ 404 ์—๋Ÿฌ์™€ MIME type ๊ด€๋ฆฌ์˜ ๋ณต์žก์„ฑ ์กด์žฌ.

Technical Solution

  • Virtual Web Server ๊ตฌ์กฐ ์„ค๊ณ„๋ฅผ ํ†ตํ•œ WebView ์š”์ฒญ ๊ฐ€๋กœ์ฑ„๊ธฐ ๋ฐ Asset ์ง์ ‘ ์„œ๋น™
  • SPA Routing ์ง€์›์„ ์œ„ํ•ด ๋ชจ๋“  ๊ฒฝ๋กœ ์š”์ฒญ์„ index.html๋กœ ๋ฆฌ๋‹ค์ด๋ ‰์…˜ํ•˜๋Š” Fallback ๋ฉ”์ปค๋‹ˆ์ฆ˜ ๊ตฌํ˜„
  • HTML์€ ๋ฌดํšจํ™”ํ•˜๊ณ  JS/CSS๋Š” ๊ณต๊ฒฉ์ ์œผ๋กœ ์บ์‹ฑํ•˜๋Š” ๋ฆฌ์†Œ์Šค๋ณ„ ์ฐจ๋“ฑ ์บ์‹ฑ ์ „๋žต ์ ์šฉ
  • Directory Traversal ๋ฐฉ์ง€ ๋ฐ ๊ฒฝ๋กœ ๊ฒ€์ฆ ๋กœ์ง์„ ํ†ตํ•œ ๊ธฐ๋ณธ์ ์ธ ๋ณด์•ˆ ๊ณ„์ธต ๊ตฌ์ถ•
  • ๋‹ค์–‘ํ•œ ํŒŒ์ผ ํ™•์žฅ์ž์— ๋Œ€์‘ํ•˜๋Š” MIME type ์ž๋™ ๋งคํ•‘ ์‹œ์Šคํ…œ ๋‚ด์žฅ
  • Fluent API ์„ค๊ณ„๋ฅผ ํ†ตํ•œ ํ˜ธ์ŠคํŠธ ๋ฐ”์ธ๋”ฉ ๋ฐ ์„ค์ • ๊ณผ์ •์˜ ์ถ”์ƒํ™”

- WebView ๊ธฐ๋ฐ˜ SPA ๊ตฌํ˜„ ์‹œ Asset ์ธํ„ฐ์…‰ํ„ฐ์˜ ์ค‘๋ณต ์ฝ”๋“œ ์ œ๊ฑฐ ํ•„์š”์„ฑ ๊ฒ€ํ†  - Client-side Routing ์‚ฌ์šฉ ์‹œ ์„œ๋ฒ„ ๋ ˆ๋ฒจ์˜ Fallback ์„ค์ • ์œ ๋ฌด ํ™•์ธ - ์ •์  ๋ฆฌ์†Œ์Šค์˜ ํŠน์„ฑ์— ๋”ฐ๋ฅธ ์บ์‹œ ์ •์ฑ…(HTML vs Static Assets) ๋ถ„๋ฆฌ ์ ์šฉ

์›๋ฌธ ์ฝ๊ธฐ