React ๋ก SPA๋ฅผ ๋ง๋๋ ๋ชจ๋ ์ฌ๋๋ค์๊ฒ ํ์์ธ React Router๋ฅผ ํจ๊ป ์ ๋ณตํด๋ณด์์ ๐ช
๋ฆฌ์กํธ ๋ผ์ฐํฐ๋ฅผ ์ด์ฉํ ๊ธฐ๋ณธ์ ์ธ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ๋ผ์ฐํ
๋ฆฌ์กํธ ๋ผ์ฐํฐ 6.4 ์ดํ์ ์๋กญ๊ฒ ์ถ๊ฐ๋ Data APIs ์ฌ์ฉ๋ฒ
SPA ๊ฐ๋ฐ์ ์ฝ์ด! ๋ฆฌ์กํธ ๋ผ์ฐํฐ
ํต์ฌ๋ง ๋น ๋ฅด๊ณ ๊ฐ๊ฒฐํ๊ฒ ์๋ ค๋๋ฆฝ๋๋ค.
SPA(์ฑ๊ธ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ ) ์น ์ฑ์ ๊ฐ๋ฐํ ๋ ์ฌ์ฉํ๋ React Router(react-router-dom, ๋ฆฌ์กํธ ๋ผ์ฐํฐ)๋ฅผ ๋ค๋ฃน๋๋ค.
๋ฆฌ์กํธ๋ฅผ ํ ์ค ์๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ผ๋ฉด, React Router๋ฅผ ๋น์ฐํ ์๊ณ ์์ด์ผ ํฉ๋๋ค. ํ์ง๋ง ์ค์๋์ ๋นํด ์ ๋นํ ์๋ ๋งํผ๋ง ์ฌ์ฉํ๋ ๊ฒฝํฅ์ด ๊ฐํฉ๋๋ค.
์ด ๊ฐ์์์๋ ๋ธ๋ผ์ฐ์ ์ฃผ์์ฐฝ๊ณผ ๋ฆฌ์กํธ ์ ํ๋ฆฌ์ผ์ด์ ์ฌ์ด์ ๊ด๊ณ๋ฅผ ๋์์ฃผ๊ณ , ๋ฐ์ ์ํค๊ณ ์๋ ์ต์ ๋ฒ์ react-router-dom ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ฐฐ์ฐ๊ฒ ๋ฉ๋๋ค.
์ฝ๋๋ฅผ ํ์ดํํ๋ฉฐ ์ตํ๋๋ค
์ฝ๋๋ฅผ ์ง์ ํ์ดํํ๋ฉฐ React Router์ ๊ธฐ๋ฅ๊ณผ ์ฌ์ฉ๋ฒ์ ์์ฐ์ค๋ฝ๊ฒ ์ตํ ์ ์๋๋ก ๊ตฌ์ฑํ์์ต๋๋ค.
๋น ๋ฅด๊ณ ๊ฐ๊ฒฐํ ํธํก์ผ๋ก ์งํํฉ๋๋ค
ํ๋ฆ์ ๋ฐ๋ผ๊ฐ๋ฉฐ ๋จ๊ธฐ๊ฐ์ React Router์ ๊ฐ๋ ์ ๋ฐฐ์ธ ์ ์์ต๋๋ค.
๐ก ์๊ฐ ์ ํ์ธํด์ฃผ์ธ์
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
๋ฆฌ์กํธ ๋ผ์ฐํฐ์ ๋ํด ๋น ๋ฅด๊ณ ์์ธํ ํ์ตํ๊ณ ์ถ์ ๋ฆฌ์กํธ๋ฅผ ๋ง ๋ฐฐ์ด ์ด๋ณด ํ๋ก ํธ์๋ ๊ฐ๋ฐ์
๋ฆฌ์กํธ ๋ผ์ฐํฐ๋ฅผ ์ฌ์ฉํด์ผ ํ๋๋ฐ ๋จ๊ธฐ๊ฐ์ ๊ฐ๋ ์ ์ตํ๊ณ ์ถ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์
์ ์ ์ง์,
ํ์ํ ๊น์?
React
JavaScript
11,785
๋ช
์๊ฐ์
124
๊ฐ
์๊ฐํ
4.7
์
๊ฐ์ ํ์
5
๊ฐ
๊ฐ์
14๋ ์ฐจ ์ํํธ์จ์ด ์์ง๋์ด ์ ๋๋ค.
2021๋ ๋ถํฐ๋ NHN Dooray ์์ ํ๋ก ํธ์๋๊ฐ๋ฐํ์ ๋ฆฌ๋ํ๋ฉฐ, ์๋น์ค ์ ์ฒด์ UI ์ ๋ํ ์ฑ ์์ ๋งก์์ต๋๋ค. ํ์ ๋งก์ ๊ธฐ์กด์ ์ด์ํ๊ณ ์๋ ๋ ๊ฑฐ์ ์์คํ (AngularJS, Vue)์ React, TypeScript ๋ก ๋ฆฌ๋ด์ผ ํ์์ต๋๋ค. 10์ธ ์ด์์ ๋ค์ ํ๋ก ํธ์๋ ์์ง๋์ด๋ค์ด ํ๋์ ํ๋ฌ๋ํธ๋ฅผ ํจ๊ป ๊ฐ๋ฐํ ์ ์๋๋ก ์ํคํ ์ฒ๋ฅผ ์ค๊ณํ๊ณ ๊ด๋ฆฌํ๋ ์ ๋ฌด๋ฅผ ํ๊ณ ์์ต๋๋ค. ์ ์ฒด ์๋น์ค ๊ท๋ชจ๊ฐ ํฌ๊ณ ๋ณต์ก๋๊ฐ ๋์ Monorepo ๋ก ๊ฐ๋ฐ ๋ฐ ์ด์ํ๊ณ , Micro Frontend ๋ฅผ ๋์ ํ์ฌ ๋ฐฐํฌ ์ฃผ๊ธฐ ๋จ์ถ์ ๋ํด ๋ ธ๋ ฅํด์์ต๋๋ค. Storybook ์ ํตํด ์ปดํฌ๋ํธ๋ฅผ ์ ๊ทน์ ์ผ๋ก ๊ด๋ฆฌํ๋ฉฐ, Design System ์ ๊ตฌ์ถํ๊ณ ํ์ฉ์ด ๋ ์ ์๋๋ก ํ๋ก์ธ์ค๋ฅผ ๋ค๋ฌ๋ ์ญํ ์ ํ์ต๋๋ค.
์ด์ ์๋ Studio XID ์์ TypeScript ์ Electron ์ ์ด์ฉํ์ฌ, ๋์์ด๋๋ฅผ ์ํ ์ธํฐ๋ ์ ํ๋กํ ํ์ดํ ํด์ธ ProtoPie ๋ฅผ ๋ง๋ค์์ต๋๋ค. ํ๊ฐ์ง ์ ํ์ ์ฝ 4๋ ๋์ ๋ง๋ค๋ฉด์ ์ข์ ์ฝ๋, ํ์ง์ด ์ข์ ์ฝ๋๋ฅผ ์์ฑํ๊ธฐ ์ํด ๋ ธ๋ ฅํด์์ต๋๋ค.
๋๊ท๋ชจ ์๋ฐ์คํฌ๋ฆฝํธ ์ดํ๋ฆฌ์ผ์ด์
๊ฐ๋ฐ์ ๋ํ ๋ ๋์ ๋ฐฉํฅ์ ๊ณ ๋ฏผํ๊ณ , ์ ์ฉํ๊ธฐ ์ํด ๋
ธ๋ ฅํ๊ณ ์์ต๋๋ค.
Microsoft MVP (TypeScript) ๋ก ํ๋ํด ์์ผ๋ฉฐ, ์ต์ ์น๊ธฐ์ ์ ๋ํด ์ฌ๋๋ค๊ณผ ์ด์ผ๊ธฐ ํ๋ ๊ฒ์ ์ฆ๊น๋๋ค.
์ฌ๋ฌ ๊ณณ์์ ํ๋ก ํธ์๋ ํ์ ์ด๋๋ฉฐ, ์ฃผ๋ก ํจ์ํ ์ธ์ด(ํด๋ก์ )๋ Node.js ๋ก ๋ฐฑ์๋ ์์
์ ์งํํฉ๋๋ค.
์ธํ๋ผ ์๋ํ์ ๋ํ ๊ด์ฌ์ด ๋ง์ต๋๋ค.
์ ์ฒด
27๊ฐ โ (1์๊ฐ 56๋ถ)