인프런 커뮤니티 질문&답변

공부중인사람님의 프로필 이미지

작성한 질문수

Next + React Query로 SNS 서비스 만들기

클라이언트 컴포넌트로 전환하기

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

해결된 질문

24.02.15 16:38 작성

·

275

0

 

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

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

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

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

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

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

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

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

답변 1

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 02. 15. 16:43

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

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

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

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