재안 IT 공부 일기장

[React] useTransition, Concurrent Mode 쉽게 이해하기

개요[1] useTransition[2] concurrent mode[3] useTransition Details[4] reference [1] useTransition useTransitoin이란?  리액트 18에 추가된 훅으로 nonblocking 방식으로 상태(state)를 업데이트할 수 있게 해준다. nonblocking이란?  기존 리액트의 동기적 업데이트 방식에서는 상태가 업데이트되면 그에 따른 렌더링 작업이 바로 실행되는데, 해당 작업이 실행될 때, 사용자의 인터랙션이 발생하면 해당 인터렉션 처리가 지연된다. (blocking)   이때, useTransition의 startTransition을 통해 특정 상태 업데이트를 낮은 우선순위로 예약해 사용자 인터랙션을 우선 순위로 처리하게 된다. ..

[React] useOptimistic 쉽게 이해하기

개요[1] useOptimistic[2] reference [1] useOptimistic useOptimistic이란?  리액트 19 부터 지원하는 훅으로 optimistic update를 쉽게 구현할 수 있도록 해준다. 사용시 Concurrent Mode가 적용되서 nonblocking 방식으로 상태를 업데이트할 수 있다. optimistic update란,  비동기 통신과 같은 대기 상황이 발생했을 때, 결과를 기다리지 않고 기대되는 결과를 미리 UI에 반영하는 기법이다. 실제 결과와 기대된 결과가 다르다면, 롤백과 같은 상황에 맞는 조취를 하면 된다. const [optimisticValue, update] = useOptimistic( state, // updateFn (curr..

[Typescript] node 환경에서 빌드하기 tsconfig.node.json

이전 프로젝트에서 겪었던 특이사항을 기록하려고 한다. 노드환경에서는 빌드가 안되네?  이전 진행했던 프로젝트에서 Git Action을 통해 CI/CD를 수행했다. Git Action의 workflow를 통해 프로젝트를 빌드를 했는데 도중 에러가 발생했다. workflow 실행 중 스크립트에 적었던 `npm run build`에서 에러가 발생했다. 그래서 해당 에러 로그를 시작으로 빌드를 성공할 때까지 리서치하며 tsconfig.node.json의 속성을 하나 하나 바꿨다. 에러가 꼬리에 꼬리를 무는 형식으로 나와서 이에 관련해서 백지인 상태에서도 잘 따라갈 수 있었다. 최종 tsconfig.node.json은 아래와 같다.{ "compilerOptions": { "tsBuildInfoFile": ..

[CSS] CSS만으로도 렌더링 속도 높이기 contain, content-visibility, contain-intrinsic-size

개요[1] contain[2] content-visibility[3] contain-intrinsic-size[4] reference 이번 주제의 속성을 이해하려면, 브라우저 렌더링 프로세스에 관한 기본 지식이 바탕되어야 한다.[1] contain contain이란?  document dom tree에서 특정 dom의 하위 섹션을 격리할 수 있게 하는 css 속성이다.이렇게 격리된 서브트리 내에서는 레이아웃, 스타일, 페인트, 사이즈 계산 등이 외부와 분리되어 이루어진다.1. `contain: size;`  해당 요소의 박스를 하위 요소들을 검사할 필요 없이 레이아웃 할 수 있도록 보장한다. 이를 통해 브라우저는 하위 요소들을 검사하지 않고 해당 요소의 크기를 결정할 수 있게 된다.  레이아웃은 브라우저..

프론트엔드 성능 사실 프론트엔드 개발자가 관여할 수 있는 부분이 많은 편은 아니다. 브라우저와 웹표준이 발전하면서, 성능 튜닝의 많은 부분을 브라우저가 알아서 해준다. make it work, make it right, make it fast시간 초기 구동 시간     - 파일 다운로드          - 최신 브라우저는 대체로 도메인 당 최대 6개의 접속만 동시에 처리 (HTTP/1.1 기준)          - 파일 개수가 6개 이상이면 그 다음 부터는 다운로드가 지연됨          - 별도 도메인과 CDN 등으로 분산하는 것도 방법          - HTTP2에서는 접속을 하나만 생성해서 모든 요청을 다 처리함          - RFC2616 Section 8.1.4에는 한 도메인당 최대 2..

ES6는 이해하기 쉽고, 사용하기 편리한 문법이 많다.- ECMAScript 2015부터는 언어 내부적인 동작에 관환 명세는 거의 변화가 없다. - 새 버전의 언어에 추가될 기능은 깃허브 공개 저장소에서 공개적으로 명세 제안을 받고 토론과 심사를 거친 후 TC39위원회 승인을 거치면 공식 명세에 포함된다. - 모듈 불러오기 방식 : ESM(표준), CommonJS JS가 아닌 JS - TS, WebASM, Rust - 웹어셈블리의 경우 같은 기능을 하는 자바스크립트 코드에 비해 최적화 하지 않은 경우엔 9배 빠르고, 최적화 한 경우 21배 빠르다는 케이스 스터디의 발표가 있었다. - 하지만 브라우저 환경의 자바스크립트는 특수한 몇몇 상황(게임, 그래픽 처리 등)을 제외하면 지금보다 굳이 더 빠를 필요가 ..

CSS - CSS3는 없다. - CSS 명세가 방대해졌다. Layout- 크기와 위치 - CSS Box Model     - CSS 레이아웃의 기본이 되는 원리     - 엘리먼트의 크기를 정하는 표준     - box-sizing 속성으로 크기 계산 방식 변경 가능         - content; 너비와 높이를 설정하면, 컨텐츠 부분의 크기로 받아들이겠다.         - border-box; 너비와 높이를 보더까지 포함한 크기로 받아들이겠다. - runlayout.com Flexbox - 부모/자식/자식들 사이의 관계를 직관적으로 정의 - 이전에는 12 Column Grid를 사용하기도 했었다. - 성배 레이아웃 문제를 해결 - flex-direction: row는 글쓰기 방향과 일치된다. (항상..

HTML5- 버전이 없는 Living Standard로 변화- 그래도 이전과의 차이를 두기 위해 HTML5라고 지칭한다. HTML6이 나오진 않을 것.- HTML 엘리먼트와 속성, 속성값은 특정한 의미를 지니도록 정의되었다.- 의미를 기술하기 위한 Microdata도 포함 (지메일 지원) - Microdata를 포함해도 구글 검색 우선순위 배치와 같은 이점이 아직은 없다. - 비주얼 요소를 의미하는 태그나 속성은 사라지거나 의미가 변함    - , 등등 옛날 기능을 브라우저 자체에서 지원하는 것이지 HTML5 명세에는 포함되지 않는다.- 멀티미디어, 네트워크 등 다양한 기능과 API 추가     - , , , srcset 등     - WebSocket, WebWorker, Web Storage, Hi..

타입스크립트로 리액트 프로젝트를 하던 중,와 리스트를 간단히 map 돌려서 컴포넌트로 반환하는 로직 여러 군대에서 발견되어혹시 번들링할 때 map 그대로 들어가나? 생각을 했다. 아래와 같은 구조를 통해 중복되는 부분을 추상화 했다. 일단 타입 정의 먼저,export interface ItemProps { id: number | string;}export type IteratingItemProps = { items: T[]; component: ElementType;};export type IteratingLayoutProps = IteratingItemProps & { container: ElementType;};export type ItemsIteratorProps = IteratingLayo..

[6] AI for Security Anomaly Detection - Find rare items or events which deviate significantly from the majority of the data. - Define normal events. - No need of data on faulty actions(behaviors). - Point Anomaly - Context Anomaly - Collective Anomaly @Point Anomaly - A single instance of data is anomalous if it's too far off from the rest. @Contextual Anomaly - The abnormality is context specif..