✘✘✘ Javascript25 [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. Javascript Falsy values 값들 JavaScript에서 거짓 값은 조건문과 같은 부울 컨텍스트에서 발견될 때 거짓으로 간주되는 값입니다. JavaScript에는 6개의 잘못된 값이 있습니다. false: 부울 값 false 자체. 0: 숫자 0(정수 또는 부동 소수점)은 거짓으로 간주됩니다. 0: 음수 0도 거짓으로 간주됩니다. NaN: 정의되지 않거나 표현할 수 없는 수학 연산의 결과를 나타내는 "Not-a-Number" 값은 거짓으로 간주됩니다. null: 개체 값이 의도적으로 없음을 나타내는 null 값은 거짓으로 간주됩니다. 정의되지 않음: 값이 할당되지 않은 변수를 나타내는 정의되지 않음 값은 거짓으로 간주됩니다. "": 빈 문자열(따옴표 안에 문자가 없음)은 거짓으로 간주됩니다. JavaScript의 다른 모든 값은 진실한 .. 2023. 4. 9. 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. 이전 1 2 3 다음
