NextJs + TypeScript
오늘은 nextJs와 TypeScript를 같이 사용하는 연습을 해보았다. 둘다 이제 막 입문을 했지만 어쨌든 나중에는 같이 쓸 예정이기때문에 이전에 코딩앙마 nextJs 강의 들은걸 TypeScript로 혼자 처음부터 해보려고 시작하였다.
📁 /pages/index.tsx
interface Props {
list: ProductItemList;
}
const Home: NextPage<Props> = ({ list }) => {
return (
<div>
<Head>
... code
</Head>
... code
<ItemList list={list.slice(0, 9)} />
</div>
);
};
export default Home;
export const getStaticProps: GetStaticProps = async () => {
const API_URL = process.env.NEXT_PUBLIC_API_URL as string; (1)
const res = await axios.get(API_URL);
const data: ProductItemList = res.data; (2)
return {
props: {
list: data,
},
};
};
index.tsx파일에서는 상품목록 list를 인기순과 최신순으로 뿌려주고있다 일단 ItemList컴포넌트 하나만 뿌려줘 보았는데 여기부터 에러투성이였다😂
(1)표시 부분에서는 string이나 undefined라고 나와서 자꾸 에러가 발생했다 그래서 as를 사용해서 "넌 무조건 string이야! 왜냐고? 몰라도 돼" 를 시전해서 string으로 알게끔 해줬다.
(2)표시 부분에서는 data의 type을 ProductItemList로 선언해주었는데 ProductItemList는 하단에 바로 설명하겠다.
여튼 선언을 해주니 return의 props의 list:data의 type도 참조를 하여 설정이 되었다. 신기했다.
📁 /src/component/ItemList.tsx
interface Props {
list: ProductItemList;
}
const ItemList: FC<Props> = ({ list }) => {
return (
<>
<div>{list[0].id}</div>
</>
);
};
export default ItemList;index.tsx파일에서 props로 받은 list를 이곳에서 받아와서 뿌려준다. type은 interface를 사용하여 Props에 설정해주었다. 파일 하나하나 적어가는데 에러만 오억번 난거같다..ㅎㅎ..
📁 /src/models/product.tsx
export type ProductItem = {
id: string;
brand: string;
name: string;
price: string;
price_sign: null | boolean;
currency: null | string;
image_link: string;
product_link: string;
website_link: string;
description: string;
rating: number;
category: null | string;
product_type: string;
tag_list: Array<string>;
created_at: string;
updated_at: string;
product_api_url: string;
api_featured_image: string;
product_colors: Array<string>;
};
export type ProductItemList = Array<ProductItem>;
api에서 받아오는 배열와 그 안에 들어가는 객체의 타입들을 여기서 설정해주었다. 이곳에 한번만 설정해놓으면 여러파일에서 불러올때 굉장히 편리했다.
📁 정리
오늘은 굉장히 힘든날이였다.. 뭐만하면 에러나오고,, 또 나오고,, 지금은 이 에러가 많이 싫지만 나에게 잘 알려주는 코딩천재님의 말씀으로는 나중에되면 그 에러가 반갑게 느껴질것이라고 하였다,, 나중에 에러 나오면 반가워서 손이라도 흔들어야겠다,,,
아직 반의 반의 반도 못왔지만 그래도 이렇게라도 맛보기 했으니 계속 반복해서 해결해 나아가야겠다,,! 그리고 틈틈히 타입스트립트도 계속 봐야겠다,, 아직 너무 헷갈린다,,ㅎㅎ
