잡다하다

개요처음 개발을 할 때 변하지 않고 반복사용되는 모든 값에 대해 Constants를 사용했습니다.예를 들어 HTTP METHOD나 URL, 약관 설명 등에 대한 긴 Contents 등에 대해서입니다. Constants// HTTP METHODConst HttpMethod = { PUT: 'PUT', GET: 'GET', DEL: 'DELETE', POST: 'POST'} 그러다 다른 프로젝트들을 접하면서 HTTP METHOD나 URI 등을 Enums로 사용하는 것을 보면서 이에 대한 확실한 개념정리가 필요하다고 느끼게 되었습니다. Enumsenum HttpMethod { GET = 'GET', POST = 'POST', PUT = 'PUT', DEL = 'DEL',}  Enu..

개요Next.JS에서 없는 페이지로 이동할 때, 모든 경로에 대해 동시 처리하는 방법에 대한 내용입니다. [...not_found]동적 경로(Dynamic Route)로 설정된 페이지 파일로, URL의 일치하지 않는 모든 경로를 처리하는 데 사용됩니다.[...not_found]는 "Catch-All Route"라고 불리는 동적 경로 패턴을 의미합니다.  폴더 구조, 코드src app [...not_found] page.js not-found.tsx not-found.tsxexport default function NotFound() { return ( 페이지 없음 ..

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

개요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..

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