박박지은inblog.skku-comit.dev·Feb 1, 2024 · 4 min read[Next.js] parallel routes & intercepting routes트위터 로그인 모달창을 만들어보며 넥스트의 parallel routes 와 intercepting routes 을 학습한 내용을 정리해보았습니다. 트위터 로그인 창을 확인해봅시다. 루트 디렉토리 화면을 배경으로 i/flow/login 페이지가 동시에 표시되고 있습니다. 저는 app router 를 학습하기 전까지는 createPortal 을 사용하여 포탈 영역에 로그인 컴포넌트를 띄우는 방식을 사용했었습니다. const NoLogin =()=...00
박박지은inblog.skku-comit.dev·Jan 29, 2024 · 3 min read[React] Server component (RSC)React.js 18 에 도입된 리액트 서버 컴포넌트는 서버에서 동작하는 리액트 컴포넌트를 의미합니다. Next가 권장하는 라우팅 방식인 app router의 기반이 되는 컴포넌트이기 때문에 app router 를 이해하기 위해서는 server component 에 대한 이해가 필요합니다. server component 리액트는 클라이언트단만을 컴포넌트화하는 대신, server component라는 개념을 통해 서버 영역을 컴포넌트화합니다. ...00
박박지은inblog.skku-comit.dev·Nov 23, 2023 · 3 min read[Next.js] 넥스트의 사전렌더링 - (1) 정적생성SSGgetStaticPropsISR 개요 현재 풀스택 프레임워크인 넥스트를 배우는 중인데, 넥스트의 가장 중요한 특징인 사전렌더링에 대해 정리해보고자 합니다. (page-router 기반으로 배우는 중입니다) 작동원리가 헷갈려서 제가 이해한 대로 정리했습니다. 넥스트를 시작해보면 리액트만 하던 분들은 좀 당황하실건데, index.html 이 없습니다... 바로 넥스트의 특징인 사전렌더링 때문인데요, 그러면 컴포넌트를 어디에 뿌리는가? 바로바...00