본문 바로가기

Web17

[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.
[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.
[web] authorization(인가), authentication(인증), 401, 403 error code 인증 및 권한 부여는 컴퓨터 보안, 특히 웹 응용 프로그램 및 서비스의 두 가지 필수 개념입니다. 사용자 데이터를 보호하고 리소스에 대한 액세스를 보호하며 개인 정보를 유지하는 데 도움이 됩니다. 두 개념은 서로 관련되어 있지만 서로 다른 용도로 사용됩니다. 인증: 이 프로세스는 시스템이나 리소스에 액세스하려는 사용자 또는 클라이언트의 신원을 확인합니다. 일반적으로 사용자 또는 클라이언트가 주장하는 사람인지 확인하기 위해 사용자 이름 및 암호 또는 API 토큰과 같은 자격 증명을 확인하는 작업이 포함됩니다. 권한 부여: 사용자 또는 클라이언트가 인증되면 권한 부여가 시작됩니다. 권한 부여는 사용자 또는 클라이언트의 ID, 역할 또는 권한을 기반으로 특정 리소스에 대한 액세스 권한을 부여하거나 거부하는 프.. 2023. 4. 7.
Editable Dom => attribute: contentEditable 2022. 7. 22.
Dom id => window[id] or document.querySelector('#id') Why don't we just use element IDs as identifiers in JavaScript? HTML 5 spec, 'Named access on window object" window[name] Returns the indicated element or collection of elements. As a general rule, relying on this will lead to brittle code. Which IDs end up mapping to this API can vary over time, as new features are added to the web platform, for example. Instead of this, use document.getElement.. 2022. 7. 22.
the-dom-challenge: Build something with only vanilla Javascript [The Dom Challenge]https://github.com/devkodeio/the-dom-challenge 2022. 7. 22.
[javascript] IIFE(immediately invoked function expression) Search: javascript parentheses IIFE tmp=function(){}() +function(){}() -function(){}() 0/function(){}() 0*function(){}() 0?0:function(){}() (function(){}()) (function(){})() Why are parentheses required around JavaScript IIFE? [duplicate]Ask Question There are two ways to create functions in JavaScript (well, 3, but let's ignore new Function()). You can either write a function declaration or.. 2022. 7. 12.
[CSS] Disabling text selection => user-select property How do I prevent the browser (JavaScript and CSS) from disabling text selection on web pages without disabling all JavaScript?Ask Question Search: javascript css how to prevent content selected div.disable { user-select: none; } [css] disabling text selection 2022. 7. 10.
[css][filter] blur CSS filter document filter: blur(0); filter: blur(4px); filter: blur(1.5rem); 2022. 7. 9.
[axios] onUploadProgress - progress bar Search: axios request how to set progress bar Dom 80% : The Progress Indicator element - HTML: HyperText Markup Language | MDN handle progress bar // handle progress bar function function handleUploadProgressBar(progress) { document.querySelector('#file').value = progress; document.querySelector('#file').innerHTML = progress; } // request axios.put('/update', formData, { headers: { "Content-Type.. 2022. 7. 7.