ShockX | 2차 프로젝트 최종후기

Ssss·2021년 3월 14일

지난 3월 2일 화요일부터 3월 12일 금요일까지 진행했던 2차 프로젝트 - StockX 클론코딩이 무사히 끝났다. 이번에는 1차때 안썼던 함수형 hooks와 styled components를 쓰게 되어서 새로운 기능들로 구현해야하니깐 최대한 현실적으로 목표를 잡자! 라고 첫날부터 얘기를 했었던게 좋았던것 같다.

클론코딩하는 사이트 🌈

미국의 온라인 리세일 마켓 플랫폼인 StockX 가 당첨 되었다! 1차때와 비교해서 더 복잡해진 데이터와 고려해야하는 조건들이 훨씬 많아져서 첫날 이 사이트를 이해하는데도 시간이 오래 걸렸고 사이트를 하나하나 뜯어보면 볼수록 과연 이걸 11일만에 할수있을까? 라는 생각이 들었던것 같다.

ShockX 🌈

백앤드 네명, 프론트 세명으로 구성된 우리팀은 이번에는 최대한 새로운 기능들을 더 도전해보고 2주차때는 기업협업때문에 정신이 없을것 같아서 최대한 가지치기를 해서 필수적인것들만 구현하기로 했다.

프로젝트 기간

2021.03.02 ~ 2021.03.12 (총 11일)

프론트앤드 기술스택

React
React Router
Styled Components
Styled Reset
Restful API
react-ticker
Highcharts

구현한 페이지

회원가입/로그인 페이지 (+카카오소셜 로그인) 🍎
Navigation Bar 🍎
메인 페이지 (+검색 기능) 🍎
상품 리스트 페이지 (+필터링 기능)
상품 디테일 페이지
Bid/Buy/결제 페이지 🍎
Ask/Sell/결제 페이지 🍎
마이페이지 - 메뉴탭 🍎
마이페이지 - Portfolio
마이페이지 - Buying 🍎
마이페이지 - Selling🍎

내가 구현한 페이지 결과물

회원가입/로그인 페이지 (+카카오소셜 로그인)
Navigation Bar && 메인 페이지 (+검색 기능)
Bid/Buy/결제 페이지

Ask/Sell/결제 페이지
마이페이지 - Buying
마이페이지 - Selling

기억하고 싶은 코드 🌈

어떻게 하다보니 내가 맡은 페이지들은 모두 컴포넌트 재사용을 활용해서 비슷한 구조를 가진 두페이지를 한번에 만들수 있었다. 회원가입/로그인 같은 경우에도 account.js라는 최상위 부모에서 회원가입인지 로그인인지에 따라서 렌더하는 내용이 달라지도록 했고 Bid/Buy와 Ask/Sell하는 페이지들와 마이페이지 - Buying과 마이페이지 - selling도 각각 payment.js와 buyingselling이라는 파일에서 모두 시작된다.

가장 오랜시간 공을들였던 Big/Buy와 Ask/Sell은 현재 url이 /buy인지, /sell인지를 useParams()라는 hooks를 통해 감지하여 해당되는 데이터를 fetch해오고 필요한 데이터를 자식들에게 props로 넘겨주는 방식을 사용했다.

 let useParam = useParams();
 const history = useHistory();
 const location = useLocation();

  useEffect(() => {
    const sizeQuery = location.search;
    const pathnameQuery = location.pathname;
    if (useParam.id === "buy") {
      setIsBuy(0);
    } else {
      setIsBuy(1);
    }
    fetch(`${ORDERAPI}${pathnameQuery}${sizeQuery}`, {
      method: "GET",
      headers: {
        Authorization: localStorage.getItem("Kakao_token"),
      },
    })
      .then((res) => res.json())
      .then((data) => {
        setDetailData(data.data.product);
      });
  }, [useParam.id]);

또한 StockX 사이트의 경우 사고 파는것만 할수있는게 아니라 사기위해서 가격을 부르고 (bid), 팔기 위해서 가격을 부를수 있기 때문에 (ask) 현재 사용자가 bid을 하려고 하는지, buy를 하려고 하는지, ask를 하려고하는지, sell을 할려고하는지에 대해서 따로따로 렌더가 되었어야했기 때문에 확실히 1차때보다 구조가 더 복잡하다는걸 깨달았다.
결국 이 많은 정보들을 담기위해서 생성된 자식 components 파일들.... Payment 하나를 위해 14개의 자식 components 파일들이 필요했다.

한페이지에서 컴포넌트만 바꿔가며 데이터를 관리하기 때문에 수많은 자식들에게 props를 전달해야되기 때문에 최상위부모인 Payment.js는 props 파티가 열렸다....

<>
      <PaymentNav />
      <PaymentPage>
        <PaymentImage data={detailData} />
        <PaymentRight>
          {currentIdx === 0 && (
            <>
              <SizeContainer>
                <SizeText>U.S. Men's Size {detailData.size}</SizeText>
                <PenIcon
                  alt="Pen"
                  src={process.env.PUBLIC_URL + `/images/Payment/pen.svg`}
                />
              </SizeContainer>
              <PaymentDetail
                data={detailData}
                format={isBuy === 0 ? buyProps : sellProps}
                isBuy={isBuy}
                isPlace={isPlace}
                changeTabHandler={changeTabHandler}
                handleInputNum={handleInputNum}
                messageHandler={messageHandler}
                messageText={messageText}
                isShowAddFeeList={isShowAddFeeList}
                buyInput={buyInput}
                sellInput={sellInput}
                buyTotal={buyTotal}
                sellTotal={sellTotal}
                notAvailableProps={notAvailableProps}
              />
              {isPlace === 0 && (
                <Expiration
                  isBuy={isBuy}
                  expirationNum={expirationNum}
                  expirationHandler={expirationHandler}
                />
              )}
            </>
          )}
          {currentIdx === 1 && (
            <ShippingInfoPage
              data={billingProps}
              handleInputInfo={handleInputInfo}
              inputs={inputs}
            />
          )}
          {currentIdx === 2 && (
            <ReviewBilling
              data={detailData}
              buyTotalPrice={buyTotalPrice}
              sellTotalPrice={sellTotalPrice}
              expirationNum={expirationNum}
              buyInput={buyInput}
              sellInput={sellInput}
              isBuy={isBuy}
              isPlace={isPlace}
              name={name}
              phoneNumber={phoneNumber}
              address={address}
              city={city}
              state={state}
              country={country}
              zipCode={zipCode}
            />
          )}
        </PaymentRight>
      </PaymentPage>
      <PaymentFooter
        isBuy={isBuy}
        changeIdxHanlder={changeIdxHanlder}
        currentIdx={currentIdx}
        sumbitPaymentInfo={sumbitPaymentInfo}
      />
    </>

개인적인 프로젝트 후기 🌈

아쉬웠던점 👻

주말에 미리 예습을 해놨어서 그런지 styled components와 react hooks에 생각보다 빠르게 적응해서 계획했던것보다 훨씬 더 빠르게 페이지들이 완성되었다. 굳이 아쉬웠던점을 꼽자면 페이스조절을 못한탓에 2주차때는 너무 여유가 넘쳤었다 ... 또, 1차때 많은것들을 이미 만들어봐서 그런지 2차때는 뭔가 새로운걸 배운다라는 느낌을 카카오소셜로그인을 구현할때 빼고는 못느꼈던것 같다. 1차때도 메인, Nav bar, 결제페이지, 마이페이지를 만들어봤기 때문에 데이터가 조금 더 많고 구조가 조금 더 복잡했지만 결국은 똑같은걸 만드는 느낌이 들었다. 데이터 시각화나 query쪽으로 파고들었으면 더 유익했을것 같다.

좋았던점 👍

확실히 1차 프로젝트를 다들 경험해봐서 그런지 2차 프로젝트때는 어떤식으로 서로 소통하는게 효율적인지를 다 깨닫고 프론트앤드 vs 백앤드간의 소통이나 프론트앤드 vs 프론트앤드의 소통도 훨씬 잘되었던것 같다. 2차때도 좋은 팀원들을 만나서 정말 conflict 하나 없이 무난하게 잘 지나간것 같다.

최종 후기 🤖

첫 한달에 개념을 많이 배웠다면 두번째달에는 배운 개념을 응용하여 적용하는 훈련을 많이 한것 같다. 그냥 notion의 개념들을 달달 외우는것 보다 직접 코드를 쓰니깐 왜 이런 개념훈련들이 필요한지, 왜 코드카타를 꾸준히 해야하는지ㅋㅋ를 많이 깨달았던 1차,2차 프로젝트였다. 이제 기업협업을 나가서 지금까지 배운 개념들과 연습해온 코드들이 실무에선 어떻게 쓰일지 배우게 될텐데 많이 기대된다. 🙌

Ssss

Front-end Developer 👩‍💻

이전 포스트