Thisisneverthat 클론 프로젝트 회고

3주 간의 1차 프로젝트가 마무리 되었다. 이론을 배우고, 개인과제를 진행한 후 처음 주어진 팀 프로젝트이다. 프로젝트를 진행하며 배운점과 깨달은 점을 남겨본다. 

 

완성된 클론 프로젝트 사이트  Codeisneverthat

 

1. 클론할 사이트 확인: 보이는 것이 다가 아니야

클론 한 웹사이트의 페이지 구성, 기능등을 개발자 도구를 활용하여 확인한다. 어떤 데이터가 들어오는지도 확인한다. (네트워크 -> json파일을 확인하면 수월하다) 

이 과정에서 무엇보다 이 사이트가 사용자들을 위해 가장 중요하게 생각하는 것은 무엇인지, 사이트의 특성이 어떠한지 등 또한 생각해보게 되어 재밌었다. 우리가 클론한 thisisneverthat는 의류 쇼핑몰로, 무엇보다 랜딩페이지에 구매를 자극하는 트랜디한 이미지들과, 어떤 제품이 인기 있는지 바로 볼 수 있게한 TOP20메뉴, 재고를 알려주거나 매진시 재입고 알림 받기 등의 기능이 눈에 띄었다. 

 

 

2. 데이터 모델링: 중복을 피해라

테이블을 구성하는 조건 중에 중복되는 데이터가 없는지 액셀이 작성해보고 구성해보면 더 수월하다.

1:1, 1:N, N:N 관계를 정확히 파악한 후 프로젝트를 진행해야지 추후에 데이터를 넣는데에 어려움이 없다.

팀원들의 다양한 의견을 받음으면서 지속적으로 데이터 모델링이 바꼈지만 의견을 수용하고 바꾸면서 만들어진 탄탄한 데이터 모델이 프로젝트를 진행하면서 큰 수정없이 견고하게 받쳐주었다. 

 

관계형 데이터베이스

 

 

3. 역할 분담: 레이아웃보다는 기능을 보면서 판단

프론트와 백을 희망하는 기능대로 분배했다. 지금 돌아보면 당연한 이야기지만 프론트에 대한 역할 분배를 할 때 담당 페이지의 개수가 작업해야할 양을 결정하는 것이 아니고, 그 페이지의 기능적인 부분에 따라 작업 양이 정해진다. 

장바구니 페이지를 담당한 양은 모달 형태로 조그맣게 나오는 장바구니 기능을 보고, 작업양이 적을 것이라 생각했지만 (레이아웃 짤때는 그럴 수 있지만) 정작 기능 구현을 위한 코딩을 할 때 보이는 것 보다 더 복잡하다는 것을 깨달았다.

 

 

4. 개발

 

프론트: 장바구니 페이지 구현

선택한 개수만큼 아이템 보이게 하기: Map

import Item from './Item';

function Items({ items, setItems }) {
  return (
    <>
      {items.map(item => (
        <Item item={item} key={item.id} setItems={setItems} items={items} />
      ))}
    </>
  );
}

export default Items;

 

장바구니 합계 구하기 : Reduce

  const [subtotal, setSubtotal] = useState(0);
  useEffect(() => {
    const sum = items.reduce((sum, item) => {
      return sum + item.cartquantity;
    }, 0);
    setSubtotal(sum);
  }, [items]);

 

아이템을 추가하고 빼는 로직

  const minusOne = () => {
    const newItems = items.map(each => {
      if (each.id === item.id) {
        return {
          ...each,
          quantity: each.quantity - 1,
          total: each.price * (each.quantity - 1),
        };
      } else {
        return each;
      }
    });
    setItems(newItems);
    handleUpdate('minus');
  };

  const plusOne = () => {
    const newItems = items.map(each => {
      if (each.id === item.id) {
        return {
          ...each,
          quantity: each.quantity + 1,
          total: each.price * (each.quantity + 1),
        };
      } else {
        return each;
      }
    });

    handleUpdate('plus');
    setItems(newItems);
  };

fetch문 

  const [items, setItems] = useState([]);
  useEffect(() => {
    fetch(`${BASE_URL}/cart`, {
      method: 'GET',
      headers: {
        Authorization: token,
      },
    })
      .then(res => res.json())
      .then(items => {
        const cartItems = items.map(item => ({
          ...item,
          total: item.price * item.quantity,
        }));
        setItems(cartItems);
      });
  }, [token, setItems]);

모달화

 

  const [cartModal, setCartModal] = useState(false);
  const openCartModal = () => {
    setCartModal(!cartModal);
  };

      {cartModal && (
        <ModalLayout openCartModal={openCartModal}>
          <CartModal openCartModal={openCartModal} />
        </ModalLayout>
      )}

 

백: 회원가입, 로그인

JsonWebToken, bcrypt 사용

 

 

5. 배포 및 리팩토링: 맛보고, 소금치고, 플레이팅하기

AWS이라는 서비스를 이해하고 직접 배포하는 과정을 겪었다.

또한 배포 후 수정사항을 작업할때는 config.js파일에서 URL의 구성과, 로컬, 배포의 개념을 정확히 파악해야지 내가 작업하고 싶은 환경을 config.js파일의 URL을 바꿔가면서 리팩토링 할 수 있다.

 

리팩토링에서 가장 중점적이였던 것은 컴포넌트별로 별도의 파일을 관리하고 css또한 컴포넌트별로 관리하는 것이었다. 이렇게 관리해야 처음 내 코드를 보는 사람들도 직관적으로 구조를 파악하기 쉽다. 또한 한 폴더에 index.js파일을 만들어 그 파일에는 최상위 부모 컴포넌트를 import, export하는 리팩토링도 진행했다. 디렉토리를 적었을때 자동으로 읽히는 파일이 index.js이기 때문에 이렇게 하면 처음 내 코딩을 접하는 사람도 궁극적으로 어떤 최상위 부모를 랜더링하는지 쉽게 파악할 수 있다. 

 

멘토님들에게 질문하기 전에, 그 질문을 나 자신에게 던져 내 생각에는 어떤 해결점이 있을 것 같은지? 그렇게 생각하는 이유는 먼지 먼저 질문해보면 스스로 가지고 있던 의문의 대부분은 해소가 된다는걸 깨달았다. 이런 과정을 통해 나만의 생각이 있는 개발자로 성장하고 싶다.

 

 

마치며: 나는 다른 사람에게 어떤 팀원이었나?

프로젝트를 시작하는 초반에 잘할 수 있을까 라는 우려가 앞서 지레 겁을 많이 먹었다. “그래, 배우면서 하면 되지!” 라는 대담하고 용기있는 마음이 필요하다. 이런 마음이 프로젝트 내내 도전적이고 진취적인 태도를 만들 수 있는 기반이 될 것 같다. 한 프로젝트를 모델링 구성부터 배포까지 경험하니 이론으로 배웠던 것들이 모두 종합되어 몸으로 겪은 의미있는 경험이였다. 음식에 비유하자면 지금까지 채소썰고 옆에두고, 회 뜨고 옆에두고, 양념장 만들고 옆에두고 했다면 프로젝트를 진행하면서 재료를 준비하고, 준비해둔 재료를 활용하여 맛있는 물회를 만들고, 그 물회를 시식해보면서 아 양념장이 더 필요한데? 이런 채소가 있으면 더 맛있겠는데? 하며 끊임없이 개선하는 요리사의 느낌이였다. 

 

무엇보다 중요한건 팀원들끼리의 커뮤니케이션이었다. 본인의 작업에 묻혀, 혹은 그때 그때 단일 팀원들간의 소통에 묻혀 팀원 전체가 참여하여 프로젝트 전반의 진행사항 모두가 동일하게 공유하는 시간을 간과할 수 있게된다. 하지만 항상 논의 사항을 글로 정리하고 (매우 중요!) 짧게라도 모든 팀원의 진행사항을 공유할 수 있는 회의를 잊지말자. 

 

팀 프로젝트를 통하여 Github와 PR의 중요성 또한 깨닿게 되었는데, 한 작업물이 완성되어 커밋을 하고, 커밋한 내용을 메모해놓고 Pull request를 올릴 때 수정된 내용을 빠지지 않고, 구체적으로 기록하는 것이 매우 중요하다는 점을  깨달았다. 이렇게 돌아보니 글로 적지 않는 것은 모래를 움켜쥐는 것 같이 손가락 사이사이로 빠져나가는 것 같다. 무엇이든 글로 항상 남겨놓는 습관은 모래에 물을 부어 움켜쥐면 단단한 덩어리를 만드는 것과 같다. 과정을 글로 남기는 습관을 생활화 하자.

 

이번 프로젝트에서 잘한 점이 있다면 내가 맡은 부분을 구체적으로 나누어 주어진 시간내에 단계별로 구현한 점이었고, 또한 규칙적인 일상으로 유지함으로서 팀원과의 소통이 필요할 시 바로 시간을 낼 수 있다는 점이었다. 이후 프로젝트에서는 긍정적인 마인드 항시 장착, 진취적인 태도로 주어진 작업 외에 팀원들이 지원이 필요할 때 혹은 역할분배에서 애매하게 분배되지 않는 부분들을 내가 적극 받아드려 발전할 수 있는 여지를 많이 만들 수 있는 사람이 될 것이다. 

 

프로젝트를 마무리하면서 멘토님들이 던져준 “나는 다른 사람에게 어떤 팀원이었나?”라는 화두를 머리에 새기며 본인에게 주어진 일만이 아닌 프로젝트 전체를 이끌어감에 있어 어떤 도움을 줄 수 있는지 고민하고 행동하는 사람이 되자.