HOME
[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 셀렉터에선 ..
[미립자팁] 은근히 유용한 ChatGPT Reply 기능
[미립자팁] 은근히 유용한 ChatGPT Reply 기능
2024.05.12얼마 전부터 ChatGPT에 Reply라는 기능을 사용할 수 있게 됐다. GPT 답변 내용 중 일부를 드래그하거나 더블 클릭하면 커서 위에 큰따옴표 아이콘이 표시된다. 클릭하면 하단 채팅창에 드래그한 문장이 삽입되고 추가 질문을 이어나갈 수 있다. GPT 답변 중 모르는 내용이 있거나 자세한 설명이 필요할 때 사용하면 유용한 기능.
복리이자(Compound Interest) 계산 방법
복리이자(Compound Interest) 계산 방법
2024.05.12복리이자는 투자한 금액에 대해 이자가 발생하고, 이 이자가 다시 원금에 더해져 다음 기간의 원금으로 계산되는 방식이다. 이로 인해 이자가 이자를 낳는 효과가 생겨 투자 금액의 성장이 기하급수적으로 증가할 수 있다. 복리 계산은 장기적인 저축이나 투자에서 그 효과를 가장 잘 볼 수 있으며, 시간이 길어질수록 더 큰 이익을 가져다 준다. 공식 $$\text{A} = \text{P} \times (1+\frac{\text{r}}{n})^{nt}$$ A : Amount / 미래 가치 (원금 + 이자)P : Principal / 원금r : Rate as a decimal / 소수로 나타낸 연이자율n : Number of compounding / 이자 발생 빈도 (월, 분기, 년 등)t : Time in years..
[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..
[TS] useQuery, useMutation의 제네릭 타입 살펴보기 / Base Query 훅 만들기
[TS] useQuery, useMutation의 제네릭 타입 살펴보기 / Base Query 훅 만들기
2024.05.12React Query에서 제공하는 useQuery, useMutation을 그대로 사용하면 항상 쿼리키와 쿼리 함수를 지정해야 하는 번거로움이 있다. API 유형에 따라 Base Query|Mutation 커스텀 훅을 만들어 두고 사용하면 쿼리키와 쿼리 함수를 일일이 지정하지 않고 여러 곳에서 재사용하기 좋다. 하지만 커스텀 훅을 만들 때 쿼리 타입을 지정하지 않으면 데이터가 unknown, any인 경우가 많아서 어떤 데이터를 다루는지 알기 어렵다. 쿼리 타입은 대부분 제네릭으로 되어 있는데 이를 잘 사용하면 타입을 보장 받으면서 데이터를 편리하게 다룰 수 있다. useQuery제네릭 타입 톺아보기 ⚡️export declare function useQuery ❶ TQueryFnData : 쿼리 함수 ..
[React] 리액트 쿼리(React Query) staleTime을 설정하는 3가지 방법
[React] 리액트 쿼리(React Query) staleTime을 설정하는 3가지 방법
2024.05.12React Query에서 staleTime은 쿼리의 만료 시간을 설정할 때 사용한다. staleTime이 지나면 쿼리의 캐시 데이터를 오래된 데이터로 간주하고 re-fetching을 시도한다. React Query에선 기본적으로 캐시 데이터 자체를 stale 데이터로 취급하기 때문에 staleTime의 기본값은 0이다. 하지만 변경 주기가 느린 데이터는 서버에 빈번하게 요청할 필요가 없기 때문에 staleTime을 적절하게 조절해주는 작업이 필요하다. 💡 중복 호출을 줄이기 위한 staleTime은 최소 20초 정도가 적당하다 — via tkdodo 1. 개별 쿼리 인스턴스에 staleTime 설정// v4useQuery('users', getUsers, { staleTime: 1000 * 60 });..
[Git] 병합(Merge) 충돌 방지를 위한 리베이스 Rebase
[Git] 병합(Merge) 충돌 방지를 위한 리베이스 Rebase
2024.05.12merge 충돌 방지를 위한 리베이스(Rebase) ⭐️PR 보내기 전 다른 사람이 새로운 커밋을 추가한 상태라면 충돌 방지를 위해 로컬 레포지토리를 최신화하고(upstream ⇄ origin 레포지토리 동기화), 현재 작업중인 기능/버그 브랜치의 base를 develop 브랜치의 마지막 커밋으로 변경하는 리베이스(Rebase) 작업이 필요하다 — 참고글1 | 참고글2 ❶ 현재 상태# 현재 위치 feature-branch 8번 커밋1 - 2 - 3 - 5 (devlop) \ 4 - 6 - 7 - 8 (feature-branch)develop 브랜치의 1~2 커밋 : 로컬 레포지토리의 develop 브랜치 커밋develop 브랜치의 3~5 커밋 : 원격(upstream) 레포지토리에서 새로..
[React] svg 파일 → 리액트 컴포넌트 변환하기 - React SVGR
[React] svg 파일 → 리액트 컴포넌트 변환하기 - React SVGR
2024.05.12기본 사용법설치yarn add "@svgr/cli"yarn add -D "@svgr/webpack" CLI 명령어💡 경로만 입력하면 svg path를 지정하는 것과 동일. -- double dash는 커맨드 옵션이 끝난다는걸 의미하므로(참고글) -- 뒤에 경로를 입력하면 svg path가 지정됨(옵션이 없다면 굳이 안붙여도 됨).# config 파일이 없을 때 # svgr -d svgr ./assets/icons/raw/bulb.svg -d ./assets/icons/dist# config 파일이 있을 때# svgr --config-file -d svgr --config-file ./svgr.config.js ./assets/icons/raw/bulb.svg -d ./assets/icons/dis..
[React] 리액트 Context API 렌더링 최적화하기
[React] 리액트 Context API 렌더링 최적화하기
2024.05.11TL;DR리액트에서 제공하는 ContextAPI를 사용하면 원하는 상태(값)를 전역적으로 사용할 수 있다. 컴포넌트끼리 특정 상태를 공유할 때도 유용하다. 하지만 Context.Provider 하위에서 컨텍스트를 구독하는 모든 컴포넌트는 값을 변경할 때마다 리렌더링 된다. Context.Provider 값이 업데이트되면 useContext 훅이 최신 컨텍스트 값을 사용해 컴포넌트 리렌더를 트리거하기 때문이다. 이처럼 ContextAPI는 렌더링 최적화에 일일이 신경써야하는 단점이 있다. 여러 최적화 방법중에서 상태/디스패치 단위로 컨텍스트를 쪼개는 방식이 가장 간단하다. 대신 Provider가 너무 많아지는 단점(Wrapper Hell)이 있다. Context 상태가 변경될 때마다 해당 Context.P..
[HTML/CSS] form 외부에서 form 연결 / document 객체로 form 접근하기
[HTML/CSS] form 외부에서 form 연결 / document 객체로 form 접근하기
2024.05.11form 외부에서 form 관련 요소 연결form 관련 요소(button, input 등)의 form 속성으로 어떤 form에 속할지(연결) 지정 할 수 있다. 주로 form 외부에 있는 form 관련 요소를 form에 연결할 때 사용한다. 이때 form 요소의 id 값과 form 관련 요소의 form 속성 값이 동일해야 하고, 같은 문서(document)에 있어야 된다. form 내부에 있는 form 관련 요소는 자동으로 해당 form에 속하므로 form 속성으로 명시하지 않아도 된다. Submit 💡 button 요소의 type 속성 기본 값은 submit이며, 클릭해서 양식을 제출하면 새로고침하는 기본 동작을 가진다. 새로고침을 방지하려면 form 요소 onsubmit 핸들러에 event.p..
[HTML/CSS] Tailwind CSS에서 형제 셀렉터(~) 사용하기
[HTML/CSS] Tailwind CSS에서 형제 셀렉터(~) 사용하기
2024.05.11Tailwind CSS 2.2 버전부터 peer-* variants로 형제 요소를 선택할 수 있다. input 요소에 peer 클래스를 정의해두면, 형제 요소에서 peer 클래스를 이용해 input 요소를 선택할 수 있다. 주로 peer-checked 처럼 요소의 특정 상태를 선택할 때 사용한다. peer-checked는 (체크박스 등)요소가 체크된 상태일 때 적용된다. 이외에도 다양한 가상 클래스 셀렉터를 사용할 수 있다. e.g. peer-hover peer-focus peer-disabled 참고로 위 peer-checked 클래스는 ~ 형제 셀렉터를 사용한 CSS 코드로 변환된다..peer:checked ~ .peer-checked\:bg-blue-500 { background-c..