react
[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..
[React] 캐로셀(Carousel) 작동 방식 살펴보기
[React] 캐로셀(Carousel) 작동 방식 살펴보기
2024.05.13캐로셀 구조많은 웹사이트에서 여러 이미지를 슬라이드 형식으로 보여주기 위해 사용하는 캐로셀 뷰어는 생각보다 간단하게 구현할 수 있다. 캐로셀 뷰어의 DOM 구조는 대략 아래와 같다. 캐로셀 아이템 Wrapper : 넘침 영역 숨김 처리 overflow: hidden; width: 100%; height: 100%;캐로셀 아이템 Parent : 여러개의 캐로셀 아이템을 감싸는 부모 ⚡️캐로셀 아이템들의 수평 쌓임을 위해 Flexbox 레이아웃 적용스크롤바 숨김 처리전환 효과(transition)다음 버튼을 누를 때마다 좌측으로 이동 transform: translateX(-100%|-200%|...)캐로셀 아이템 : 1개 아이템만 보이도록 처리 width: 100%; ..
[React] 노드의 트리 위치를 나타내는 useId 훅
[React] 노드의 트리 위치를 나타내는 useId 훅
2024.05.13useId 소개useId()는 React 18 버전에 도입된 훅으로, 노드의 트리 위치를 나타내는 고유 ID(Base32 문자열)를 반환한다. 컴포넌트 트리가 여러 자식(children)으로 분기될 때마다 ID에 추가 비트를 삽입해서 각 자식의 위치를 나타낸다.:r0: (부모 컴포넌트):r1: (자식 컴포넌트1):r2: (자식 컴포너트2)... 주로 서버 / 클라이언트에서 생성한 트리(tree) 사이의 하이드레이션(hydration) 불일치(mismatch)를 방지하기 위해 사용한다. 즉, useId가 생성한 고유한 ID를 이용해 원활한 하이드레이션을 돕는 목적인 것. 리스트의 key를 만들기 위한 목적이 아니므로 주의한다. 출력값 예시💡 : (콜론)은 querySelector 같은 CSS 셀렉터에선 ..
[TS] 엘리먼트의 기본 어트리뷰트 인터페이스/타입 사용하기
[TS] 엘리먼트의 기본 어트리뷰트 인터페이스/타입 사용하기
2024.05.12HTMLAttributescheckbox 타입의 엘리먼트를 사용하는 Toggle 컴포넌트를 만든다고 가정해보자. 엘리먼트는 autoFocus, required, readOnly 등의 기본 어트리뷰트 가진다. 만약 엘리먼트가 기본적으로 받을 수 있는 어트리뷰트를 Toggle 컴포넌트의 props로 넘기고 싶다면? 모든 어트리뷰트에 대한 인터페이스를 정의해야 할까? 이땐 InputHTMLAttributes 타입을 사용하면 된다. 그럼 각 어트리뷰트의 prop 타입을 일일이 정의하지 않아도 된다. 제네릭 T는 onChange 이벤트 핸들러의 엘리먼트 타입이 들어가므로 HTMLInputElement 같은 타입을 넘기면 된다.// InputHTMLAttributes 구조 | node_modules/@types/r..
[JS] 왜 JSX 안에선 if 문을 사용할 수 없을까? 표현식과 문 차이점
[JS] 왜 JSX 안에선 if 문을 사용할 수 없을까? 표현식과 문 차이점
2024.05.12TL;DR￭ 자바스크립트 프로그램은 일련의 문(Statement)으로 구성된다￭ 각 문은 변수 생성, if, else 조건 실행, 루프 시작과 같은 작업을 수행하는 명령이다￭ 표현식은 값을 생성하는 자바스크립트 코드다 → 표현식은 항상 값을 생성한다￭ 모든 함수의 인자는 표현식이다. 문은 값을 생성하지 않으므로 함수 인자에 사용할 수 없다￭ 문은 프로그램을 하나로 묶는 단단한 구조이며, 문의 세부사항은 표현식으로 채워진다￭ 표현식은 단독으로 존재할 수 없고, 항상 문의 일부다￭ 문은 표현식 슬롯을 제외하곤 본질적으로 비어있다￭ 문이 비어 있을 때도 표현식은 항상 문의 일부다￭ JSX의 {} 중괄호는 표현식 슬롯을 만든다￭ 표현식 슬롯에선 값을 생성하지 않는 문은 사용할 수 없다 표현식 | Expressi..