2023-04-15(쇼핑몰 프로젝트 시작)

오늘은 어떤 공부를 하게 될까? 두근두근

-프로젝트 생성해보자
1. 작업폴더에 shift + 우클릭해서 powershell/터미널 열고
2. 터미널에 리액트 프로젝트 생성 명령어 입력

npx create-react-app shop

3. shop이라는 폴더를 VScode 에디터로 오픈한 뒤 코드 짜기
4. App.js에 필요없는 html들은 지우고 div 하나만 남겨두고 시작하기
5. 에디터에서 터미널 열어서 npm start 누르면 미리보기 띄울 수 있음.

-Bootstrap을 이용해보자
1. 인터넷에 Bootstrap을 검색해서 나오는대로 터미널에 입력하고
2. css파일을 넣으면 됨
3. 원하는 걸 검색하고 (버튼을 예로 들어보자)
4. 원하는 결과물의 코드를 붙여 넣은 후
5. component인 애들(맨 앞 글자가 대문자임)을 import 해준다.
ex)import { Button } from 'react-bootstrap'

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

function App() {
  return (
    <div className="App">
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">자신감을 갖자</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">menu</Nav.Link>
            <Nav.Link href="#pricing">settings</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
    </div>
  );
}