React로 커머스 사이트 만들기 (1): 세팅

 

GitHub - jinmidnight01/powersell_frontend

본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다

 

---

Visual Studio Code, Node.js는 기본적으로 설치되었다는 전제하에 진행된다

 

REST API로 외부 서버와 통신할 수 있는 React 기반 커머스 사이트를 만들어볼 예정이다

 

본 사이트에서는 상품을 구매하고 주문을 조회할 수 있으며, 서비스 후기를 작성할 수 있다

또한, 관리자 페이지에서 주문/상품/후기 목록을 관리할 수 있다

마지막으로 해당 사이트를 AWS와 Netlify를 통해 배포해볼 예정이다

 

---

React 앱 생성

# 빈 폴더를 Visual Studio Code에서 오픈

# 어플리케이션 설치
npm create react-app "앱 이름"

# 설치된 앱으로 이동
cd "앱 이름"

# 앱 실행
npm start

 

---

src 폴더 구성

• components 폴더: 여러 page에 중복 사용되는 component들
• css 폴더: 여러 page에 적용되는 css 파일들
• data 폴더: test 용도로 활용된 임의의 data 모음
• images 폴더: 여러 page에 활용된 image 파일들
• pages 폴더: 세부 카테고리에 따라 전체 page 분류

 

---

Router 구성

// App.js
function App() {
  return (
    <Routes>
      <Route path='/' element={<LandingPage />} />
      <Route path='/product/:productId' element={<DetailProductPage />} />
      <Route path='/ordersuccess' element={<OrderSuccessPage/>} />
      <Route path='/orderfail' element={<OrderFailPage/>} />
      <Route path='/authentication' element={<AuthenticationPage />} />
      <Route path='/orderconfirm' element={<OrderConfirmPage />} />
      <Route path='/admin' element={<AdminPage />} />
      <Route path='/login' element={<LoginPage />} />
      <Route path={"*"} element={<NotFoundPage />}/>
    </Routes>
  );
}

• path를 *로 설정하여 존재하지 않는 URL에 대해 NotFoundPage를 출력

 

---

CSS 구현 방식

CSS Module 활용

- 외부 CSS 파일을 참조하는 방식은 React 애플리케이션의 규모가 커질수록 여러 컴포넌트에서 사용된 CSS 클래스명이 중복될 가능성이 높아진다는 문제를 지니고 있음

- 위의 문제를 해결하기 위해 CSS Module 활용

- CSS 파일 이름: [모듈명].moudle.css

- CSS Module 문법: {styles.[클래스명]}

// CSS Module 문법
import styles from [모듈명].module.css
...
<div className="{styles.[클래스명]}">...</div>

 

모바일/PC CSS 구현

- 양 옆에 공백이 있고 가운데 정렬되어 있는 모바일 버전처럼 PC 버전 구현

- 모든 js 코드에서 return 부분의 최상단 태그에 id를 pcWidth로 설정

- CSS의 media 쿼리를 통해 보통 600px보다 큰 가로 길이를 지니는 PC 버전에서 서비스의 width를 400px로 설정

// 임의의 js 파일
return (
  <div id={styles.pcWidth}>
     ...
  </div>
);

// 임의의 CSS 파일
@media all and (min-width: 601px) {
  #pcWidth {
    width: 400px;
    margin: 0 auto;
  }
}

 

CSS 부모/자식 선택자 활용

- 주요 컴포넌트 별로 최상단 태그에 class를 지정하여 구현

- 형태: 부모 요소 > 자식요소

// OrderConfirmPage.js
...
return (
...
  {/* payment */}
  <div className={styles.order_payment}>
    <hr></hr>
    <div>
      <div>
        <p>총 상품 금액</p>
        <div>
          {order.item.originalPrice * order.count}원
        </div>
      </div>
      <div>
        <p>할인 금액</p>
        <div>
          {order.item.originalPrice * order.count -
            order.orderPrice}
          원
        </div>
      </div>
      <div>
        <p>최종 결제금액</p>
        <div>{order.orderPrice}원</div>
      </div>
    </div>
  </div>
...
);

/* orderconfirm.module.css */ 
...
/* payment */
.order_payment hr {
    margin: 15px 0 10px 0;
    border: 0.5px solid rgb(181, 181, 181);
}

.order_payment > div {
    display: flex;
    flex-direction: column;
}

.order_payment p {
    font-weight: bold;
}

.order_payment > div > div {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    line-height: 20px;
}

.order_payment > div > div:nth-child(3) {
    font-weight: bold;
}
...