재안 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;`  해당 요소의 박스를 하위 요소들을 검사할 필요 없이 레이아웃 할 수 있도록 보장한다. 이를 통해 브라우저는 하위 요소들을 검사하지 않고 해당 요소의 크기를 결정할 수 있게 된다.  레이아웃은 브라우저..

프론트엔드 성능 사실 프론트엔드 개발자가 관여할 수 있는 부분이 많은 편은 아니다. 브라우저와 웹표준이 발전하면서, 성능 튜닝의 많은 부분을 브라우저가 알아서 해준다. 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는 글쓰기 방향과 일치된다. (항상..