React - 폰트 설정, Navigation 설정

- react 에서 폰트 적용

1) 폰트 파일 프로젝트에 추가
.ttf
src/assets/fonts 폴더에 저장한다.

2) CSS에서 폰트 불러오기
@font-face사용

@font-face {
font-family: "SummerFont";
src: url("./assets/fonts/SummerFont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}

3) 컴포넌트에서 사용하기
style={{ fontFamily: 'SummerFont, sans-serif' }}

4) 전역 스타일에 적용하기

body {
	font-family: "SummerFont", sans-serif;
}

- React Router설정

1) 설치
npm install react-router-dom

2) 설정
App.js or 라우트 설정 파일에 라우터 구성

// App.js
import { Routes, Route} from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

function App() {
return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
);
}

export default App;

3) pages 폴더
각 페이지 생성

4) components 폴더

import { Link } from "react-router-dom"

export default function Navbar() {
    return (
        <nav>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
        </nav>
    )
}

<App>

/ 👉 <Home>

/products 👉 <AllProducts>

/products/new 👉 <NewProduct>

/products/:id 👉 <ProductDetail>

/carts 👉 <MyCart>

5) index.js 에 BrowserRouter로 감싸주기

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

- tailwindcss 추가

npm install tailwindcss
yarn add -D tailwindcss