[우테코] 장바구니 미션 - 1단계 정리

1단계 회고

이번 미션에서는 Redux를 사용해보는 것이 주요 키워드였다.
장바구니 미션은 록바(=뒷공부 장인😎) 와 같이 진행하게 되었다.

록바가 평소에 정말 열심히 우테코 생활을 하는 것이 눈에 보였기 때문에, 같이 페어를 한다고 했을 때 배울 것이 많겠다고 생각이 되었고, 실제로도 페어기간동안 많이 배운 것 같다.
예를 들어 섬세한 함수, 변수 네이밍이라던지, 꼼꼼한 리팩토링, 생각하는 시간을 오래가지기 등이 있다.
개인적으로 정말 좋은 습관인 것 같다.

그리고 리액트도 페이먼츠때 좀 만져봤다고 조금은 손에 익었는지 개인적으로는 1단계까지는 페이먼츠 미션보다 어렵지 않았다. (2단계때는 어떻게 될지 모르겠지만 일단은 말이다👀)

컴포넌트 분리

이번에 컴포넌트를 분리할 때에는 과도한 분리를 하지 않도록 주의했다.
이유는 저번 미션에 처절히 느꼈기 때문에, UI별로 하면서도, 불필요한 분리를 하지 않도록 했다.

그래서 완성된 컴포넌트 구조도는 아래와 같다.

물론 저번 페이먼츠 미션 때보다 단순한 구조긴 하지만 Product 컴포넌트 내에서 상품명을 제공하는 것을 따로 컴포넌트로 분리하지 않는 등의 저번 단계보다는 덜 분리를 진행하였다.😅

분리를 덜 하는 방식으로 진행한 이유는,
저번 페이먼츠 미션에서 리뷰어님의 단순히 return만 하는 컴포넌트를 가지고 있는 것이 의미가 있을지를 제기해서이다.

예를 들어 설명하자면,

const NameLabel = ({name}) => {
	return (
    	<label>{name}</label>
    );

위의 경우에는 단순히 props로 name을 받아 label로 감싸줘서 return하는 것이 전부이다.

이런 경우에는 상위 컴포넌트에서 컴포넌트가 아닌 tag로 감싸주어도 전혀 무방하다.
상위 부모 컴포넌트에서도 한줄로 저 컴포넌트를 표현해줄 수 있기 때문이다.

그래서 재사용성이 높지 않으면서 단순한 역할만 하게 되는 component는 만들지 않으려 했다.

물론 이번 미션에서도 Button은 컴포넌트 분리를 하였다.
Button은 한 페이지에서만 사용되는 것이 아닌, 여러 페이지에서 반복적으로 사용 될 것으로 예상이 되어서 였다.

styled-component

styled-component의 경우 이번 미션에 저번 미션에 이어서 이것 저것 시도 해볼 수 있었다.

저번 미션에서 배웠던 것과 느꼈던 것을 바탕으로 이번 미션을 진행하였다.

Input의 경우 저번 미션에서 스타일을 주었다.
(그때는 멀리 보지 못하고 당장 해당 페이지에서의 인풋이 다 똑같은 스타일을 가지고 있었기에...😱)
하지만 이어 다른 페이지에서도 Input이 필요해졌고 스타일은 달랐기 때문에, 기존에 만들어 놓은 Input을 활용하지 못했다. 결국은 해당 Input 스타일에 맞게 컴포넌트를 다시 만들고 있는 나를 발견할 수 있었다.

그래서 이번에는 제일 많이 사용될 것 같은 Button에는 아무런 스타일을 주지 않았다.
그저 기본적인 cursor: pointer같은 버튼 모드에 공통적으로 적용되는 것만을 적었다.

대신 스타일링을 주어야 할 때에는 상속의 방식을 활용해서 버튼 스타일링을 다르게 줄 수 있었다.

export const CartButton = styled(StyledButton)`
  :hover {
    svg path {
      fill: #2ac1bc;
    }
  }
`;

export const CardDetailButton = styled(StyledButton)`
  width: 100%;
  height: 60px;
  background: #73675c;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  :hover {
    background: #2ac1bc;
  }
`;

이런 방식으로 말이다.
처음에는 해당 방식이 어떤 버튼 스타일의 컴포넌트들이 있는지도 한번에 확인 할 수 있다고 생각해서 좋다고 생각했다.
.
.
.
그런데
완성하고 홀로 다시 곰곰히 생각해봤을 때에,
styled component로 생성 된 component도 component인데,

스타일 마다 컴포넌트를 새롭게 선언해서 사용한다면,
그냥 Button 컴포넌트를 매번 만드는 것과 다른게 무엇인지? 🧐
현재 Button의 컴포넌트가 의미있게 재사용 되는지 의문이 들었다. 🤔🤔🤔

현재 Button이 가지고 있는 역할이 없어서 인 것일 수도 있겠지만, 뭔가 이상했다...

이건 그냥...
부모 컴포넌트 에서
<CartButton onClick={onClick}>버튼 </CartButton>
이렇게 선언하는 것이랑 차이가 없었다😱

그냥 스타일링 컴포넌트 선언하는 부분이 외부에 분리되어 import하는 것이 다랄까?

컴포넌트로 독립적으로 분리 되어서 재사용 된다는 것이 스타일링도 포함되는 것인가???

컴포넌트 분리와 스타일링 기준을 어떻게 줘야 할지 아직도 의문이다...

일단은, 이렇게 하는 것도 아닌것 같다 좀 더 고심을 해봐야 할 것 같다.

ProductList는 어디에서 받아와야 하나?

이번 미션에서 ProductList를 json-server에 저장 된 것을 받아오는 비동기 통신의 형태가 꼭 들어가야 했다.

사실 거의 정석적인 방법은
productList를 사용하는 페이지에서 redux-thunk를 활용해서 api통신을 통해서, store의 productList를 갱신하고 해당 값을 가져와서 사용하는 방식으로 진행해야 했다.

하지만
해당 방식에 의문이 몇가지가 들었다.

첫 번째로는, 해당 미션에서는 상품 정보가 수정되는(= 상품이 추가되거나 삭제 되는 ) 페이지가 없기 때문에 상품 리스트가 변할 일이 없다.

두 번째로는, 변동이 없는 상품 리스트를 productList페이지가 재 랜더링 될때 마다 서버와의 통신을 통해서 받아올 필요가 있을 것인가?

최초로 한번 만 받아오고 그걸 계속 사용하는 것이 더 효율적인 방식이 아닌가? 라는 생각이 들었다.

그래서 이번에는 최상단의 index.js에서 한 번만 서버에서 정보를 받아오는 방식으로 진행하였다.

그렇지만 리뷰어님께서 좋은 접근이고 합당하지만
실제, 서비스로 생각을 한다면 상품 리스트는 계속해서 변동 될 수 있으니
미션에서도 이를 생각하고 적용하는 것이 더 좋을 것 같다는 의견을 들었다.

이 말을 보고 아차 싶었다. 물론 현재는 연습하는 단계이지만, 내가 최종적으로 해야할 것은 실제로 운영되고 있는 서비스를 개발하는 것이다.

최종적인 목적과는 약간은 벗어난 접근을 한 것이다.🥲
아무리 토이 프로젝트라도 실제 서비스 되고 있다고 생각하기! 계속 생각하면서 코딩 하는 걸 잊지 말아야 하는데 말이다.