2024/09/04 3

[NEXT.JS] Enums(열거형)과 Constants(상수)

개요처음 개발을 할 때 변하지 않고 반복사용되는 모든 값에 대해 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 Page)

개요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] Dynamic Import

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