react
[React] 리액트 라우터 React Router v6 바뀐점 톺아보기
[React] 리액트 라우터 React Router v6 바뀐점 톺아보기
2024.04.30React Router가 v6으로 업데이트 되면서 꽤 많은 부분이 바뀌었다. 공식 문서에선 상세한 마이그레이션 가이드도 제공하고 있다. v6을 사용하려면 React 16.8 버전 이상 사용해야 한다. v6은 이전 버전 대비 번들 사이즈도 70% 이상 줄었다고 한다(패키지 업데이트만으로 번들 크기 최적화가 가능하다는 뜻). Switch → Routes 컴포넌트가 라는 이름으로 변경됐다. 바뀐 이름이 더 직관적인 것 같다. 만 단독으로 사용할 수도 없게 됐다. 를 사용하려면 항상 로 감싸줘야 한다.// v5 // v6 exact 옵션 삭제v6부터 경로가 정확히 일치하도록 매칭 규칙이 바꼈다. 더이상 exact 옵션을 명시하지 않아도 된다. 모든 라우트는 기본적으로 exact 옵션이 붙는다고 보면 된다...
[JS] 정규식으로 검색어 하이라이트 / 문자열 링크 걸기(Linkify)
[JS] 정규식으로 검색어 하이라이트 / 문자열 링크 걸기(Linkify)
2024.04.30검색창에 입력한 키워드와 일치하는 단어를 하이라이트(강조) 하기 위해 split, join 등을 사용할 수 있지만 코드가 다소 복잡해진다. 정규식을 사용하면 깔끔하게 구현할 수 있다. 하이라이터 함수 정의 ▼const getHighlightedText = (text, query) => { const re = new RegExp(`(${query})`, 'gi'); if (query !== '' && text.match(re)) { const parts = text.split(re); return ( {parts.map((part) => part.toLowerCase() === query.toLowerCase() ? ( {part} ..
[React] 리액트로 실시간 검색창 구현하기
[React] 리액트로 실시간 검색창 구현하기
2024.04.30글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요 Debounce는 이벤트가 연속적으로 발생해도 항상 마지막 이벤트만 처리하는 것을 말하며, Memoize는 이전 연산 결과를 재사용하는 것을 말한다. Debounce와 Memoize를 활용해 불필요한 API 요청을 방지할 수 있다. Animichan은 일본 애니메이션에 등장한 인용문(Quotes)을 제공하는 OpenAPI다. title 매개변수에 애니메이션 제목을 쿼리스트링 보내서 요청하면, 해당 애니메이션의 인용문 세트를 받아올 수 있다. 이 API를 이용해 간단한 검색 어플리케이션을 구현할 수 있다. // Request'https://animechan.vercel.app/api/quotes/anime?title=naruto'..
[React] 리액트 요소 드래그앤드롭 구현
[React] 리액트 요소 드래그앤드롭 구현
2024.04.28TL;DR드래그할 수 있는 요소로 변경 — draggable={true}드래그 시작 — onDragStart 이벤트 트리거드래그하고 있는 요소의 인덱스 정보 저장 — state.draggedFrom드래그 상태 true로 변경 — state.isDragging이벤트 트리거 시점의 엘리먼트 리스트 저장 — state.originalOrder마우스 커서가 드롭 가능한 영역에 있을 때 — onDragOver 이벤트 트리거drop 이벤트를 사용할 수 있도록 dragOver 기본 이벤트 방지 — e.preventDefault()마우스 포인터 위치에 있는 요소의 인덱스 저장 — state.draggedTo엘리먼트 순서 변경 — state.updatedOrder 드래그중인 아이템을 마우스 포인터 위치(draggedTo..
[React] 리액트 마우스 드래그 가능한 요소 만들기 / 기하 프로퍼티
[React] 리액트 마우스 드래그 가능한 요소 만들기 / 기하 프로퍼티
2024.04.27자식 요소의 콘텐츠가 부모 요소보다 크다면, 부모 요소에 스크롤이 생기고, 마우스 휠로 스크롤할 수 있다. 마우스 휠 외에도 click / move 이벤트를 이용해 마우스 드래그로 스크롤하도록 만들 수 있다. TL;DR❶ 마우스를 클릭했을 때`clientX`, `clientY` (뷰포트 기준)좌표와, 요소의 스크롤 위치 `scrollLeft`, `scrollTop` 저장클릭 상태 `true`로 변경(CSS) `cursor: grabbing user-select: none` ❷ 클릭한 상태에서 마우스를 이동(드래그)했을 때①이동을 멈춘 지점(clientX/Y)과 ②마우스를 클릭한 지점**(clientX/Y)**을 뺀 값 계산 — 스크롤한 범위(요소의 현재 스크롤 위치)와 (스크롤한 값)을 뺀 위치로 스크..
[React] 리액트에서 SVG 사용법
[React] 리액트에서 SVG 사용법
2024.04.25💡 SVG는 색상, 크기 등을 동적으로 조절할 수 있는 장점이 있다 방법 1 — src 속성에 svg 경로 입력 ; 💡 파일 경로 지정 참고 내용❶ JSX 엘리먼트 속성의 루트 기준은 `public` 폴더만약 `` 태그의 `src` 속성(JSX 태그 속성)에 `src` 폴더에 있는 이미지 파일을 지정하려면…파일 최상단에서 불러온 이미지 파일을 `src` 속성에 할당하거나,`src` 속성 안에서 `require()` 사용 ex) ``❷ CSS 파일 루트 폴더 기준은 `src` 폴더❸ 파일 최상단 `import` 구문에선 `src` 폴더만 처리 가능(`public` 폴더에 있는 파일은 불가) 태그 src 속성에 svg 파일 경로를 적어준다. 경로를 적을 때 public 폴더에 있는 파일은 public..
[React] Canvas API 기본 내용 정리 / 리액트에서 사용법
[React] Canvas API 기본 내용 정리 / 리액트에서 사용법
2024.04.24캔버스 기본 세팅 for React💡 캔버스는 HTML 요소 중 하나로 스크립트 언어로 그림을 그리는데 사용한다. canvas를 사용하기 위해선 캔버스 context에 DOM으로 접근해야 한다. React에선 useRef()를 사용해서 Ref 객체를 만들고 접근하고 싶은 DOM의 ref 값으로 설정해주면 된다. 그럼 Ref 객체의 .current 값은 해당 DOM을 가리킨다. 캔버스 엘리먼트 생성 및 useRef 설정import React, { useRef, useEffect, useState } from 'react';import styled from 'styled-components';const Canvas = () => { const canvasRef = useRef(null); // 생략 ..