#structure

레이어드 아키텍처의 추상화에 대한 질문입니다

뉴비 개발자, 레이어드 아키텍처의 추상화에 대해 약간의 질문이 있습니다. Repository 클래스와 application layer 클래스들의 추상화를 왜 하는가에 대해 가르침을 받고 싶습니다. 우리가 현재 추상화하는 이유가 기존 기능으로부터 추가적인 고객의 요구를 수정에 닫혀있는 채로 관리하기 위함이라면, infrastructure layer의 repository 클래스들과 application layer의 추상화는 해당 이유에 적합한 이유인가? 에 대한 의문을 갖게 되었습니다. 의존성 역전 법칙을 말그대로 따라간다면 추상화를 하는 것이 맞지만, 의존성 역전 법칙 자체가 의존성 관계를 뒤집어 수정의 가능성을 역전한다의 의미인데 인터페이스와 구현체 비율의 가능성이 1:1일 확률이 매우 높은 상황에서 수정의 가능성을 뒤집는다는 것 자체가 약간 이론에 놀아나는 느낌? 이게 진짜 역전되있는 것이 맞는가? 하는 그런 생각이 들었습니다. 그래서 repository 클래스들를 추상화 할거면 application layer도 추상화 하는 것이 이론상 맞고, application layer를 추상화하지 않을거면 repository 클래스도 추상화하지 않는 것이 내가 이해한대로면 맞다. 로 결정하게 되었습니다. 추상화가 테스트때문이라면 요즘 모킹 라이브러리 잘되어있는데, 라이브러리에 대한 의존성을 제거하기 위해 그런가? 라는 생각도 조금 들었습니다. 제가 나아가고 있는 논리의 방향이 맞는지가 의심스럽고 조심스럽습니다. 선배 동기분들의 가르침을 받고 싶습니다. 읽어주셔서 감사합니다.

Next.js SSR + react-query 조합에서의 serializing 에러

안녕하세요! Next.js SSR + react-query 조합을 사용하려고 하는데요, page 컴포넌트 내 getServerSideProps 함수에서 prefetching을 받아온 후에 serializing 에러가 발생합니다. (Next.js는 13버젼입니다.) 에러 내용은 다음과 같습니다. Error: Error serializing `.dehydratedState.queries[0].state.data.headers` returned from `getServerSideProps` in "/top". Reason: `object` ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types. 해당 에러 내용으로 구글링을 해보니, 대부분 getServerSideProps 함수 반환 코드에서 return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; 와 같이 dehydrate(queryClient)값을 JSON화 -> Object화를 하라고 하는데요, 이와 같이 사용해도 또 다시 아래와 같은 에러가 납니다. TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -> object with constructor 'Socket' --- property '_httpMessage' closes the circle Backend API는 Express.js를 사용하고 있으며, res.status(200).json({ data: ~ })와 같은 방식으로 응답을 주고 있습니다. 어떻게 해결할 수 있을까요? 코드 첨부가 안되네요, 아래는 page 컴포넌트가 위치한 파일의 전체 코드입니다. import type { ReactElement } from 'react'; import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query'; import { format } from 'date-fns'; import TopMusicContainer from '~containers/TopMusicContainer'; import Layout from '~layouts/Layout'; import type { NextPageWithLayout } from '~pages/_app'; import TopMusicService from '~services/topMusicService'; import * as MusicType from '~types/musicType'; export async function getServerSideProps() { const queryClient = new QueryClient(); await queryClient.prefetchQuery(['fetchTopMusic'], () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; } const Top: NextPageWithLayout = (): JSX.Element => { const { data, isLoading } = useQuery({ queryKey: ['fetchTopMusic'], queryFn: () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }, }); return ( <section> <TopMusicContainer /> </section> ); }; Top.getLayout = function getLayout(page: ReactElement) { return <Layout>{page}</Layout>; }; export default Top;