본문 바로가기

분류 전체보기

 (136)
React 공식문서 -useDeferredValue - useDeferredValue : UI 일부의 업데이트를 지연시킬 수 있는 React 훅이다. import { useState, useDeferredValue } from 'react'; function SearchPage() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); // ... } - 업데이트가 발생하면, 지연된 값은 최신 값보다 "뒤쳐지게" 됩니다. - React는 먼저 지연된 값을 업데이트하지 않은 채로 렌더링한 다음, 백그라운드에서 새로 받은 값으로 다시 렌더링을 시도한다. import { Suspense, useState } from 'react'; import SearchR..
DeepDive - 45장. 프로미스 - 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용하는데, 전통적인 콜백함수는 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한 번에 처리하는데도 한계가 있다. - ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스를 도입했다. 45.1 비동기 처리를 위한 콜백 패턴의 단점 45.1.1 콜백 헬 - 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다. - 즉, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료되기 때문에, 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 ..
React 공식문서 -useInsertionEffect - useInsertionEffect는 CSS-in-JS 라이브러리 작성자를 위한 훅이다. CSS-in-JS 라이브러리에서 작업중에 스타일을 주입하는 경우가 아니라면 useEffect나 useLayoutEffect가 더 나을 수 있다. - useInsertionEffect는 useEffect의 버전 중 하나로, DOM 변이 전에 실행된다. - 즉, useInsertionEffect를 호출하여 DOM 변이 전에 스타일을 주입한다. Usage(사용법) Injecting dynamic styles from CSS-in-JS libraries(CSS-in-JS 라이브러리에서 동적 스타일 삽입하기) - CSS-in-JS에는 세 가지 일반적인 접근 방식이 있다. 1. 컴파일러를 사용하여 CSS 파일로 정적 추출 ..
React 공식문서 -useLayoutEffect - useLayoutEffect는 성능을 저하시킬 수 있기 때문에, 가급적 useEffect를 사용하는 것을 권장한다. - useLayoutEffect는 브라우저가 화면을 다시 채우기 전에 실행되는 버전의 useEffect이다. - 즉, 브라우저가 화면을 다시 그리기 전에 useLayoutEffect를 호출하여 레이아웃을 측정한다. Mesuring layout before the browser repaints the screen(브라우저에서 화면을 다시 그리기 전 레이아웃 측정하기) - 예를들어 마우스오버 시 요소 옆에 툴팁을 표시하는 기능이 있다고 가정했을 때, 공간이 충분하면 툴팁이 요소 위에 표시되지만, 공간이 충분하지 않으면 아래에 표시되게 하고 싶을 때, useLayoutEffect를 사용할 수..
React 공식문서 -useTransition - useTransition : UI를 차단하지 않고 state를 업데이트할 수 있는 React 훅 function TabContainer() { const [isPending, startTransition] = useTransition(); const [tab, setTab] = useState('about'); function selectTab(nextTab) { startTransition(() => { setTab(nextTab); }); } // ... } - useTransition이 반환하는 startTransition 함수를 사용하면 state 업데이트를 트랜지션으로 표시할 수 있다. - useTransition은 훅이므로 컴포넌트나 커스텀 훅 내부에서만 호출할 수 있다. 만약 다른 곳(데..
DeepDive - 44장. REST API - REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. 44.1 REST API의 구성 - REST API는 자원, 행위, 표현의 3가지 요소로 구성된다. 구성 요소 내용 표현 방법 자원 자원 URI(엔드포인트) 행위 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위와 구체적 내용 페이로드 44.2 REST API 설계 원칙 - 1. URI는 리소스를 표현하는데 집중한다. - 2. 행위에 대한 정의는 HTTP 요청 메서드를 통해한다. 1. URI는 리소스를 표현해야 한다. - URI는 리소스를 표현하는데 중점을 두어야 한다. - 리소스를 식별할 수 있는 이름은 동사보다는 명..
DeepDive - 43장. Ajax 43.1 Ajax란? - Ajax : 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 - Ajax 이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링 하는 방식으로 동작함. - 전통방식의 문제점 - 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함한 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다. - 변경할 필요가 없는 부분까지 처음부터 다시 렌더링 한다. - 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처..
Keep-Alive 헤더 - Keep-Alive 헤더 : 송신자가 연결에 대한 타임아웃과 요청 최대 개수를 어떻게 정했는지에 대해 나타낸다. - Keep-Alive 헤더를 위해서는 Connection 헤더는 keep-alive로 설정되어야 한다. - parameters - timeout : 유효 연결이 계속 열려 있어야 하는 최소한의 시간(초 단위)을 가리킨다. - max : 연결이 닫히기 이전에 전송될 수 있는 최대 요청 수를 가리킨다. - HTTP는 TCP 위에서 동작을 하는데, TCP 전송이 끝나면 연결이 끊어지듯이 HTTP도 서로 전송이 끝나면 연결이 끊어진다. 그렇다면 매번 똑같은 주소로 요청을 할 때마다 새로운 연결을 설정해야 한다면 자원이 낭비된다. 이런 문제를 막고자 Keep-Alive가 생겼다. Keep-Aliv..

티스토리툴바