폰트, 이미지, 레이아웃 설정하기
- 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 |