전체 글

React One Simple trick to optimize React re-renders (번역글) 🤔

이 글은 아래 출처의 글을 번역한 글입니다. 오역과 의역을 자주 사용합니다. 리액트 리렌더와 관련된 블로그 포스트를 준비하고 있었는데 우연히 작은 React 지식을 발견했고 여러분께 도움이 되리라 생각합니다. HTML 삽입 미리보기할 수 없는 소스 이 블로그 포스트를 읽은 후에 Brooks Lybrand는 이 트릭을 구현했고 아래는 그 결과 입니다. HTML 삽입 미리보기할 수 없는 소스 흥미롭나요? 단순한 예제와 함께 살펴보고 여러분의 앱을 위한 실용적인 예제에 대하여 이야기 해봅시다 An example // play with this on codesandbox: https://codesandbox.io/s/react-codesandbox-g9mt5 import * as React from 'react..

Javascript Colocation (번역글) 🤔

이 포스트는 아래 출처의 글을 번역한 글입니다. 의역과 오역을 자주 사용합니다. 우리 모두는 유지보수가 쉬운 코드를 원합니다. 그래서 우리는 코드를 유지보수가 쉽고 이해하기 쉽게 만들기 위한 최선의 의도와 함께 시작을 합니다. 시간이 지나고 코드가 커질수록 의존성을 관리하기는 어려워 집니다. 프로젝트가 커질 수록 코드가 '사소한 지식'이 되고 '기술 부채'에 기여하는 코드의 양은 증가해져 갑니다. 저는 제 코드를 저 뿐만 아니라 동류, 미래의 코드 관리자, 6개월 뒤에 저를 위해 관리가 수월하게 하고 싶었습니다. 모두가 동의할 수 있다고 생각합니다. 이것은 좋은 생각이고 우리가 우리의 코드에서 갈구해야 하는 것이라는 것을. 이것을 성취하기 위한 기술과 다양한 도구 들이 많이 존재합니다. Let's tal..

React The State Reducer Pattern with React Hooks (번역글) 🤔

얼마전, React 컴포넌트를 향상시키기 위한 state reducer pattern이라고 불리는 새로운 패턴을 개발했습니다. 이것을 downshift 내부 상태를 업데이트 하고 싶어하는 사람들에게 훌륭한 API 사용을 가능하게 하기 위해 downshift에서 사용하였습니다. 만약 downshift에 익숙하지 않다면, 접근 가능한 autocomplete/typeahead/dropdown 컴포넌트들과 같은 것을 만들 수 있는 '향상된 input' 컴포넌트 라는 것만 알면 됩니다. `isOpen`, `selectedItem`, `highlightedIndex`와 `inputValue와 같은 상태를 관리한다는 것을 아는것은 중요합니다. Downshift는 현재 prop component를 render하도록 구..

Javascript Don't Use Javascript Variables Without knowing Temporal Dead zone (번역글 + 생각) 💀

아래 출처의 글 중 일부를 번역하고 제 생각을 넣은 글입니다. 의역과 오역을 자주 사용합니다. 아래의 코드중 어떤 코드가 에러를 발생시킬 것 같나요??? 아래의 코드는 인스턴스를 생성합니다. 그리고 사용된 클래스를 정의합니다. new Car('red'); // 동작할까요?? class Car { constructor(color) { this.color = color; } } 두번째는 호출을 한후에 함수의 정의를 합니다. greet('World'); // 동작할까요? function greet(who) { return `Hello, ${who}!`; } 첫번째 코드는 ReferenceError를 발생시킵니다. 두번째는 정상적으로 동작하구요 만약 답변하지 못했거나 틀렸다면 Temporarl Dead Zone..

React theStateReducerPattern (번역글) 🤔

이 포스트는 아래 출처의 글을 번역한 글 입니다. 오역과 의역이 있을 수 있습니다. 이 포스트는 기록을 남기기 위한 이유로 이곳에 존재합니다. an updated version of this blog post with React Hooks 이 글을 읽어주세요! 또한 보다 일반적인 개념인 "제어의 역전"에도 관심이 있을 수 있습니다. 지난주 @notruth(downshift 프로젝트의 새로운 컨트리뷰터)는 "closeOnSelection" 속성(박스에서 복수 선택을 했을시) 이슈를 추가해주었습니다. 여러분이 진정으로 알아야 할 것은 특정 시나리오에서 유저의 동작에 기초하여 downshift가 어떻게 상태를 업데이트하는지에 대한 결정이 @notruth가 구현에 대해 원하는 것과 일치하지 않는다는 것입니다. ..

Javascript undefined/undeclared/null and NaN 🧟

헷갈릴수 있는 undefined/undeclared/null 과 NaN에 대하여 정리하려고 합니다. undefined (아무런 값도 할당되지 않았다) 변수가 선언이 된 이후에 undefined로 초기화된 상황입니다. 스코프에 변수가 선언이 되었으나 아직 아무런 값도 할당되지 않았다는 것을 의미합니다. 변수는 선언 -> 초기화 -> 할당의 순서를 가지게 됩니다. var의 경우 호이스팅이 일어나게 될때 선언이 끌어올려지고 undefined로 초기화가 이루어 집니다. var test; console.log(test) // undefined console.log(typeof test) // undefined undeclared (선언조차 되지 않았다) console.log(name) // Uncaught Ref..

React React-query InfiniteQuery 예제 ∞

React 쿼리의 InfiniteQuery 사용에 대한 한글로 된 예시가 많은것 같지 않아 작성해보려 합니다. React-query의 InfiniteQuery를 사용하면 다음 page의 데이터를 간편하게 불러올 수 있습니다. 준비해줘야 할것은 pageParam을 입력받는 api 요청 함수, getNextPageParam에서 pageParam을 올려주면 됩니다. keepPreviousData 옵션을 이용하면 다음 데이터가 fetching 되기 전까지 이전 데이터를 유지할 수 있고 getPreviousPageParam와 fetchPreviousPage를 이용하면 이전 페이지의 데이터를 가져올 수 도 있습니다. 정말 다양한 옵션과 쓰임새가 있을 수 있는데 기본이 가장 중요하므로 기본만 구현된 예제를 작성해 보..

이모티콘 [백준 14226] - python

from collections import deque import sys input = sys.stdin.readline def BOJ14226() : S = int(input().strip()) graph = [[-1 for _ in range(S+1)] for _ in range(S+1)] # 개수 별 최소 시간 graph[1][0] = 0 def bfs() : queue = deque() queue.append([1, 0]) while queue : curr_node, curr_clip = queue.popleft() # 클립 보드에 현재 화면에 있는 것을 넣는 과정 if graph[curr_node][curr_node] == -1 : graph[curr_node][curr_node] = graph..

Browser B/F cache 💰

B/F cache는 Back/Forward Cache라는 뜻을 가지고 있습니다. 브라우저에서 뒤,앞으로 이동할때 로드를 빠르게 하기위한 동작입니다. 브라우저에서는 이전 페이지를 snap shot을 찍어서 메모리에 올려놓습니다. 사용자가 뒤로 가기를 하면 메모리에서 가져와 그대로 보여주는 것입니다. 이렇게 하면 이전 페이지에서 리소스들의 요청을 보내지 않을 수 있고, 스크립트의 재실행 또한 하지 않습니다. 따라서 사용자에게 빠르게 보여줄 수 있습니다. 브라우저 호환성 safari, firefox에서는 전부 지원되어 왔었고 chrome에서는 버전 86부터 점진적으로 적용해왔다가 버전 96부터는 모든 chrome 유저가 사용할 수 있도록 지원되고 있다고 합니다. bfcache 기본 사항 bfcache는 페이지..

네트워크 Browser 요청의 제한🌱 (HTTP/1.1, HTTP/2)

HTTP/1.0, HTTP/1.1 프로토콜을 이용할때는 브라우저에서 동시에 요청을 보내는 개수에 제한이 있습니다. 그래서 HTTP/1.0, HTTP/1.1 프로토콜을 이용할때는 외부 resource를 요청할때 예상치 못한 delay를 경험할 수 도 있습니다. css, js일 경우에는 inline으로 변경을 하거나 npm을 이용하거나 webpack과 code split을 적절히 이용, http/2 프로토콜로 변경, 브라우저 요청 제한은 한 도메인에만 해당하므로 여러 도메인에서의 요청으로 변경하면 이를 해결할 수 있습니다. * http/2는 nginx에 http2 모듈을 설치하면 적용할 수 있습니다. 아래의 글은 http/1.1을 이용할 때 브라우저에서의 요청 제한에 대해 알아보고 그 외에 의식의 흐름대로 ..