개요

개인프로젝트를 진행하는것을 좋아하는데, 이유는 일단 내가 만들고 싶은것을 만들기 때문에 흥미가 생기고, 새로운것들을 많이 시도해 볼 수 있어서 좋아합니다.

이번에는 이 글에서 영감을 받아서 Poke API 를 사용하여 간단한 포켓몬 도감을 만들어 보려고 합니다.
일단 사용하려는 stack 은 API는 있기 때문에 서버는 skip

• Next JS (Next 8을 써보고 한동안 안썼었는데 10을 한번 써보기 위함)
• Emotion (Styled in JS 좋아요!)
• react-query (graph QL에 관심을 가지고 있는데 일반적인 API를 통하여 graph QL 과 비슷하게 사용할 수 있는 장점이 있고 또한 SSR에 대하여 지원도 해주기 때문에 (공식문서에 Next JS 에 관한 이야기가 있음) 사용해보기로함)
• Poke API
• Vercel(Next app 을 배포하기 아주 쉬움)

위의 정도에 스펙이 될것 같습니다.

화면 구성은
1. 메인화면
2. 포켓몬 찾는 화면
3. 포켓몬 상세 화면

처럼 뭐랄까 이커머스 형식? 에 비슷한 페이지를 만드려 보려고 합니다.

서두는 이만 줄이고 일단 먼저 결과물 부터 보여드리겠습니다.

Result

Github

궁금하신 점은 댓글로 남기셔도 되고 부족한 점은 PR 올리셔도 무관합니다 ㅎㅎ