개발/자바스크립트 35 [Web worker] 웹워커 간단 사용기 들어가며 이번 글은 web worker(이하 웹 워커)에서 postMessage에 대한 에러를 확인하고 이를 수정하는 방법론? 에 대한 글입니다. 이 글에선 웹 워커의 간단한 동작,worker와의 통신, react에서 사용할 때 주의해야 할 점을 다룹니다. Web worker란 web.dev 문서를 잡고하면 웹 워커는 웹 애플리케이션에서 백그라운드 스크립트를 생성하기 위한 API입니다. 이 말보다는 저는 웹 워커는 자바스크립트에 없는 동시성을 주는 브라우저의 기능이다라고 설명합니다. 자바스크립트의 한계 웹 워커는 자바스크립트의 언어 자체가 가진 문제점으로 인해 만들어졌습니다. 자바스크립트는 단일 스레드 환경으로 여러 가지 스크립트를 동시에 실행할 수 없습니다. 그래서 비동기 코드를 작성하거나 setTim.. 2023. 9. 4. [자바스크립트] IndexedDB 실전 사용법 (idb) 들어가며 예전에 localstorage 관련 글 마지막에 localstorage 보다는 indexedDB 사용을 권고한다는 글로 끝맺음했었습니다. 시간이 흘러 이번 프로젝트에서 IndexedDB를 이용해 네트워크 리소스를 최적화한 경험이 있어 공유드립니다. 개발 환경은 Next, React를 사용했지만 바닐라 자바스크립트 기반으로도 동작하는 코드이니 살펴보시면 좋겠습니다. 대상 독자 프론트엔드 개발을 하다가 localstorage, sessionstorage를 넘어 indexedDB도 써보려는 개발자 같은 파일을 여러 번 요청하는 게 안타까운 최적화에 특화된 개발자 [Next] localstorage를 사용하는 방법 #1 localStorage 란? 웹 스토리지 객체(web storage object)의.. 2022. 9. 30. [자바스크립트] 스크롤에 연동되는 fade 효과를 구현하는 3가지 방법 요새 css와 자바스크립트를 이용해서 interactive webpage에 대해 관심을 가지고 공부하고 있다. 특히 유튜버 중에 Interactive Developer 이분을 보면서 수준 차이를 확실히 느끼고 있다. Interactive Developer 코드로 만드는 애니메이션, 영감, 실리콘밸리의 생활과 해외취업에 대해 이야기 합니다. https://blog.cmiscm.com/ www.youtube.com 이런 와중에 이분의 포트폴리오 사이트를 보게되었고, 초라한 내 포폴 사이트에 디자인적 요소를 하나씩 추가해보면 어떨까 싶어서 시간 날 때마다 추가하고 있다. 저번에는 버튼 클릭시 소리가 나는 기능을 추가해봤고, 이번에는 스크롤에 따라 fade in, out이 되는 기능을 추가해보려고 한다. 그럼 .. 2021. 7. 22. [자바스크립트] 자바스크립트의 동작에 대하여 #2(V8 엔진, 최적화 팁 5개) 2021.03.26 - [개발/자바스크립트] - [자바스크립트] 자바스크립트의 동작에 대하여 #1(feat.엔진, 런타임, 콜스택) 다음 포스트 V8 엔진, 최적화 팁 5개에 대해 추가적으로 살펴보겠다. 일단 이 글은 blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e 를 토대로 작성한 것이다. 우선 자바스크립트의 엔진에 대해 살펴보기 전에 브라우저의 전체 구조를 한번 살펴보겠습니다. 사용자 인터페이스(UI) 레이어는 인터넷 창을 딱 열었을 때 보이는 상단 레이어다. 주소창, 뒤로 가기, 앞으로 가기, 새로고침, 북마크, 환경설정과 같은 UI가 해당된다.. 2021. 3. 29. 이전 1 2 3 4 ··· 9 다음
