오늘 공부한것 & 기억할 내용
NextJs를 이용해 Best Seller Books페이지를 만들었다.
1. Type선언 이슈
- 타입선언을 했는데 Vercel에 배포를 하면서 문제가 발생했다.
1-1. 해결
- 비동기 작업을 처리할때는 Promise에 담아 타입을 지정해줘야한다.
Promise< Type >은 비동기 함수가 특정 타입의 값을 반환하는 프로미스 객체를 의미하며, 비동기 함수가 결과를 반환하기 전에 프라미스가 처리되는 상태를 나타냅니다.
기존 타입 선언
interface IParams{
params:{name:string}
}
export default async function AA({params}:IParams){
}바꾼 타입 선언
export default async function AA({params}:Promise<{name:string}>){
}2. params 사용 방법
- 기존 react에서는 parameter를 사용할때 useParams를 자주 사용하곤 했는데 NextJs에서는 component의 props로 params를 사용 할 수 있다.
function의ㅣ props에만 쓰면 안되고 꼭 const로 변수를 꺼내 await해서 쓰는 이유가 궁금했는데 그 이유는 동적 라우팅의 안전성 때문이라고 한다.
export default async function Detail({params}:{params: Promise<{ name: string }>}){
const {name} = await params이렇게 하는 주요 이유는:
1. 라우트 파라미터가 완전히 준비되었는지 확인
2. 병렬 라우팅이나 인터셉팅 라우트에서의 안정성 보장
3. 잘못된 타이밍에 params에 접근하는 것을 방지
NextJs버전에 따른 사용법
- Next.js 14.0.3 이전: await params 사용 필수
- Next.js 14.0.3 이후: 직접 사용 가능 (await 선택적)
배운점 & 느낀점
NextJs로 페이지를 만들면서 딱히 어려운점은 없었는데 비동기함수의 타입선언하는 방법과 params를 await를 써서 사용하는 방법에서 에러가 많이 나서 힘들었다.
그리고 지금은 tailwind로 공통 css만 사용하고 각 페이지별로 module.css를 사용하였는데 이부분도 하나로 통일이 가능한지 더 사용해 보면서 어떤점이 더 나을지 생각해봐야할거같다.
그리고 params를 사용하면서 해당 컴포넌트안에 api fetch를 하느라 await를 중복으로 사용했다가 에러파티가 있었다 그래서 안의 코드를 분리해 컴포넌트로 쪼갰는데 react에서 했다면 이렇게 쪼개지 않았어도 됐을텐데 Next에서 다 쪼개버리니 엄격한걸로 치면 Next가 얄짤없이 더 엄격한거같다..
그리고 Vercel로 배포를 하였는데 Next에서 통과해도 Vercel에서 에러파티가 있는부분이 있는걸로 봐서 Vercel이 어찌보면 엄격하고 어찌보면 안전성이 높은거같은 긴가민가 아직은 잘 모르겠다.
