useEffect(() => {
if (session) {
fetch("http://localhost:8080/video/user", {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.accessToken}`,
},
})
.then((res) => res.json())
.then((data) => {
setVideos(data);
})
.catch((err) => {
console.log(err);
});
}
}, [session, cart]);



안녕하세요. nextjs 14로  react를 입문하며 몇가지 질문이 생겼습니다.


배경


현재 헤더에 토큰을 심어서 보내야 하는 상황 (훅으로 sessionStorage 접근해야함)이라

독스에서 소개하는 서버컴포넌트 데이타 페칭방식은 사용할 수가 없는 상황입니다.


그래서 위와 같이 하고있는데 고민이 되는 지점이 있습니다



파일 분리 및 아키텍쳐?


useEffect안에서 페치 호출이 점점 다양하게 늘어나는데

보통 이것들을 한곳에서 모아서 관리하는지 아니면 그냥 이렇게 냅두는지 궁금합니다.


이를테면 api/index.ts 이런 곳에다가 모아두어서 관리를하나요?

점점 엔드포인트가 늘어나갈 수록 관리가 힘들어짐을 느끼고 있습니다..

여기서 할 수 있는 베스트 프랙티스가 뭘까요?


읽어주셔서 감사합니다.