axios 로직을 유지보수, 확장성 등의 이유로 인스턴스를 생성해서 만들 수 있다. 이 때 create를 이용해서 만드는데 (만드는 방식은 생략) 엔드포인트까지 넣어서 만든 경우 `get` 요청은 매개변수의 생략이 가능하다. 단 `body` 등 옵션이 필요한 그 외의 메서드들은 매개변수를 생략할 수 없는데 이때 첫 번째 매개변수로 `'/'`를 넣어주면 된다. 💡 예시getconst api = axios.create({ baseURL: "http://localhost:4000/posts",})const getPosts= async () => { await api.get(); /* 생략 */}`get` 메서드로 모든 게시글을 가져오는 경우 `api.get()`만 호출하면 된다. post 잘못된..
🚨 useRef + IntersectionObserver + state 충돌원인이 맞는지는 모르겠지만 `Ref`와 `Observer` 를 넣어준 DOM 요소에서 사용하는 state값을 변경하려고 하니 데이터는 변경이 되는데 리렌더링은 되지 않는 문제가 발생했다. 문제를 찾게 된 계기는 혹시나 해서 ref를 지워봤더니 setState가 제대로 동작을 했다. 문제 코드{displayedPosts.map((post, index) => ( // 기타 생략 ..setState가 안 되던 state가 `displayedPosts` 이다. 데이터 구조는 대강 이렇게 생겼다. displayedPosts 구조const [displayedPosts, setDisplayedPosts] = useState([ {..
🚨 에러 내용statusCode: '400'error: 'InvalidKey'message: 'Invalid Key: 어쩌구저쩌구파일명.jpg' 에러에 대한 코드는 다음 링크에서 확인 가능하다. [Supabase] - 스토리지 에러 코드storage에 사진 파일을 저장하려고 하니 위와 같은 에러가 나온다. 요청의 형식이 올바르지 않다는데 내 경우에는 파일명이 한글로 되어있어 나오는 오류였다. 즉, 파일명만 영어나 숫자 등으로 유니크하게 변경해서 전달하면 해결 된다. 일단 임시 방편으로 다음과 같이 처리해서 올리면 될 것 같다.const fileName = `post_img_${Date.now()}.png`;파일명을 현재 시간으로 치환하여 업로드해주니 해결되었다. 단 동시다발적으로 매우 많은 데이터를 ..