팀8 프론트엔드 중간 피드백 면담

1️⃣ 면담 일지

• 김재호 (Max)

• 김태욱 (Stark)

• 나호석 (Stone)

• 황수경 (Water)

2️⃣면담 인증 샷

3️⃣면담 내용

👍좋았던 점

• 완성도 및 구현 깔끔 UI 깔끔

• 문서화들 기능 명세가 잘 정리되어 있는 점

• PR에 vercel test 서버 연결 하신 점

• 이슈 티켓단위로 PR 및 활발한 피드백 및 PR 설명들 훌륭

• Readme 업데이트 필요

🧐아쉬웠던 점

• 타입 단언이 많은 편 → 타입가드, 제네릭 conditional type등을 활용해서 줄여보기

• 단순 page 이동이면 click 이벤트로 router.push하지 말고 next/link를 활용하시면 좋을 것 같습니다

• 컴포넌트 네이밍
• Card → ProductCard, 상품카드에 특화된 부분이여서 구체적인 이름이면 더 좋을 것 같습니다.

<CardImage alt="abc" src={thumbnailImage || '/svg/basket.svg'} />
// alit는 의미없는 'abc'보다  title을 넣어주는 것이 좋겠죠 
// CardImage 자체가 '/svg/basket.svg' defulatImage를 가지고 있어도 좋을 것 같습니다 
// + 여기 상수 처리



• 린트 deps 챙길 수 있으면 챙겨주세요 + 여기 useEffect 없고, 상태도 안 가지고 util 함수로 바로 rendering 해줘도 되지 않을까요?

• 타입, interface 같이 PascalCase 컨벤션을 가져가셨으면 좋겠습니다.

🤩시도해보셨으면 하는 것들 + 참고

• seo관련 title, description, keyword, og, JsonLd 적용
• https://studiomeal.com/archives/1103
• 참고 라이브러리 https://github.com/garmeeh/next-seo
• https://developers.google.com/search/docs/beginner/seo-starter-guide

• Card 컴포넌트 개선하기

const Card = ({ productInfo: {
id, 
title, 
thumbnailImage, 
minimumPrice, 
expireAt
}
}:CardProps) => {
바로 destructing해주셔도 될 것 같네요 


삼항연산자 대신에 줄여서 써도 될 것 같습니다 
{index !== OPTIONS.length - 1 && (
                    <Divider margin="5px 0" />
                  ) 

borderColor="#B6B6B6"
color="#718096"

color들도 공통으로 쓰이는 부분 color scale 맞춰서 변수 처리해보시면 좋을 것 같습니다. 

• Type만 가져올때 참고

import type { QueryClient } from './queryClient'
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html

• next/image

<Image src="/svg/noneProductOther.svg" alt="None Product" />
고정된 asset은 Next/Image 를 활용해보세요 
+ 그냥 image 컴포넌트랑 어떤 차이가 있는지도 살펴보셔도 좋을 것 같네요

• api관련

// 요건 스타일이지만 
// 1.api response type도 api 함수에 같이 있는게 유지보수하기 용이해보이네요 
// 2.객체에 메소드 정의들을 여기서 하지 말고, 

const productAPI = {
  getProducts: ({ offset, limit }: productsAPITypes) =>
    baseInstance.get<ProductsResponseType>(
      `/products?offset=${offset}&limit=${limit}`
    ),
  getProduct: (productId: number) =>
    baseInstance.get<ProductResponse>(`/products/${productId}`),
};


// 각각의 함수들을 관리하기 용이하게 따로 분리해서 넣어주는 것이 어떨까 싶습니다. 

const getProducts = async () => {
   const {data} = await baseInstance.get<ProductsResponseType>(
      `/products?offset=${offset}&limit=${limit}`
    )
    /products?offset=${offset}&limit=${limit} <- query 
    // 여러개면 axios paramter 옵션을 활용해보세요 

    return data;
}

const productAPI = {
  getProducts,
}

// 비동기 처리 hook을 하나 만드셔셔 처리해보셔도 좋을 것 같네요 
// 공통적인 loading, isError
// - https://usehooks.com/useAsync/
// - 나중에 react-query를 적용하시면 필요없어지겠지만 한 번 만들어보셔도 좋을 것 같습니다 

// 비동기로 data 받아오고 상태값을 보내주는 비즈니스 로직 hook으로 빼보시는 연습해보시면 
// 컴포넌트에 상태랑 동작에만 더 관심을 가지기 용이할 것 같아요.
// 참고문서
// https://www.robinwieruch.de/react-hooks-fetch-data/