1. 리액트 부트스트랩

[1. 프로젝트 생성 & Bootstrap 설치]

부트스트랩이란?
- CSS 코딩 과정을 줄이고자 사용하는 라이브러리이다.
- 리액트에 맞게 변형된 React Bootstrap를 사용할 수 있다.
사용방법
1. 리액트 부트스트랩을 설치한다.
```
npm install react-bootstrap bootstrap
```
1. CSS 파일을 index.html 파일의 <head> 태그 안에 적어준다.

[2. 부트스트랩을 사용하여 디자인하기]

주의 사항
- 리액트 17버전 이상에선 public 폴더 안에 있는 이미지를 CSS파일에서 /image.jpg로 불가
- src 폴더로 옮겨서 ./image.jpg 형태로 첨부
- 부트스트랩 코드를 넣을 땐 항상 상단에 컴포넌트명을 import 한다.

Navbar 만들기

import { Navbar,Nav,NavDropdown,Form,Button,FormControl } from 'react-bootstrap';

function App(){
  return (
    <div className="App">
      <Navbar></Navbar>
    </div>
  )
}

상품 레이아웃 만들기

ex) 부트스트랩 문법으로 상품을 가로로 3개, 모바일 사이즈에선 세로 1열로 정렬한다.

      <div className="container">
        <div className="row">
          <div className="col-md-4">안녕</div>
          <div className="col-md-4">안녕</div>
          <div className="col-md-4">안녕</div>
        </div>
      </div>

[3. 더 알아보기]

yarn
- npm이나 npx를 대체하도록 돕는 라이브러리이며 설치 속도와 안정성 면에서 낫다.
- 2.X 버전은 아직 불안정해서 1.X 버전으로 설치하는 것이 낫다.
- npm install 은 yarn add을 대체할 수 있다.
- npm run start 은 yarn start 을 대체할 수 있다.
src폴더 & public 폴더
- src 폴더에 있는 파일들은 리액트 앱을 발행했을 때 저절로 압축이 되고 파일명이 변경된다.
- public 폴더에 있는 파일은 리액트 앱을 발행했을 때 사이트 루트경로에 그대로 있는다.
  - public 폴더에 있는 이미지들은 <img src="/image.jpg" />로 쓸 수 있다.