💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.
Vite
Vite?
쉬운 개발환경을 제공하는 프론트엔드 개발툴(tool).
👉🏻Vite는 바이트가 아니라 비트라고 읽지
install
npm create vite@latest
옵션은 위와 같이 React + TypeScript 조합으로 해보았다. (이제 진짜 타입스크립트를 파야할 떄...😢)
설치가 완료되면 터미널에서 npm install을 하여 설치를 완료한다.
package.json에 인스톨된 옵션들을 확인해보고, script를 참고하여 프로젝트를 실행해본다.
npm run dev
✨Vite와 React 콜라보 서버 등장!
reset
Vite에서 기본적으로 적용된 css나 svg등의 모든 내용은 필요없으므로 모두 삭제했다.
당연한 이야기지만 하얀 빈페이지만 남는다.
metadata
메타데이타를 설정하려면 index.html에서 작업하면 된다.
<link rel="icon">태그 또한 필요 없으니 삭제해도 된다.
짜잔-!
react-router-dom & styled-components install
영상을 보며 공부하는 것이므로 영상과 동일한 버전으로 인스톨했다.
npm i react-router-dom@6.14.2 styled-components@6.0.7 styled-reset
npm i @types/styled-components -DRoute setting
//App.tsx
import {
RouterProvider,
createBrowserRouter,
} from 'react-router-dom';createBrowserRouter를 사용하면 children으로 하위 라우터를 만들 수 있는데 여기까지는 vue의 router방식과 상당히 흡사하다.
createBrowserRouter는 RouterProvider의 router로 return해서 사용해야한다.
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Layout from './components/Layout';
import Home from './routes/Home';
import Profile from './routes/Profile';
const router = createBrowserRouter([
{
path: '/',
element: <Layout />,
children: [
{
path: '',
element: <Home />,
},
{
path: 'profile',
element: <Profile />,
},
],
},
]);
function App() {
return (
<RouterProvider router={router} />
);
}기존의 react router 방식과의 차이
기존에 사용하던 router의 방식은 Route path를 Routes로 감싸고 각각의 Route path마다 각각 경로를 지정하여 component를 render하는 방식이었다.
//App.js
import {
BrowserRouter as Router,
Routes,
Route,
} from 'react-router-dom';
import Home from './routes/Home';
import Profile from './routes/Profile';
function App() {
return (
<Router basename={process.env.PUBLIC_URL}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/profile" element={<Profile />} />
</Routes>
</Router>
);
}
export default App;Layout & Outlet
Layout component는 path:'/'와 그 자식 path안에서 적용된다.
Layout component를 열어보면 Outlet라는 리엑트돔 컴포넌트가 존재하는데 아울렛은 특정 페이지들끼리 공통적으로 보여줘야 하는 레이아웃이 있을 때 유용하게 사용할 수 있다.
예를 들어 Home, Profile, Login 3개의 페이지 중에 Home, Profile에만 네비게이션을 보여주어야 하는 상황이라고 가정한다면, 기존방식으로는 Home, Profile에 각각 네비게이션 컴포넌트를 달았겠지만 Outlet을 사용하면 한 번만 호출해서 사용할 수 있다.
GlobalStyles
전체 스타일을 reset하기위해 styled-reset를 import했다.
styled-reset
styled-components와 연결되어 여러 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 normalize.css와 동일한 역할을 하는 Node.js 패키지
react-router-dom과 함께 styled-components를 install했었는데 이제 사용할 때가 되었다.
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';
const GlobalStyles = createGlobalStyle`
// 내용작성
${reset};
*{
box-sizing: border-box;
}
body{
background: black;
color: white;
font-family: 'system-ui', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
`;물론 GlobalStyles는 컴포넌트로 App에서 사용되어야 적용된다.
function App() {
return (
<>
<GlobalStyles />
<RouterProvider router={router} />
</>
);
}
export default App;결과
