밝을희 클태

요즘 회사에서 프로젝트를 진행할 때 주로 Remix 풀스택 프레임워크를 사용하고 있다.그런데 사용하면서 불편한 점이 하나 있다.바로 서버 사이드 액션을 호출할 때 반드시 action 함수를 사용해야 한다는 점이다.물론 Remix의 구조는 장점도 많지만,개인적으로는 그 장점을 상쇄할 만큼 불편한 부분도 있다.예를 들어, 복잡한 코드 흐름 속에서 useFetcher()를 사용한 뒤,그 상태 값을 useEffect 내부에서 다시 검증해야 한다는 점이 매우 번거로웠다.간단한 프로젝트라면 상관없지만,파일 하나에 코드가 길어질수록 A 함수에서 서버에 요청을 보내고,응답을 B 영역(useEffect 등)에서 따로 처리해야 하는 구조는코드의 흐름이 끊겨 보여서 읽고 쓰기 모두 어려웠다. 그러다가 문득 생각했다.acti..

위 이미지처럼 많은 요소를 보여주는 리스트가 있다.여기에 몇 가지 문제가 있는데,트리거를 통해 해당 화면을 띄울 때, 즉각적으로 뜨지 못하고 약 1초 정도의 딜레이가 발생끌 때도 동일한 문제가 발생각 요소를 체크할 때 약 0.5초의 딜레이가 발생이 모든 문제의 원인은 현재 DOM Tree에 너무 많은 요소가 존재해서,렌더링 성능에 치명적인 영향을 주고 있기 때문이다.INP 측정 결과 (환경: CPU 스로틀링 ×4)결과는 처참했다. 기간7.72 초입력 지연65 ms처리 기간7,278 ms표시 지연380 ms✅ INP란?INP (Interaction to Next Paint)→ 사용자가 클릭, 탭, 키보드 입력 등 "상호작용"을 했을 때,화면에 실제 반영될 때까지 걸린 시간을 측정하는 지표또한 각 요소의 체..

포트폴리오를 만드는 중인데 외부 라이브러리 없이 만드는 중이라 직접 구현한 이미지 슬라이더를 블로그에 정리를 하려고 한다.구현 방법이미지가 보이는 고정된 영역, 해당 영역 밖으로 넘어가는 요소들은 overflow: hidden을 사용해서 숨김위의 영역 뒤에 이미지들을 삽입버튼을 클릭할 때마다 이미지들의 위치를 옮겨준다. container├── slider-container│ ├── button (left arrow)│ ├── slider-img-container│ │ └── img-inner-container│ │ └── Image│ └── button (right arrow)└── circle-container 사용하는 변수들와 훅 const [imgWidth, setI..