Frontend

Intersection Observer API를 활용한 무한스크롤 구현

Intersection Observer API란 Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다. - MDN 화면 상의 Target Element 노출 여부를 감지하는 API 이다. 스크롤 이벤트 감지 방법과의 비교 scroll event를 감지하여 구현한다. 이때 throttle 혹은 debounce 과 같은 처리가 추가로 필요하며 throttle/debounce 를 사용하는 경우 쓰레드 메모리를 차지하고 성능에도 좋지않다. scrollTop + window.clientHeight 등을 사용해서 끝에 도달했는지 계산한다. 이때clientHeight이나 off..

React-Query 정리

React Query는 리액트 애플리케이션에서 global state 없이 서버 데이터 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 만들어 주는 서버 상태 관리 라이브러리다. React Query의 등장 React 는 서버에서 데이터를 가져오거나 업데이트하는 명확한 방법을 제공하지 않는다. 따라서 개발자들은 데이터를 가져오기 위한 처리를 따로 해주어야 했다. 일반적으로 컴포넌트에서 hook을 사용하여 데이터를 가져와 상태를 관리하거나, 전역 상태 관리 라이브러리를 사용하여 store에 비동기 데이터를 저장하고 가져왔다. 이때 store 는 전역 상태를 관리하는 저장소로 theme 나 locale 과 같은 client state 관리에는 적합하지만, 서버에서 가져오는 데이터 server state 관리에는..

[Javascript] Throttle 과 Debounce

Throttle과 Debounce의 등장 배경 Throttle 과 Debounce 는 DOM 이벤트를 제어하는 방법으로 자주 호출되는 이벤트의 실행 빈도를 줄여 성능상의 이점을 얻기 위해 사용한다. Throttle과 debounce를 사용할 수 있는 대표적인 상황은 아래와 같다. 스크롤링을 통한 데이터 노출 검색어 입력시 자동완성 예를 들어 스크롤 이벤트를 감지하여 API를 호출해 데이터를 가져오고자 하는 상황이라고 가정해보자. 이때, 사용자가 스크롤을 움직일 때마다 수많은 스크롤 이벤트가 발생할 것이고 이는 수많은 API 호출로 이어질 것이다. 매번 스크롤 이벤트에 대한 콜백이 발생하고 해당 콜백의 수행은 매우 큰 리소스를 차지하게 된다. 이는 결국 서비스의 성능과 사용자의 경험 저하를 야기하게 된다...

[Redux] 간단한 예제로 살펴보는 리덕스의 동작 원리

React는 상태를 기반으로 사용자 인터페이스(UI)를 제어하기 위한 자바스크립트 라이브러리이다. 웹 애플리케이션은 사용자와의 활발한 인터렉션을 처리하고, 실시간 통신을 통해 데이터를 받아오며 이를 기반으로 렌더링을 하는 등 다양한 기능을 가지고 있다. 이때, 상태(state)를 관리하는 것은 필수적으로 요구되는 사항이다. 즉, 상태 관리란 React 앱 구축에 있어 핵심이 되는 부분 중 하나라 할 수 있다. 따라서 상태 관리를 위한 많은 기술이 다양한 라이브러리의 등장으로 이어지게 되었다. 그 중에서도 리덕스(Redux)는 리액트와 가장 오랜 기간을 함께했으며 가장 널리 알려진 상태관리 라이브러리 중 하나이다. 이번 포스팅에서는 리덕스의 동작 원리를 간단한 예제와 함께 살펴볼 것이다. 👉 리덕스의 코어..

[React] ContextAPI & useContext Hook을 통한 Global State 값 관리하기

✨ Context API란? 전역 상태(global state) 값을 공유할 수 있도록 React에서 고안된 방법 주로 로그인한 유저 정보, 테마, 언어 등을 저장한다. Prop Drilling을 개선할 수 있다. Prop Drilling Prop Drilling은 컴포넌트 트리에서 컴포넌트에 직접적으로 필요한 데이터를 props로 전달받는 것이 아니라, 단순히 컴포넌트 트리의 하위 컴포넌트로의 props 전달을 위하여 데이터를 전달하는 과정이다. ✨ Context API 사용법 Context의 사용법은 다음과 같다. React.createContext(defaultValue) Context 객체를 생성한다. createContext 함수를 호출하면 Provider와 Consumer 컴포넌트를 반환한다...

[Javascript] 변수, 호이스팅, TDZ

✨ 변수의 종류 let const var var는 한번 선언된 변수를 다시 선언할 수 있다. // ✅ var name = 'Mike'; console.log(name); // Mike var name = 'Jane'; console.log(name); // Jane // ❌ let name = 'Mike'; console.log(name); // Mike let name = 'Jane'; // error! (동일한 이름으로 재선언 불가) console.log(name); var는 선언하기 전에 사용할 수 있다. console.log(name); // undefined var name = 'Mike'; 위의 예제에서 에러가 발생하지 않는다. var는 아래처럼 동작하기 때문이다. var name; conso..

[Typescript] Advanced-Types & Utility-Types 정리

infer 타입변수를 참조하기 위해 사용 조건부 타입의 extends 절에서 infer 키워드 사용 가능 example type First = T extends [infer U, ...unknown[]] ? U : never; type SomeTupleType = [string, number, boolean]; type FirstElementType = First; // string example: infer 키워드 여러개 사용 type Unpacked = T extends (infer U)[] ? U : T extends (...args: any[]) => infer U ? U : T extends Promise ? U : T; type T0 = Unpacked; // string type T1 = U..