자바스크립트 효율적으로 처리하기 (requestAnimationFrame, requestIdleCallback, Web Workers) 브라우저 성능 최적화의 핵심은 단순히 코드를 “빠르게” 만드는 것이 아니라,언제 실행할지와 어디서 실행할지를 적절히 나누는 데 있다. 브라우저의 메인 스레드는 하나다. 개발자가 작성한 JavaScript 실행뿐 아니라 이벤트 처리, 스타일 계산, 레이아웃, 페인트, 컴포지팅까지 대부분의 주요 작업이 같은 스레드에서 처리된다.따라서 JavaScript가 메인 스레드를 오래 점유하면 브라우저는 화면을 갱신하지 못한다. 사용자는 이를 스크롤 버벅임, 클릭 지연, 입력 랙, 애니메이션 끊김 같은 형태로 체감한다.브라우저가 일반적으로 목표로 하는 60fps 환경에서는 한 프레임에 사용할 수 있는 시간은 약 16.6ms뿐이다.이 짧은 시간 안에 JavaScript 실행, 스타일 계산, 레이아웃, 페인트까지 끝나야 ..
getElementsByClassName 함수 구현하기 (+자바스크립트에서 유사배열과 배열, 변환 방법) 프론트엔드 라이브 코딩이나 화이트보드 테스트에서 자주 나오는 과제 중 하나가 DOM API를 직접 구현해보는 문제입니다. 그중 대표적인 것이 document.getElementsByClassName을 직접 만들어보라는 과제입니다. 이번 글에서는 이 문제를 어떻게 접근하면 좋을지 베이스케이스 → 엣지케이스 → 효율성 → 가독성 순서로 풀어봅니다. 문제 이해목표는 주어진 className을 가진 모든 요소를 찾아 배열로 반환하는 함수입니다.기본적으로는 DOM 트리를 순회하면서 조건에 맞는 요소를 모으면 됩니다.function getElementsByClassName(className) { const bodyChildrenEls = document.body.children; const result = [..
Three.js 로 움직이는 지구본 만들기 https://velog.io/@whdnjsdyd111/Three.js-%EA%B8%B0%EB%B3%B8-%EA%B5%AC%EC%A1%B0 [Three.js] 기본 구조 원시 모델 Three.js 의 원시 모델이란, 런타임에 다양한 인자들로 정의한 3D 모양을 의미한다. 주로 공, 육면체 등으로 3D 그래프를 만드는데 사용한다. BoxGeomtry 육면체 CircleGeometry 원 ![](https://images.v velog.io 원에 이미지 씌우고 모션 주기 .. 재밌다 예전에 사둔 three.js 강의 천천히 들어봐야겠다 ㅎㅎ
[js library] AOS 스크롤 애니메이션 구현하기 참고 [AOS] 📚 스크롤 애니메이션 사용법 - Animate On Scroll AOS.js (Animate On Scroll) 기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우, AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있다. AOS 라이브러리는 자바스크립트를 깊 inpa.tistory.com 이번에 만들고 있는 외주 사이트에서 많이 쓰이는 애니메이션 라이브러리이다. 이 효과 하나만으로도 웹이 한층 더 다이나믹해보여서 앞으로도 자주 쓸 것 같다. 사진이 가운데서부터 커지는 효과 아래에서 하나씩 올라오게
[Javascript plugin] Masonry Layout 적용하기 메이슨리 레이아웃 (Masonry Layout)을 이용하면 크기가 다른 컨텐츠를 효율적으로 배치할 수 있다.빈영역을 최소화할 수 있으며 지겨운 스타일로부터 벗어나 자유로운 느낌을 주기도 한다! 핀터레스트가 이러한 레이아웃을 사용하곤 한다. https://masonry.desandro.com/ MasonryInstall Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower: bower install masonry --save Install with npm: npm install masonry-layout Getting started HTML Include the Masonry .js fil..

티스토리툴바