error 수정 (4) 썸네일형 리스트형 [vercel] 컴파일 오류: Module not found: Can't resolve 분명 개발자모드에서는 잘 되는 것을 확인했고, 오류도 없었는데 컴파일을 하니 오류가 발생했다. 이 오류는 파일 참조를 잘못했을 때 뜨는 오류라고 한다. 나의 경우에는 폴더의 위치를 인식하지 못해서 생기는 오류였다. 파일을 완전히 삭제하고, 캐시를 비운 다음 다시 작성하니 사라졌다. Next.js를 사용하는 경우 .next 파일에서 오류가 발생하기도 한다. [Next.js] query 사용, 반복적인 랜더링 발생 프로젝트를 진행하는 와중에 무한 랜더링 오류가 발생했다. 상황 로비 페이지에서 null로 유저가 계속 갱신되고 새로운 값을 받을 수 없다. 즉 state가 null로 계속 입력되고 있다는 뜻. 하지만 데이터가 캐싱되고 있어 리뷰 페이지에서는 유저아이디를 추출할 수 있다. 오류 의심목록은 다음과 같았다. 1. 페이지 구조 - 하나의 폴더에 하나의 페이지가 아니라 폴더-페이지+폴더-페이지 형태로 만들어서 경로가 꼬였는지 확인 - 사실 이 구조는 널리 사용되는 구조라서 혹시나 하는 마음에 확인해봤다. 2. UUID로 랜덤하게 생성되는 ID들의 typescript 오류 - supabase는 uuid를 text 타입으로 만든다. - uuid가 입력되지 않았다는 오류가 뜨기 때문에 제시된 의문이었다. - 하지만 u.. fetch error: 404 error 유튜브 API를 이용하여 검색 결과에 대한 영상 리스트를 얻는 것이 목적이다. 이를 위해서 API key를 다운받았고, 쿼리스트링을 이용한 검색 조건을 맞추었다. 그러나 계속해서 404 error가 발생하였다. payload가 생성되었고, query에 해당하는 id값이 적절하게 들어갔음에도 오류가 발생한 것이다. 원인은 fetch 내 주소에 'https://'를 생략하고 www부터 적은 것이었다. 이 경우 네트워크-헤더-일반 태그에서 오류가 발생했음을 확인할 수 있다. 금방 수정할 수 있는 오류라서 다행이다. Next.js: Link React에서 Link 기능을 사용하는 것과 유사하지만 형식에 차이가 있다. 1. import Link from "next/link" 를 사용해야 한다. 2. 'Link to=경로'가 아니라 Link 'href=경로'로 사용해야 한다. 3. 서버 컴포넌트에서도 사용할 수 있다. 계속 오류가 나서 서버 컴포넌트에서 사용하는게 아닌가... 하고 지웠는데 문법 오류였다. 누르면 각 항목에 대한 디테일 페이지로 이동할 수 있다. 이전 1 다음
