[BB] 웹자판기 1주차 PR - 1

[BB-choi]

안녕하세요, 어텀!🙌 BB라고 합니다!
부족한 점이 많지만 2주동안 잘 부탁드립니다😉

데모페이지 🖥️

링크🖱️

구현사항 ✔️

• 초기 설정

  • create-react-app 이용하여 초기 설정
  • lint 설정
    • airbnb base
  • styled-component사용
    • style파일 분리하여 사용
    • 공통 스타일 theme 적용
  • react-router-dom 이용 라우팅

• 화면구현

구현해야할 내용을 작은 단위로 나누어 개발하려고 노력하고있습니다!
작게 나눈 구현 사항을 issue로 등록하여 개발해보려고 하고있습니다.

useContext나 custom Hook등 아직 잘 모르고, 공부가 필요한 부분이 많아서 디자인이나 화면 구현에 많은 시간을 할애하기 보다
화면을 먼저 만들어 두고 학습할 시간을 좀 더 확보하기 위해서
이번 PR에는 기능 구현 부분은 포함되지 않았고 화면 구현에 집중했습니다.🤓

아직 상태관리가 제대로 이루어지는 부분은 없어서 앞으로 미션을 진행하면서 얼마나 어려움에 부딪히게 될지... 걱정도 되지만 어텀의 도움을 받아서 열심히 달려가보겠습니다!

살짝 5시를 넘겨 제출한 점 죄송합니다😥
리뷰 잘 부탁드립니다!🙌

[deprecated-hongbiii]

안녕하세요 비비, 리뷰를 맡은 어텀입니다!
프로젝트 구조도 잘 잡으신 것 같고 스타일 파일에 styled.js 라고 붙여주니까 스타일 파일인 게 드러나서 좋네요.
이번 프로젝트도 화이팅!! 💪

바로 머지할게요 :)

[deprecated-hongbiii]

eslint 적용 👍

[deprecated-hongbiii]

CRA로 생성한 프로젝트에서 eject를 하면 어떤 일이 일어나는지 찾아보시는 것도 재미있을 것 같아요. ㅎㅎㅎ

[BB-choi]

이 부분은 CRA로 프로젝트를 생성하면 자동으로 생성되는 script여서 아무 생각 없이 넘겨버렸던(😭) 부분이었는데요,
어텀이 생각할 거리를 던져주신 덕분에 한 번 찾아보고 공부해 보는 시간이 되었습니다!!
eject를 하면 어떤일이 생기는지 한 번 문서로 알아보고,
관련 포스팅등을 읽어보며 공부해 보았습니다!
감사합니다🙌

[deprecated-hongbiii]

오호 잘못된 url로 접근했을 때 에러처리를 위한 컴포넌트인가요? 넘 좋습니다 👍

[deprecated-hongbiii]

path가 '/' 인 경우에 VendingMachine 컴포넌트를 렌더링하고 싶으셨던 것 맞을까요?
Index Routes라는 것을 활용해볼 수 있을 것 같아요! 공식문서 링크 함께 첨부해드릴게요.
https://reactrouter.com/docs/en/v6/getting-started/overview#index-routes

또한 '/wallet'에 쓰인 / 는 생략해도 될 것 같습니당 (공식문서에 예제가 다 생략되어 표기돼있네요!)

[BB-choi]

와! 저도 사용하면서 살짝 찝찝했던 부분이었어요!😂 알려주셔서 감사합니다!

[BB-choi]

어텀의 리뷰를 확인하기 전에 생각해보다,

mockData/menus.js에서 아래와 같은 형식의 메뉴 데이터를 받아와서

{
    id: 0,
    menuName: "자판기",
    path: "/",
  },

네비게이션의 링크를 위 데이터의 path로부터 연결하고 있어서,
Router에서도 위 데이터의 path로 연결해야

menus데이터에 변경이 있을때에 Router와 NavBar 모두에 적용될 것 같아서

const [indexPage, walletPage] = menus;

// 생략

<Route path={indexPage.path} element={<Layout menusData={menus} />}>
    <Route path={indexPage.path} element={<VendingMachine />} />
    <Route path={walletPage.path} element={<Wallet />} />
</Route>

이런식으로 수정해봤는데, 괜찮은 방법일까요?🤔

[deprecated-hongbiii]

넵넵 크게 어색하지는 않은 것 같아요!

다른 방법으로는, 저희 팀에서는 클라이언트 url은 별도의 파일로 분리하여 관리하고 있어요!
아래와 같이 작성해볼 수 있습니당

// constants/url.js

const URLS = {
  HOME: '/',
  WALLET: '/wallet',
}

export default URLS;

[deprecated-hongbiii]

이 부분은 왜 레이어를 한 번 더 나누셨는지 궁금하네용 ㅎㅎ
Navbar 컴포넌트에서 바로 menusData.map~~ 해도 될 것 같은데 나누신 이유가 궁금해요!

[BB-choi]

처음 이 부분을 작성할 때 살작 복잡해 보일 것을 예상해서
일단 분리해보고, 필요없으면 다시 합치자는 생각으로 분리해봤었어요!

그런데 지금 확인해보니 어텀 말씀대로 더 복잡도가 높아진 것 같아서(일단 만들고나서, 고쳐보자 하는 습관을 고쳐야 하는데.. 잘 안되네요! 자꾸 이렇게 놓치는 부분이 생기는데😭)

Navbar 컴포넌트를

{menusData.map((item) => (
    <NavItem menuItem={item} key={item.id} />
))}

이렇게 변경해 보았습니다!

[deprecated-hongbiii]

계속 고민만 하다가 아무것도 못하는 것보다는 일단 만들고 계속해서 고쳐나가는 것이 완성도도 높고 동기부여도 잘 되는 것 같아요!
잘 하고 계시니 걱정하지 않으셔도 됩니당 ㅎㅎㅎ 😄

[deprecated-hongbiii]

개인적인 의견이니 참고만 해주세요!

링크가 현재 NavItem에 걸려있는데요,
개인적으로는 Navbar 메뉴가 자판기, 지갑 두개밖에 없어서 공식문서의 예제처럼 그냥 Navbar 안에 같이 써주는 게 한눈에 보기 편하지 않을까 싶어요!

https://reactrouter.com/docs/en/v6/getting-started/overview#navigation

[BB-choi]

이 부분은 어떻게 할까 고민이 되기도 했는데요,
mockData/menus.js 에서 읽어 들여서 nav와 라우터를 구성한다는 생각으로 (앞으로 메뉴가 추가된다면..? 이라는 가정 하에) 작성(위 코멘트포함)하여 이런 형태가 되었습니다.

확실히 <nav>를 쉽게 파악하기에는 어텀이 말씀해주신 형태가 훨씬 더 좋다고 생각됩니다!
실제로 현재 메뉴는 2가지 밖에 없기도 하구요!

어떤 방식을 취하면 좋을지 더 고민해보도록 하겠습니다!🙌

[deprecated-hongbiii]

ProductItem 상품 하나를 가리키는 것처럼 느껴져서 Products 라고 하면 어떨지 제안드려봅니다!

[BB-choi]

아래남겨주신 코멘트까지 고려해서 변경해보겠습니다!👍

[deprecated-hongbiii]

이렇게 쓰이는 거라면 map을 여기서 사용해서 ProductItem을 렌더링하는 게 더 적절할 것 같아요!

Suggested change

	<ProductUl>
	<ProductItem productsData={productsData} />
	</ProductUl>
	<ProductUl>
	{productsData.map(product => <ProductItem productData={product} />)}
	</ProductUl>

[BB-choi]

아래와 같이 변경해 보았습니다!

const ProductItem = ({ productData }) => {
  return (
    <ProductLi>
      <Button
        data={productData}
        styles={productButtonStyle}
        className="product-button"
      />
      <p className="product-price">{productData.price}</p>
    </ProductLi>
  );
};

훨씬 ProductItem이라는 이름에 맞고 알기 쉬운 코드가 된 것 같아요!
감사합니다!🥳

[BB-choi]

안녕하세요 어텀!! 🤗
정성스럽고 꼼꼼하게 리뷰해주셔서 너무 감사드려요!

이번 주는 제대로 집중이 안되고 의욕이 떨어지는 시간을 보내고 있는 BB입니다..😭
이게 번아웃일까? 라는 생각도 들기도 하는데 번🔥이라고 할 정도로 엄청 달렸나? 하기에도 아닌것 같기도 하고요...ㅎㅎ

이런 상황이라 나름 신경써서 코드를 작성하는데도
제가 보기에도 이 부분은 이상한데? 싶은 부분이 자꾸 생기는 것 같습니당..💦
그럼에도 불구하고 코드를 세심하게 확인해 주셔서 너무 감사드려요!
코드에 대해 피드백을 받고 개선한 뒤, 한결 깔끔해 진 코드를 보면 기분이 그렇게 좋을수가 없습니다😊

잘 하고자 하는 욕심이 저를 힘들게 하는건 아닐까 하는 생각이 들어서
이번 과제는 좀 힘을 빼고 할 수 있는 데 까지만 해보자~라는 생각으로 조금 느리더라도 조금씩 진행해보려고 합니다🐢
남은기간도 잘 부탁드리겠습니다!

[deprecated-hongbiii]

ㅠㅠ 비비 힘든 시간을 보내고 계셨군요
이럴 땐 노트북 잠시 덮어두고 다른 활동 하면서 리프레쉬 하는 것도 큰 도움이 되더라구요!
프로젝트에 너무 부담 가지지 마시궁 ㅎㅎㅎ 페이스 조절 화이팅!! 💪