자바스크립트
[HTML/CSS] 요소 왼쪽/위쪽 변부터 클릭 지점까지 거리 구하기
[HTML/CSS] 요소 왼쪽/위쪽 변부터 클릭 지점까지 거리 구하기
2024.05.08// left = clientRect.x, top = clientRect.yconst { height, width, top, left } = element.getBoundingClientRect();// event.clientX, event.clientY는 마우스 이벤트 속성const x = event.clientX - left;const y = event.clientY - top; mouseEvent.clientX, mouseEvent.clientY : 브라우저 화면 왼쪽 최상단을 기준으로 이벤트가 발생한 지점까지 얼마나 떨어져 있는지 나타내는 좌표. 브라우저 화면이 기준이므로 스크롤해도 값이 변하지 않음.clientRect.x, clientRect.left : 화면 좌측부터 해당 엘리먼트의 왼쪽 변까..
[HTMl/CSS] 엘리먼트의 모든 CSS 스타일 속성 / 값 조회하기
[HTMl/CSS] 엘리먼트의 모든 CSS 스타일 속성 / 값 조회하기
2024.05.08인자로 넘긴 요소에 적용된 모든 CSS 속성 조회Window.getComputedStyle(element, [pseudoElt]) const styles = getComputedStyle(element);// {0: 'accent-color', 1: 'align-content', 2: 'align-items', ...}console.log(styles); 인자로 넘긴 CSS 속성에 대한 값 조회CSSStyleDeclaration.getPropertyValue(property) const styles = getComputedStyle(element);// 'normal' (align-items에 대한 속성 값 normal 반환)styles.getPropertyValue('align-items'); // '..
[Algorithm] 퀵 정렬(Quick Sort) 알고리즘 톺아보기
[Algorithm] 퀵 정렬(Quick Sort) 알고리즘 톺아보기
2024.05.07퀵 정렬 알고리즘 개념퀵 정렬은 분할 정복 알고리즘(문제를 더 작은 2개의 문제로 분리해서 해결한 후 결과를 모아서 원래 문제를 해결하는 방법)의 하나로 찰스 앤터니 리처드 호어(Charles Antony Richard Hoare)기사가 개발했다. 가장 자주 사용하는 정렬 알고리즘으로 빠른 수행 속도가 특징이다. 기본적인 퀵 정렬은 아래 3단계를 반복하며 정렬한다. 기준(Pivot; 피벗) 요소 선택 — 주로 배열의 중간 요소를 기준으로함기준 요소보다 작은 요소는 왼쪽으로 이동, 기준 요소보다 큰 요소는 오른쪽으로 이동이동시킨 왼쪽 / 오른쪽 요소들에 대해 1~2번 작업 반복 구현Basic Quick Sort💡 구현하기 쉽지만 항상 새로운 left / right 배열을 생성해 비교한 요소를 추가하므로 ..
[Algorithm] 분할 정복 / 병합 정렬 알고리즘
[Algorithm] 분할 정복 / 병합 정렬 알고리즘
2024.05.07분할 정복 (Devide & Conquer)개념분할 정복은 “큰 문제를 작은 문제 단위로 쪼개면서 해결해나가는 방식"이다. 미국 수학자 폰노이만이 1945년에 개발한 알고리즘이다. 퀵소트, 병합 정렬이 분할 정복 방법을 통해 구현한다.예전엔 테이프를 이용해 데이터를 저장했다. 테이프 드라이브에 저장된 데이터는 항상 처음부터 순차적으로 읽어야 하기 때문에 데이터를 정렬하기 어려웠다. 이런 테이프 드라이브의 문제점을 극복하기 위해 병합 정렬 알고리즘이 탄생했다. 분할 : 문제를 더 이상 분할할 수 없을 때까지 동일 유형의 여러 하위 문제로 나눈다정복 : 가장 작은 단위의 하위 문제를 해결하며 정복한다조합 : 하위 문제에 대한 결과를 원래 문제에 대한 결과로 조합한다 예시분할 정복은 구조는 동일하지만 더 작은..
[Algorithm] 정렬 알고리즘 기본 (버블/선택/삽입)
[Algorithm] 정렬 알고리즘 기본 (버블/선택/삽입)
2024.05.06💡 예시의 모든 input은 [10, 7, 9, 5, 1]로 통일. 버블 / 선택 / 삽입 정렬 모두 최악의 경우 O(n²) 시간복잡도를 갖는다. 알고리즘 성능이 좋지 않아 거의 쓰진 않지만, 적은 데이터를 정렬할 땐 유용. 버블 정렬 | Bubble Sort거품이 일어난 것처럼 배열의 각 요소들이 순차적으로 정렬돼서 버블 정렬이라고 부른다. 두 요소를 묶어서 비교한 후 큰 숫자를 오른쪽으로 밀어낸다. i번째 정렬을 마칠때마다 “뒤에서 i번째” 자리의 순서가 확정된다. 시간 복잡도 (삽입 정렬과 동일)Worst Case(정렬이 전혀 안됐을 때) : O(n²) — 중첩 반복문을 사용하므로Best Case(이미 정렬됐을 때) : O(n) 장단점 (삽입 정렬과 동일)Stable 정렬 : 중복 데이터는 순서를..
[React] 키보드로 조작할 수 있는 드롭다운 자동완성 검색창 구현하기
[React] 키보드로 조작할 수 있는 드롭다운 자동완성 검색창 구현하기
2024.05.05검색창 자동 완성 기능은 , 태그를 이용해 빠르게 구현할 수 있다(참고 포스팅). 키보드 방향키로 옵션을 선택할 수도 있다. 하지만 이 방법은 리스트 요소에 클릭 이벤트를 할당할 수 없는 단점이 있다(검색을 정말 많이 해봤지만 결론은 불가). 검색창에 키워드를 입력한 후 목록에 있는 각 옵션()을 클릭할 때마다 특정 액션을 취해야 한다면 위 방법을 사용할 수 없다. 대안은 React Select 처럼 잘 만든 라이브러리를 사용하거나, 몇 년간 유지 보수한 라이브러리보단 완성도는 조금 떨어질 수 있지만 직접 구현할 수 있다. 아래는 직접 구현한 내용을 기록한 내용. 구현 목표마우스로 리스트 이동 / 선택Enter 키로 선택방향키로 리스트 이동 (Keyboard navigate)스크롤이 생긴 목록에서 방향..
[React] Blur 효과를 활용한 이미지 지연 로딩 Image Lazy Loading
[React] Blur 효과를 활용한 이미지 지연 로딩 Image Lazy Loading
2024.05.04웹페이지에서 성능에 영향을 가장 많이 주는 부분이 이미지 / 비디오 같은 미디어 요소다. 특히 이미지는 배너, 제품 사진, 로고 등 페이지 구석구석에서 사용한다. HTTP Archive Data에 따르면 전체 웹페이지 용량의 45%를 이미지가 차지한다고 한다. 이미지를 사용하지 않는건 불가능하지만, 화면에 노출될 때만 이미지를 불러오는 방식으로 페이지 로딩 시간을 단축시킬 수 있다. 이런 방식을 Lazy Loading이라고 한다. Lazy Loading 구현 방법💡 Lazy Loading이 적용된 이미지가 뷰포트에 근접해서 이미지를 로드하면 콘텐츠가 밀려나는 현상이 발생한다. 이를 방지하려면 이미지를 감싸는 컨테이너 요소에 높이 / 너비를 지정하면 된다. Lazy Loading은 크게 Chrome Na..
[React] 두 가지 방법으로 구현해보는 무한 스크롤 Infinite Scroll
[React] 두 가지 방법으로 구현해보는 무한 스크롤 Infinite Scroll
2024.05.041) 스크롤 이벤트를 사용한 방법무한 스크롤은 현재 페이지에서 스크롤바가 마지막 콘텐츠 지점에 있을 때 다음 콘텐츠를 자동으로 불러오는 구현 방식을 말한다. ➊스크롤해서 가려진 영역의 높이와 ➋현재 화면(뷰포트)의 높이를 더한 값이 ➌전체 문서의 높이와 같다면 현재 스크롤이 가장 하단 끝에 도달했다는 걸 알 수 있다. 알아야 할 기하 프로퍼티 ❶ 스크롤해서 가려진 콘텐츠 영역의 높이 : document.documentElement.scrollTop ❷ 현재 화면(뷰포트)의 높이window.innerHeight : 스크롤바 포함document.documentElement.clientHeight : 스크롤바 제외 ❸ 전체 문서의 높이// 문서의 정확한 전체 높이를 구하기 위한 코드const scrollHei..
[JS] 자바스크립트 표현식 평가 순서와 결합성
[JS] 자바스크립트 표현식 평가 순서와 결합성
2024.05.03표현식의 평가 순서let foo = { n: 1 };let bar = foo; // foo 객체의 참조 주소가 bar 변수에 할당됨foo.x = foo = { n: 2 }; // 값을 반환하는 할당 연산자console.log(foo.x); // ? 위 문제를 얼핏보면 foo.x의 결과는 { n: 2 }일 것 같지만 아니다. foo.x는 undefined를 출력한다. 위 코드의 연산 과정을 하나하나 풀어보면 아래와 같다. 왼쪽 표현식 평가우측 표현식이 평가한 값이 할당될 곳을 결정하기 위해 foo.x가 현재 참조하는 객체 { n: 1 } 확인오른쪽 표현식 평가할당될 곳을 결정하기 위해 foo 변수가 현재 참조하는 객체 { n: 1 } 확인새로운 객체 { n: 2 }가 foo 변수에 할당되고 해당 객체 반환..
[JS] 자바스크립트 제너레이터 Generator 총 정리
[JS] 자바스크립트 제너레이터 Generator 총 정리
2024.05.03제너레이터는 ES6에 도입된 특수한 함수다. 함수 호출자가 함수 실행을 제어할 수 있고, 함수 호출자와 함수 상태를 주고받을 수도 있다. 이런 특징 때문에 제너레이터 함수에선 코드 블록의 실행을 잠시 멈췄다가 필요한 시점에 재개할 수 있다. 일반 함수는 0~1개 값만 반환할 수 있지만, 제너레이터 함수는 여러개의 값을 필요에 따라 하나씩 반환할 수 있다. 제너레이터 함수의 특징함수 호출자에게 함수 실행의 제어권을 양도(yield)할 수 있다일반 함수 : 함수 호출자(caller)는 함수를 호출한 이후 함수 실행을 제어할 수 없다.제너레이터 함수 : 함수 호출자가 함수 실행을 제어할 수 있다(함수 실행 일시 정지 / 재개)함수 호출자와 함수 상태를 주고받을 수 있다일반 함수 : 매개변수를 통해 값을 전달받..
[JS] 자바스크립트 이터러블 Iterable 총 정리
[JS] 자바스크립트 이터러블 Iterable 총 정리
2024.05.03TL;DR ⭐️Symbol.iterator 메서드가 구현되어 있는 객체를 이터러블(iterable)이라고 한다. 간단히 말하면 이터러블은 반복 가능한 객체다. 배열, 문자열은 Symbol.iterator 메서드가 이미 구현되어 있는 대표적인 내장 이터러블이다. 이터러블을 사용하면 어떤 객체든 ➊for of 반복문 ➋전개 문법 ➌배열 구조분해 할당의 대상으로 사용할 수도 있다. ❶ for of 문을 사용할 수 있는 객체를 이터러블이라고 한다 ❷ 이터러블엔 Symbol.iterator 메서드(혹은 프로토타입 체인에 의해 상속)가 구현되어 있어야 한다.Symbol.iterator는 for of에 의해 자동으로 호출되며, 명시적으로 호출하는 것도 가능하다Symbol.iterator 메서드가 반환하는 객체는 “이..
[React] 리액트 타자기(TypeWriter) 효과 구현하기 feat.제너레이터
[React] 리액트 타자기(TypeWriter) 효과 구현하기 feat.제너레이터
2024.05.03기본 로직타자기로 한 글자씩 입력하는 효과(Typewriter Effect)는 이미 수 많은 라이브러리가 있지만, setInterval 타이머 API를 이용해서 직접 구현할 수 있다. 원래 문장(텍스트)을 한 글자씩 자른 후 가장 앞에 글자부터 하나씩 이어 붙이는 방식이다. // JSconst $content = document.querySelector('.content');function typewriter(target, sentence, speed = 200) { const split = sentence.split(''); let text = ''; let i = 0; const timer = setInterval(() => { if (i 깜빡이는 커서 효과는 | 콘텐츠를 갖는 ..