반응형 분류 전체보기126 content-visibility로 렌더링 성능 향상 브라우저는 기본적으로 화면 밖의 콘텐츠도 모두 렌더링합니다. 이는 불필요한 리소스 낭비입니다.content-visibility: auto 를 사용하면 화면에 보이는 부분만 렌더링하고, 보이지 않는 부분은 필요할 때 렌더링하도록 최적화할 수 있습니다. 개발중인 서비스는 사용자가 원하는 만큼 이미지를 업로드할 수 있는 기능을 제공하고 있습니다. 문제는 이미지가 많아질수록 초기 페이지 로딩이 느려진다는 것입니다. /* vue3 */const CHUNK_SIZE = 3const imageChunks = computed(() => { const chunks = [] for (let i = 0; i ....image-chunk { content-visibility: auto; contain-i.. 2024. 12. 3. Web Workers와 OffscreenCanvas로 canvas 성능 향상 이번 프로젝트에서 구현해야하는 기능은 이미지 위에 겹쳐진 투명한 캔버스에 그림을 그릴 수 있는 웹 기반 그리기 도구를 만드는 것이었습니다. 그런데 캔버스 사이즈가 커지고 그리는 모양 수가 늘어나면서, 특히 자유형 그리기 중에 상당한 지연이 발생하기 시작했습니다.여기서 몇몇 최적화 기술을 시도했습니다.디바운싱 및 스로틀링: 이러한 기술은 마우스 이벤트 호출 수를 줄이는 데 도움이 되었지만 그리기의 부드러움도 감소시켰습니다(ux관점에서 안좋음).단순화된 그리기 알고리즘: 그리기 알고리즘을 최적화했지만, 미미한 개선만 제공했습니다.주요 문제는 모든 그리기 작업이 UI 업데이트 및 이벤트 처리와 경쟁하면서 메인 스레드에서 수행된다는 것이였고, 이러한 생각으로 인해 그리기 작업을 별도의 스레드로 오프로드하는 것을.. 2024. 10. 21. 프론트엔드 개발자 관점으로 바라보는 관심사의 분리와 좋은 폴더 구조 https://velog.io/@teo/separation-of-concerns-of-frontend 프론트엔드 개발자 관점으로 바라보는 관심사의 분리와 좋은 폴더 구조 (feat. FSD)최근 프론트엔드 개발에서 주목받는 FSD 아키텍쳐 폴더 구조를 주제로 소프트웨어 공학 관점에서의 관심사의 분리라는 원칙을 통해 설명하고자 했습니다. 이 글은 그동안 프론트엔드가 복잡성velog.io 2024. 9. 24. 아키텍처 FSD https://emewjin.github.io/feature-sliced-design/ (번역) 기능 분할 설계 - 최고의 프런트엔드 아키텍처기능 분할 설계(Feature-Sliced Design, FSD) 아키텍처의 개념과 이 아키텍처 방법론이 해결하는 문제를 이야기하고, FSD를 기존 아키텍처 및 모듈식 아키텍처와 비교한 뒤 장단점에 대해 소개합니다.emewjin.github.io 2024. 9. 5. SOLID 원칙으로 리액트 훅 작성하기 https://ykss.netlify.app/translation/write_solid_react_hooks/?utm_source=substack&utm_medium=email (번역) SOLID 원칙으로 리액트 훅 작성하기원문 : Write SOLID React Hooks SOLID는 가장 일반적으로 사용되는 디자인 패턴 중 하나입니다. 여러 언어와 프레임워크에서 사용되며, 리액트에서 사용하는 방법을 소개하는 문서도 많습니다. SOLID에ykss.netlify.app 2024. 6. 18. Query Keys를 관리하는 기준과 방법 https://velog.io/@bo-like-chicken/Query-Keys%EB%A5%BC-%EA%B4%80%EB%A6%AC%ED%95%98%EB%8A%94-%EA%B8%B0%EC%A4%80%EA%B3%BC-%EB%B0%A9%EB%B2%95 Query Keys를 관리하는 기준과 방법 Query Keys 관리의 중요성, 작성하는 기준과 방법에 대해서 알아보았습니다. velog.io 2024. 3. 28. 이전 1 2 3 4 ··· 21 다음 반응형