잡다하다

개요회사 서비스 개발을 위해 react-query를 사용하게 되었고, 이를 정리하기 위해 글을 작성해보았다. 동작 구조home 페이지가 호출될 때, backend에서 데이터를 가져오고 이를 보여주는 구조이다. 구조실제 상용 데이터들이라 이름은 임의로 변경했다. 간단하게 FLOW만 보면 좋을 것 같다./src/app/home/page.body.tsx'use client'export default function HomeBody() { const { data, isSuccess } = useHomeContentsQuery() const { setError } = useErrorStore() useEffect(() => { if (isSuccess) { if (data.status !== ..

다이나믹 라우팅? 미리 정의, 고정된 URL이 아닌 사용자가 접근한 경로 또는 특정 값에 따라 동적으로 변화하는 주소를 의미한다. 하나의 컴포넌트를 사용하여 특정값에 따라 변화하는 데이터를 사용할 수 있게 제작하기 위해 사용한다. 사용법 대괄호 []로 시작하는 폴더를 생성하면 된다. username에 따른 데이터를 보여주기 위한 컴포넌트를 만들고 싶다면 [username] 폴더와 하위에 page.tsx를 생성해주면 된다. 그리고 page.tsx에서 아래와 같이 코드를 작성하면 export default function UsernamePage(props: any) { return ( username: {props.params.username} ) } username에 해당하는 URL이 변경됨에 따라 출력되..