[React] 감정일기장 프로젝트 : 폰트, 이미지, 레이아웃 설정

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

 

폰트 적용

• 폰트 파일을 드래그하여 public 폴더 안에 넣는다.

index.css

@font-face {
  font-family: "kyoboHand";
  src: url("/KyoboHandwriting2019.ttf");
}

body * {
  font-family: "kyoboHand";
}

• font-family에 내가 설정하고 싶은 이름을 정하여 적어준다.
• src의 경로를 적을 때는 확장자까지 명시해야 한다.

 

이미지 불러오기

• 이미지를 드래그하여 src > assets 폴더 안에 넣는다.

App.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>
			...생략
    </>
  );
}

export default App;

• 왜 폰트는 public에, 이미지는 assets에 넣은 걸까?
  • vite에 의한 assets에 있는 이미지 최적화 기능 때문이다.
  • 이미지가 만개, 십만개처럼 엄청 많은 경우에는 그 모든 이미지를 브라우저의 메모리에 저장되도록 하면 부하가 올 수 있기 때문에 public에 보관하는 것이 나을 수도 있다.
  • 소수의 이미지 정도는 assets 폴더에 보관해서 브라우저에 캐싱되도록 하면 좋다.
• 이미지를 불러올 때 매번 import 문을 다섯 줄씩 쓰는건 비효율적이므로 모듈화 해준다.

get-emotion-image.js

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

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 "./utill/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>
       ... 생략
    </>
  );
}

export default App;

 

기본적인 레이아웃 설정

index.css

@font-face {
  font-family: "kyoboHand";
  src: url("/KyoboHandwriting2019.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: "kyoboHand";
}

 

출처 : 한입 크기로 잘라먹는 리액트