작성목적 next.js로 제작한 포트폴리오 웹 사이트를 버셀로 배포할 때 npm 패키지, next.js 빌드 과정 에서 발생한 에러를 해결하는 과정과 참고자료를 정리해보았습니다. 에러 eslint 에러 ESLint : Failed to load config "react-app" ESLint : Failed to load plugin "prettier" eslint config, plugin 에러 발생 빌드 에러 Build optimaization failed: found pages without a React Component as default export in ~~~ 빌드과정에서 디렉터리 구조에러 발생 에러 원인 eslint 에러 원인 프로젝트를 설정할때 초기 설정은 필요없을 거라 생각해서 기존 원티..

들어가며 💻 next.js 와 노션 API를 사용해서 포트폴리오를 만드는 과정에서 노션 api를 처음 사용해봤는데 백엔드 서버랑 db 구축하는 일 없이 간단하게 정적 웹을 만들 수 있다는 점이 편리했습니다. 포트폴리오는 앞으로도 조금씩 수정할 일이 있을 것 같아서 노션 페이지에 있는 db에 get요청을 하는 방법과 포트폴리오를 만들면서 마주친 에러에 대한 내용을 정리해봤습니다. 에러 ❌ Notion API axios 에러 export async function getStaticProps() { const options = { method: 'POST', url: `https://api.notion.com/v1/databases/${DATABASE_ID}/query`, headers: { accept: '..

❌ 에러 빈 문자열일 경우에는 type이 string으로 자동 지정되지만 배열일 경우에는 타입 지정 안 하면 never로 타입 지정됨 ✅ 에러 해결 배열의 타입을 지정해줌으로써 해결가능 배열 state 사용할 때는 들어갈 값에 대한 type 지정 필요!

📗 리팩토링하는 이유 1. 캐싱 데이터에 변화가 없는 경우에도 useEffect의 의존성 배열값이 바뀔 때마다 getMember와 getBoard 함수가 호출되는 것을 막을 필요가 있어보임 2. 간결한 코드 리액트쿼리에 내장된 로딩, 에러처리 기능을 사용하면 간단하게 구현이 가능하고 코드가 간결해서 나중에 수정사항이 있어도 어렵지 않게 수정이 가능함 📗 React-Query 리팩토링 에러 react-query key 에러 ➡️ react-query의 key값이 고유하지 않아 발생한 오류 인기스택 컴포넌트의 쿼리 키를 변경함으로써 해결 UseEffect 에러 리액트 쿼리의 isLoading 기능을 사용하려고 했지만 에러가 발생했다. 프로젝트의 데이터가 적기 때문에 서버의 모든 데이터를 받아옴 -> useE..

💻 컴포넌트 추가 버튼 구현 각 컴포넌트 데이터 목록 ❌ 추가버튼 실행 Error 변경된 state 컴포넌트 데이터 목록 ⚠️ ID 값은 임의로 추가되도록 설정해놓은 상태 컴포넌트 title과 amount 순서에서 오류 발생 콘솔창에서 컴포넌트에서 props로 받아오는 데이터를 출력해보니 정상적으로 배열에 추가된 것을 확인할 수 있었지만 바뀐 상태의 배열을 새로 화면에 렌더링하는 과정에서 오류가 발생한 것으로 보임 오류 목록 Amount와 Date 반영되었지만 Title: '새로운 제품'은 반영되지 않았고 기존의 0번째 인덱스 값의 title: 휴지 가 그대로 들어가있는 상태 Amount의 값이 하나씩 뒤로 밀려남 마지막 인덱스 값의 Tilte : '컵' 에 대한 컴포넌트가 하나 더 생성되었다 📝 오류 ..