트러블슈팅9 nextjs 외부 이미지를 사용할 때 / Invalid src prop (이미지주소~) on `next/image`, hostname "호스트명~" is not configured under images in your `next.config.js` 문제 상황 유저의 썸네일이 supabase stoage에 저장되어 있는데, 불러오려니 에러가 발생했다. Error: Invalid src prop (https://lukvbpxaabobwpzkacow.supabase.co/storage/v1/object/public/userThumbnail/screen.png?t=2024-04-02T10%3A26%3A52.780Z) on `next/image`, hostname "lukvbpxaabobwpzkacow.supabase.co" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-hos.. 2024. 4. 3. [supabase] enabled / 나는 테이블 3개 조인이 필요한데... 문제 상황 즐겨 찾는 화장실 페이지에서 즐겨찾기 한 화장실의 리뷰 평점을 보여주는 작업을 진행했다. supabase에서 컬럼을 외래키로 걸면 자동으로 인식하고 조인하듯이 2개의 테이블에서 조회할 수 있는데, 여기서 문제가 발생했다. 일단 평점을 가져오기 위해서는 총 3개의 테이블이 필요했다. 1. 화장실 정보 테이블 : toilet_location 2. 즐겨 찾는 화장실 테이블 : bookmark 3. 리뷰 목록 데이터 테이블 : review_info supabase 공식 문서와 구글, 열심히 찾아다녔지만, 테이블 3개를 한 번에 조회하여 데이터를 가져오는 방법을 찾을 수 없었다.(내가 못 찾는 건가????/ 정말???) 튜터님께 도움을 요청해 enabled라는 옵션을 알게 됐다. 데이터 조회를 한 번의.. 2024. 3. 22. SyntaxError: Unexpected token e in JSON at position 0 에러 상황 게시물 내용을 수정하는 patch 요청을 날렸는데, 계속 리듀서 슬라이스까지 가지 못하고 thunk 부분에서 에러가 났다. SyntaxError: Unexpected token e in JSON at position 0 작성했던 코드 export const __updateLetter = createAsyncThunk("updateLetter", async (payload, thunkAPI) => { try { const response = await axios.patch(`${process.env.REACT_APP_JSON_SERVER_URL}/letters/${payload.id}`, payload.content); return thunkAPI.fulfillWithValue(response... 2024. 2. 21. 또 경로 에러 이번엔 firebase / Module not found: Error: Package path . is not exported from package 에러 상황 firebase의 storage로 이미지 업로드 기능을 구현하려고 mypage에 storage를 import 했는데... 또!!!! 에러가 났다. 정말 이 이미지는 언제 봐도 적절하다. 내가 좋아하는 이미지 ERROR in ./src/component/authentication/MyPage.jsx 7:0-35 Module not found: Error: Package path . is not exported from package C:\codeGit\deve11og\node_modules\firebase (see exports field in C:\codeGit\deve11og\node_modules\firebase\package.json) 해결 방법 저번부터... vscode 가 적어주는 경.. 2024. 2. 8. [react] redux reducer 를 작성할 때 switch 에 default 를 빼먹는다면... / The slice reducer for key "letter" returned undefined during initialization. 에러 상황 reducer 를 작성하고 실행했는데, 아래와 같은 에러가 발생했다. The slice reducer for key "letter" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined. "letter" 키에 대한 slice reducer가 초기화 중에 undefined를 반환했.. 2024. 2. 2. [react] 에러 지옥 - 경로 문제 에러 상황 context API로 작업했던 프로젝트를 redux로 리팩터링 하는 작업을 하고 있었는데 아래와 같은 에러를 마주하게 되었다. 첫 번째 에러 Module not found: Error: Package path ./config/configStore is not exported from package C:\codeGit\artist-letters-project\node_modules\redux (see exports field in C:\codeGit\artist-letters-project\node_modules\redux\package.json) Did you mean './redux/config/configStore'? Requests that should resolve in the cur.. 2024. 2. 2. [Warning] styled-components 속성을 인식하지 못할 때 상황 styled-components로 isActive라는 props를 전달하여 버튼을 눌렀을 때 나오는 스타일에 대한 css를 다르게 만들었는데, 계속 개발자 도구에 아래와 같은 경고 메시지가 나타났다. Warning: React does not recognize the `isActive` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isactive` instead. If you accidentally passed it from a parent component, remove it from the DOM element. 번역을 돌려보니 .. 2024. 2. 1. react 프로젝트에서 절대 경로 문제 상황 router로 화면이 메인에서 상세로 넘어왔을 때는 스타일이 적용된 대로 정상적으로 나왔는데, 그 화면에서 새로고침을 하니 reset 스타일이 적용되지 않은 상태로 화면이 나오고 있었다. 개발자 도구로 확인해 보니 다른 경로로 불러오고 있었다. [문제 상황] 해결 방법 index.html에서 ./reset.css -> %PUBLIC_URL% 로 변경했다. public 폴더에서 절대 경로를 사용하기 위해서는 %PUBLIC_URL% 를 사용해야 한다. 공식문서를 확인해 보니 영어라서... 번역을 돌려봤다. npm run build 명령을 실행하면 Create React App이 %PUBLIC_URL%을 올바른 절대 경로로 대체하여 프로젝트가 클라이언트 측 라우팅을 사용하거나 루트가 아닌 URL에서.. 2024. 1. 31. 이전 1 2 다음
