2024.02.05(월)

☕커피 주문 사이트 제작 프로젝트

이번 시간에는 간단한 커피 주문 사이트를 제작한다.

npx create-react-app . --template typescript
npm start

🅱️Bootstrap

• 공식 사이트
  • Bootstrap
  • React Bootstrap | React Bootstrap
• 웹 개발을 위한 오픈 소스 프론트엔드 프레임워크 (트위터에서 개발)
• 빠르게 레이아웃을 구성할 수 있음
• 사용법 🔗

  npm install react-bootstrap bootstrap

  • public/index.html에 추가

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />

  • src/App.tsx에서 다음과 같이 필요한 component를 import해서 사용하면 됨

    import { Button } from 'react-bootstrap';

    • Buttons | React Bootstrap
      (Components 탭에서 더 많은 component 종류들을 찾을 수 있음)
  • Grid system | React Bootstrap
    

🖼️이미지 사용하기

• 소스 코드와 data는 분리되어야 함
• image들은 public 폴더에 보관
• public은 추후 build 시 압축 대상에서 제외됨 (이미지 같은 건 압축되면 안되니까.. )
• public에 있는 data는 App.tsx에서 root 경로에서 읽어오듯이 사용 가능.
  • public/images/coffee1.jpg ⇒ "images/coffee1.jpg"
  • 권장되는 방법 (환경 변수에서 root 경로 가져와서 명시)

    {process.env.PUBLIC_URL + "images/coffee1.jpg"}

• App.css에서는 root 경로로 사용 안됨

  background-image: url(../public/images/coffeebg.jpg);

⚛️React Router DOM

• 공식 사이트: Home v6.21.3

• 설치: npm install react-router-dom@6

• 설정 및 사용법

  • src/index.tsx에서 import { BrowserRouter } from 'react-router-dom'; & <App />을 <BrowserRouter></BrowserRouter>로 감싸기

    import { BrowserRouter } from 'react-router-dom';
    
    const root = ReactDOM.createRoot(
      document.getElementById('root') as HTMLElement
    );
    root.render(
      <React.StrictMode>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </React.StrictMode>
    );

  • src/App.tsx에서도 ‘react-router-dom’에서 필요한 component들 import해서 사용

    import { Routes, Route, Link } from 'react-router-dom';
    
    function App() {
      return (
        <div className="App">
    			<Routes>
            <Route path='/' element={<div>home 화면</div>}></Route>
            <Route path='/detail' element={<div>detail 화면</div>}></Route>
          </Routes>
    			<div>
            <Link to='/'>home</Link>
            <br />
            <Link to='/detail'>detail</Link>
          </div>
    		⁝
    	);
    }

    • Routes v6.22.0
    • Link v6.22.0