(React) 쇼핑몰 만들기 - 기본 셋팅과 부트스트랩 이용하여 기본 디자인 구성

1. VScode에서 c://react 폴더를 연다.
2. 터미널에서 npx create-react-app shop
3. shop 폴더가 생성되었으면 그 폴더를 연다.
4. App.js에서 className="App" 태그 안에 있는거 모두 삭제. (관련 css도 삭제)
5. react bootstrap 홈페이지 들어가자마자 있는 get started 클릭.
6. Installation 에 있는 npm install react-bootstrap bootstrap 명령어 실행.
7. index.html에 아래 코드 삽입

   <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
    integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
    crossorigin="anonymous"
   />

8. 터미널에서 npm start 으로 미리보기 브라우저 open.
9. App.js <div>태그 안에 기본 메뉴를 생성하자.

<Navbar bg="dark" variant="dark">
	<Container>
      <Navbar.Brand href="#home">My shop</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>

9. 부트스트랩의 Component 를 사용하려면 import 해줘야한다. 아래처럼.
   import { Container, Navbar, Nav } from 'react-bootstrap';
10. 메뉴바 아래에 이미지를 넣어주자.
    <div className="main-bg"></div> 코드를 삽입하고
    App.css 파일에 아래코드 삽입.

.main-bg{
  height: 500px;
  background-image: url('./bg.jpeg');
  background-size: cover;
  background-position: center;
}

url() 안에있는 파일은 src안에 있는 파일이다.
11. 상품목록을 부트스트랩의 class를 사용해서 간편하게 정렬해준다.

<div className="container">
        <div className="row">
          <div className="col-md-4">
            <img
              src="https://codingapple1.github.io/shop/shoes1.jpg"
              width="80%"
            />
            <h4>상품명</h4>
            <p>상품설명</p>
          </div>
          <div className="col-md-4">
            <img
              src="https://codingapple1.github.io/shop/shoes2.jpg"
              width="80%"
            />
            <h4>상품명</h4>
            <p>상품설명</p>
          </div>
          <div className="col-md-4">
            <img
              src="https://codingapple1.github.io/shop/shoes3.jpg"
              width="80%"
            />
            <h4>상품명</h4>
            <p>상품설명</p>
          </div>
        </div>
      </div>

위는 img 태그의 src를 외부 이미지의 절대경로를 삽입했지만 다양한 방법을 이용할 수 있다.

img 태그의 src 삽입 방법

1. src 폴더 속 img 폴더 안에 있는 이미지는
   import shoe from './img/shoe.jpg' 를 삽입하고
   <img src="{shoe}">
   이렇게 코딩하면 된다. import 과정 때문에 귀찮다.
2. public 폴더에 있는 파일을 사용할땐
   <img src="/shoe.jpg">
<img src={process.env.PUBLIC_URL + '/shoe.jpg'}>
   이렇게 사용하면 된다.
   두번째는 배포할 때 url주소 때문에 이미지를 못가져오는 경우를 대비한 코드이다.