JavaScript47 [Basic] Javascript sync/async, blocking/non-blocking 자바스크립트: sync 언어, blocking, single- threaded 이다 코드가 순차적으로 실행된다 - 동기 코드가 실행이 끝나야 다음 코드 실행이 가능하다 - 블로킹 ?? 그럼 어떻게 우리는 javascript에서 코드를 비동기, non-blocking하게 실행시킬 수 있을까? 정답은 브라우저 및 node 브라우저(node.js runtime)에서 javascript: async/non-blocking 이다 event loop call stack (macro) task queue () micro task queue (promise queue) request animation queue web API v8 우리는 브라우저에서 자바스크립트를 비동기적 실행 가능 (with Web API), Web.. 2023. 5. 17. [javascript] replace with Regex, $n vs $& The $& and $1 are not the same. $& is a back reference to the whole match. $1 is a back reference to the submatch captured with capturing ref 2023. 5. 9. [RxJs][React] how to declare Observable properly inside a component? 1. just declare import React, { useState, useEffect, useMemo } from 'react'; import { interval } from 'rxjs'; export default function App() { const [state, setState] = useState(); const observable$ = useMemo(() => interval(1000), []); return ( Hello RxJS! Observable value: {state} ); }2. subscribe useEffect(() => { const subscription = observable$.subscribe(setState); }, []);3. u.. 2023. 5. 6. [quill] setContents does not work on image attributes? Problem quill.setContents(content); This remove width property Cause There is a missing on formats property on quill options Solution quill option you need to add width on formats property like below export const defaultOptions: QuillOptionsStatic = { modules: { toolbar: { container: defaultToolbarOptions, 'image-tooltip': true, 'link-tooltip': true, handlers: { // image: () => {.. 2023. 5. 6. [Quill] innerHTML = content 사용 시 생기는 문제점 문제 Business 부서에서 userflow를 사용하고 있다 Production Tour 및 신규 기능 안내 Tooltip을 보여주는 기능이다. 그런데 이 기능이 작동 시 quill editor API는 성공적으로 내용을 가져 왔는데 이를 quill에 삽입 시 컨텐츠가 보이지 않는 문제가 발생했다. 원인 innerHTML로 적용된 DOM 컨텐츠를 userflow 실행 시 기본으로 변경 하는 작업이 있는 것으로 보임 ~~innerHTML = content~~를 사용하지 말자 const quillRef = useRef(); useEffect(() => { if (quillRef.current) return; const quill = new Quill($dom, options); quillRef.curren.. 2023. 5. 4. [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. 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. 이전 1 2 3 4 5 다음
