자바스크립트
[JS] 특정 요소 위치로 스크롤 이동하기 - scrollIntoView
[JS] 특정 요소 위치로 스크롤 이동하기 - scrollIntoView
2024.05.11문법특정 요소가 위치한 곳까지 스크롤을 이동하고 싶을 때 element.scrollIntoView 메서드를 이용하면 간편하게 구현할 수 있다. scrollIntoView 메서드는 총 3가지 방법으로 사용할 수 있다. (MDN)element.scrollIntoView(align) ❶ 파라미터 없음 — element가 브라우저 화면 가장 위로 오도록 스크롤(정렬)element.scrollIntoView(); // element.scrollIntoView(true)와 동일 ❷ boolean 파라미터// { block: "start", inline: "nearest" } 옵션과 동일element.scrollIntoView(true); // { block: "end", inline: "nearest" } 옵션과 ..
[JS] Lodash Import 용량 줄이기 팁
[JS] Lodash Import 용량 줄이기 팁
2024.05.10Lodash 모듈을 import할 때 import { cloneDeep } from 'lodash' 이렇게 작성 하면 풀버전 모듈을 가져온다. 몇몇 함수를 사용하기 위해 불필요한 import를 하는 셈이 된다. 참고로 Lodash는 웹팩의 프로덕션 빌드로 번들링하면 25kb 정도 차지한다고 한다. 30kb 정도의 React DOM, Vue.js와 비교해도 꽤 무거운편이다.import { cloneDeep } from 'lodash' // 73.15 kB (gzip: 25.42 kB) import 구문을 아래처럼 작성하면 필요한 함수만 불러올 수 있다. 하지만 여러 Lodash 함수를 연속적으로 사용하는 chaining 할 수 없는 단점이 있다. 따라서 아래 방법은 단일 함수를 사용할 때 적합하다.impo..
[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..
[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: ..
[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..
[JS] 다국어를 고려하여 문자열의 첫 글자를 대문자로 만들기
[JS] 다국어를 고려하여 문자열의 첫 글자를 대문자로 만들기
2024.05.08다국어를 고려하지 않았을 때💡 charAt은 인덱스에 해당하는 문자열을 반환하고, charCodeAt은 유니코드(0~65535) 값을 반환한다function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1);}capitalizeFirstLetter('hello world') // Hello world 다국어를 고려했을 때💡 로마자(라틴 문자)에선 점이 있는 소문자 i와 점이 없는 대문자 I가 짝을 이룬다. 반면 터키어, 아제르바이잔어에선 점 없는 문자ı, I와, 점 있는 문자 i, İ가 짝을 이룬다. Istanbul을 터키어 알파벳으로 적으면 İstanbul이 되는데 첫 글자가 바로 점 있는 ..
[React] 객체를 prop으로 받을 때 Default Parameter 지정
[React] 객체를 prop으로 받을 때 Default Parameter 지정
2024.05.08문제💡 기본값으로 지정한 options 객체에 size, color 속성을 모두 유지해야 하는 상황 컴포넌트 특정 Prop의 기본값을 객체로 지정하고, 컴포넌트를 사용하는 곳에서 객체를 넘기면 기본값으로 지정한 객체를 덮어쓴다. 아래 예시에선 options 프롭에 size, color 속성을 갖는 객체를 기본값으로 지정했지만 컴포넌트를 사용하는 곳에서 size 속성만 갖는 객체를 넘기므로 options 프롭은 { size: 5 }가 된다.// 컴포넌트 정의function Child({ options = { size: 100, color: 'black' } }) { // options 프롭 기본값을 { size: 100, color: 'black' } 으로 설정}// 컴포넌트 사용return ;// 프..
[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년에 개발한 알고리즘이다. 퀵소트, 병합 정렬이 분할 정복 방법을 통해 구현한다.예전엔 테이프를 이용해 데이터를 저장했다. 테이프 드라이브에 저장된 데이터는 항상 처음부터 순차적으로 읽어야 하기 때문에 데이터를 정렬하기 어려웠다. 이런 테이프 드라이브의 문제점을 극복하기 위해 병합 정렬 알고리즘이 탄생했다. 분할 : 문제를 더 이상 분할할 수 없을 때까지 동일 유형의 여러 하위 문제로 나눈다정복 : 가장 작은 단위의 하위 문제를 해결하며 정복한다조합 : 하위 문제에 대한 결과를 원래 문제에 대한 결과로 조합한다 예시분할 정복은 구조는 동일하지만 더 작은..