[next.js] 블로그 앱 만들기 2강

🐶 api 불러오기 

api 호출 사용 전 axios 설치
$ npm i axios 

 

Index.js

useEffect import 해준뒤 아래와 같은 내용 추가

상품을 나눠서 보여주기 위해 slice 사용

ItemList.js 

component/ItemList.module.css

🐱 Dynamic Routes 사용

각 이미지를 클릭했을 경우 넘어가게끔 하는데 사용

https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes

Routing: Dynamic Routes | Next.js

- pages/blog/[slug].js 이처럼 []로 묶어주어서 사용을 하고 [] 내부가 1,2,3 a,b,c 이런식으로 id의 역할 

 

Pages/view/[id].js

src/component/Item.js

 

src/component/Item.module.css

 

만든 페이지

---

🦁 겪었던 우여곡절

- import Axios from "axios";가 아닌 import { Axios } from "axios"; 이렇게 해주면 Axios 에러가 발생함 

- item 클릭했을 때 이미지 안보이는 문제가 있었는데 [id].js 페이지에서 Axios 부분에 console.log만 있고 setData가 없어서 그랬던거였음;