🤍 전 강의 25% 할인 중 🤍

2024년 상반기를 돌아보고 하반기에도 함께 성장해요!
인프런이 준비한 25% 할인 받으러 가기 >>

  • 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

지금 강의 영상(클라이언트 컴포넌트로 전환하기)에서 @modal 폴더 내에 로그인 창이 외부에 뜨는 것 구현에 관하여

24.02.15 16:38 작성 조회수 212

0

 

지금 영상에서 @modal 폴더 내의 login 모듈css와 page.tsx 코드를 붙여넣기 전까지는

(beforeLogin) 폴더 내의 layout.tsx와 page.tsx에 의해 동작할 때 같은 화면에 패러렐 모달이 동작하였는데

해당 css 붙여넣는 순간 새로운 창이 팝업되면서 패러렐 모달이 로그인 창으로서 뜨는 것이 어떻게 구현되는 것인지 설명이 안되어서 그 부분이 궁금해 지길래,

코드를 다운받아 하나씩 뜯어보면서 비교해보려 했는데요...

코드 다운을 하려 보니 1챕터가 다 끝난 이후에 코드가 정리되어 있어서 해당 폴더에 이 강의에서 설명하는 코드 파일이 없네요.

강의 후기에서 정리가 잘 안되어 있다고 후기 남긴 일부는 이런 것을 얘기한 것 같네요...

해당 팝업 기능은 어떤 부분에서 구현되는 것인지, 단순히 css 붙여넣기 만으로 구현이 안될 것 같은데, 그런 기능이 따로 있는 것인지 알려주시면 감사하겠습니다. 뒤의 강의 계속 보다 보면 나올지 모르기에 일단 여기다 질문 넘기고 다음 강의 듣겠습니다.

혹시 뒤에서 설명을 해주시는게 맞더라도, 이 영상 보고서 그런 고민을 하고 있는 분들이 생길 수 있으니, 지금 영상 수업 질문에 간단히라도 알려주시면 감사하겠습니다.

답변 1

답변을 작성해보세요.

1

폴더랑 파일만 생성했는데도 패러렐 라우트 기능이 동작해서 궁금하신 것 같은데요.

패러렐 라우트라는 것은 그냥 @ 폴더를 추가함으로 인해 자동으로 동작합니다. 넥스트에서 폴더 구조를 파악해서 알아서 제공하는 기능입니다. 그래서 마치 마법처럼 기능이 추가되었다고 오해할 소지가 있는 것 같습니다.

이 영상에서 page.tsx랑 css 파일은 단순히 화면을 꾸미는 역할만 합니다. 원래라면 상하로 나열될 두 개의 페이지를 css를 통해 겹쳐서 모달처럼 보이게하는 겁니다.

@modal 폴더의 유무가 중요합니다.

채널톡 아이콘