react
[React] Proxy를 활용한 Custom Lazy Import
[React] Proxy를 활용한 Custom Lazy Import
2024.05.24React.lazy()React에서 코드 분할을 목적으로(Chunk 분리) 컴포넌트를 Dynamic Import 할 때 React.lazy() 함수를 사용한다. 컴포넌트가 필요한 시점에만 로드되기 때문에, 로딩 중 표시할 컴포넌트나 메시지는 를 활용하여 설정한다. 여러 개의 lazy 컴포넌트를 묶어서 fallback을 한 번에 표시할 수도 있다. 또한, React.lazy()로 불러오려는 컴포넌트는 기본적으로 default export를 사용해서 내보내야 한다.// Child.tsxexport default function Child() { /* ... */ }// Parent.tsximport { Suspense } from 'react';// 컴포넌트 바디에서 호출하면 정상 작동하지 않으므로 주의co..
[Vite] 초기 로드 시간 개선을 위한 Vendor Chunk 쪼개기
[Vite] 초기 로드 시간 개선을 위한 Vendor Chunk 쪼개기
2024.05.24Intro프론트엔드 영역에선 .jsx, .tsx, .vue 등의 확장자를 가진 파일을 사용하지만 브라우저는 이를 이해하지 못한다. 때문에 이러한 파일들은 모두 .js 파일로 변환해야 한다. 모든 파일을 하나의 .js 파일로 만들 수 있지만 이 방식은 성능에 부정적인 영향을 줄 수 있으므로 권장되지 않는다. 대신 여러 .js 파일(chunks)로 변환한 뒤 필요한 순간에만 로드(지연 로딩)하는게 성능에 더 유리하다. 특히 초기 로딩 시간을 줄일 때 유용하다. Vite, Webpack 같은 번들러는 보통 index, vendor 두 개의 메인 chunk를 생성한다. 참고로 Vite 2.9 버전부턴 Production 종속성 모듈이 index chunk에 포함된다.index : App.tsx와 같은 어플리케이..
[React/JS] 드래그한 문자열 분리(랩핑)하기 / Selection API
[React/JS] 드래그한 문자열 분리(랩핑)하기 / Selection API
2024.05.21아래와 같은 문자열이 있을 때 마우스로 드래그해서 텍스트를 선택할 때마다 태그로 감싸도록 구현하는 게 목표. Pharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissimPharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissimPharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissim 드래그한 문자열 랩핑❶ 마우스 클릭/텍스트 드래그/클릭 해제 → onMouseUp 이벤트 호출 ❷ 선택한 영역에 대한 Selection 객체 획득const selection =..
[React] 리액트 동시성 렌더링(Concurrent) 톺아보기
[React] 리액트 동시성 렌더링(Concurrent) 톺아보기
2024.05.20사용자가 사용하는 UI는 여러 부분으로 구성되어 있다. 일반적으로 폼 입력 필드는 상호 작용에 즉각적으로 응답하지만, 많은 양의 필터링 목록 같은 부분은 응답하는데 오랜 시간이 소요될 수 있다. React는 기본적으로 동기적인 방식으로 렌더링하는데, UI의 느린 작업(필터링 목록 등)이 다른 빠른 작업(입력 폼 등)을 차단하여 응답이 느려지는 현상이 발생한다. 💡 Render-blocking: Concurrent 기능을 사용하지 않을 때 React는 컴포넌트를 동기적으로 렌더링 하며, 렌더링을 시작하면 예외가 아닌 이상 렌더링을 중단할 수 없다. 즉, 렌더링이 끝나야만 다른 작업을 수행할 수 있다. React 18 버전에 공개한 Concurrent 기능은 이런 문제를 해결하기 위해 개발됐다. Concu..
[React] 대수적 효과 Algebraic Effect
[React] 대수적 효과 Algebraic Effect
2024.05.18TL;DR정의부수 효과를 추상화하는 방식 중 하나부수 효과를 발생시키는 연산(Effect)과 그 연산을 처리하는 핸들러(Effect Handler)로 구성코드 관리 방식코드 조각을 감싸는 맥락(context)으로 책임 분리특정 컴포넌트를 감싸는 부모 컴포넌트에게 역할 위임React에서 대수적 효과 — Suspense, ErrorBoundary로딩 UI, 에러 표시 역할을 특정 컴포넌트로 감싸는 형태로 분리자식 컴포넌트에서 발생한 부수 효과를 부모 컴포넌트에서 캐치하고 처리대수적 효과의 장점순수하지 않은 동작에 대한 책임 분리선언적(declarative) 코드 작성 가능What과 How를 분리하여 코드 가독성과 유지보수성 향상 대수적 효과란?대수적 효과는 부수 효과를 다루는 방식 중 하나로, 부수 효과를 ..
[React] 리액트에서 Rendering 렌더링이란?
[React] 리액트에서 Rendering 렌더링이란?
2024.05.16TL;DR마운트 : 컴포넌트가 최초로 DOM에 삽입되는 과정. 컴포넌트 생명 주기에서 한 번만 발생렌더 : 컴포넌트를 실행해서 변경사항을 계산(컴포넌트 출력 결정)하는 과정. 새로운 가상 DOM을 생성하고 이 새로운 가상 DOM과 이전 가상 DOM을 비교하여 실제 DOM에 반영할 변경사항 파악커밋 : 렌더 단계를 통해 파악된 변경사항들이 실제 브라우저 DOM에 적용되는 과정 렌더링이란일반적으로 렌더링(Rendering)은 아래 2가지 과정을 지칭한다. HTML / CSS / JS로 작성된 문서를 해석(파싱)해서 브라우저에 시각적으로 출력하는 과정서버에서 데이터를 HTML로 변환해서 브라우저에게 전달하는 과정(SSR) 반면 리액트에서 말하는 렌더링은 브라우저 DOM 수정 비용을 줄이기 위해 수행하는 작업을..
[React/JS] Promise 프로미스를 활용한 UX 개선 — 턴 미루기
[React/JS] Promise 프로미스를 활용한 UX 개선 — 턴 미루기
2024.05.16동기 작업을 기다리는 프로미스프로미스는 모든 동기 작업을 완료한 후에 실행할 수 있다. 아래 예시에서 then 후속 처리 메서드에 넘긴 console.log는 절대 실행되지 않는다.// 코드 참고 via 오늘의 프로그래밍new Promise((resolve) => { console.log('1'); // 동기 영역 resolve('2');}).then(console.log); // 비동기 영역let i = 0;while (true) { i += 1;} 프로미스 생성자에 넘긴 콜백 함수는 동기적으로 처리하므로 콘솔에 1을 출력한다. resolve 함수가 실행되면 프로미스는 이행(fulfilled) 상태가 되고 결과 값과 함께 새로운 프로미스를 리턴한다. 그럼 then 후속 처리 메서드로 실행 턴이 넘..
[React] 리액트 Profiler 프로파일러의 Hook 순서
[React] 리액트 Profiler 프로파일러의 Hook 순서
2024.05.16리액트 컴포넌트의 리렌더링 원인을 파악할 때 리액트 개발자 도구의 Profiler(프로파일러) 탭을 활용한다. 만약 Profiler 탭에서 Hook 1 changed를 표시한다면, Hook 1은 Components 탭 → 해당 컴포넌트의 hooks 항목에서 1번째 내장 훅을(useState 등) 가리킨다. 이때 주의할 점은 Profiler에서 훅을 카운트할 때 useContext, 커스텀 훅은 생략한다는 것이다. 대신 커스텀 훅은 내부에 있는 모든 내장 훅(useContext 제외)을 카운트 한다. 예를 들어 내장 훅 1개와 커스텀 훅을 사용하는 컴포넌트가 있다고 가정해보자. 커스텀 훅 안에선 내장 훅 2개를 사용하고 있다. 그럼 이 컴포넌트의 훅 인덱스는 컴포넌트 내장 훅 1, 커스텀 훅 내장 훅 2,..
[JS/React] input 필드에 숫자만 입력 허용하기 (한글 입력 방지)
[JS/React] input 필드에 숫자만 입력 허용하기 (한글 입력 방지)
2024.05.16text 타입일 때onKeyDown, onKeyPress 이벤트는 핸들러 안에서 e.preventDefault() 메서드를 호출하면 입력을 막을 수 있다. 하지만 한글을 포함한 CJK 문자(조합 문자)는 메서드를 호출해도 그대로 입력된다. 이 방법은 숫자나 영어 입력을 막을때만 유효하다. 아래 방법으로 해결할 수 있다.export default function App() { const OnKeyDown = (e) => { e.preventDefault(); }; return ( Only allow numbers in input Text Type );} 💡 React에선 onKeyDown → onKeyPress → onC..
[Next.js] 라우트 변경 / 새로고침 취소하기 (네비게이션 가드)
[Next.js] 라우트 변경 / 새로고침 취소하기 (네비게이션 가드)
2024.05.14회원가입, 글쓰기 등 입력 Form 페이지에서 실수로 다른 링크를 클릭하거나, 저장하는 것을 깜빡하고 다른 페이지로 이동하면 유저 입장에서 무척 짜증나는 상황이 된다. 처음부터 폼을 다시 작성하거나 수정해야 하기 때문이다. 임시 저장 기능이 있다면 괜찮지만, 그렇지 않다면 페이지 이탈에 대한 Confirm 단계를 추가해서 사용성을 개선할 수 있다. 실제로 여러 웹 서비스에서 Form 페이지 이탈시 ‘저장하지 않은 내용은 삭제된다’는 안내 문구를 띄운다. 구현 방법NextJS 자체적으로 여러 라우트 이벤트를 제공하는데 routeChangeStart는 라우트 변경을 시작할 때 트리거되는 이벤트다. 페이지를 언로드(새로고침)할 땐 window 객체에서 발생하는 beforeunload 이벤트를 이용하면 된다. ..
[Next.js] Next/Image base64 placeholder 만들기 (블러 처리된 플레이스홀더)
[Next.js] Next/Image base64 placeholder 만들기 (블러 처리된 플레이스홀더)
2024.05.14Next/Image는 크게 로컬 이미지(정적 이미지)와 리모트 이미지(다이나믹 이미지)로 나뉜다. /public 폴더에 저장한 로컬 이미지는 빌드 타임에 import한 이미지 파일의 width, height를 자동으로 지정하고 base64로 인코딩한 이미지가 생성된다. 따라서 추가 작업 없이 블러 처리된 Placeholder를 사용할 수 있다.// public 폴더에 있는 me.png 파일을 사용하고 있다; 그 외 상황은 리모트 이미지로 구분한다. 이때 블러 처리된 Placeholder를 사용하려면 plaiceholder 같은 라이브러리를 사용하거나 캔버스 API를 이용해서 4×4 정도의 사이즈(보통 300바이트 미만)로 줄인 후 base64로 변환하는 작업이 필요하다. NextJS 공식 문서에선 10 ..
[Next.js] Next/Image의 sizes 속성 톺아보기
[Next.js] Next/Image의 sizes 속성 톺아보기
2024.05.13sizessizes는 미디어 조건에 해당하는 이미지의 최적 크기를 지정하는 속성이다. 💡 고유 크기(로드된 이미지 크기)는 next.config.js 파일의 imageSizes, deviceSizes 속성 값을 기준으로 결정된다(srcset). 사용자 디바이스 크기에 따라 아래 중단점 중 하나가 고유 크기가 된다.deviceSizes 기본값 : [640, 750, 828, 1080, 1200, 1920, 2048, 3840]imageSizes 기본값 : [16, 32, 48, 64, 96, 128, 256, 384] Next/Image에서 layout='responsive' 혹은 layout='fill' 일 때 sizes 속성을 지정하지 않으면 항상 100vw 너비의 이미지를 로드한다. 만약 ~500p..