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

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

부드러운 스크롤 구현을 위한 locomotive-scroll데스크탑에서도 모바일에서 스크롤 하듯 부드러운 스크롤을 구현하려면 어떻게 해야 할까? locomotive-scroll과 같은 라이브러리를 사용하면 간단하게 부드러운 스크롤 구현이 가능하다. 부드러운 스크롤이 적용된 페이지 예시로는 지마켓 채용 페이지가 있다. G마켓 인재영입 - 지마켓 채용 사이트Gmarket Careers, 지마켓 채용 사이트, 세상에 가치를 연결하고 당신이 가져올 변화를 기다립니다.careers.gmarket.com  보통은 원 페이지 단위의 정적 페이지에서 주로 사용하는데, 멀티 페이지 환경인 Next.js에서도 사용이 가능하다. 어떻게 사용해야 하는지 알아보자.  Next.js에서 locomotive-scroll을 사용하..

이슈 내용Next.js에서 발생하는 이슈로, 서버와 클라이언트의 props 값이 다른 것이 원인이다. 나는 커스텀 훅을 사용하여 style props에 내려줄 값을 생성하다 보니 해당 경고를 마주하게 되었다.  해결 방법해결 방법은 두 가지가 있으며, 상황에 맞게 골라서 사용하면 된다. 1. useState 사용문제가 되는 props 변경이 클라이언트 단에서 렌더링될 수 있도록 isMounted state를 선언하여 마운트 이전에는 컴포넌트 렌더링을 하지 않는 방법이다.const Page = () => { const [isMounted, setIsMounted] = useState(false); useEffect(() => { setIsMounted(true); document.body...

Next.js는 서버 사이드 렌더링 방식(SSR)을 제공하는 React의 풀스택 프레임워크이다. 초기 접근 시에는 SSR 방식으로 페이지를 생성하고, 페이지 이동을 할 때는 CSR 방식으로 동작하기 때문에 부드러운 화면 전환이 가능하다. SSR와 CSR 방식의 특징 및 차이점은 아래 블로그 글에 정리해 놓았다. 페이지 렌더링 방식 비교: SSR vs CSR vs SSGSSR(Server-side Rendering) SSR은 서버에서 페이지를 렌더링하는 방식으로, Next.js와 PHP, ASP 등이 이에 속한다. SSR의 동작 방식은 다음과 같다. 1. 클라이언트가 특정 페이지를 요청한다. 2. 서버에서는 해.guiyomi.tistory.com  Next.js는 일반적인 리액트 어플리케이션과는 달리 서버..