[React] 디자인시스템 FOCUS 챌린지 - Numble

오늘의 작업

• json-server를 json파일로 교체 💻코드보기

  • 패기롭게 json-server와 axios를 사용했지만, vercel업로드를 하게되면서 폐기하게 되었다
  • data.json은 그대로 두고 const jsonDatas = require("./json/data.json");로 수정하여 데이터를 가져온다

• SwiperSlider 보여지는 슬라이더 갯수 props로 내림 💻코드보기

  • 클때 4개 작을때 2개로 고정이였는데 진행중인 인기 이벤트섹션이 3개여서 props로 갯수 내려주는걸로 변경했다

• 진행중인 인기 이벤트 날짜 부분 day.js적용 💻코드보기

  • 21-12-12 로 내려오는 값을 2021-12-12로 변경 후 format적용하여 12.12와 요일을 뽑아냈다.
  • d-day부분이 의외로 까다로웠다. day.js로 dayOfYear를 뽑아내서 계산을 하는데 내년, 올해, 작년을 Early Return하여 분기처리하였다 💻코드보기
    • 클린코드 js 강좌를 들은 보람이 있었다

처리 못한것😅

• SwiperSlider 맨 앞, 맨 끝 navigation 보이기 안보이기
  • 다른거 하느라 밀림...

오늘의 고민

• json에 변동이 있는 section 작업
  • 오늘의 특가 TIME DEAL / MD추천 클래스 / 진행중인 인기 이벤트 / 오픈 예정 클래스 4개의 섹션을 작업해야한다
  • 오늘의 특가 TIME DEAL같은 경우 모든 데이터가 가감없이 들어가 있지만, MD추천 클래스 부터는 price가 없는 post도 있었다
  • 일단은 아래처럼 처리했는데.. 최선인지는 모르겠다.
    App.tsx
    mdRecommendData.price가 있으면 mdRecommendData.price.salePrice을 내려줌

    <CardMdDeal
      salePrice={
         mdRecommendData.price && mdRecommendData.price.salePrice
      }
      originalPrice={
        mdRecommendData.price &&
        mdRecommendData.price.originalPrice
      }
      installment={
        mdRecommendData.price &&
        mdRecommendData.price.installment
      }
    ></CardMdDeal>

    CardMdDeal.tsx
    salePrice가 있어야 <CardPrice/>을 랜더

    {salePrice && (
      <CardPrice
        salePrice={salePrice}
        originalPrice={originalPrice}
        installment={installment}
      ></CardPrice>
    )}

    • 미래에서 온 해답 optional chaining을 사용하여 App.tsx부분은 줄였다. 💻코드보기

오늘의 커밋

• 컴포넌트 세분화
  • 💻커밋보기
• 진행중 인기 이벤트 컴포넌트 작업
  • 💻커밋보기
• MD추천 클래스 / 진행중인 인기 이벤트 섹션 추가
  • 💻커밋보기
• day.js 추가
  • 💻커밋보기

오늘의 궁금증

• 구글링 하다보니 타입스크립트의 타입을 typs.ts로 빼고 각 컴포넌트명+props한 네이밍으로 export한 후 각 컴포넌트에서 import해서 사용하더라구요, 실무에서는 어떻게 하나요? 지금까지는 그냥 컴포넌트 내에 작성했습니다
  구글링한 자료는 https://codesandbox.io/s/custom-pagination-example-jtf4k?file=/src/types.ts:483-489 입니다
  • 제리의 답변 케바케지만, 저는 많은 경우에 컴포넌트와 같은 파일에 작성하는 것을 선호합니다!
    이유는 다음과 같습니다.
    1. 첨부된 이미지처럼 기존에 정의된 타입을 활용하게 되는 경우가 많고, 활용하지 않더라도 컴포넌트를 잘 나눠놓았다면 Props가 많이 길어지지 않기 때문입니다
    2. 새로운 prop을 추가할 때, type 파일이 분리되어있다면 여러 파일을 왔다갔다하며 코드를 수정해야합니다
    3. 다른 파일에 정의된 타입 정보에 대해서 vscode typescript engine이 늦게 로딩해주는 경우가 있습니다. 이 문제 때문에 코드 작성시점에서 몰랐는데 CI에서 type error가 발생할 때가 종종 있습니다 ㅎㅎ..
    올려주신 링크에서는 SlideGeneratorOption, Slide 등의 여러 타입등을 같이 정의하고 활용하기 위해서 types.ts를 별도로 분리한 것 같아요 :두눈: :두눈: (오픈소스에서 많이 사용하는 형태입니다 ㅎㅎ)
• 어떻게 보면 백 관련내용이지만.. 궁금해서 질문 드립니다
  메인에서 json 4개종류가 필요한걸 api로 짠다면
  화면은 한번 불러오니까 api하나에 4개의 정보를 담아서 불러오는게 맞나요 아니면 각 파트별로 api 4개를 만들어서 각각 호출하는게 맞나요?
  • 정우병의 답변 케바케지만
    저는 api 4개를 각각 호출할것 같아요
    1. 하나의 api는 하나의 주제에 대한 결과값만 리턴하는것이 깔끔하다고 생각합니다.
    2. 저는 컴포넌트 내부에서 api도 호출하게 합니다(이럴때 해당 컴포넌트에 출력하고자 하는 내용만 api로 요청해줍니다.)
    저의 판단근거는 위와 같고 한번에 요청을 보내서 한번에 가져와도 틀리진 않고 방법의 차이라 생각합니다
  • 저도 되도록 4가지 각각 호출합니다! 데이터 별로 나눠놓아야 결과값이 달라졌을지 판단하고, mutate 시키기 용이하더라구요 ㅎㅎ
    • 관련 링크
      • 뮤테이션
      • Optimistic UI - Apollo GraphQL