재안 IT 공부 일기장

[1] Promise   Promise에 대해 공부하기 전까지 Promise를 그냥 사용했었다. 비동기 함수들의 실행 순서 보장할 수 있고 콜 스택에서 우선순위가 높다. 이정도만 알고 api 호출하면 반환 값으로 인지하며 사용하면서 익혔다. 그러나 최근 일은 아니지만, 리액트의 Suspense를 처음 접하면서 Suspense에 대해 알아보다가 Suspense의 fallback이 나오는 조건으로 `throw new Promise...` 이런걸 봤는데 당시 되게 충격이었다. 기존에 알고 있던 Promise에 관련된 지식으로는 도저히 이해를 못하겠던 코드였기 때문이다.   그래서 그때부터 Promise에 대해 공부하기 시작했고, Promise 동작을 조금씩 따라 구현해봤다. 처음엔 되게 간단한 코드였지만, 좀..

요즘들어 writable text node가 필요한 곳이 많다.   이나 로 텍스트를 표현하다가 클릭 또는 더블 클릭을 하면 으로 바꿔준 후, blur에서 다시 이나 로 바꾸는 작업을 여러번 했는데 문득 다른 방법은 없을까? 더 쉬운 방법은 없을까? 라는 생각이 들었다.   개인적으로 상태를 최대한 줄이려고 하는데 해당 전환 작업 때문에 상태를 추가하는 것이 그닥 대키지 않고 상태 개수를 최소화 하기 위해서 이벤트 위임해 전환 상태를 관리하기에는 코드가 범용적이지 못하다.   그래서 HTML의 editable 속성을 활용해서 내가 원하는 writable text node를 만들었다. 전문적인 텍스트 에디팅 기능을 제공한다. 해당 컴포넌트는 보통의 이나 처럼 글자 추가와 삭제가 가능하며 undo (ctrl..

개요[1] 요약[2] 기능 소개[3] 코드 [1] 요약   이미지 컴포넌트는 사용중인 라이브러리꺼 쓰는게 제일 좋지만 이번에 직접 한 번 만들어 봤다. 이번에 만든 이미지 컴포넌트를 짧게 설명하자면 다음과 같다.   다양한 로딩 전략을 지원하고 성능 최적화를 위한 여러 기능들을 내장하고 있다. 또한, 모듈식 구조로 설계되어 필요에 따라 기능을 선택적으로 사용할 수 있어 번들 크기를 최소화할 수 있다.  [2] 기능 소개 1. 이미지 스타일  기본적으로 프롭스에서 fit, position, center, blur 값을 받아 실제 이미지 태그에 전달한다. 기본 값이 설정되어 있어 값을 따로 주지 않아도 기본적인 스타일이 적용된다. 추가적으로 반응형 이미지를 위한 srcSet과 sizes 속성도 프롭스로 받아..

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

개요[1] useOptimistic[2] reference [1] useOptimistic useOptimistic이란?  리액트 19 부터 지원하는 훅으로 optimistic update를 쉽게 구현할 수 있도록 해준다. 사용시 Concurrent Mode가 적용되서 nonblocking 방식으로 상태를 업데이트할 수 있다. nonblocking과 Concurrent Mode에 대해 알고 싶다면 핵심만 뽑아서 정리했으니 아래의 포스트를 참고 바란다.https://jaeano.tistory.com/entry/React-useTransition-Concurrent-Mode-%EC%89%BD%EA%B2%8C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0 [React] useTransiti..

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

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