JavaScript (28) 썸네일형 리스트형 멀티쓰레드 Javascript 1편 : SharedArrayBuffer javascript의 공유 메모리(shared memory)에 대해 알아보고, SharedArrayBuffer와 TypedArray에 대해 알아봅니다. 브라우저에는 세 종류의 멀티쓰레딩 방법이 있습니다. web worker shared werker service worker node.js에는 worker_thread 모듈이 존재합니다. 각자 용도가 있지만, 대부분 이벤트 루프 기반 메세지 패싱 시스템 API 기반으로 동작합니다. 이는 여러 스레드가 동시에 공유 메모리에 접근할 수 있는 병럴 처리 방식보다 효율이 떨어지게 됩니다. 자바스크립트는 멀티쓰레딩의 힘을 더욱 강력하게 해주는 두 가지 도구를 갖고 있습니다. Atomics 객체 SharedArrayBuffer 클래스 이를 통해 메시지 전달에 의존하지.. ECMAScript(ESM)의 module resolution(모듈 해석)에 대해 알아보자 프론트엔드 개발자들은 주로 webpack, rollup(vite)에 의존한 모듈 resolution을 자연스럽게 사용하기에, 브라우저에서 ESM을 직접 사용하면, 생각했던 대로 동작하지 않는다는 사실을 알 수 있습니다. ECMAScript의 모듈 해석 알고리즘을 알아봅시다. specifier(지정자)를 사용한 모듈 참조 다른 ECMAScript 모듈의 코드는 import 문(라인 A 및 라인 B)을 통해 액세스됩니다. // Static import import {namedExport} from 'https://example.com/some-module.js'; // (A) console.log(namedExport); // Dynamic import import('https://example.com/so.. [번역] 웹 애플리케이션의 메모리 누수 진단하고 고치기 다음과 같은 화면을 본 적 있나요? 크롬은 위와 같이 해당 페이지에서 메모리 누수가 발생했음을 알려줍니다. 메모리 누수가 뭔가요? 메모리 누수는 자원 할당을 잘못 관리하여 컴퓨터 프로그램이 더 이상 필요하지 않은 메모리를 해제하지 않아 성능 저하를 초래하는 것을 말합니다. 실행되는 동안 지속적으로 더 많은 메모리를 소비합니다. 거의 모든 프로그래밍 언어의 메모리 생명 주기는 메모리를 할당하고, 사용하고, 해제하는 방식으로 작동합니다. JS 메모리 누수가 문제가 되는 이유 스마트폰 출시와 모바일 앱의 확산 이후 웹 개발자는 이에 영감을 받아 웹 페이지를 디자인하고 구성하는 방식을 변경하기 시작했습니다. 오래 전 웹 개발 환경은 Java/JSP, PHP, ASP 및 Ruby와 같은 서버측 기술을 사용하는 M.. [번역] 자바스크립트 디버깅 완벽가이드 Chrome Devtool을 사용한 디버깅 방법을 마스터해 봅니다. 아래 글을 번역한 글입니다 : https://dev.to/atapas/the-definitive-guide-to-javascript-debugging-2021-edition-116n The definitive guide to JavaScript Debugging [2021 Edition] Introduction As developers, we’ve traditionally rooted out errors in our programs (we’ll c... dev.to 들어가며 개발자인 우리는 전통적으로 로그 문을 사용해 프로그램의 오류를 근절했습니다. JavaScript에는 이를 위한 유명한 console.log() 메서드가 있습니다. c.. Critical Rendering Path 최적화하기 사용자에게 최대한 빨리 화면을 보여주고, 최대한 빨리 앱의 기능을 제공하는 방법을 알아봅시다. 우측 문서의 번역입니다. : https://web.dev/critical-rendering-path-analyzing-crp/ Analyzing Critical Rendering Path Performance Learn to identify and resolve critical rendering path performance bottlenecks. web.dev Critical Rendering Path의 성능 병목 현상을 식별하고 해결하려면 일반적인 함정에 대한 충분한 지식이 필요합니다. 실습을 통해 페이지를 최적화하는 데 도움이 되는 일반적인 성능 패턴을 알아봅시다. Critical Rendering Pat.. 이벤트 루프에 대한 이해도를 파악할 수 있는 면접질문 Q1 : 아래 코드는 100번을 실행해도 실행결과가 똑같습니다. setImmediate(() => console.log('setImmediate')); Promise.resolve().then(() => console.log('promise')); process.nextTick(() => console.log('nextTick')); 1. 로그는 어떤 순서로 찍힐까요? 2. 왜 이 순서로 찍히는지 설명해보세요 Q2 : 아래 코드는 실행 결과가 상황에 따라 다를 수 있습니다. // timeout_vs_immediate.js setTimeout(() => { console.log('timeout'); }, 0); setImmediate(() => { console.log('immediate'); }); $ .. 보다 탄력적인 웹을 위한 점진적 향상[Progressively enhance for a more resilient web] 요즘 트위터에서 자주 언급되는 Progressive enhance에 대해 알아봅시다. 원문 주소입니다 : https://jjenzz.com/progressively-enhance-for-a-more-resilient-web Progressively enhance for a more resilient web There has been a lot of talk on the socials lately about progressive enhancement. Some good, some bad, and while the bad is often misled I get it. jjenzz.com 최근 점진적 향상(progressive enhancement)에 대한 이야기가 많이 나오고 있습니다. 이 주제에 대한 교육.. 자바스크립트 참조에 관한 시각적 가이드 [aka 자바스크립트 포인터] 자바스크립트의 참조에 대해 시각적으로 알아봅니다. 원문 링크입니다 : https://daveceddia.com/javascript-references/ A Visual Guide to References in JavaScript daveceddia.com 코딩 학습 1일차에 누군가가 이렇게 설명합니다. "변수는 상자와 같습니다. let thing = 5는 thing 상자에 5를 넣습니다." 변수가 실제로 동작하는 방식은 아니지만 계속 진행하기에 충분합니다. 수학 수업에서 큰 그림에 대해 거짓말을 하는 것과 같습니다. 큰 그림을 바로 보여주면 뇌를 폭발시킬 것이기 때문입니다. 하지만 얼마 후 이상한 문제가 보이기 시작합니다. 변경하지 않았을 때 값이 변경되는 변수. "나는 그것을 복사했다고 생각했습니다! .. 이전 1 2 3 4 다음
