Code States
Front-end boost camp
Today
I
Learned
๐ 5์ 19์ผ 28์ผ์ฐจ~ ์ค๋ ์ ์ฌ ์๊ตญ์ ใ _ใ
ํ์ด์ง๋ฅผ ์ ์ ์๊ฒ ๋ณด์ฌ์ค ๋, ์๋ฒ์ ๋ฏธ๋ฆฌ ์ค๋น๋์ด ์๋ ํ์ด์ง๋ฅผ ์ ๋ฌ๋ฐ์์ ๋ ๋๋ง ํ์ง๋ง ๊ท๋ชจ๊ฐ ์ปค์ง์๋ก ์ฌ์ฉ์์์ ์ํธ ์์ฉ์ด ๋ง์์ง๊ณ ๊ทธ์ ๋ฐ๋ผ ์๋ ์ ํ ๋ฑ ๋ฌธ์ ๊ฐ ๋ฐ์. ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด?
react SPA(Single Page Application) ์ฌ์ฉ !
์ ํต์ ์ธ ์น์ฌ์ดํธ์์๋ ์ฌ์ฉ์๊ฐ ์น์ฌ์ดํธ ๋ด์ ๋ค๋ฅธ ํ์ด์ง๋ฅผ ์ด๋ํ๋ฉด, ๋ธ๋ผ์ฐ์ ๊ฐ ํ์ด์ง๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด ๋งค๋ฒ HTMLํ์ผ๋ก ๋ "ํ์ด์ง ์ ์ฒด"๋ฅผ ๋ถ๋ฌ์์ผ๋ง ํ์ : ๊น๋นก์ธ๋ค๊ณ ํํ
-- ํ์ง๋ง SPA๋ ์
๋ฐ์ดํธ๊ฐ ํ์ํ ๋ถ๋ถ๋ง ์๋ก ๋ถ๋ฌ์ด
SPA๋
-- ์์ ํ ์๋ก์ด ํ์ด์ง๋ฅผ ๋ถ๋ฌ์ค๋ ๊ฒ์ด ์๋
-- ํ๋ฉด์ ์
๋ฐ์ดํธํ๊ธฐ ์ํด ํ์ํ ๋ฐ์ดํฐ๋ง ์๋ฒ์์ ์ ๋ฌ๋ฐ์ ๋ธ๋ผ์ฐ์ ์์ ํด๋นํ๋ ๋ถ๋ถ๋ง ์
๋ฐ์ดํธ
์ฅ์ ?
-- ์ฌ์ฉ์์ ๋ฐ์์ ๋น ๋ฅด๊ฒ ๋ฐ์ (ex. SNS ๋๊ธ ๊ธฐ๋ฅ)
๋จ์ ?
-- ๋๋ถ๋ถ์ ์ฝ๋๋ JavaScript ํ์ผ ์์ ์์ด ๋ฌด๊ฑฐ์์ง์ผ๋ก์จ js ํ์ผ์ ๊ธฐ๋ค๋ฆฌ๋ ์๊ฐ์ผ๋ก ์ธํด ์ฒซ ํ๋ฉด์ ๋ก๋ฉ ์๊ฐ์ด ๊ธธ์ด์ง
-- ์์ง ์ต์ ํ๊ฐ ์ข์ง ์๋ค
// ํด๋น ํด๋ ์ง์ ํ react app ์ค์น
npx create-react-app simpleroute
// react-router ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์น
npm install react-router-dom
// ์ปดํฌ๋์ธ ๊บผ๋ด์ค๊ธฐ ์ import ๊ตฌ๋ฌธ
inport React from "react":
inport { BrowserRouter, Routes, Route, Link} from "react-router-dom";
export default function App() {
return ( ... )
}
๋๋ฌด