HOME
[React] background-image에 svg 사용하기 (inline SVG)
[React] background-image에 svg 사용하기 (inline SVG)
2024.05.10위치별 파일 경로 기준JSX 엘리먼트 속성의 루트 폴더 기준 : publicCSS 파일 루트 폴더 기준 : src파일 최상단 import 구문 : src 폴더만 처리 가능(public 폴더에 있는 파일은 불가) 태그 src 속성(JSX 태그 속성)에 src 폴더에 있는 이미지 파일을 지정하려면…파일 최상단에서 불러온 이미지 파일을 src 속성에 할당하거나,src 속성 안에서 require() 사용 e.g. 문제 상황 JSX 엘리먼트 속성의 루트 폴더 기준은 public 폴더므로 이미지 파일이 src 폴더에 있다면 파일 최상단에서 이미지 파일을 import 한 후 인라인 스타일 url() 함수에 사용할 수 있다. *.png, *.webp 같은 이미지 파일은 아래 방법으로 잘 작동한다.// src/asse..
[JS] toISOString() 메서드 오프셋 교정하기 (UTC 시간대 변경)
[JS] toISOString() 메서드 오프셋 교정하기 (UTC 시간대 변경)
2024.05.09Date.toISOString() 메서드는 Date 객체를 ISO 8601 형식의 UTC 시간으로 변환한다. 즉, 어떤 값이 들어오든 항상 UTC+0 시간으로 변환한 값을 반환한다는 의미다. 한국은 UTC 기준시보다 9시간(540분) 빠르기 때문에(+9시간) toISOString() 메서드가 반환하는 시간과 "표면적인" 차이가 발생한다. 예를들어 현재 한국 시간이 2022년 7월 8일 01시 56분이라면 toISOString 메서드는 이보다 9시간 늦은 2022-07-07T16:56... 를 반환한다.// +09:00은 UTC 기준시 보다 9시간 빠르다는 것을 명시한 것const localDate = new Date('2022-07-08T01:56:00+09:00');// 출력값: 2022-07-07T1..
[Git] PR / Commit 메시지 키워드로 이슈 연동 및 종료하기
[Git] PR / Commit 메시지 키워드로 이슈 연동 및 종료하기
2024.05.09키워드 기능 소개💡 Special Keyword 기능 작동 조건PR 타겟이 레포지토리의 default branch 일 때PR의 base가 default branch 일 때 PR Description 혹은 Commit 메시지(Subject 혹은 Description)에 키워드 #이슈번호를 추가하면 입력한 이슈가 자동으로 링크되며, 해당 Commit 혹은 PR을 기본 브랜치(default branch)에 Merge 했을 때 링크한 이슈도 자동으로 닫힌다.git commit -m "Feat: order filter close #15" 참고로 브랜치 이름에 이슈 번호를 기재하면(#889-feat-…) 자동으로 입력한 이슈를 참조한다. 커밋을 추가하면 해당 이슈에 아래 같은 레퍼런스 히스토리가 남는다.userA..
[JS] 로케일 통화로 숫자 포매팅 / 천 단위마다 콤마 추가하기
[JS] 로케일 통화로 숫자 포매팅 / 천 단위마다 콤마 추가하기
2024.05.09toCurrency숫자 타입 n 을 인자로 받아 지정한 통화 포맷을 반환하는 toCurrency 함수. Intl.NumberFormat 메서드를 사용하면 국가/통화에 대한 sensitive formatting을 활성화할 수 있다. const toCurrency = (n, currency, LanguageFormat = undefined) => Intl.NumberFormat(LanguageFormat, { style: 'currency', currency, }).format(n);// €123,456.79 | currency: Euro | currencyLangFormat: LocaltoCurrency(123456.789, 'EUR'); // $123,456.79 | currency: ..
[HTML/CSS] 스크롤 기능은 유지하면서 스크롤바 숨기기
[HTML/CSS] 스크롤 기능은 유지하면서 스크롤바 숨기기
2024.05.09overflow: hidden 속성으로 스크롤바를 숨길 수 있지만 스크롤 기능이 작동하지 않는다. 스크롤 기능은 작동하면서 스크롤바만 시각적으로 숨기려면 아래 스타일을 적용하면 된다(더 자세한 내용은 W3Schools 참고)./* Chrome, Safari, Edge, ... */.no-scrollbar::-webkit-scrollbar { display: none; }.no-scrollbar { -ms-overflow-style: none; /* IE */ scrollbar-width: none; /* Firefox */}::-webkit-scrollbar : Blink, WebKit 렌더링 엔진 기반의 브라우저에서만 사용할 수 있다.⚠️ 아직 표준이 아니므로 Production에서 사용할..
[JS] Array.flatMap 메서드 활용법
[JS] Array.flatMap 메서드 활용법
2024.05.09flatMap() 메서드는 콜백이 반환하는 값이 배열이면 1 뎁스까지 펼쳐서 반환한다. map(), flat() 메서드를 체이닝한 것과 동일한 효과를 가진다. e.g. arr.map(...args).flat()const numbers = [1, 2, 3, 4, 5];numbers.map((n) => [n * 2]); // [[1], [2], [3], [4], [5]]numbers.flatMap((n) => [n * 2]); // [2, 4, 6, 8, 10]const sayHello = ['Hello', 'World'];sayHello.map((word) => word.split('')); // [['H', 'e', 'l', 'l', 'o'], ['W', 'o', 'r', 'l', 'd']]sayHell..
[JS] 원하는 포맷으로 날짜 변환 — toLocaleDateString
[JS] 원하는 포맷으로 날짜 변환 — toLocaleDateString
2024.05.09Date.toLocaleDateString([locale[, options]]) Date.toLocaleDateString() 메서드는 날짜를 지정된 로케일의 문자열 표현으로 변환한다. 첫 번째 인자인 로케일(locale) 문자열을 지정하면 해당 언어 및 국가에 적합한 날짜 형식을 반환한다. 로케일을 명시하지 않았다면 웹 브라우저의 기본 로케일 window.navigator.language 값을 사용한다. 두 번째 인자인 options는 날짜 형식을 더 상세하게 지정할 수 있는 옵션 객체다. 연도, 월, 일 등의 표현 방식을 원하는 방식으로 설정할 수 있다. 더 자세한 내용은 MDN 참고.new Date().toLocaleDateString('en-US'); // '7/1/2022'new Date().t..
[React] useInfiniteQuery + IO API 사용시 무한 렌더링 문제 해결
[React] useInfiniteQuery + IO API 사용시 무한 렌더링 문제 해결
2024.05.09문제 원인렌더링 데이터의 마지막 인덱스 위치에 IO(Intersection Observer) 관찰 요소를 표시하는 방식은 무한 렌더링 문제가 발생할 수 있다. 데이터가 1~2개 밖에 없어서 관찰 요소가 항상 화면에 들어온다면 ➊fetchNextPage 실행(React Query 훅이 반환하는 함수) → ➋기존 데이터 반환 → ➌렌더 → ➍IO 화면에 들어옴 → ➊fetchNextPage 실행 → 반복… 위 과정을 계속 반복하면서 무한 렌더링하는 문제가 발생한다. Query Key가 바뀌지 않아서 데이터 fetch 없이 캐싱한 데이터를 사용하지만 무한 렌더링 때문에 어플리케이션이 정상적으로 작동하지 않는다. 데이터가 아예 없다면 IO 관찰 대상 요소도 렌더링 하지 않으므로 문제가 없는것처럼 보이기 때문에 ..
[TS] 타입스크립트 두 종류의 키(key) 타입을 받을 때 객체 접근하기
[TS] 타입스크립트 두 종류의 키(key) 타입을 받을 때 객체 접근하기
2024.05.08문제 상황아래와 같은 타입이 있다고 가정해보자.export type OrderStatus = 'pending' | 'new' | '...생략';export type Client = { user_id: number; company_name: string };export type OrderFilterParams = { status: Array; client: Array; // ...생략}; ClientAndOrderFilter 컴포넌트에선 "status" | "client" 두 종류의 타입을 받아 params[type] 형태로 OrderFilterParams 객체에 접근해서 값을 변경해야 하는 상황이다. interface ClientAndOrderFilterProps { setParams: Dispa..
[React] 리액트 ref 객체 여러개 만들기
[React] 리액트 ref 객체 여러개 만들기
2024.05.08정의 ▼import { createRef } from 'react';// 함수 컴포넌트 본문const entriesRef = useRef(FILTER_LIST.map(() => createRef())); 사용 ▼// 함수 컴포넌트 리턴문FILTER_LIST.map((name, i) => {name}); 글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요
[Next.js] document is not defined 오류 해결 방법
[Next.js] document is not defined 오류 해결 방법
2024.05.08Next.js는 서버 사이드에서 HTML을 생성하고 클라이언트에 전달한 후, 클라이언트에선 각 요소에 이벤트 핸들러를 달아서 실행 가능하도록 만든다(이를 Hydration이라고 부름)하지만 서버 사이드에서 HTML을 생성하는 시점엔 document 객체가 존재하지 않으므로 에러가 발생하는 것. document는 DOM(객체처럼 HTML을 조작할 수 있는 모델)에 접근할 때 사용하는 객체이며, 브라우저 환경에서만 접근할 수 있다.때문에 클라이언트에서 React 컴포넌트가 마운트된 후 document 객체에 접근하도록 해야 한다. react-no-ssr 같은 라이브러리를 사용하거나 useIsMounted 같은 커스텀훅을 사용하면 위 문제를 해결할 수 있다. 💡 useIsMounted 같은 커스텀 훅은 보통..
[TS] @ts-ignore, @ts-expect-error 타입스크립트 주석 차이점
[TS] @ts-ignore, @ts-expect-error 타입스크립트 주석 차이점
2024.05.08@ts-ignore, @ts-expect-error 두 주석 모두 타입스크립트의 타입 오류를 처리하는 방법을 제공하지만 @ts-expect-error는 개발자가 오류를 인식하고 있으며, 추후 수정할 의도가 있음을 명시적으로 나타낸다. 반면, @ts-ignore 주석은 단순히 오류를 무시한다. 코드 유지보수를 위해 가능한 @ts-expect-error 주석을 사용하는게 좋다. @ts-ignore특정 코드 라인에 타입 오류가 있더라도 컴파일러가 이를 무시하도록 지시해결 방법을 찾지 못했거나 일시적으로 오류를 무시하고 싶을 때 사용 @ts-expect-error코드에서 타입 오류가 예상되는 경우, 이를 명시적으로 선언하면서 오류를 무시할 때 사용예상한 오류가 실제로 발생하지 않으면 해당 주석이 더이상 필요하지..