본문 바로가기

분류 전체보기170

react concurrent mode에 대하여... 오늘은 react concurrent mode 에 대해서 알아볼려고 한다. 1. react concurrent mode의 등장 배경 : react concurrent mode는 사실상 리엑트 아니 자바스크립트의 고유적인 성질로 인해서 나오게 되었다. 자바스크립트의 경우에는 싱글 스래드 기반으로 로직이 흘러간다. 이 말은 하나의 작업을 하고 있을 때 다른 작업을 중단 시킨다는 의미이다. 그리고 리엑트 역시 싱글 스래드 기반으로 로직이 흘러간다. 만약 이런 코드가 있다면 어떻게 작동할까? import { useState } from "react"; const TECOBLE = ["프", "론", "트", "엔", "드", "화", "이", "팅"]; function App() { const [input, s.. 2023. 8. 20.
Throttle, Debounce에 대하여... 오늘은 Throttle, Debounce에 대해서 알아볼려고 한다. 1. Throttle, Debounce 의 탄생 배경 : Throttle, Debounce의 경우에는 DOM의 이벤트 조작을 최적화 시키기 위해서 탄생한 기술이다. 이 말을 이해하기 위해서 다음과 같이 예가 있다고 가정하자. 만약에 내가 스크롤을 할때마다 콘솔을 찍는 로직을 만들었다고 가정하자. 이 코드를 실행시킨다면 스크롤을 밑으로 내릴 때마다 콘솔이 찍힐 것이다. 만약 스크롤의 길이가 5000픽셀이라면 해당 스크롤에 대한 콘솔은 100개 이상이 찍힐 것이다. 이는 굉장한 리소스 자원 낭비이다. 그래서 우리는 이를 해결하기 위해서 Throttle, Debounce가 탄생하게 되었다. 2. Debounce에 대하여.. : 디바운스의 경우.. 2023. 8. 20.
프로그래머스 카드뭉치 자바스크립트 https://school.programmers.co.kr/learn/courses/30/lessons/159994# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr //cards1에서 원소를 하나뽑는다. //cards2에서 원소를 하나뽑는다. //만약에 cards1에서 원소가 goal에서의 원소와 같을 때 다음 과정을 수행한다. //goal의 원소의 값을 하나 제거한다. //cards2와는 비교하지 않는다. //만약에 cards2에서 원소가 goal에서의 원소와 같을 때 다음 과정을 수행한다. //goal의 원소의 값을 하나 제거한다. //cards1와는.. 2023. 8. 20.
useInfiniteQuery에 대하여... 오늘은 useInfiniteQuery에 대해서 살펴보려고 한다. 즉 만약에 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할 점은? 이라는 질문에 하나의 방법이 될 수 있는 useInfiniteQuery에 대해서 살펴보려고 한다. 1. 만약에 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할 점은? : 위 답을 내리기 위해서는 먼저 무한 스크롤에 대해서 살펴봐야한다. 무한 스크롤에 경우에는 사용자가 스크롤을 맨 밑하단으로 내렸을 때 데이터를 계속 fetching을 해오면서 무한정 스크롤을 내릴 수 있도록 해주는 기술이다. 이 기술에서 중요한 부분은 어떻게 DOM을 최적화 시킬 것인가?이다. 즉 사용자 입장에서 무한정 스크롤을 밑으로 내릴 때 어떻게.. 2023. 8. 20.
react-query에 대하여... 오늘은 react-query에 대해서 알아볼려고 한다. 정확히 말하자면 react-query가 무엇이고 왜 사용하는 지에 대해서 알아볼려고 한디. 1. react-query가 무엇인가? : react-query는 서버용 상태관리 툴이다. 여기서 서버용 상태라는 것은 클라이언트가 주도권을 잡고 있는 상태가 아니라 제3자 즉 데이터베이스에 있는 상태를 의미한다. 2. react-query를 왜 사용하는가? : react-query를 왜 사용하는지를 알기 위해서는 먼저 서버용 상태를 왜 관리해야 하는지를 먼저 알아야 한다. 서버용 상태는 클라이언트가 주도권을 잡고 있지 않다. 이 말은 즉 데이터베이스 서버에 저장되고 있고 만약 이를 관리하지 않는다면 클라이언트가 가지고 있는 서버 사이트 상태와 데이터베이스에 .. 2023. 8. 20.
프로그래머스 비밀지도 자바스크립트 https://school.programmers.co.kr/learn/courses/30/lessons/17681 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr //n만큼 반복문을 돌면서 다음 과정을 수행한다. //arr1 , arr2의 각 원소들을 이진수로 변환해준다. //n만큼 반복문을 돌면서 다음 과정을 수행한다. //각 이진수의 숫자들을 or연산자를 통해서 연산한다. //연산결과 즉 0 => " " , 1 => "#"를 임의의 변수에 담는다. //변수를 answer에 각각 담는다. //answer를 리턴한다. function solution(n, .. 2023. 8. 19.

티스토리툴바