분류 전체보기79 [Math] trunc, parseInt vs floor? 음수일 경우 값이 다르다 조심!! parseInt: 정수로 바꾼다. trunc: 소수점을 버린다. floor: 내림을 한다. 차이는 실수인 음수인 소수일 경우 -23.3을 Javascript에서 Math.trunc, parseInt와 Math.floor를 했을 때 결과가 다르다 Math.trunc(-10.05) // -10 Integer.parseInt(-10.05) // -10 Math.floor(-10.05) // -11 음수일 경우 값이 다르다. 조심하자 2023. 4. 15. [web API] ResizeObserver: 크기변화 감지 [javascript] ResizeObserver vs resize event [react][event][resize][Dimensions] Resize event listener using React hooks Why do we need to use ResizeObserver? window는 resize event를 사용해 resize를 할 수 있다 window.addEventListener("resize", function() { // window resize시 처리 }) DOM은 window처럼 resize 이벤트를 사용해 size 변화를 감지할 수 없다. ResizeObserver를 사용한 react hook을 만들어 보자 import { useEffect, useState, useRef } fr.. 2023. 4. 14. [Quill] Quill.prototype.focus(): 스크롤 최상단 초기화 문제 { quill.focus(); setIsEditing(() => true); }} /> 원인 click 이벤트 때 quill에 포커스를 주려고 quill.foucs()를 사용했다. 클릭 때마다 스크롤이 최상단으로 올라가서 확인해보니 quill.focus() 사용 시 스크롤이 초기화 되는 걸 발견했다. 해결 { if (isEditing) return; quill.focus(); }} /> editing 상태일 때 quill focus가 일어나지 않도록 변경해서 해결... 참고 focus() { const { scrollTop } = this.scrollingContainer; this.selection.focus(); this.scrollingContainer.scrollTop = scrollTop;.. 2023. 4. 14. [axios] Query params 자동 인코딩 Query string > params are encoded automatically 예, Axios는 요청의 'params' 옵션에 객체를 전달할 때 쿼리 매개변수 값을 자동으로 인코딩합니다. Axios는 'encodeURIComponent' 함수를 사용하여 쿼리 매개변수 값을 올바르게 인코딩하여 특수 문자가 URL에 올바르게 표시되도록 합니다. 예를 들면 다음과 같습니다. import axios from 'axios'; axios.get('https://example.com/api/search', { params: { query: 'example value with spaces & special chars', }, }) .then(response => { console.log(response.data); }) .c.. 2023. 4. 10. Javascript Falsy values 값들 JavaScript에서 거짓 값은 조건문과 같은 부울 컨텍스트에서 발견될 때 거짓으로 간주되는 값입니다. JavaScript에는 6개의 잘못된 값이 있습니다. false: 부울 값 false 자체. 0: 숫자 0(정수 또는 부동 소수점)은 거짓으로 간주됩니다. 0: 음수 0도 거짓으로 간주됩니다. NaN: 정의되지 않거나 표현할 수 없는 수학 연산의 결과를 나타내는 "Not-a-Number" 값은 거짓으로 간주됩니다. null: 개체 값이 의도적으로 없음을 나타내는 null 값은 거짓으로 간주됩니다. 정의되지 않음: 값이 할당되지 않은 변수를 나타내는 정의되지 않음 값은 거짓으로 간주됩니다. "": 빈 문자열(따옴표 안에 문자가 없음)은 거짓으로 간주됩니다. JavaScript의 다른 모든 값은 진실한 .. 2023. 4. 9. Prime Number:: 소수 찾기 코드 javascript 1. 기본 접근 방식(Brute Force): 소수를 찾는 순진한 접근 방식은 2에서 대상 숫자까지 모든 숫자를 반복하고 각 숫자에 대해 1과 자기 자신 이외의 숫자로 나눌 수 있는지 확인하는 것입니다. 나눌 수 없으면 그 숫자는 소수입니다. 다음은 JavaScript의 예입니다. javascriptCopy code function isPrime(number) { if (number 2023. 4. 9. React Life cycle: 언제 state 하면 안 될까? 라이프 사이클 다이어 그램 React 구성 요소에서는 예기치 않은 동작이나 무한 루프를 방지하기 위해 특정 수명 주기 메서드에서 상태 또는 소품 업데이트를 피해야 합니다. 다음은 다양한 수명 주기 메서드에서 상태 또는 소품을 업데이트하지 않는 경우에 대한 몇 가지 지침입니다. constructor: 생성자는 구성 요소가 생성될 때 호출되며 그 목적은 상태 및 바인딩 메서드를 초기화하는 것입니다. 예기치 않은 동작이 발생할 수 있으므로 여기에서 상태 또는 소품을 업데이트하지 마십시오. shouldComponentUpdate: 이 메서드는 구성 요소가 소품 또는 상태의 변경 사항을 기반으로 다시 렌더링해야 하는지 여부를 결정하는 데 사용됩니다. 무한 재렌더링 루프가 발생할 수 있으므로 이 메서드에서 상태 또.. 2023. 4. 8. [React] useId():: 컴포넌트 별 고유한 아이디 생성 import { useId } from 'react-id-generator'; function List({ items }) { const id = useId(); return ( {items.map((item, index) => ( {item} ))} ); } function App() { const items = ['Item 1', 'Item 2', 'Item 3']; return ; } 2023. 4. 8. Non-Null assertion:: exclamation mark (!) after variable. 변수 뒤 ! 느낌표 The exclamation mark (!) is the non-null assertion operator in TypeScript. It tells the compiler that we are sure that the value returned by document.getElementById('root') is not null or undefined. const dom = document.getElementById('root')! // dom is not null 2023. 4. 8. [type] keyof, typeof 를 사용해 type 지정 예시 const keyToPropertyMap = { 'on-off': 'active', name: 'name', appliedTo: 'level', frequency: 'period', }; type SortInfo = { key?: keyof typeof keyToPropertyMap; // asc: boolean; }; 질문 keyof typeof keyToPropertyMap? 답변 type:: keyof typeof keyToPropertyMap = 'on-off' | 'name' | 'appliedTo' | 'frequencyÏ' 설명 이 예에서 keyof typeo.. 2023. 4. 8. 이전 1 2 3 4 5 ··· 8 다음
