Next에서 더 효과적인 modal 개발하기 (Parallel Routes & Intercepting Routes) 😎

기존에 React modal을 개발할 때 React Portal을 사용하기도 하고, 조건부 렌더링을 사용하기도 했다. 내가 개발해봤던 이런 기존 방식의 모달은 단점이 있는데, 단순히 컴포넌트를 JS로 화면에 띄우는 방식이기에 브라우저 기능과 웹페이지가 연동된 느낌은 아니다. 즉, 모달을 띄우고 브라우저 뒤로가기를 눌렀을 때 사용자는 모달이 닫히는 것을 생각할 수 있지만 실제로는 모달과 그 뒤의 화면이 통째로 날아가는 경험을 할 수 있다는 점이다. Next.js 15 app router에서는 Parallel Routes과 Intercepting Routes를 사용하여 좀 더 나은 형태의 모달을 개발할 수 있다고 들었기에, 직접 알아보고 예제를 작성해보기로 했다 🥜Parallel RoutesNext의 앱 ..

• format_list_bulleted 웹 개발
• · 2025. 2. 21.
• textsms

Ajax에 대해서 (비동기적인 웹페이지 구성)

Ajax(Asynchronous JavaScript and XML)를 사용한 웹페이지를 방문했을 때, 웹페이지가 새로운 데이터로 갱신되었다면 필요한 부분에 필요한 데이터만 비동기적으로 받아와 렌더링 된다. Ajax는 자바스크립트와 DOM, 그리고 Fetch라는 핵심 기술로 구성된다. 과거 웹페이지는 form 태그를 통해 서버에 데이터를 전달하고 서버는 요청에 대한 응답으로 새로운 웹페이지를 제공해야 했다. (즉, 매번 새로운 웹페이지(HTML)를 제공했다.) 하지만, 자바스크립트를 통해 DOM을 제어할 수 있고, Fetch를 통해서 사용자가 웹페이지에서 작업하는 동안 서버와 통신할 수 있게 됨으로써, 필요한 부분만 변경할 수 있게 되었다. Ajax 기술의 발전으로, 서버와 데이터 통신을 원활하게 할 수 ..

• format_list_bulleted JavaScript
• · 2023. 3. 17.
• textsms