[REACT] 폰트, 이미지, 레이아웃 설정

1. 폰트, 이미지, 레이아웃 설정하기

1. 폰트 적용
   • 폰트 파일을 드래그하여 public 폴더 안에 넣기 ```css @font-face { font-family: “NanumPenScript”; /* 전역 등록 폰트 이름 / src: url(“/NanumPenScript-Regular.ttf”); / 설치 폰트 경로 */ }

body * { font-family: “NanumPenScript”; }

2. 이미지 불러오기
  - 이미지를 src > public 안에 넣기
  - App.jsx
  ```jsx
  import "./App.css";
  import { Routes, Route, Link, useNavigate } from "react-router-dom";
  import Home from "./pages/Home";
  import Diary from "./pages/Diary";
  import New from "./pages/New";
  import Notfound from "./pages/Notfound";

  import emotion1 from "./assets/emotion1.png";
  import emotion2 from "./assets/emotion2.png";
  import emotion3 from "./assets/emotion3.png";
  import emotion4 from "./assets/emotion4.png";
  import emotion5 from "./assets/emotion5.png";

  function App() {
    const nav = useNavigate();

    const onClickButton = () => {
      nav("/new");
    };

    return (
      <>
        <div>
          <img src={emotion1} />
          <img src={emotion2} />
          <img src={emotion3} />
          <img src={emotion4} />
          <img src={emotion5} />
        </div>
        <div>
          <Link to={"/"}>Home</Link>
          <Link to={"/new"}>new</Link>
          <Link to={"/Diary"}>Diary</Link>
        </div>
        <button onClick={onClickButton}>New 페이지로 이동</button>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/diary/:id" element={<Diary />} />
          <Route path="*" element={<Notfound />} />
        </Routes>
      </>
    );
  }

  export default App;

1. 폰트는 public, 이미지는 assets에 넣은 이유
   • vite에 의한 assets 이미지 최적화 기능 때문
   • public
     • 빌드 시 vite의 번들링 대상에서 제외
     • import문이 아닌 URL을 통해 불러옴 <img src={“/emotion1.png”} />
   • assets: 빌드 시 vite의 번들링 과정에서 내부 파일을 최적화처리 - 두 폴더 차이 확인 방법
   • 터미널에 npm run build
   • 개발폴더의 dist 폴더 생성됨
     • dist: 리액트 앱의 빌드 결과
     • dist > assets: index-!@#.js파일에서 작성한 모든 리액트 코드들이 압축된 상태로 번들링된걸 확인 가능
   • 터미널에 npm run preview
   • 링크 접속 > 개발자도구 - assets 호출 결과
   • 이미지가 최적화되어 Data URI로 포맷되어 나타남
   • Data URI: 외부 데이터를 문자열 형태로 브라우저 메모리에 캐싱하기 위해 사용하는 포맷
   • 즉, 브라우저에 캐싱되어 호출될때마다 캐싱된 이미지를 가져옴 - public 호출 결과
   • 파일 경로로 이미지 경로가 지정되어 매번 해당 경로에 있는 이미지를 가져옴 - !주의
   • 불러올 이미지가 만개, 10만개 이상으로 많을 경우 assets에 넣어 메모리에 캐싱되면 부하가 올 수 있기 때문에 public에 보관하는 것이 나을 수 있음
   • 소수의 이미지는 assets 폴더에 넣어 브라우저에 캐싱되도록 하면 좋음
2. 이미지 모듈화
   • 이미지를 불러올때 매번 import문을 5번씩 쓰는 것은 비효율적이므로 모듈화 진행
   • get-emotion-image.js ```javascript import emotion1 from “./../assets/emotion1.png”; import emotion2 from “./../assets/emotion2.png”; import emotion3 from “./../assets/emotion3.png”; import emotion4 from “./../assets/emotion4.png”; import emotion5 from “./../assets/emotion5.png”;

export function getEmotionImage(emotionId) { switch (emotionId) { case 1: return emotion1; case 2: return emotion2; case 3: return emotion3; case 4: return emotion4; case 5: return emotion5; default: return null; } }

  - App.jsx
  ```jsx
  import "./App.css";
  import { Routes, Route, Link, useNavigate } from "react-router-dom";
  import Home from "./pages/Home";
  import Diary from "./pages/Diary";
  import New from "./pages/New";
  import Notfound from "./pages/Notfound";

  import { getEmotionImage } from "./util/get-emotion-image";

  function App() {
    const nav = useNavigate();

    const onClickButton = () => {
      nav("/new");
    };

    return (
      <>
        <div>
          <img src={getEmotionImage(1)} />
          <img src={getEmotionImage(2)} />
          <img src={getEmotionImage(3)} />
          <img src={getEmotionImage(4)} />
          <img src={getEmotionImage(5)} />
        </div>
        <div>
          <Link to={"/"}>Home</Link>
          <Link to={"/new"}>new</Link>
          <Link to={"/Diary"}>Diary</Link>
        </div>
        <button onClick={onClickButton}>New 페이지로 이동</button>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/diary/:id" element={<Diary />} />
          <Route path="*" element={<Notfound />} />
        </Routes>
      </>
    );
  }

  export default App;

1. 기본 레이아웃 설정
   • index.css ```css @font-face { font-family: “NanumPenScript”; /* 전역 등록 폰트 이름 / src: url(“/NanumPenScript-Regular.ttf”); / 설치 폰트 경로 */ }

html, body { margin: 0px; width: 100%; background-color: rgb(246, 246, 246); }

#root { background-color: white; max-width: 600px; width: 100%; margin: 0 auto; min-height: 100vh; height: 100%; box-shadow: rgba(100, 100, 100, 0.2) 0px 0px 29px 0px; }

body * { font-family: “NanumPenScript”; } ```