HOME
[DevTools] Tailwind CSS 유틸리티 클래스 자동 정렬 플러그인
[DevTools] Tailwind CSS 유틸리티 클래스 자동 정렬 플러그인
2024.05.13prettier-plugin-tailwindcss 플러그인을 사용하면 TailwindCSS의 유틸리티 클래스 정렬 규칙에 따라 클래스를 자동 정렬해준다. 이전까진 Tailwind Formatter 같은 IDE 플러그인을 사용해서 정렬이 필요할 때마다 부가기능을 실행(⌃ ⇧ H)했는데 그럴 필요가 없어졌다. prettier-plugin-tailwindcss 플러그인을 설치하고 파일 저장시 자동 포매팅 되도록 IDE를 설정하면, 유틸리티 클래스도 함께 정렬돼서 편하다. 참고로 클래스 자동 정렬 외에도 잘못 입력한 클래스 오류 표시, 축약(shorthand) 사용 강제, 임의(arbitrary) 값 사용 금지 같은 규칙이 적용된 eslint-plugin-tailwindcss ESLint 플러그인도 있다. 설정..
[JS] 업로드 진행 이벤트를 처리하는 onUploadProgress
[JS] 업로드 진행 이벤트를 처리하는 onUploadProgress
2024.05.13Axios에서 업로드 진행 이벤트를 처리하는 onUploadProgress 핸들러를 이용해 업로드 진행 상황을 확인할 수 있다. 주로 업로드 진행 상태를 UI로 표현할 때 활용한다. onUploadProgress 핸들러는 ProgressEvent 네이티브 이벤트 객체를 인자로 받는다. ProgressEvent 객체는 아래 속성을 포함한다. — MDN loaded : 이미 수행한 작업의 양(업로드한 크기)을 나타내는 unsigned long long 형식의 데이터total : 작업의 총 양(총 파일 크기)을 나타내는 unsigned long long 형식의 데이터lengthComputable : 진행 상황 측정 가능 여부를 나타내는 Boolean 값 axios.post(api_url, formData, {..
[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..
[JS] 인라인 스타일 정의 - cssText
[JS] 인라인 스타일 정의 - cssText
2024.05.13cssText는 새로운 요소에 여러 스타일을 추가해야 할 때 유용하다. 기존 인라인 스타일을 완전히 교체하므로 그 외 상황에선 잘 사용하지 않는다. 자바스크립트를 이용해 엘리먼트 스타일을 수정할 땐 elem.style.propertyName(프로퍼티 이름은 카멜 케이스 사용) 으로 접근한 뒤 원하는 스타일 값을 할당하는 방식을 사용한다. 하지만 여러 스타일을 추가할 때마다 일일이 propertyName으로 접근하기엔 조금 번거롭다.// CSS 파일에 width, height, margin, font-size 등의 스타일이 적용된 엘리먼트const $header = document.querySelector('.header');$header.style.fontSize = '20px'; 🔍 엘리먼트의 sty..
[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 셀렉터에선 ..
[미립자팁] 은근히 유용한 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 });..