본문 바로가기

전체 글52

SPA Route 일반적으로 spa에서 라우팅 구현은 window history 객체에 있는 pushState로 구현한다. history 객체에서 주소창을 바꾸는 메소드는 replaceState, pushState 2가지가 존재한다. 차이점은 replaceState는 뒤로가기가 활성화 되지 않고 주소창이 말 그대로 replace되는 것이며, pushState는 스택처럼 history가 쌓이는 구조이다. 그래서 spa구조에서 실제 라우팅 되는 것처럼 구현을 하려면 pushState를 사용해야 한다. (location.replace 는 아예 새로 페이지를 그리는 것이기 때문에 불가) pushState(state, unused, url) 문법은 다음과 같다. 전달하고 싶은 상태값을 state에 넣어주고, 변경하길 원하는 주소값.. 2022. 10. 6.
프리온보딩 프론트엔드 챌린지 3차 사전과제 - CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. 클라이언트 사이드 렌더링이란, 페이지를 렌더링 하는 모든 과정을 클라이언트(브라우저) 에 일임하는 것을 뜻한다. 전통적인 SSR 방식과는 다르게 최초 HTML 문서는 한번만 다운받게 되며, 이 HTML 문서를 렌더링 하기 위한 Javascript chunk 파일도 같이 다운로드 한다. 이후 사용자 인터렉션에 따라 사전에 정의된 javascript 코드를 통해서 virtual 렌더링이 일어나게 된다. - 장점: 매번 클라이언트 요청에 따라 전체 페이지를 렌더링 하지 않고, 페이지 일부분만 렌더링 하기 때문에 사용성 측면에서 장점을 가진다. 또한 전통적인 SSR과는 다르게 클라이언트 독립적으로 컴포넌트 단.. 2022. 9. 28.
useQueryDebounce import { useState, useEffect } from 'react'; const useQueryDebounce = (value: string, delay = 200) => { const [debounceValue, setDebounceValue] = useState(value); useEffect(() => { const handler: NodeJS.Timeout = setTimeout(() => { setDebounceValue(value); }, delay); return () => { clearTimeout(handler); }; }, [value, delay]); return debounceValue; }; export default useQueryDebounce; 2022. 9. 5.
순열, 조합 구현 const getPermutations = function (arr, selectNumber) { const results = []; if (selectNumber === 1) return arr.map((el) => [el]); // n개중에서 1개 선택할 때(nP1), 바로 모든 배열의 원소 return. 1개선택이므로 순서가 의미없음. arr.forEach((fixed, index, origin) => { const rest = [...origin.slice(0, index), ...origin.slice(index+1)] // 해당하는 fixed를 제외한 나머지 배열 const permutations = getPermutations(rest, selectNumber - 1); // 나머지에 대해서.. 2022. 8. 27.

티스토리툴바