최근 알고리즘 문제를 풀면서 기본기가 많이 부족하다는 걸 몸소 느끼는 중인데, 그중 하나가 자료구조!매일 쓰는 List (그것도 ArrayList 만) 와 Map (그것도 HashMap 만) 말고는 전혀 사용하지 않았는데...알고리즘 문제 풀이에서 훨~ 씬 쉽게 풀 수 있는 걸 저 두 개로만 풀어내려고 하니까 어렵기도 하고 비효율적이기도 하고그래서 자료구조를 정리해 보려고 한다 1. List 리스트순서가 있는 중복 가능한 컬렉션 요소들이 인덱스로 접근할 수 있기 때문에 순서가 중요한 데이터를 다룰 때 유용하다. 대표 구현체종류설명ArrayList동적 배열 기반, 인덱스 접근이 빠르지만 삽입 및 삭제가 비교적 느리다LinkedList연결 리스트 기반, 삽입 및 삭제가 빠르지만 인덱스 접근이 비교적 느리다2..

리액트에서 드래그 앤 드롭을 쉽게 구현할 수 있는 라이브러리가 있다.react-beautiful-dnd 로, 드래그 앤 드롭 기능뿐만아니라 반응형 UI 및 애니메이션도 기본적으로 제공한다.npm install react-beautiful-dndnpm install --save-dev @types/react-beautiful-dnd  return ( {(provided) => ( {items.map((item, index) => ( {(provided) => ( {item} ..

렌더링에 필요하지 않은 값을 참조할 수 있는 Reack Hook import { useRef } from 'react';const ref = useRef(initialValue); initialValue : ref 객체의 current 프로퍼티 초기 설정값 useRef 란?리렌더링을 유발하지 않으면서 값을 저장하고 유지할 수 있는 방법을 제공한다.예를 들어, useRef 로 저장된 값이 변하더라도 컴포넌트가 리렌더링되지 않아 성능면에서 유리하다. 반환값useRef 는 단일 프로퍼티를 가진 객체를 반환한다. 관련하여브라우저 API에서 제공하는 document.querySelector() 와 비슷한 역할을 한다.React 에서는 직접 document 를 사용하는 것보다 useRef를 사용하는 것이 권장되는데..

calc()css 상에서 사용할 수 있는 함수로, 간단한 계산이 가능함calc() 외, 자주 사용하는 CSS 함수종류설명예시clamp()최소값, 최적값, 최대값 설정font-size: clamp(1rem, 2.5vw, 2rem);min()여러 값 중 가장 작은 값 선택width: min(50vw, 500px);max()여러 값 중 가장 큰 값 선택height: max(100px, 10vh);미디어 타입orientation portrait 또는 landscape 감지color 기기의 색상당 비트 수color-index 출력 기기의 색상 테이블 수aspect-ratio 디스플레이 영역의 너비와 높이의 비율미디어 쿼리미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 ..