이미지 홀더 사용하기
https://github.com/imsky/holder
GitHub - imsky/holder: :city_sunrise: Client-side image placeholders.
:city_sunrise: Client-side image placeholders. Contribute to imsky/holder development by creating an account on GitHub.
github.com
설치입니다.
npm : npm install holderjs yarn : yarn add holderjs |
포함입니다.
import Image from 'react-bootstrap/Image'; import 'holderjs' |
1. create-react-app를 이용하여 app009 프로젝트를 만듭니다.
| 1) 프로젝트 작성 D:\React> npx create-react-app app009 2) 폴더이동 D:\React> cd app009 3) bootstrap 설치 D:\React\app009> npm install holderjs 4) visual code 실행 D:\React\app009> code . 5) public 폴더와 src폴더의 모든 파일을 삭제합니다. |
2. public 폴더에 다음과 같이 index.html파일을 생성합니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Component</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
3. src폴더에 UseImageHolder.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
import Image from 'react-bootstrap/Image';
import 'bootstrap/dist/css/bootstrap.min.css';
const UseImageHolder = (props) => {
return (
<>
<Image src="holder.js/100x100" rounded style={{margin:"5px"}}/>
<Image src="holder.js/100x100" roundedCircle style={{margin:"5px"}}/>
<Image src="holder.js/100x100" thumbnail style={{margin:"5px"}}/>
<hr/>
<img src="holder.js/100x100" alt='임시이미지'style={{margin:"5px"}}/>
<img src="holder.js/150x150?theme=sky&text=임시이미지: holder_dimensions" alt='임시이미지'style={{margin:"5px"}}/>
<img src="holder.js/200x200?theme=vine&text=임시이미지: holder_dimensions" alt='임시이미지'style={{margin:"5px"}}/>
<img src="holder.js/300x150?theme=lava&text=임시이미지: holder_dimensions" alt='임시이미지'style={{margin:"5px"}}/>
<hr/>
<img src="https://placehold.co/171x100?text=Hello World" alt='임시이미지'style={{margin:"5px"}}/>
</>
);
}
export default UseImageHolder;
|
cs |
4. src폴더에 App.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
|
import UseImageHolder from "./UseImageHolder";
function App(){
return (
<>
< UseImageHolder />
</>
);
}
export default App;
|
cs |
5. src폴더에 index.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>
);
|
cs |
6. visual code에서 [새 터미널] 창을 열고 "npm start"명령으로 애플리케이션을 시작합니다.
실행 화면 입니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 25] google font 사용하기 (1) | 2024.10.21 |
|---|---|
| [React Exam 24] dayjs 사용하기 (1) | 2024.10.21 |
| [React Exam 22] bootstrap icon 사용하기 (0) | 2024.10.21 |
| [React Exam 21] bootstrap 사용하기 (0) | 2024.10.21 |
| [React Exam 20] jQuery 사용하기 (1) | 2024.10.21 |
