잡다하다

개요이전 개발자가 개발한 프로젝트를 보고 무지성으로 프로젝트 구조를 잡아서 개발을 수행했었는데, 프로젝트를 완성해서 정상적으로 서비스를 하고 있지만 정확히 어떤 이유로 사용하는 지 모를 코드들이 있기 때문에 NEXT.JS를 더욱 이해하기 위해 하나씩 파헤쳐보려고 합니다.  구조 설명현재 모든 app router 내부 디렉토리는 아래와 같은 구조입니다._module 디렉토리에는 각 컨테이너에서 사용하는 component들과 css를 모아놓았습니다.app - home - _module - page.tsx - page.body.tsx - contents - _module - page.tsx - page.body.tsx - notice ..

개요Zustand는 간단하면서도 강력한 상태 관리 라이브러리입니다. React 애플리케이션에서 전역 상태를 쉽게 관리할 수 있게 해주며, Redux와 비교했을 때 훨씬 더 간단하고 직관적인 API를 제공합니다.Zustand는 독일어로 "상태"를 의미하며, React의 Hooks를 기반으로 합니다.  특징간단한 APIZustand는 매우 간단한 API를 제공하여, 몇 줄의 코드만으로 상태를 정의하고 사용할 수 있습니다.이는 Redux와 같은 복잡한 설정 없이도 쉽게 상태 관리를 할 수 있게 해줍니다.import create from 'zustand';const useStore = create(set => ({ count: 0, increment: () => set(state => ({ count: st..

개요SWR(Stale-While-Revalidate)은 React Hooks를 사용하여 데이터 가져오기와 캐싱을 간단하게 만들어주는 라이브러리입니다. Next.js와 함께 사용하면 매우 효율적인 데이터 페칭을 구현할 수 있습니다. SWR은 Vercel에서 개발한 라이브러리로, 최신 데이터 페칭 전략을 제공합니다.  특징자동 캐싱 및 재검증 (Stale-While-Revalidate)SWR의 이름에서 알 수 있듯이, 데이터가 오래되었는지 여부에 따라 자동으로 데이터를 캐싱하고, 백그라운드에서 재검증합니다.이는 데이터의 신선도를 유지하면서 빠른 응답을 제공합니다.import useSWR from 'swr';import axios from 'axios';const fetcher = url => axios.ge..

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

개요 NEXT.JS를 사용하면서 느꼈던 폴더 구조에 대해 작성해보려고 한다. 현재 포트폴리오겸 개발중인 프로젝트기 때문에 완성되지 않은 구조임을 감안해주길 바란다. 또한, 공부가 완벽하지 않아 틀린점이 있을 수 있으니 많은 지적 부탁한다. public과 src로 크게 분리되며, public에는 font, image, svg 파일들을 보관하는 용도로 사용했다. src/app 실질적인 페이지들을 보관한 디렉토리이다. routing을 통해 접근하는 페이지별로 디렉토리를 구성한 모습이다. src/components 공통으로 사용하는 component들에 대해 보관했다. 테이블이나 버튼 등을 모든 페이지에서 공통으로 사용할 수 있다. src/config layout.tsx에서 가지게될 컴포넌트들에 대한 모음이다..