[React] 새프로젝트 생성/부트스트랩/이미지 넣기/public 폴더

새 프로젝트 생성

 

새로운 프로젝트를 생성할 때에는 

npx create-react-app 프로젝트이름

을 써주면된다.

---

부트스트랩 사용하기

 

https://react-bootstrap.netlify.app/getting-started/introduction/

React-Bootstrap

위 링크에서 쓰여진 대로 따라하면 된다.

터미널에

npm install react-bootstrap bootstrap

을 입력하고 

 

각각의 components 들을 import 해와주면 된다.

만약 내가 Button을 사용한다면

import Button from 'react-bootstrap/Button';

이런식으로 쓸 수 있지만 그냥 from 의 범위를 더 넓게 잡고 

import { Button } from 'react-bootstrap';

이런식으로 써서 { }  안만 수정해주는게 일단은 편하게 사용할수 있을 것 같다.

아래는 예시

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

---

이미지 넣기

 

대문을 만들어 보려고 한다.

App.js

      <div className="main-bg"></div>

main-bg 는 css 파일에서 따로 꾸며주었다.

.main-bg{
  height: 300px;
  background-image: url(./img/bg.JPG);
  background-size: cover;
  background-position: center;
}

이미지(src 폴더에 있음)는 저런식으로 url을 작성해주면 된다.

 

만약에 html 에서 src 폴더의 이미지를 넣고싶으면 import 를 먼저 해주고 사용한다.

import bg from './bg.png'

이런식으로 쓰고 bg 를 활용하면 된다. 여기서 bg 는 내가 작명한 변수다.

 

---

화면 3등분 하기(부트스트랩 이용)

 

react-bootstrap 사이트에서 grid 라고 검색해서 나오는 것을 응용해봤다.

import { Button, Container, Nav, Navbar, Row, Col } from "react-bootstrap";

      <Row>
        <Col sm>sm=true</Col>
        <Col sm>sm=true</Col>
        <Col sm>sm=true</Col>
      </Row>

---

public 폴더

 

보통 src 폴더에는 여러 코드가 들어가있고

이미지 같은 static 파일은 public 폴더에 넣어도 된다.

 

리액트는 build 할때에 모든 코드들을 한 파일로 압축해주는 작업을 한다.

근데 public 폴더에 있는 것만 그대로 보존을 한다.

-> 그래서 수정이 필요없는 static 파일은 public 에 보관해도 된다.

 

여기에 있는 이미지는 img url 경로를 그냥

/이미지경로

이렇게 써주면 돼서 편리하다. 하지만 이제 ~~.com/다른경로 에 배포를 해야하는 경우에는 

그 이미지 파일을 못 찾을 수 있다.

process.env.PUBLIC_URL

이걸 더해주면 작동하긴한다.