티스토리 뷰
https://react-bootstrap.netlify.app/
이곳에서 get Started를 누르면 설치 명령어 등이 나온다.
참고로 css경로를 잡아준 뒤에 import를 시켜서 예제 컴포넌트 등을 사용할 수 있다.
예:
import logo from './logo.svg';
import './App.css';
import {Navbar,Container,Nav,Button} from 'react-bootstrap';
function App() {
return (
<div className="App">
<Navbar bg="dark" data-bs-theme="dark">
<Container>
<Navbar.Brand href="#home">Navbar</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
</Nav>
</Container>
</Navbar>
<Button type="submit">Button</Button>{' '}
</div>
);
}
export default App;
이미지도 src 아래에 있다면 import해서 사용해야 한다. 그치만 매번 경로를 가져오는 이미지가 어떤것일 줄 모르는데 import 시킬 수 있을까?
리액트는 빌드되면 모두 public 폴더에 변환되어 올라간다. html,css,js 등으로 변환된다. 이미지도 그렇다 이미지를 public에 넣으면 바로 경로로 불러올 수 있게 된다.
기본 문서에 따르면
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
해당 public 경로는 이렇게 잡아주길 권장한다.
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 인터셉터
- 로그인
- react실행
- 스프링부트
- BindingResult
- 향해플러스
- 향해플러스백엔드
- JPA
- 항해플러스
- thymleaf
- HTTP
- 항해99
- hypertexttransferprotocol
- 리터럴
- rejectValue
- 컨트
- Intercepter
- 스프링공부
- filter
- reject
- exception
- 백엔드 개발자 공부
- ArgumentResolver
- Java
- React
- 백엔드 개발자 역량
- 예외처리
- 향해99
- SpringBoot
- jpa api
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
글 보관함