CharacterImg 컴포넌트

props로 imgSrc에 filePath + fileName를 넣었을 때 3가지 상황 발생

1. 정상적으로 동작 및 랜더링 → Search 페이지의 Character 부분
2. 기본 이미지로 랜더링 → Search 페이지의 Content 부분, SettingsCharacter 페이지
3. NaN 관련 Error 발생

캐릭터 생성 시 이미지를 추가했을 때 생성 직후 바로 이미지가 불러와지지 않고 Error 발생 → 새로고침 하면 불러와지는 현상

위에는 filePath + fileName으로 콘솔 찍히는데, 이걸 DB에서 찾을 수 없어서 발생하는 에러?

→ DB에 들어가 있는데도 발생함

밑으로 내려보면 Character.js에서는 이런 Error가 콘솔에 찍힘(다른 시점이라 이미지 파일은 다른게 정상)

추가적으로 캐릭터 생성 과정에서 이런 콘솔 로그도 발견

1번, 2번, 3번 모두 imgSrc = filePath + fileName인데 0도 발견

현재까지 드는 생각

• Search에서 Character 부분이 정상적으로 동작했던 이유는 useEffect의 deps에 query를 넣었기 때문인가? → query를 넣은 이유는 다른 검색어가 입력될 때마다 다른 결과를 랜더링 하기 위함이었음
• 캐릭터 생성 시 filePath + fileName을 정상적으로 가지고 있어도 못 찾는 이유를 모르겠다. → 서버에서 테스트해도 왜 못찾아오는걸까
• 위에 보면 하얀색 글씨의 에러는 Characters.js의 24번째 줄인 catch에서 발생한 에러인 것 같은데, userSeq를 통해 캐릭터 리스트를 가져오는 과정에서 파일을 찾을 수 없다???
• 현재까지 생각나는 해결책은

  1. 파일을 찾을 수 없을 때 에러를 띄우지 않고 기본 이미지로 먼저 랜더링 후 추후에 파일을 가져왔을 때 해당 파일을 랜더링 하는 방법 → 이런게 존재할까?

  2. return 아래의 html을 랜더링하기 전에 return 위에 있는 함수를 먼저 실행하는 방법을 찾기 → 이런게 존재하나?

     기본적으로 useEffect도 랜더링 끝나고 무언가 하는 것

     (참고) https://stackoverflow.com/questions/63711013/how-to-trigger-useeffects-before-render-in-react

2/14 해결

tempImgSrc를 useState를 통해 만들어서 API를 통해 데이터를 넘겨받고, 해당 데이터에서 직접적으로 setTempImgSrc를 통해 변경해준 뒤 CharacterImg 컴포넌트에서 imgSrc=tempImgSrc를 해서 해결되긴 했지만, 원인은 모르겠음

(tempImgSrc = res.data.filePath + res.data.fileName 형태)

(기존에는 imgSrc=character.filePath + character.fileName 형태였고, 로그를 찍어봐도 정상적으로 string 형태의 주소가 나왔었음)