프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

취 준 하 자

총 방문자수

오늘

어제

  • 전체 (162)
    • Project (8)
      • 검색 솔루션 개발 (1)
      • 실시간 채팅 서비스 개발 (3)
      • 지도 서비스 개발 (2)
      • 블로그 테마 만들기 (2)
    • Frontend (33)
      • CSS (8)
      • React (14)
      • Next.js (4)
      • Flutter (1)
      • Svelte (1)
      • 웹 접근성 (1)
      • 테스트 (0)
    • Backend (22)
      • Spring (5)
      • Database (6)
      • Tomcat (1)
      • Docker (1)
      • Node.js (4)
      • Ubuntu&Linux (4)
      • Firebase (1)
    • App (1)
      • Android (1)
    • Algorithm (3)
      • BOJ (0)
      • Programmers (2)
      • 이론 (1)
    • Language (37)
      • Javascript (26)
      • Python (1)
      • Java (10)
    • Computer Science (7)
      • Network (7)
    • 기타 (51)
      • npm (1)
      • Git (3)
      • VSCode (1)
      • 일상 (6)
      • 자격증 (1)
      • 부스트캠프(챌린지) (21)
      • 부스트캠프(멤버십) (17)

Tag

object.groupby, intl.numberformat, 병렬 경로, 이미지 fallback, JavaScript, toSorted, speculation rules api, map.groupby, node.js 23, 뒤로가기 새로고침 구분, toSpliced, findLastIndex, text fragments, app router, toReversed, findLast, intl.datetimeformat, 카카오 인앱 브라우저, 경로 가로채기, performance api,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

이 기술 블로그를 만들기 위해 5년을 미뤘다.

경로 가로채기 1

Next.js - parallel routes(병렬 경로), intercepting routes(경로 가로채기)로 조건부 모달 띄우기

next.js 13부터 추가된 앱 라우터에서는 parallel routes(병렬 경로)이라는 기능을 제공하는데, 이를 이용하여 간단하게 조건부 모달 처리를 할 수 있다. 병렬 경로란 하나의 레이아웃에서 여러 페이지를 동시에 보여줄 수 있는 기능으로, 슬롯(@slot)을 통해 구현할 수 있다. 슬롯은 앱 라우터에서 추가된 개념으로, 두 개 이상의 페이지를 동시에 띄울 수 있는 기능이다. 주로 메인 페이지 위에 별도 페이지를 모달 형태로 띄우기 위해 사용된다.ex) 메인 페이지(children)가 떠있는 상태에서 로그인 페이지를 노출 기존에는 이러한 모달 처리는 Portal + useState(혹은 query parameter) 방식으로 구현했었다.Portal이란?부모 컴포넌트 바깥 위치에 컴포넌트를 렌더..

Frontend/Next.js 2024.12.20
이전
1
다음
더보기

Copyright © Kakao Corp. All rights reserved.

  • Github

티스토리툴바