목표드래그로 엘리먼트 이동시키기 결과물https://codesandbox.io/s/drag-and-drop-ykyxgd?file=/src/Moving.tsx   조건1. pointer event 사용- mouse event 와 기능은 거의 동일하나, 모바일 디바이스에서 touch를 지원- 따라서 mouse event의 상위 호환 2. 마우스 커서의 속도에 맞춰서 따라와야 함- PointerEvent의 movementX, movementY 프로퍼티로 타겟 엘리먼트를 translate시키는 방식은 속도가 느려서 마우스 커서가 쉽게 엘리먼트 바깥으로 나가버리고, 드래그가 끊겨버림.. 그런데onMouseMove, onPoinerMove 는 onDragStart에 비해 속도가 느리다...참고)https://sta..

📍참고 https://www.react-hook-form.com/get-started 📍예시 코드 1 import { useForm } from "react-hook-form"; export default function App() { const { register, handleSubmit, watch, formState: { errors } } = useForm(); const onSubmit = data => console.log(data); console.log(watch("example")); // input 밸류 이름을 watch 함수에 전달하여 값 확인 return ( /* handleSubmit은 onSubmit을 호출하기 전에 입력 유효성 검증 실행 */ {/* register함수를 호출하..

📍useMemo 로 객체 or 배열로 인한 불필요한 리렌더링 제거const Pagination = ({ pagesNumbers }) => { const augmentedValues = pagesNumbers.map(page => page.number + 2); return ;}; 보기엔 문제가 없어보이지만…객체 또는 배열이 컴포넌트 내부에서 선언되면, 매 렌더링마다 별도의 인스턴스로 간주된다동일한 데이터를 갖고 있어도 리렌더링을 유발메모리 주소가 달라지기 때문이는 각 컴포넌트마다 새로운 계산을 필요로하며 그에 따라 렌더링도 늦어짐.. useMemo Hooks를 통해 계산 결과를 메모이제이션할 수 있다const Pagination = ({ pagesNumbers}) => { const augment..

📍문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/181188 📍알고리즘 분류 - 그리디 📍문제 풀이 [시작 좌표, 종료 좌표] 가 배열로 주어진다 const targets = [ [4, 5], [4, 8], [10, 14], [11, 13], [5, 12], [3, 7], [1, 4], ]; 이 좌표들을 선으로 그었을 때, 모든 수평선을 수직으로 가로지르는데 필요한 최소한의 수직선의 갯수를 구하면 된다. 그림으로 나타내면, 아래처럼 표현할 수 있는데, 겹치지 않는 수평선이 총 3개 이므로, 최소 3개의 수직선이 필요하다. 겹치지 않는 수평선인지 아닌지를 빠르게 파악하려면, 모든 좌표들을 종료지점을 기준으로 오름차순 정렬한 후, 순서대로 ..

📍문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/150370 📍알고리즘 분류 - 구현 📍문제 풀이 - 약관 A, B, C 에 따라 각각 유효 개월 수가 자연수로 주어진다 - 최초 개인정보 수집 일자가 2021.05.02 처럼 문자열로 주어지고, 어떤 약관 종류인지 주어진다 - 오늘 날짜가 2021.05.02 처럼 문자열로 주어진다 이 때, 각 개인정보 수집 일자에 대해서, 약관의 개월 수에 따라 오늘 시점에서 파기해야 할 수집 일자 번호를 반환한다 1. 최초 개인정보 수집일자에다 유효 개월 수를 더해 최대 보유 가능 일자를 구한다 2. 최대 보유 가능 일자가 오늘 날짜보다 작으면 파기해야 하므로 결과에 추가한다 주의할 점 오늘은 2022..

프로그래머의 뇌 (펠리너 헤르만스 지음) 📍목차 1장 | 코드 더 잘 읽기 1. 코딩 중 겪는 혼란에 대한 이해 2. 신속한 코드 분석 3. 프로그래밍 문법 빠르게 배우기 4. 복잡한 코드를 읽는 방법 2장 | 코드에 대해 생각하기 5. 코드를 더 깊이있게 이해하기 6. 코딩 문제해결을 더 잘하려면 7. 생각의 버그 3장 | 좋은 코드 작성하기 8. 명명을 잘하는 방법 📍이름이 중요한 이유 ✅식별자에는 타입, 변수, 메서드, 함수 등이 있으며, 식별자 이름이 중요한 이유는 대표적으로 4가지가 있다 1. 이름은 코드베이스의 상당 부분을 차지 예) 200만 줄의 코드에서 토큰의 33%, 문자열의 72%가 식별자에 해당 2. 코드 리뷰 시 이름의 역할 - 코드 리뷰 때도 식별자 이름이 자주 언급됨 - 평균적으..