Next.js 와 TypeScript 조합으로 프로젝트 만든 썰

Daniel Woo·2022년 2월 16일

React next.js typescript

React 시작하기

목록 보기

9/10

Preview

서비스 링크: https://ncnc-app-iota.vercel.app/

주제

Next.js와 TypeScirpt를 이용하여 API로 호출된 데이터를 조건에 맞게 구성하는 상품 페이지 구현하기

기능

메인 및 카테고리, 브랜드, 상품 상세 페이지

선택한 카테고리에 해당하는 브랜드 노출, 선택한 브랜드에 해당하는 상품 노출, 선택한 상품에 해당하는 세부정보 노출 등 단계적 접근이 필요했다.
제공된 API구조가 카테고리 객체에 브랜드 객체가 배열로 있고, 브랜드는 상품 정보를 배열로 가지고 있는 복잡한 구조였기에 필요한 정보를 렌더링하는 것이 쉽지는 않았다.
나는 category경로에 있는 브랜드를 클릭했을 때 brands경로로 이동하면서 해당 브랜드 상품 리스트를 표출하는 부분을 담당하였다.
위에서 언급했던 것 처럼 JSON데이터 구조가 복잡했지만, 다음과 같이 해당 경로의 id값과 일치하는 브랜드를 찾고, 상품 정보를 저장하도록 하였다.

   const selectedBrand = conCategory2s.find(
                    (brand: conCategory2s) => Number(brand.id) === id,
                );
                const { conItems } = selectedBrand;

                setCategory(conItems);

결국 성공적으로 이용자가 보길 원하는 브랜드의 상품을 표출하는 것이 가능했다.

마이페이지와 고객 센터

배운 점

Next.js에서 중요한 개념인 pre-reder를 배울 수 있었다.

const Home: NextPage<HomeProps> = ({ conItems }) => {
 return (
 --- 생략 ---
 )
 };
 
  
export async function getStaticProps() {
    const fetchUrl = `https://api2.ncnc.app/con-items/soon`;
    const { data } = await axios.get<{ conItems: DealItemProps[] }>(fetchUrl);
    const conItems = data.conItems;
    return {
        props: { conItems },
    };
}

export default Home;