본문 바로가기

코딩 공부/React.js 리액트

감정 일기장 - 레이아웃 설정

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

- public 폴더에 폰트를 넣고, assets폴더에 이미지를 넣는다

// index.css파일에서 폰트 설정
@font-face {
  font-family: "NamuPenScript";
  src: url("/NanumPenScript-Regular.ttf");
}

body * {
  font-family: "NamuPenScript";
}
  	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"



    <div>
        <img src={emotion1} />
        <img src={emotion2} />
        <img src={emotion3} />
        <img src={emotion4} />
        <img src={emotion5} />
    </div>

- assets폴더에 이미지를 넣고 import하여 불러오는 방식이 이미지 최적화 설정이 된다

(메모리에 캐싱하여 다시 불러오지 않음)

- 주소를 가져오는 방식은 새로고침 할 때마다 이미지를 다시 불러오므로 비효율적임

 

임포트문 많을 때 가독성을 떨어뜨릴 수 있는 문제 해결

- src폴더에 util폴더 생성 후 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;
    }
}

 

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


	<div>
        <img src={getEmotionImage(1)} />
        <img src={getEmotionImage(2)} />
        <img src={getEmotionImage(3)} />
        <img src={getEmotionImage(4)} />
        <img src={getEmotionImage(5)} />
    </div>

 

'코딩 공부 > React.js 리액트' 카테고리의 다른 글

감정 일기장, 앱 배포단계  (1) 2024.12.04
7주차 퀴즈  (0) 2024.11.27
감정일기장 - 페이지 라우팅  (4) 2024.11.27
[6주차] useReducer, 최적화, context  (1) 2024.11.20
5주차 퀴즈  (0) 2024.11.13