SPA (Single Page Application)
๋ช ์ฌ ยท ์น ์ํคํ ์ฒ
๋จ์ผ HTML ํ์ด์ง๋ฅผ ๋ก๋ํ ํ JavaScript๋ฅผ ํตํด ์ฝํ ์ธ ๋ฅผ ๋์ ์ผ๋ก ์ ๋ฐ์ดํธํ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ผ๋ก, ๋ธ๋ผ์ฐ์ ์๋ก๊ณ ์นจ ์์ด ๋ค์ดํฐ๋ธ ์ฑ์ ๋น๊ฒฌ๋๋ ์ ์ฐํ๊ณ ์ฆ๊ฐ์ ์ธ ๋ด๋น๊ฒ์ด์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
React, Angular, Vue.js์ ์ํด ๋์คํ๋ ํ๋ก ํธ์๋ ์ํคํ ์ฒ๋ก, ๋ผ์ฐํ , ๋ ๋๋ง ๋ฐ ์ํ ๊ด๋ฆฌ๊ฐ ์ ์ ์ผ๋ก ๋ธ๋ผ์ฐ์ ์์ ์คํ๋๋ฉฐ, ์๋ฒ์๋ API๋ฅผ ํตํ ๋ฐ์ดํฐ ๊ตํ๋ง ์ํํฉ๋๋ค.
์ธํฐ๋ํฐ๋นํฐ์ ์ฌ์ฉ์ ์ธํฐํ์ด์ค์ ๋ฐ์์ฑ์ ์ฐ์ ์ํ๋ ์น ๊ฐ๋ฐ ๋ชจ๋ธ๋ก, ์ฆ๊ฐ์ ์ธ ํ๋ฉด ์ ํ์ด ํ์ํ ๋น์ฆ๋์ค ์ ํ๋ฆฌ์ผ์ด์ , ๋์๋ณด๋ ๋ฐ SaaS ๋๊ตฌ์ ์ด์์ ์ ๋๋ค.
SPA(Single Page Application)๋ ์์ ์ ๋จ์ผ HTML ํ์ด์ง๋ฅผ ๋ก๋ํ ํ, ์ ์ฒด ํ์ด์ง๋ฅผ ๋ค์ ๋ก๋ํ์ง ์๊ณ ์ฌ์ฉ์์ ์์ ์ ๋ฐ๋ผ ์ฝํ ์ธ ๋ฅผ ๋์ ์ผ๋ก ์ ๋ฐ์ดํธํ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋๋ค. JavaScript๊ฐ ๋ธ๋ผ์ฐ์ ์์ ์ง์ ๋ผ์ฐํ , ๋ทฐ ๋ ๋๋ง ๋ฐ API ํธ์ถ์ ๊ด๋ฆฌํฉ๋๋ค. ์ ํฌ ์์ด์ ์๋ ๋ค์ดํฐ๋ธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋น๊ฒฌ๋๋ ์ ์ฐํ๊ณ ๋ฐ์์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๊ธฐ ์ํด React์ Redux๋ก SPA๋ฅผ ๊ฐ๋ฐํฉ๋๋ค.
SPA๋ ํ์ด์ง ์๋ก๊ณ ์นจ์ด ์์ด ๋ฐ์ด๋ ์ธํฐ๋ํฐ๋นํฐ๋ฅผ ์ ๊ณตํฉ๋๋ค: ๋ชจ๋ ๋ด๋น๊ฒ์ด์ ๊ณผ ์ฌ์ฉ์ ์์ ์ด ๊ธฐ์กด ์ฌ์ดํธ์ ํน์ง์ ์ธ ํ์ ํ๋ฉด ๊น๋นก์ ์์ด ์ฆ๊ฐ์ ์ธ ์ ํ์ ์์ฑํฉ๋๋ค. ๋ฐ์ดํฐ๋ REST API๋ฅผ ํตํด ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ก๋๋๋ฉฐ ์ธํฐํ์ด์ค๋ ์ค์๊ฐ์ผ๋ก ์ ๋ฐ์ดํธ๋ฉ๋๋ค. ์ ํฌ ์์ด์ ์๋ ์ด ๋ฐ์์ฑ์ ํ์ฉํ์ฌ ๋ชจ๋ ๋ฐ๋ฆฌ์ด์ ์ ์ฐํจ์ด ์ฌ์ฉ์์ ์์ฐ์ฑ๊ณผ ๋ง์กฑ๋์ ๊ธฐ์ฌํ๋ ๋น์ฆ๋์ค ์ ํ๋ฆฌ์ผ์ด์ ์ ์ค๊ณํฉ๋๋ค.
SPA๋ ๋จ์ผ ํ์ด์ง๋ฅผ ๋ก๋ํ ํ JavaScript๋ฅผ ํตํด ํด๋ผ์ด์ธํธ ์ธก์์ ๋ชจ๋ ๋ด๋น๊ฒ์ด์ ์ ๊ด๋ฆฌํ๋ฉฐ, ์ฆ๊ฐ์ ์ธ ์ ํ์ ์ ๊ณตํ์ง๋ง ์ด๊ธฐ ๋ก๋ฉ์ด ๋ ๊น๋๋ค. MPA(Multi-Page Application)๋ ๋ด๋น๊ฒ์ด์ ํ ๋๋ง๋ค ์๋ก์ด ์์ ํ HTML ํ์ด์ง๋ฅผ ๋ก๋ํ๋ฉฐ, ์ด๊ธฐ ๋ก๋ฉ์ ๋น ๋ฅด์ง๋ง ์ ํ์ด ๋๋ฆฝ๋๋ค. ์ ํฌ ์์ด์ ์๋ ์ธ์ฆ ๋ค์ ์ธํฐ๋ํฐ๋ธ ์ ํ๋ฆฌ์ผ์ด์ ์๋ SPA๋ฅผ, ์ต์ ์ SEO๊ฐ ํ์ํ ๊ณต๊ฐ ์ฝํ ์ธ ์ฌ์ดํธ์๋ MPA๋ฅผ ๊ถ์ฅํฉ๋๋ค.
SPA๋ ์๋ก๊ณ ์นจ ์๋ ๋ทฐ ์ ํ, ์ ์ฐํ ์ ๋๋ฉ์ด์ , Service Workers๋ฅผ ํตํ ์คํ๋ผ์ธ ์๋, Progressive Web App(PWA)์ผ๋ก ํ ํ๋ฉด์ ์ค์นํ ์ ์๋ ๊ธฐ๋ฅ ๋๋ถ์ ๋ชจ๋ฐ์ผ ๊ฒฝํ์ ์ฌํํฉ๋๋ค. ๋ด๋ถ ๋ด๋น๊ฒ์ด์ ์ ๋คํธ์ํฌ ์ง์ฐ์ด ์์ด ๋ค์ดํฐ๋ธ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ๋์ผํ ๋ฐ์์ฑ์ ๋ง๋ค์ด๋ ๋๋ค. ์ ํฌ ์์ด์ ์๋ ์น์ ๊ฐ์ ๊ณผ ๋ชจ๋ฐ์ผ์ ํธ์์ฑ์ ๊ฒฐํฉํ SPA/PWA๋ฅผ ๊ฐ๋ฐํฉ๋๋ค.
SPA์ SEO๋ ์ฃผ๋ก ๊ฒ์ ์์ง ์ต์ ํ๊ฐ ํ์ํ ๊ณต๊ฐ ํ์ด์ง์ ์๋ฒ ์ฌ์ด๋ ํ๋ฆฌ๋ ๋๋ง(SSR) ๋๋ ์ ์ ์์ฑ(SSG)์ ํตํด ๊ด๋ฆฌ๋ฉ๋๋ค. Next.js๋ ํด๋ผ์ด์ธํธ ์ธก SPA ์ํคํ ์ฒ๋ฅผ ์ธ๋ฑ์ฑ ๋ก๋ด์ ์ํ ์๋ฒ ๋ ๋๋ง๊ณผ ๊ฒฐํฉํ ์ ์๊ฒ ํฉ๋๋ค. ๋์ ๋ ๋๋ง๊ณผ ๋์ ๋ฉํ ํ๊ทธ ๊ฐ์ ๊ธฐ์ ์ด ์ ๋ต์ ๋ณด์ํฉ๋๋ค. ์ ํฌ ์์ด์ ์๋ ์ ๋ต์ ํ์ด์ง์ SEO ๊ฐ์์ฑ์ ํฌ์ํ์ง ์์ผ๋ฉด์ SPA์ ์ธํฐ๋ํฐ๋นํฐ๋ฅผ ์ ๊ณตํ๋ ํ์ด๋ธ๋ฆฌ๋ ์ํคํ ์ฒ๋ฅผ ์ค๊ณํฉ๋๋ค.
React๋ ์ฑ์ํ ์ํ๊ณ, ์ ์ฐํ ์ํคํ ์ฒ ๋ฐ ํ์ด๋ธ๋ฆฌ๋ ๋ ๋๋ง์ ์ํ Next.js์์ ๊ธฐ๋ณธ ํตํฉ ๋๋ถ์ SPA๋ฅผ ์ํ ์ ํฌ์ ์ ํธ ๊ธฐ์ ์ ๋๋ค. Vue.js๋ ํ์ต ๊ณก์ ์ด ์๋งํ์ง๋ง ์ํ๊ณ๊ฐ ๋ ๊ด๋ฒ์ํ๋ฉฐ, Angular์ ๋งค์ฐ ๊ตฌ์กฐํ๋ ์ํฐํ๋ผ์ด์ฆ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ํฉํฉ๋๋ค. ์ ํฌ ์์ด์ ์๋ ํ๋กํ ํ์ ์์ ์ํฐํ๋ผ์ด์ฆ ์ ํ๊น์ง ๋ฆฌํฉํ ๋ง ์์ด ๋ฐ์ ํ ์ ์๋ React์ Next.js๋ฅผ ์ ํํ์ฌ ์ง์ ๊ฐ๋ฅํ ๊ธฐ์ ํฌ์๋ฅผ ๋ณด์ฅํฉ๋๋ค.
SPA๋ ์ธํฐํ์ด์ค ๋ ๋๋ง์ด ์ ์ ์ผ๋ก ์ฌ์ฉ์์ ๋ธ๋ผ์ฐ์ ์ ์์๋๋ฏ๋ก ์๋ฒ ๋ถํ๋ฅผ ํฌ๊ฒ ์ค์ ๋๋ค. ์๋ฒ๋ ์ ์ ํ์ผ(HTML, JS, CSS) ์ ๊ณต๊ณผ JSON ํ์์ API ์์ฒญ ์๋ต์ผ๋ก ์ ํ๋๋ฉฐ, ๊ฐ ํ์ด์ง์ ๋ํ ๋์ HTML์ ์์ฑํ์ง ์์ต๋๋ค. ์ ํฌ ์์ด์ ์๋ ๋ฐฑ์๋๊ฐ ๋น์ฆ๋์ค ๋ก์ง๊ณผ ๋ฐ์ดํฐ ์ฒ๋ฆฌ์ ์ง์คํ๊ณ , ํ๋ก ํธ์๋๊ฐ ํ๋ ์ ํ ์ด์ ๊ณผ ์ธํฐ๋ํฐ๋นํฐ๋ฅผ ์์จ์ ์ผ๋ก ๊ด๋ฆฌํ๋๋ก ์ด ์ํคํ ์ฒ๋ฅผ ์ต์ ํํฉ๋๋ค.
SPA์ ์ด๊ธฐ ๋ก๋ฉ ์ต์ ํ๋ ํ์ฑ ๋ผ์ฐํธ์ JavaScript๋ง ๋ก๋ํ๋ ์ฝ๋ ์คํ๋ฆฌํ , ์ฃฝ์ ์ฝ๋๋ฅผ ์ ๊ฑฐํ๋ ํธ๋ฆฌ ์ ฐ์ดํน, ์์ ์ Brotli/Gzip ์์ถ, ๊ฐ๋ฅํ ๋ผ์ฐํธ์ ์ง๋ฅํ ํ๋ฆฌํ์นญ์ ๊ธฐ๋ฐํฉ๋๋ค. Service Worker๋ ํ์ ๋ฐฉ๋ฌธ์ ์ํด ๋ฆฌ์์ค๋ฅผ ์บ์ํ ์ ์์ต๋๋ค. ์ ํฌ ์์ด์ ์๋ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์์๋ Time to Interactive๋ฅผ 3์ด ์ดํ๋ก ์ค์ด๊ธฐ ์ํด ์ด๋ฌํ ์ต์ ํ๋ฅผ ์ฒด๊ณ์ ์ผ๋ก ์ ์ฉํฉ๋๋ค.
SPA๋ ํน์ ์ ๋ณด์ ๊ณผ์ ๊ฐ ์์ต๋๋ค: JavaScript ์ฝ๋๊ฐ ํด๋ผ์ด์ธํธ ์ธก์ ๋ ธ์ถ๋๊ณ , ์ธ์ฆ ํ ํฐ์ด ๋ธ๋ผ์ฐ์ ์์ ์ ์ฅ ๋ฐ ๊ด๋ฆฌ๋์ด์ผ ํ๋ฉฐ, XSS ๊ณต๊ฒฉ์ด ๋์ DOM ๋ ๋๋ง์ ์ํด ์ฆํญ๋ ์ ์์ต๋๋ค. API ํค์ ์ธ์ ์ ์์ ํ ๊ด๋ฆฌ๊ฐ ์ค์ํฉ๋๋ค. ์ ํฌ ์์ด์ ์๋ ์ ๋ ฅ ์๋ํ์ด์ ์ด์ , ์์ ํ ํ ํฐ ์ ์ฅ, Content Security Policy ๋ฐ CSRF ๋ณดํธ ๋ฑ ์๊ฒฉํ ๋ณด์ ์กฐ์น๋ฅผ ๊ตฌํํ์ฌ ์ฌ์ฉ์ ๋ฐ์ดํฐ์ ๋ณด์์ ๋ณด์ฅํฉ๋๋ค.
์ ํฌ ์์ด์ ์๋ ์ฒ์๋ถํฐ React์ Next.js๋ก SPA๋ฅผ ์ค๊ณํด ์์ผ๋ฉฐ, Redux ์ํ ๊ด๋ฆฌ, ๋ฒ๋ค ์ต์ ํ ๋ฐ ํด๋ผ์ด์ธํธ ์ธก ๋ณด์์ ๋ํ ๊ฒ์ฆ๋ ์ ๋ฌธ์ฑ์ ๋ณด์ ํ๊ณ ์์ต๋๋ค. ์๊ฐ์ด ์ง๋๋ ์ ๋ขฐ์ฑ์ ๋ณด์ฅํ๋ ํ๋ก๋์ ํตํฉ ๋ชจ๋ํฐ๋ง๊ณผ ํจ๊ป ๊ณ ์ฑ๋ฅ, ์ ์ง๋ณด์ ๊ฐ๋ฅํ๊ณ ํ์ฅ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๊ณตํฉ๋๋ค. ๋ชจ๋ ํ๋ก์ ํธ๋ R&D๋ฅผ ๊ณต์ ํ๋ ์์ฒด ๊ธฐ์ ๊ธฐ๋ฐ์ ์ด์ ์ ํตํด ํต์ ๋ ๋น์ฉ์ผ๋ก ์ํฐํ๋ผ์ด์ฆ๊ธ ํ์ง์ ์ ๊ณตํฉ๋๋ค.