본문 바로가기

분류 전체보기79

[Vanilla][Javascript] 기본들 API 호출 // fetch api module const HOST = ""; export const request = async (path, options = {}) => { try { const uri = `${HOST}/${path}`; const response = await fetch(uri, options); if (response.ok !== true) { throw new Error("API failed"); } const json = await response.json(); return json; } catch (e) { alert(e.message); } };Index // index.js const app = new App({ $target: document.querySelector(.. 2022. 11. 13.
[Webpack] Webpack dev server config devServer webpack-dev-server 관련한 설정 error, warning overlay logging hot liveReload // stats: 'minimal' | 'errors-only' stats: { warnings: false, }, // disable console.log devServer: { client: { logging: 'info', overlay: { errors: false, warnings: false, }, }, open: false, historyApiFallback: true, static: './', hot: true, liveReload: true, }, stats: 'errors-onl.. 2022. 10. 10.
Why buffer makes IOs fast buffer를 설정하면 빠르다! 이유는? 데이터는 하드 디스크에 저장되어 있음 하드 디스크는 블록단위 저장장치 하드 디스크 데이터는 파일 시스템(VFS)이라는 추상화 장치를 통해 접근 가능 이 파일 시스템을 사용해 데이터를 요청하면 블록 단위로 반환 1 byte를 요청해도 256 bytes나 512 bytes 블록을 반환 어플리케이션은 512 bytes 중 필요한 1 byte를 읽고 나머지는 버림 512 bytes를 읽으려면 1 byte를 512번 512개의 블록을 읽어야 함 낭비 buffer를 512 bytes로 설정하면 1 블록을 버퍼에 담아 1번만 IO 하면 가능 (보통은 1024 or 2048 로 설정해 사용) 실제로는 복잡하지만 그냥 간단하게... 참고: 블록장치 IO 동작방식 1 블록장치 IO.. 2022. 10. 10.
How to change themes between light and dark, @media /* TODO */ :root { --loading-height: 140px; --white: #ffffff; --black: #000000; } .light-theme { --background-color: var(--white); --color: var(--black); } .dark-theme { --background-color: var(--black); --color: var(--white); } * { transition: background-color 0.2s ease, color 0.1s ease; } /* TODO dark mode 처리 */ @media (prefers-color-scheme: dark) { body { background-color: var(--background-co.. 2022. 10. 10.
[메모] lazy loading with intersectionObserver, 로더, localstorage const loadLazyImages = (entries, observer) => { entries.forEach(function (entry) { if (entry.isIntersecting) { console.log('loadLazyImages', entry.target.dataset.src, 'fetch data'); let lazyImage = entry.target; lazyImage.src = lazyImage.dataset.src; // lazyImage.srcset = lazyImage.dataset.srcset; lazyImage.classList.remove('lazy'); observer.unobserve(lazyImage); } }); co.. 2022. 10. 10.
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.
[java][spring] Spring MVC how to handle http request? Reques -> dispatcher servlet -> handler mapping -> find controller -> controller -> method -> return result (ModelAndView and ResponseEntity) -> view resolver -> find view -> create view with model data -> response 설명 2022. 10. 9.
[Javascript][Regex] Regex test does not select all items from a list [javascript] RegEx g flag test flag: g >> remember lastIndex /c/ig.test('ccc') // true /c/ig.test('ccc') // false // vs /c/i.test('ccc') // true /c/i.test('ccc') // true Don’t use g if you want to test several times Or Before another test, you should make test return false 시나리오 Senario I want to get all items that contains my search words. I used Regex test to fil.. 2022. 8. 22.
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.

티스토리툴바