HOME
[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..
[HTML/CSS] 스크롤바 표시로 인한 레이아웃 변형 방지하기 - Scrollbar Gutter
[HTML/CSS] 스크롤바 표시로 인한 레이아웃 변형 방지하기 - Scrollbar Gutter
2024.05.11화면에 다 표시할 수 없을 정도로 콘텐츠가 길다면 세로 스크롤바가 생긴다. 그럼 세로 스크롤바의 폭 때문에 콘텐츠를 표시할 영역이 줄어들어 위 이미지처럼 레이아웃이 변형된다. 스크롤바가 생겨서 레이아웃이 변형되는 것을 방지하고 싶다면 scrollbar-gutter 속성을 사용하면 된다. scrollbar-gutter는 브라우저가 스크롤바 영역을 미리 확보하도록 하는 속성이다. 스크롤바 영역을 미리 확보했으므로 스크롤이 생겨도 레이아웃 변형이 없다. scrollbar-gutter: auto | stable && both-edges?.box { padding: 1rem; max-height: 220px; overflow-y: auto; scrollbar-gutter: stable; /* sc..
[TS] 타입스크립트에서 CSS Module 사용하기
[TS] 타입스크립트에서 CSS Module 사용하기
2024.05.11타입스크립트 CSS Module 오류 해결타입스크립트에서 CSS Module을 사용하면 모듈/선언을 찾을 수 없다는 타입 에러가 나온다. src 혹은 컴포넌트 폴더에 아래 내용이 담긴 typings.d.ts 파일을 추가하면 해결할 수 있다. via StackOverFlow// Toggle/typings.d.tsdeclare module '*.module.css' { const classes: { [key: string]: string }; export default classes;} CSS Module 사용법❶ [name].module.css 형태로 CSS 모듈 파일을 작성하고/* Toggle/Toggle.module.css */.toggle-bg:after { /* ... */} ❷ 컴포넌트에서 ..
[React] falsy 값을 사용한 리액트 조건부 렌더링시 주의할 점
[React] falsy 값을 사용한 리액트 조건부 렌더링시 주의할 점
2024.05.11리액트에선 null, undefined, boolean 이렇게 3가지 타입만 렌더링을 건너뛰는 점 기억 자바스크립트에서 0(혹은 -0, 0n)은 6가지 falsy 값 중 하나다. && AND 논리 연산자는 첫번째 falsy 값을 찾아서 반환하고, falsy 값이 없으면(피연산자가 모두 true이면) 마지막 피연산자를 반환한다(반대로 || OR 연산자는 첫 번째 truthy 값을 찾아 반환하고, truthy 값이 없으면 && 연산자처럼 마지막 피연산자를 반환한다).0 && 'bit'; // 0-0 && 'bit'; // -00n && 'bit'; // 0n React에서 조건부 렌더링 코드를 작성할 때 && 연산자를 자주 사용한다. 아래 예시에서 count 변수에 담긴 0은 falsy 값이므로 화면에 아무..
[JS] 특정 요소 위치로 스크롤 이동하기 - scrollIntoView
[JS] 특정 요소 위치로 스크롤 이동하기 - scrollIntoView
2024.05.11문법특정 요소가 위치한 곳까지 스크롤을 이동하고 싶을 때 element.scrollIntoView 메서드를 이용하면 간편하게 구현할 수 있다. scrollIntoView 메서드는 총 3가지 방법으로 사용할 수 있다. (MDN)element.scrollIntoView(align) ❶ 파라미터 없음 — element가 브라우저 화면 가장 위로 오도록 스크롤(정렬)element.scrollIntoView(); // element.scrollIntoView(true)와 동일 ❷ boolean 파라미터// { block: "start", inline: "nearest" } 옵션과 동일element.scrollIntoView(true); // { block: "end", inline: "nearest" } 옵션과 ..