본문 바로가기

✘✘✘ 개발일기9

부동 소수점: 0.1을 100번 더하면 10이 아니다?? Floating Point let sum = 0; for (let i = 0; i 100000111 0.3 => 0.01001100110011......(0011)의 무한 반복입니다. 이렇게 2진수로 표현하지 못하는 소수가 발생합니다. 어쩔 수 없이 컴퓨터에는 표현할 수 있는 가장 근사치의 값이 저장됩니다. 읽어 보기 2023. 3. 1.
2. 이전 전략 그리고 어려움 3개월 안에 모든 걸 이전할 수 있을까? 이전 방식 결정 앱 전체 대시 보드만 이전 iframe: 독립된 대시보드 용 react app을 만들고 vue 내부에 react 앱 iframe으로 구현 component: react component를 만들고 이를 vue 내부에서 mount 시키기 React 이전 작업 필요 But frontend 팀은 Business 요구사항 동시 개발 QA에서 나오는 이슈 동시 처리 refactoring 기간은 짧은데 이 기간 동안 새로운 요구사항 진행, 기존 버그 fix 등 이전 작업 외 다른 일들을 동시에 진행해야 하는 어려운 환경 난이도 최상 2022. 12. 19.
1. React 이전 시작하게 된 이유 (수정 중) 기술 부채 + 최적화 현 상황 대시보드가 느리다. why? 기술 부채: Vue2, node 10 what? 무었 때문에 느리냐? Vue2 는 pub-sub 기반 상태 시스템 => destroy 시 모든 리스너들을 클리어 해야 한다 최신 기술 스택이 아니다 보니 virtual dom 등 최적화 부재 VueX 상태 관리 이전 시 장점 속도 향상: 최신 기술이 적용된 빠른 기술 시스템 긍정적인 개발 경험: 시장에서 필요하는 기술 역량 함양 구인이 수월해 진다 Why vue2 component destroy slow? In Vue 2, the process of destroying components in deeply nested structures might be slower due to several fac.. 2022. 12. 19.
[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.

티스토리툴바