HTML6 How to load images that needs to be authorized with Axios img src 이미지 요청 401 UnAuthorized 문제: img tag 요청이 401 status를 response unauthorized 해결: fetch or axios를 사용해 http request에 Authorization 헤더를 주입해 주어야 한다 Axios 사용해 image http request 하기 why? Authorization: Bearer JWT token 이 필요하다 요청하기 async fetchWithAuthentication(url, authToken, responseType) { const res = await axios.get(url, { responseType, }); return res; }, base64 or blob를 사용해 이미지 렌더링 async disp.. 2022. 10. 10. the-dom-challenge: Build something with only vanilla Javascript [The Dom Challenge]https://github.com/devkodeio/the-dom-challenge 2022. 7. 22. [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. CSS selector with data attribute [css] selector [attributes=”—”], data attributes with data attribute div[data-your-name="tio"] { } with javascript dom manipulation const dom = document.querySelector('div.test[data-id="100"]'); General usage [class="(╯°□°）╯︵ ┻━┻"]{ color: red; font-weight: bold; } [data-value] { /* Attribute exists */ } [data-value="foo"] { /* Attribute has this exact value */ } [data-value*="foo"] { /*.. 2022. 7. 4. requestFullscreen(): How to make dom Fullscreen [Document.fullscreenElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenElement) / [ShadowRoot.fullscreenElement](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/fullscreenElement) The fullscreenElement property tells you the [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that's currently being displayed in fullscreen mode on the DOM (or .. 2022. 7. 2. 이전 1 다음