분류 전체보기

브라우저 구성, CRP, reflow, repaint, DOM, layout thrashing, requestAnimationFrame 🌱

reflow는 레이아웃 -> 페인트 -> 합성 이 이루어지는 것을 말하고 repaint는 페인트 -> 합성이 이루어지는 것을 말합니다. 레이아웃 단계에서 노드 들이 ViewPort(뷰포트) 내에 위치하는 위치를 계산하게 되는데 이 과정이 상대적으로 비용이 비싸서 reflow를 불필요하게 유발하지 않아야 합니다. ViewPort(뷰포트)란 그래픽이 표시되는 브라우저의 영역, 크기를 말합니다. reflow, repaint에 대해 알기 위해서는 먼저 브라우저의 구성을 알고 웹 페이지가 브라우저에 나오는 과정을 이해하여야 합니다. 브라우저 구성 브라우저는 아래와 같이 구성됩니다. UIInterface, 브라우저 엔진, 렌더링 엔진, 네트워크 모듈, js 엔진, UIBackend, Data Storage로 구성되..

멀티탭 스케줄링 [백준 1700] - python

INF = 1e6 import sys input = sys.stdin.readline def BOJ1700() : N, K = map(int, input().split()) arr = list(map(int, input().split())) count = 0 plugins = [] for i in range(K) : if arr[i] in plugins: continue if len(plugins) < N : plugins.append(arr[i]) continue after_use_index = [] remains = arr[i:] for j in range(N) : if plugins[j] not in remains : after_use_index.append(101) continue after_us..

React 연속된 요청 useEffect 내에서 처리하기 (useEffect, suspense)

이 포스트는 React 공식문서의 Suspense 관련 부분을 보던중 아래의 내용을 실행해보기 위한 포스트 입니다. Suspense를 사용하여 효율적으로 제어할 수 있는 race condition을 useEffect내에서도 처리하기 위한 방법입니다. 클로저, 스코프 체인와 cleanUp function을 이용하였습니다. 여기서 정의하는 경쟁상태란 코드가 실행되는 순서에 대한 부정확한 가정에서 비롯되는 버그 입니다. 위의 이미지는 useEffect 내에서 promise를 통해 데이터를 불러온후에 컴포넌트의 상태를 업데이트하는 동작 화면입니다. promise의 응답 시간은 무작위로 설정되어 있습니다. next 버튼을 클릭하면 id를 변경해주고 변경된 id로 각 컴포넌트에서 promise로 요청을 보내줍니다..

React suspense

React에 Suspense 컴포넌트가 추가되었습니다. 기존의 명령형으로 loading 상태를 지정해 주어야 했던 것을 Suspense 컴포넌트를 이용하면 선언형으로 코드를 작성할 수 있습니다. React의 experimental에서 사용이 가능했었지만 3월 24일 정식 출시된 18버전에서 사용이 가능합니다. Concurrent 모드에서 사용이 가능합니다. 기존에 ReactDom.render => ReactDom.createRoot().render 형식으로 사용하여야 Suspense 컴포넌트를 사용할 수 있습니다. // 기존 import ReactDOM from 'react-dom' ReactDOM.render( , document.getElementById("root") ) // 변경된 모습 impor..

React 상태관리의 과거, 현재 그리고 미래 (번역글)

이 포스트는 아래 출처의 블로그 글을 번역한 내용입니다. React는 2013년 5월에 소개되었습니다. 이것은 패러다임은 UI가 상태에 따라 동작하는것으로 전환되었습니다. 컴포넌트의 상태가 주어지면 React는 어떻게 컴포넌트가 보여야 하는지 결정할 수 있습니다. React는 상태라는 아이디어 위에서 조직되었습니다. 그러나 상태는 React 어플리케이션을 만드는데 있어 가장 어려운 부분으로 여겨지고 있습니다. React의 상태 관리를 견고한 벨트로 상상해봅시다. 수년동안 이 벨트를 사용해왔고 느리게 새로운 도구들이 추가됩니다. 각각의 도구들은 각각의 목적을 수행합니다. 당신은 볼트를 조일때 망치를 사용하지 않습니다. 장인으로서 각각의 도구를 적절한 상황에 사용해야 합니다. 리액트의 상태관리 도구는 견고한..

React-query 🌱

react-query는 서버의 상태를 다루기에 정말 좋은 라이브러리라고 생각합니다. react-query의 공식 홈페이지에서도 서버의 상태를 위한 라이브러리로 설명되어있습니다. * React Query는 서버 상태 라이브러리입니다. 서버와 클라이언트의 비동기적인 동작을 관리하기에 적합합니다. * Redux, MobX, Zustand, etc 는 클라이언트 상태 라이브러리 입니다. 비동기 데이터를 저장할수는 있지만 React Query에 비해서는 비효율적입니다. 이러한 점을 염두에 두고 React Query는 클라이언트 상태에 위치한 캐시데이터를 관리하기 위한 boiler plate코드와 관련 로직들을 코드 몇 줄 만으로 대체한다는 것입니다! Redux에서 서버의 api요청 응답을 저장해두고 있을때는 아..

감소하는 수 [백준 1038] - python

# 조합을 이용한 코드 from itertools import combinations import sys input = sys.stdin.readline def BOJ1038() : N = int(input()) answers = [] for i in range(1, 11) : for comb in combinations(range(0, 10), i) : comb = list(comb) comb.sort(reverse=True) answers.append(int("".join(map(str, comb)))) answers.sort() try : print(answers[N]) except : print(-1) BOJ1038() # https://ryu-e.tistory.com/59 # 재귀를 이용한 코드..

Recoil 🌱

리액트에서 전역 상태관리를 위해 Redux는 널리쓰입니다. 비동기 action을 지원하기 위해 redux-thunk, redux-saga등이 추가되어 미들웨어로서의 동작으로 비동기 동작을 이용할 수 있게 해줍니다. Redux에서는 전역 컴포넌트 상태와 서버 상태의 분리를 위해 Redux-thunk query또한 추가 되었습니다. Redux는 리액트를 비롯하여 다른 라이브러리, 프레임워크에서 사용이 가능합니다. React-Redux는 Redux를 React만을 위해 사용하려고 등장한 라이브러리 입니다. 불필요한 리렌더링을 방지하고 동작을 최적화 하기위해 등장한 것으로 알고 있습니다. 이러한 서드파티 라이브러리 들이 사용되던 시기에 Recoil이 등장합니다. Recoil은 리액트 만을 위해 생겨난 first..

사탕 게임 [백준 3085] - python

풀이 접근 방법 : 1. 브루트 포스로 풀어주었다. O(n^4)이 나올걸로 예상했는데 최대 N의 크기가 50이라 괜찮을것 같았다. 2. 백트래킹을 잘 적용했고 행과열 에서 최댓값 가져오는 로직도 잘 나온것 같다 import sys input = sys.stdin.readline def BOJ3085() : directions = [[1, 0], [-1, 0], [0, 1], [0, -1]] def getMaxiMumCandy(arr) : n = len(arr) answer = 1 for i in range(n) : cnt = 1 for j in range(1, n) : if arr[i][j] == arr[i][j-1] : cnt += 1 else : cnt = 1 answer = max(answer, c..

React 상태관리🌱외 minor concept

상태 React에서는 컴포넌트 기반의 코드를 작성하게 됩니다. 컴포넌트는 여러 곳에서 재사용을 할 수 있고 추상화를 잘 이용하면 가독성이 좋은 코드를 작성하게 해줍니다. 컴포넌트는 상태를 가집니다. 예를 들면 이 블로그의 라이트/다크 모드, 카카오톡 대화창의 안읽은 메시지수 와 같은것들은 상태입니다. 상태는 사용자에게 보여지는 것을 의미하고 상태의 변경은 렌더링을 새로해주어야 함을 의미합니다. 사용자가 블로그의 라이트 모드에서 다크모드를 눌렀으면 어두운 화면을 보여주어야 하고 카카오톡 대화창의 메시지를 전부 읽었다면 안읽은 메시지 수는 0, 하나씩 올때마다 카운트를 올려주어야 할 것입니다. 컴포넌트는 자신이 정의한 상태를 가질수 있고, 서버로부터 데이터를 받아 자신의 상태로 정의할 수도 있고, 부모 컴포..