[2단계 - 장바구니 미션] 동동(김동희) 미션 제출합니다. #44
Conversation
src/App.jsx
Outdated
| dispatch(fetchCart()); | ||
| dispatch(fetchOrders()); |
There was a problem hiding this comment.
메인페이지에서는 주문목록이 보이지 않는데 모든 정보를 다 가져오면 비효율적이지 않을까요?
There was a problem hiding this comment.
메인페이지에서 물품 정보뿐만이 아니라 장바구니 정보가 필요하여서 물품 정보와 장바구니 정보를 fetch 하여야 하는데,
그냥 주문목록 정보도 같이 fetch 해버릴까... 라는 생각으로 가볍게 접근하였습니다..
말씀해주신 바와 같이 주문목록 정보는 주문목록 페이지로 이동하지 않는 이상 불필요하므로, 주문목록 페이지(src/pages/Order/Order.jsx)에서 fetch 하는 것으로 수정하였습니다! 😄
관련 커밋입니다: 8d7f8c9
src/App.jsx
Outdated
|
|
||
| return ( | ||
| <S.App> | ||
| <BrowserRouter basename={process.env.PUBLIC_URL}> |
There was a problem hiding this comment.
환경변수는 const PUBLIC_URL = process.env.PUBLIC_URL 처럼 상수로 따로 분리해서 관리하면 좋습니다! 👍
There was a problem hiding this comment.
process.env, 환경변수 자체가 상수인데, 별도로 상수화를 해야할까? 를 잠시 고민했습니다.
고민 끝에 다음과 같은 이유로, src/constants/env.js 를 만들어 export const { PUBLIC_URL } = process.env; 와 같이 상수화하였습니다!
- 상수를 사용하는 파일 입장에서는 해당 상수가 환경변수인지 JS파일의 상수인지를 모르게 하는게 좋겠다.
- 환경변수에서 파생된 상수를 환경변수와 같이 export 시킬 수 있다.
const NODE_ENV = process.env.NODE_ENV;
const PUBLIC_URL = NODE_ENV === "development" ? "/" : process.env.PUBLIC_URL;
export {NODE_ENV, PUBLIC_URL};
src/assets/shopping-cart.svg
Outdated
| </g> | ||
| <g> | ||
| </g> | ||
| <g> | ||
| </g> | ||
| <g> | ||
| </g> | ||
| <g> | ||
| </g> | ||
| <g> | ||
| </g> | ||
| <g> | ||
| </g> | ||
| <g> | ||
| </g> | ||
| <g> | ||
| </g> | ||
| <g> | ||
| </g> | ||
| <g> | ||
| </g> | ||
| <g> | ||
| </g> | ||
| <g> | ||
| </g> | ||
| <g> | ||
| </g> | ||
| <g> | ||
| </g> | ||
| <g> | ||
| </g> |
There was a problem hiding this comment.
앗 불필요한 <g> 가 들어가 있었네요.. free vector 를 제공하는 사이트에서 다운받아서 아무 생각없이 사용했습니다 😿
MDN에 따르면 svg의 <g>는 HTML의 <div>와 같이 컨테이너 역할을 수행하나, 해당 svg 파일에서는 불필요하다가 판단되어 삭제하였습니다!
짚어주셔서 감사합니다~!
참고자료)
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g
앗 당연히 확인을 하고 리뷰 요청을 드렸어야 했는데, 부끄럽습니다 😿 해당 부분 수정하였습니다~! 관련 커밋입니다: caf02df |
[2단계 - 장바구니 미션] 동동(김동희) 미션 제출합니다.
@ysm0622 님 안녕하세요. 동동 🏋️♂️ 입니다.
장바구니 미션 2단계 PR 제출하오니 리뷰 부탁드립니다!
1. 🔥 데모사이트 🔥
2.✈️ VSCODE in web ✈️
3. 구현한 기능 목록 - 2단계
4. 고민한 점
이를
react-redux의shallowEqual과 각 state의id 배열을 잘 활용하여, 변화가 있는 컴포넌트만 렌더링되도록 하였습니다.제 휴대폰(iPhone XR) 에서는 원하는 대로 잘 표시가 되는데, 다른 폰에서는 어떨지 모르겠습니다...
CSS cross-browsing 이 생각보다 쉽지 않았습니다.. cross-browsing 의 어려움에 대해 살짝 맛본듯한 느낌입니다 ㅎㅎ