react로 쇼핑몰 만들기(1) - layout 생성

세팅 준비

npm init vite

위 명령어로 vite를 설치합니다. JS를 사용할 예정입니다.

npm install axios react-router-dom react-redux react-icons sass @reduxjs/toolkit react-loading-skeleton

위 명령어를 통해 필요한 모듈들을 설치합니다.

위 캡처처럼 폴더들을 만듭니다.

components 세부 폴더 안에는 .jsx파일 및 .scss파일을 추가합니다.

각 scss파일은 module처럼 사용할 것입니다. 그래서 이름을 지어줄때는 xx.module.scss로 작성하세요.

pages 세부 폴더 안에는 index.jsx파일을 추가합니다.

 

react-router-dom 및 전역 스타일 적용하기

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import './App.css'
import Layout from './components/layout/Layout'
import HomePage from './pages/HomePage'
import DetailPage from './pages/DetailPage'
import CartPage from './pages/CartPage'
import LoginPage from './pages/LoginPage'
import RegisterPage from './pages/RegisterPage'
import OrderPage from './pages/OrderPage'
import NotFoundPage from './pages/NotFoundPage'

function App() {

  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Layout />}>
          <Route index element={<HomePage />} />
          <Route path='product/:id' element={<DetailPage />} />
          <Route path='cart' element={<CartPage />} />
          <Route path='login' element={<LoginPage />} />
          <Route path='register' element={<RegisterPage />} />
          <Route path='order' element={<OrderPage />} />
          <Route path='*' element={<NotFoundPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

export default App

App.jsx의 코드입니다. route를 적용한 겁니다.

global.scss파일 코드입니다. 

global.scss를 적용하기 위해 main.jsx에 있는 import를 수정합니다.

 

Layout생성하기

components폴더안에 layout의 jsx와 scss파일입니다.

 

Header 생성하기

components폴더안에 header의 jsx(左1)와 scss파일(左2,3)입니다.

 

Nav 생성하기

import React from 'react'
import { Link } from 'react-router-dom'
import { FiShoppingCart, FiUser, FiLogIn, FiLogOut } from 'react-icons/fi'
import styles from './Nav.module.scss'

const Nav = () => {
  return (
    <nav className={styles.nav}>
      <ul>
        <li>
          <div className={styles.counter}>
            <Link to={'/cart'}>
              {' '}
              <FiShoppingCart />
            </Link>
          </div>
        </li>
        <li>
          <div className={styles.counter}>
            <Link to={'/order'}>
              {' '}
              <FiUser title='주문' />
            </Link>
          </div>
        </li>
        <li>
          <FiLogOut className={styles.nav_sign_out} title='로그아웃'/>
          <Link to={'/login'}>
            <FiLogIn title='로그인' />
          </Link>
        </li>
      </ul>
    </nav>
  )
}

export default Nav

components폴더안에 header폴더안에 Nav의 jsx파일입니다.

Nav의 scss파일입니다.

 

Footer 생성하기

components폴더안에 footer의 jsx파일 및 scss입니다.