전체 글
-
CSR, SSG, ISR, SSR 차이점 정리Next.js 2024. 1. 5. 12:17
Client Side Rendering 렌더링하는 주체자가 클라이언트(브라우저) 장점? 한번 로딩되면, 빠른 UX 제공 서버의 부하가 작음 문제점? 페이지 로딩 시간(TTV)이 길다 자바스크립트 활성화 필수임 SEO 최적화가 힘듬 보안에 취약함 CDN에 캐시가 안됨 *TTV(time to view) Static Site Generation 렌더링 하는 주체자가 서버, 언제 렌더링 하냐? 빌드할때 렌더링 장점? 페이지 로딩 시간(TTV: time to view)이 빠름 자바스크립트 필요 없음 SEO 최적화가 좋음 보안이 뛰어남 CDN에 캐시가 됨 문제점? 데이터가 정적임(데이터가 가변적으로 바뀌는 웹사이트라면 맞지 않다) 사용자별 정보 제공이 어려움 => 이런 문제점을 해결하기 위해 나온게 ISR, SSR..
-
Compound 패턴React/design patterns 2023. 12. 14. 12:57
컴파운드 컴포넌트 패턴은 여러 컴포넌트들이 모여 하나의 동작을 할 수 있게 해준다. 디자인시스템을 만들기 위해 래퍼런스를 찾는 중, Bootstrap이 해당 패턴을 사용하여 컴포넌트를 만들고 있었다. 장점: 컴파운드 패턴은 동작 구현에 필요한 상태를 내부적으로 가지고 있는데 이것을 사용하는 쪽에서는 드러나지 않아 걱정 없이 사용할 수 있다. 또 이 패턴을 사용하면 자식 컴포넌트들을 일일히 import할 필요 없이 기능을 사용할 수 있다. Context API 를 활용해서 컴파운드 패턴을 구현했고, 사용자가 토글 버튼을 눌렀을 때 나타날 메뉴를 렌더링하는 컴포넌트를 만들어 보았다. Toggle, List, Item 컴포넌트가 FlyOutContext Provider에 접근할 수 있도록 해당 컴포넌트는 Fl..
-
react-router-domReact/react 2023. 12. 5. 12:41
react-router에서 자주 사용했던 함수들을 정리, useParams() path: '/videos/:keyword ' path 값의 페이지에서 param 값을 가져올 수 있다. import { useParams } from "react-router-dom"; const { keyword } = useParams(); useNavigate() onclick={() => navigate(`/videos/watch/${video.id}`)} window.location 과 vue의 router.push 로 생각해주면 되겠다. import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); useLocation() onClic..