<Project> 마켓컬리

Youje0·2022년 11월 13일
회고
0

🤔프로젝트 끝..?

2주간 길다면 길고 짧다면 짧은 1차 프로젝트가 끝났다.
사실 끝은 끝인데 사실 다음 주에 바로 2차 프로젝트라 끝이라기엔..
그래도 2주간 열심히 밤새워가며 진행했던 프로젝트를 회고해보려 한다.

1. 어떤 프로젝트를 진행했는지 ?

우리팀이 진행했던 클론 프로젝트는 '마켓 컬리'였다.

그럼 왜 마켓컬리로 진행했는가 ?

사실 다른 후보 사이트들도 모두 다 좋았지만 마켓 컬리가 가장 UI가 깔끔하고

인터넷 쇼핑몰 자체로서의 기능이 가장 충실하다고 느껴서 마켓 컬리로 선택했던 것 같다.

2. 프로젝트 진행하면서 어려웠던 점이 있는지 ?

사실 처음부터 끝까지 모두 어려웠다. 프로젝트 자체가 처음이다보니 처음에 파트를 어떻게 나눌지

그 파트를 어디서부터 어디까지 해야할지 백엔드와 소통을 어떻게 해야하는지 등등..

모든 부분이 어려웠는데 가장 힘든점은 내가 생각한대로 코드가 안쳐진다는점이였다.

3. 마켓 컬리의 어느 부분을 맡았는지 ?

위에 사진처럼 네비게이션, 푸터, 메인, 장바구니를 맡았는데 첫 째주엔 거의 css 작업만했고

실질적인 기능구현은 2주차부터 시작했다. 사실 첫 주차엔 뭘 어떻게 해야할지 몰라서

레이아웃 작업만 했던 것 같다.

4. 어느 부분이 부족했나요 ?

사진처럼 레이아웃만보면 그래도 그럴싸하지만 사실 내가 생각했던 기능을 제대로 구현하지 못했다.

코드도 엉성한부분 투성이고 고치지 못한 버그도 많다. 예를 들어 위 사진에 배송비 같은 경우가 그렇다.

제품이 아무것도 없으면 3000원이 아닌 0원으로 나오게 만들고 싶었는데 다른 치명적인 버그들이

많아서 그걸 고치느라 고칠 생각 조차 못했던게 아쉽다. 2차 프로젝트도 끝나고 느정도 여유가 생기면

리팩토링 할 예정이다.

5. 리팩토링 할 예정이라면 구체적으로 어떤 것?

위에 적은 배송비와 제품이 카트에 들어왔을때 갯수를 늘리면 상품 금액이 실시간으로 변하는 것

그리고 메인 페이지에 carousel을 내 코드로 다시 구현하는 것과 메인 페이지에서 카트 버튼

눌렀을때 버그로 제대로 모달창이 안뜨는 것 등등 여러가지 고칠 부분이 많다.

6. 회고를 마치며..

사실 처음에 시작할때 useState나 useEffect 같은 기초적인 Hook 조차도 제대로 쓸 줄 몰랐다.

const [state,Setstate] = useState();

위 처럼 저렇게 선언하는걸 몰라서 쓸때마다 매번 검색해서 쓸정도로 정말 실력이 최악이였는데

이번에 프로젝트를 진행하면서 솔직히 결과는 처참할지라도 내 스스로 앞으로 나아가고 있다는 느낌을

정말 많이 받았다. 인터넷에 검색했을때 다른 사람들이 써놓은 코드를 이젠 이해 할 수 있게 되었으며

나 스스로 생각해서 코드도 짜는 등등 솔직히 말하면 프로젝트 시작전에 내가 과연 지금하고 있는게 맞나?

라는 의문만 가득했는데 이번 프로젝트를 마치며 내가 지금하고 있는게 맞고 나는 제대로 앞으로

가고있다라는 확신이 들었다. 아마 2차 프로젝트가 끝나면 지금 쓴 이 글을 다시보게 될거 같은데

2주 후의 내가보는 이 회고록은 어떤 느낌일지 정말 궁금하다.

7. 시연영상

https://youtu.be/eIEBAGZyBxI

✨사용한 기술 스택

backEnd

  • EXPRESS
  • MYSQL
  • NODE.JS

frontEnd

  • HTML/CSS
  • JavaScript(ES6+)
  • React
  • SASS

🧐After :: 리팩토링

2차 프로젝트 이후 포트폴리오를 정리하는 과정에서 기존의 1차 프로젝트를 리팩하였다.
1차 프로젝트때 실력이 많이 부족해서 개념만 어느정도 익히고 코드를 복붙한게 많았는데
2차를 끝내고 지금 다시 코드를보니 너무 엉성한점도 많고 복붙을 해도 완전히 이해를 못하고
복붙한 것이 엉성한 부분이 너무 많아서 리팩토링을 진행하게 되었다.

기존 carousel

리팩토링한 carousel

일단 기존의 carousel은 길이가 맞지않아 조금씩 맨왼쪽 사진이 밀리는 것을 볼 수 있는데

리팩토링하면서 이런 부분을 개선하여 딱맞게 만들었고 carousel에 상품이 없는데도

계속 넘어가는 반면 새롭게 리팩토링한 carousel은 제품이 끝나면 다시 처음으로 돌아가게

만들었다.

코드 자체는 기존의 코드를 그대로 사용하되 기존엔 인터넷에서 코드를 복붙해서 값만

어느정도 바꿔서 작성했다면 리팩토링한 코드는 로직은 그대로 가져가되 코드는 내가

직접 생각해서 커스텀하여 사용하였고 그 코드는 아래와 같다.

function Maincontent({ data, converPrice, cart, setCart, filterTitle }) {
  const TOTAL_SLIDES = data.length / 4;  <!-- 상품이 4개기 때문에 4로 나눔 -->
  const [currentSlide, setCurrentSlide] = useState(1); <!-- carousel의 index 역할 -->
  const [slide, setSlide] = useState(0); 
  const slideRef = useRef(null); <!-- -->
  
  <!--onclick시 작동하는 함수 -->
  const NextSlide = () => {
    if (currentSlide >= TOTAL_SLIDES) {
      setCurrentSlide(1);
      setSlide(0);
    } else {
      setCurrentSlide(currentSlide + 1);
      setSlide(slide - 1100);
    }
  };
  const PrevSlide = () => {
    if (currentSlide !== 1) {
      setCurrentSlide(slide);
      setCurrentSlide(currentSlide - 1);
      setSlide(slide + 1100);
    }
  };
  
<!-- useEffect로 currentSlide의 값이 변할때마다 carousel의 x값이 slide값 만큼 이동-->
  useEffect(() => {
    slideRef.current.style.transition = 'all 0.5s ease-in-out';
    slideRef.current.style.transform = `translateX(${slide}px)`;
  }, [currentSlide]);

2. 장바구니 버튼 클릭 시 나오는 modal창 개선

1차 프로젝트때 만든 modal

리팩토링한 modal

위처럼 1차땐 modal의 위치도 이상하고 옆으로 넘겼을때 modal이 사라지지도 않고 계속 누적되는

버그가 있었는데 처음부터 저런건 아니였고 이후에 기능을 추가하다보니 저렇게 바뀌어버려서

나름 열심히 고쳐보려고 했으나 당시엔 실력이 부족하여 못고치고 넘어갔었는데 🤣

이번에 리팩토링하면서 아래와 같이 바꾸었다.

리팩토링한 modal은 carousel을 넘겼을때 modal이 닫히게 만들었고 어디서 누르던 해당

위치에서 modal이 popup되게 개선하였다.

코드는 아래와 같다.

function CardList({slide}) 
{
  const [popUp, setPopUp] = useState(false);
  };
  
<!-- carousel을 넘겼을때 modal창이 off -->
useEffect(() => {
    setPopUp(false);
  }, [slide]);
  
  return (
  <button
        onClick={() => {
          setPopUp(true);
        }}
        type="button"
        className="cart"
      />
      {popUp && (
        <Incart slide={slide} />
      )}
    );
function Incart({slide}) {

  const modalRef = useRef(null);
 
 <!-- 팝업창이 열려있을때 modal창의 위치가 현재 carousel의 위치랑 같게하는 로직.
 기존의 slide값은 -값도 있기 때문에 math.abs를 사용하여 항상 +값만 들어오게 변환하여 사용하였다.-->
  useEffect(() => {
    if (popUp === true) {
      modalRef.current.style.transform = `translateX(${Math.abs(slide)}px)`;
    }
  }, [popUp]);
  
  <!--slide의 값은 가장 상위 component인 Maincontent에서 props로 내려 받음  
  **Maincontent는있는 component** 
  
  function Maincontent({ data, converPrice, cart, setCart, filterTitle }) {
  const TOTAL_SLIDES = data.length / 4;
  const [currentSlide, setCurrentSlide] = useState(1);
  const [slide, setSlide] = useState(0);

  const slideRef = useRef(null);

  const NextSlide = () => {
    if (currentSlide >= TOTAL_SLIDES) {
      setCurrentSlide(1);
      setSlide(0);
    } else {
      setCurrentSlide(currentSlide + 1);
      setSlide(slide - 1100);
    }
  };

  const PrevSlide = () => {
    if (currentSlide !== 1) {
      setCurrentSlide(slide);
      setCurrentSlide(currentSlide - 1);
      setSlide(slide + 1100);
    }
  };

  useEffect(() => {
    slideRef.current.style.transition = 'all 0.5s ease-in-out';
    slideRef.current.style.transform = `translateX(${slide}px)`;
  }, [currentSlide]);

-->

기능 자체는 간단하게 CardList component에서 장바구니 버튼을 onclick 했을때 popUp이 true면

incart(modal component)를 실행하게 하였고. incart는 css에서 position을 absolute로 지정하여

항상 같은 위치에 고정되게 만들었고 carousel을 넘겼을때 위치값이 slide의 값만큼 따라 움직이게

만들었고 useEffect를 carousel을 넘겼을때 modal창이 닫히게 리팩토링하였다.

profile
Youje0
ㅠㅠ
이전 포스트

react 스크롤 감지하여 Nav 고정하기

다음 포스트

Setinterval()로 state 갱신하기

0개의 댓글