공부하자

서론모달(Modal)은 사용자에게 중요한 정보를 표시하거나 작업을 완료하도록 유도하는 UI 요소로 널리 사용된다.하지만 모달의 상태 관리는 생각보다 복잡할 수 있다. 보통 모달의 열림/닫힘 상태를 관리하기 위해 보통 boolean 값을 사용하는 방식을 많이 채택한다. 최근에는 URL을 기반으로 모달 상태를 관리하는 방법이 떠오르고 있다. 이번 글에서는 Next.js의 App Router에서 제공하는 Parallel Routes 기능을 활용하여 모달 상태 관리를 URL 기반으로 리팩토링한 경험을 공유하려 한다. 단순히 boolean 값으로 관리하던 모달 상태를 왜 URL 기반으로 바꾸었는지, 그리고 이러한 접근 방식이 어떤 이점을 가져다주는지 함께 살펴보자.Parallel Routes란?Next.js의 A..

1. Vercel 배포를 선택한 이유동아리 내에서 팀 organization을 사용하고 있다. 원래는 AWS S3 버킷을 생성하고 배포하는 방식으로 진행하려 했다. 하지만 이번 프로젝트는 Next.js를 사용하고 있으며, 특히 API Route 기능을 활용하고 있다. 이러한 특성상 단순한 정적 빌드가 어렵다고 판단했다.Next.js의 SSR(Server Side Rendering) 및 API Route를 포함한 프로젝트는 기본적으로 서버 환경이 필요하다. AWS에서 이를 운영하려면 Lambda나 EC2 같은 추가적인 설정이 필요하지만, 이는 유지보수 비용과 복잡도를 증가시킨다. 하는 방법이 없진 않지만!! 빠른 배포가 우선이었기에 빠르고 간편한 Vercel 배포를 선택했다. Vercel은 Next.js의..