WEB개발이야기/React.js 2024. 2. 28.
Next.js 14버전에서 모달창 띄우는 초간단 방법
Next.js 14 버전에서 모달 창을 쉽게 띄우는 방법을 포스팅하려고 합니다. Next.js는 폴더의 형태와 이름에 따라 경로 구성과 기능이 달라지니, 폴더 구조와 이름을 주의 깊게 설정하는 것이 중요합니다. 아래 글을 참고하여 설정해 보세요. Next.js 14버전에서 App 라우팅 심화: 폴더 구조와 파일 특징 완벽 가이드 모달 창을 띄우기 위한 기술 Next 14버전에서 모달을 띄우기 위한 핵심기술로 패러랠 라우트와 인터셉트 라우트가 있습니다. 일반적으로 모달을 구현하기 위해 다음과 같은 폴더 구조를 사용합니다. └── app ├── @modal │ ├── default.js │ ├── (.)flow │ │ └── page.js │ └── ... └── ... 패러랠 라우트 개념 하나의 layou..
WEB개발이야기/React.js 2024. 2. 19.
Next.js 14 핵심 기능: App 라우팅과 Pages 라우팅의 장단점 비교
Next.js 12버전이하에서는 기본적으로 Pages Routing 방식을 사용했으나 Pages Routing의 단점을 극복하고자 14버전에서 App Routing을 도입하게 되었습니다. 그래서 현재 14버전에서는 Pages Routing과 App Routing 방식을 선택하여 사용할 수 있습니다. 각 라우팅 컨벤션은 서로 다른 구조와 특징을 가지고 있으며, 프로젝트의 특성에 따라 적합한 컨벤션을 선택하는 것이 중요합니다. 기존 Next.js 프로젝트를 관리하는 차원이라면 Pages 라우팅 방식을 추천하지만 만약 새롭게 프로젝트를 진행하게 된다면 App 라우팅 방식을 추천합니다. 1. App 라우팅 컨벤션 App Routing Conventions는 Next.js 14 버전에서 새롭게 도입된 라우팅 컨벤..
WEB개발이야기/React.js 2024. 2. 19.
Next.js 14버전에서 App 라우팅 심화: 폴더 구조와 파일 특징 완벽 가이드
Next.js 14 버전에서 도입된 App 라우팅 방식은 폴더 구조와 파일 규칙을 기반으로 강력하고 유연한 라우팅 경험을 제공합니다. 이 글에서는 폴더와 파일의 명칭에 대한 규칙을 명확하고 간결하게 정리하여 개발자들이 App 라우팅을 쉽게 이해하고 활용할 수 있도록 정리 했습니다. 라우팅(Routing) 파일들 APP 라우팅 방식은 기본적으로 컴포넌트를 기준으로 경로를 설정하게 됩니다. 기본적으로 사용되는 라우팅 파일 형식은 아래와 같습니다. 파일 명 확장자 설명 layout .js .jsx .tsx 화면의 레이아웃을 정의 합니다. page .js .jsx .tsx 화면의 컨텐츠를 정의 합니다. loading .js .jsx .tsx 화면이 로딩될 때 보여줄 UI 화면입니다. not-found .js ...
