2024/05/30 2

넥스트와 서버 컴포넌트

농장주인 분들이 주로 사용하기 때문에, 나이대가 있을 것이라 생각되어 SSR을 위해 Next.js를 선택하였다. 저사양 기기에서도 빠른 렌더링을 하고 싶었다. SSR을 하자고 생각하다보니 더 나아가 서버 컴포넌트를 활용하여 효율적으로 렌더링하고 싶기도했다. 그러다가 알아보니 Next.js의 fetch가 캐싱 기능을 도와준다고 한다. 사실 tanstack-query가 너무 시장 지배적인거 아닌가 하는 생각이 있었기 때문에 api 라이브러리를 따로 쓰지 않고 fetch를 활용해보기로 했다. 사실 애초에 서버에서 api 요청을 끝내고 올 것이기 때문에 굳이 클라이언트에서 캐싱을 처리할 필요가 없다. 또한 CSS-in-JS 기반의 styled-components 또한, "use client"가 선언되면서 클라이..

카테고리 없음 2024.05.30

createPortal로 모달을 바깥에 띄우기

컴파운드 컴포넌트 패턴을 사용해보고, 비즈니스 로직 분리하는 것 때문에 몇번을 갈아엎었던 모달 컴포넌트다. 하지만 z-index 관점에서 한번 더 리팩토링을 해야한다. 모달을 어디서 불러야하는가? 현재 모달의 위치일단은 React의 컴포넌트 루트인 아래에,ReactDOM.createRoot(document.getElementById("root")!).render( }> ,); 라우팅되어 아래에,const router = createBrowserRouter([ { path: "/", element: , errorElement: 잘못된 접근입니다, children: [ ..