프론트엔드

Promise 일정 시간 초과시 대기 취소하고 에러 처리하기

배경 서버에 요청하고, 서버에 어떠한 문제가 생겨서 응답이 매우 늦게 오거나 오지 않으면 클라이언트에서 오래 기다려야 한다. 이러한 문제를 해결하기 위해서 특정 요청에 대한 응답이 일정 시간(ex: 1초) 내에 오지 않으면 서버에 문제가 있다고 간주하여 해당 작업을 종료하고 사용자가 다른 일을 할 수 있게 해야한다. 구현 Promsie.race(iterable) 를 활용하여 해당 작업을 구현할 수 있다. Promise.race(iterable) 는 인자로 받은 Promise들 중 제일 먼저 성공적으로 resolve 혹은 reject 된 Promsie를 반환한다. 즉 여기에 인자로 [request, handleTimeout] 이렇게 2개의 프로미스를 전달해서 request가 대기시간보다 늦게 resolve..

디바운스와 쓰로틀

단시간에 많은 양의 이벤트가 발생하면 해당 이벤트핸들러가 너무 많이 실행되서 성능상의 문제가 발생할 수 있다. 디바운스와 쓰로틀을 활용해 이러한 문제를 해결할 수 있다. 디바운스 단기간에 많은 양의 이벤트가 발생할 때 마지막 이벤트에서만 (사용자 조작이 끝났을 때) 콜백 함수를 실행시킨다. let timer document.addEventListener('scroll', () => { if(timer) clearTimeout(timer) timer = setTimeout(() => { console.log('마지막에만 실행!) },400) }) 활용 사용자가 회원가입 할 때 아이디 중복체크를 자동적으로 해주는 경우가 있다. 사용자가 입력할 때 input에 change 콜백을 줘서 서버에 중복체크 요청을 ..

Portal

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공한다. - 공식문서 활용 모달을 구현할 때 유용하게 활용할 수 있다. 모달을 구현 시 제일 까다로운 부분은 z-index 설정이다. z-index는 부모 안에서만 적용되기 때문에 다른 컴포넌트가 z-index가 더 높은 경우 모달이 해당 컴포넌트에 가린다거나 하는 문제가 발생한다. 그렇기 때문에 최상위 컴포넌트에 조건부 렌더링으로 모달을 달아놓고 redux로 해당 상태를 관리해서 모달을 구현하는 식으로 사용을 했었다. {...생략} {isModalOpen && } 하지만 이렇게 구현했을 때는 많은 문제점이 있다. 1) 모달에 정보를 줄 때 redux를 활용함 - 이는 redux의 본래 취지(많은..

커스텀 훅 적용하기 - 팝업(모달)

커스텀 훅으로 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있다. - 공식 문서 예를 들어 상태 변수중에 컴포넌트가 마운트되고 data를 fetch해서 useEffect에서 상태값을 변경해줘야 하는 경우에 사용할 수 있다. 적용 현재 진행하고 있는 프로젝트에서, 많은 페이지에서 검색 필터 팝업을 공통적으로 활용하고 있다. 현재 검색 필터 팝업은 외부를 클릭했을 때 팝업창이 닫히지 않는 문제가 있어서, PM님이 이 부분을 해결해달라고 했다. 기존의 로직은 컴포넌트에서 열림 상태를 관리한다. isOpen && , 이런 식으로 버튼 눌렀을때 isOpen을 true로 만들고 팝업이 뜨게 하는 로직이다. 이 팝업창의 외부를 클릭시 닫히게 하기 위해서 2가지 방법을 고려했다. 1) 외부에 투명배경의 viewport..

HOC

컴포넌트를 가져와 새 컴포넌트를 반환하는 함수 여러 컴포넌트에서 같이 쓰이는 로직이 있는 경우(로그를 찍는다거나, 팝업의 위치를 계산하는 경우) 중복해서 컴포넌트마다 코드를 작성하지 않고, HOC를 활용해서 중복을 줄이고 재사용성을 높일 수 있다. 형태 function HOCexample(Component) { return class extends React.Component { componentDidUpdate(...) render() { return } } } 이런식으로 해서 lifecycle method 안에 내용을 추가하거나, Component에 prop을 계산해서 넣어주는 등의 동작을 할 수 있다. compose(A,B)(C) 요런식으로 여러개를 합쳐서 쓰거나 할 수 도 있는데 이런 식으로는 아..

useCallback 과 useMemo

useCallback 얘는 인자로 전달된(콜백 함수) 애의 메모이제이션된 애를 반환한다. 걔는 콜백의 의존성이 변경되었을 때만 변화된다. 형태 const memoizedCallback = useCallback(() => {doSomething(a,b)}, [a,b]) 활용 React.memo의 경우 props(혹은 state, context)가 변화될 때만 다시 렌더링하도록 되어있다. 얘한테 함수를 prop으로 전달할 경우 {console.log('hi')}}/> /// jasik은 memoized된 component 매번 부모가 다시 렌더링 되면 함수도 다시 생성하고, 그래서 jasik은 prop이 계속 바뀐 걸로 인식해서 계속 다시 렌더링한다. 이런 불필요한 렌더링을 줄이기 위해서 {console.l..

Memoization

메모이제이션이란, 동일한 계산을 반복할 때 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 해주는 것이다. 리액트에서 메모이제이션은 어떻게 할까? React.memo를 활용해서 할 수 있다. const MyComponent = React.memo(function MyComponent(props){}); React.memo는 HOC이다. 얘에게 컴포넌트를 인자로 전달하면 동일한 props를 전달 받으면 다시 렌더링하지 않고, 기존에 저장해둔 컴포넌트를 바로 뱉는 애를 리턴한다. 보통 부모 컴포넌트에 상태를 많이 끌어올려 놓고 자식에 props로 주는 경우가 많기 때문에 그럴 경우에는 쓰임새가 많다. React.memo의 좋은 점은 또 있다. 얘는 p..

useContext

정의, 형태 const value = useContext(context) cocontext 객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환한다. context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 의 value prop에 의해 결정된다. - 공식문서 컴포넌트에서 가장 가까운 가 갱신되면 이 Hook은 그 provider에게 전달된 가장 최신의 context value를 사용하여 렌더러를 트리거한다. 상위 컴포넌트에서 React.memo 또는 shouldComponentUpdate를 사용하더라도 useContext를 사용하고 있는 컴포넌트 자체에서부터 다시 렌더링된다. useContext를 호출한 컴포넌트는 con..