min

1. Suspense 란? suspense는 어떤 컴포넌트가 읽어야 하는 데이터가 아직 준비가 되지 않았다고 리엑트에서 알려주는 새로운 매커니즘이다. 2. Suspense를 사용하는 이유 suspense를 사용하는 이유는 2가지 정도가 있다. 첫번째는 표준화이다. 리엑트에서 suspense가 나오기 전에는 컴포넌트가 비동기 데이터를 읽어오는 방법을 표준화 시켜지지 않았기에 이는 코드의 가독성과 유지보수적인 측면에서 어려움이 존재한다. 두번째로는 waterfull처럼 명령 프로그래밍에 가깝다는 것이다. 이는 리엑트에서 기본적인 선언적 프로그래밍을 지원한다는 점에서 보았을 때 핀트가 맞지 않는다는 문제가 발생한다. 하지만 Suspense를 통해서 복잡한 코드는 1차적으로 보이지 않고 핵심 로직만을 보여주기 ..

1. React Lazy를 사용하는 이유? React Lazy를 사용하는 이유는 다음과 같다. 만약 다음과 같은 코드가 있다고 가정하자 import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "../pages/Home"; import Write from "../pages/Write"; import Chart from "../pages/Chart"; import SignIn from "../pages/SignIn"; import SignUp from "../pages/SignUp"; const Router = () => { return ( ); }; export default Router; 여기서 만약 매인페이지에 ..

오늘은 useTransition에 대해서 알아볼려고 한다. 1. useTransition의 탄생배경 : useTransition은 사실상 리엑트에서의 동시성의 구현하기 위한 도구라고 볼 수 있다. 2. useTransition의 구조 : useTransition은 2가지를 리턴하고 있다. isPending과 startTransiton이다. isPending : 현재 우선순위가 낮은 작업이 지연되고 있음을 알려주는 boolean 값이다. startTransiton : 우선순위를 낮게 잡을 함수를 래핑하는 함수이다.

오늘은 react concurrent mode 에 대해서 알아볼려고 한다. 1. react concurrent mode의 등장 배경 : react concurrent mode는 사실상 리엑트 아니 자바스크립트의 고유적인 성질로 인해서 나오게 되었다. 자바스크립트의 경우에는 싱글 스래드 기반으로 로직이 흘러간다. 이 말은 하나의 작업을 하고 있을 때 다른 작업을 중단 시킨다는 의미이다. 그리고 리엑트 역시 싱글 스래드 기반으로 로직이 흘러간다. 만약 이런 코드가 있다면 어떻게 작동할까? import { useState } from "react"; const TECOBLE = ["프", "론", "트", "엔", "드", "화", "이", "팅"]; function App() { const [input, s..

오늘은 Throttle, Debounce에 대해서 알아볼려고 한다. 1. Throttle, Debounce 의 탄생 배경 : Throttle, Debounce의 경우에는 DOM의 이벤트 조작을 최적화 시키기 위해서 탄생한 기술이다. 이 말을 이해하기 위해서 다음과 같이 예가 있다고 가정하자. 만약에 내가 스크롤을 할때마다 콘솔을 찍는 로직을 만들었다고 가정하자. 이 코드를 실행시킨다면 스크롤을 밑으로 내릴 때마다 콘솔이 찍힐 것이다. 만약 스크롤의 길이가 5000픽셀이라면 해당 스크롤에 대한 콘솔은 100개 이상이 찍힐 것이다. 이는 굉장한 리소스 자원 낭비이다. 그래서 우리는 이를 해결하기 위해서 Throttle, Debounce가 탄생하게 되었다. 2. Debounce에 대하여.. : 디바운스의 경우..

https://school.programmers.co.kr/learn/courses/30/lessons/159994# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr //cards1에서 원소를 하나뽑는다. //cards2에서 원소를 하나뽑는다. //만약에 cards1에서 원소가 goal에서의 원소와 같을 때 다음 과정을 수행한다. //goal의 원소의 값을 하나 제거한다. //cards2와는 비교하지 않는다. //만약에 cards2에서 원소가 goal에서의 원소와 같을 때 다음 과정을 수행한다. //goal의 원소의 값을 하나 제거한다. //cards1와는..

오늘은 useInfiniteQuery에 대해서 살펴보려고 한다. 즉 만약에 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할 점은? 이라는 질문에 하나의 방법이 될 수 있는 useInfiniteQuery에 대해서 살펴보려고 한다. 1. 만약에 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할 점은? : 위 답을 내리기 위해서는 먼저 무한 스크롤에 대해서 살펴봐야한다. 무한 스크롤에 경우에는 사용자가 스크롤을 맨 밑하단으로 내렸을 때 데이터를 계속 fetching을 해오면서 무한정 스크롤을 내릴 수 있도록 해주는 기술이다. 이 기술에서 중요한 부분은 어떻게 DOM을 최적화 시킬 것인가?이다. 즉 사용자 입장에서 무한정 스크롤을 밑으로 내릴 때 어떻게..

오늘은 react-query에 대해서 알아볼려고 한다. 정확히 말하자면 react-query가 무엇이고 왜 사용하는 지에 대해서 알아볼려고 한디. 1. react-query가 무엇인가? : react-query는 서버용 상태관리 툴이다. 여기서 서버용 상태라는 것은 클라이언트가 주도권을 잡고 있는 상태가 아니라 제3자 즉 데이터베이스에 있는 상태를 의미한다. 2. react-query를 왜 사용하는가? : react-query를 왜 사용하는지를 알기 위해서는 먼저 서버용 상태를 왜 관리해야 하는지를 먼저 알아야 한다. 서버용 상태는 클라이언트가 주도권을 잡고 있지 않다. 이 말은 즉 데이터베이스 서버에 저장되고 있고 만약 이를 관리하지 않는다면 클라이언트가 가지고 있는 서버 사이트 상태와 데이터베이스에 ..