React : 프로젝트생성/bootstrap 연결/이미지경로 연결/public폴더

프로젝트 생성하기

원하는 폴더 shift+우클릭해서 powerShell 터미널 연 후에 아래 프로젝트 생성 명령어를 입력한다.

npx create-react-app 폴더명

---

bootstrap 연결하기

npm install react-bootstrap bootstrap

---

bootstrap css 연결하기

• 사이트 css 파일을 stylesheet link로 연결하거나
• App.js에 import 'bootstrap/dist/css/bootstrap.min.css';한다.

import {Button, Navbar, Container, Nav} from 'react-bootstrap'

원하는 컴포넌트들을 상단에 import 해줘야 한다.

---

이미지경로 연결하기

css파일로 연결

css파일에서 src폴더 안에 있는 사진을 사용하고 싶다면 ./이미지경로로 넣으면 된다.

.bg {
  background-image : url(./bg.png);
}

---

html 변수로 연결

css파일로 연결해도 되지만, jsx 내 html에 인라인으로 이미지경로를 연결할 수 있다.

import mainBg from './images/bg.png';

function App() {
  return (
    <div className="main-bg" style={{backgroundImage : 'url('+ mainBg +')'}}>
  );
}

• 태그 내 속성에 변수를 넣고 싶다면 양 옆을 문자열화 시켜야 한다.
  ' url( ' + mainBg + ' ) '

---

public 폴더

• 리액트로 개발을 끝내고 build작업을 하면 src폴더에 있던 코드와 파일은 압축되지만,
  public 폴더에 있는 것들은 그대로 보존된다.
• 형태를 보존하고 싶은 파일 (이미지, txt, json 등 static 파일들)은 public 폴더에 보관해도 상관 없다.

---

public 폴더에 있는 파일 연결하기

public 폴더 안의 이미지는 /이미지경로로 사용할 수 있다. 그러나 이는 public폴더 내의 다른 폴더 경로에 발행했을 시 문제가 생긴다.

<img src="/image.png" />

그러니 아래가 더 권장하는 방식이다.

<img src={process.env.PUBLIC_URL + '/image.png'} />

• {process.env.PUBLIC_URL + '/image/png'}

---

출처 : 코딩애플 https://codingapple.com/