본문 바로가기

FrontEnd

 (437)
멀티쓰레드 Javascript 1편 : SharedArrayBuffer javascript의 공유 메모리(shared memory)에 대해 알아보고, SharedArrayBuffer와 TypedArray에 대해 알아봅니다. 브라우저에는 세 종류의 멀티쓰레딩 방법이 있습니다. web worker shared werker service worker node.js에는 worker_thread 모듈이 존재합니다. 각자 용도가 있지만, 대부분 이벤트 루프 기반 메세지 패싱 시스템 API 기반으로 동작합니다. 이는 여러 스레드가 동시에 공유 메모리에 접근할 수 있는 병럴 처리 방식보다 효율이 떨어지게 됩니다. 자바스크립트는 멀티쓰레딩의 힘을 더욱 강력하게 해주는 두 가지 도구를 갖고 있습니다. Atomics 객체 SharedArrayBuffer 클래스 이를 통해 메시지 전달에 의존하지..
자바스크립트 스킬 티어 리스트 출처 : https://www.youtube.com/watch?v=vdiYtiKD8eI fireship youtube 유투브 추천알고리즘이 재미있는 자료를 소개해주어 읽어봤습니다. state of js 2023(https://stateofjs.com) 레포트를 기반으로 만들어 진 것 같은데, 개인적으로 의미있는 결과들이 보여 정리해보고자 합니다. Vite(S) vs Next.js(S) Vite는 사실상 프론트엔드의 스프링과 같은 포지션을 잡고 있습니다. 프레임워크 별 설정 자동화 및 단순화 기능을 지원합니다. Vite와 Rollup.js 플러그인 사용방법만 알면 모든 프론트엔드 프레임워크를 쉽게 설정할 수 있습니다. Next.js는 현재 프론트엔드 프레임워크 3대장 체제에서 1대장 체제로 서열정리에 성공..
Rollup.js 알아보기 1편 : Rollup.js 튜토리얼 요즘 많이 사용하는 Vite 플러그인(vite plugin)은 롤업 플러그인의 슈퍼셋입니다. Rollup.js 플러그인의 아키텍처와 작성방법을 알면 Vite 플러그인에 대해 깊히 이해할 수 있습습니다. Vite 플러그인은 몇 가지 추가 Vite 관련 옵션으로 Rollup의 잘 설계된 플러그인 인터페이스를 확장합니다. rollupj.s 공식문서의 튜토리얼을 정리한 글입니다. 해당 튜토리얼을 통해 rollup.js의 매우 기본적인 기능들을 파악할 수 있습니다. (파일을 입력으로 받아, 출력 파일로 번들링, 트리 셰이킹, 코드 스플리팅, js 이외의 파일 처리하기) 번들 만들어보기 Rollup을 사용하는 가장 쉬운 방법은 명령줄 인터페이스(또는 CLI)를 사용하는 것입니다. 먼저, rollup을 전역 설치합니..
Content security policy[콘텐츠 보안 정책]에 대해 알아보기 keyword : 보안, 콘텐츠 보안 정책, Content Security Policy, CSP 최근 크롬 확장 프로그램의 구조를 분석할 일이 있었습니다. 그러다 리퀘스트 / 리스폰스 요청 후킹 및 콘텐츠 스크립트 인젝션과 관련된 콘텐츠 보안 정책에 대해 깊게 공부할 필요성을 느끼게 되어 정리합니다. 크롬 확장 프로그램과 워커는 일련의 서버 역할을 하므로, 효과적인 활용을 위해선 서버 측 지식의 공부도 필요합니다. 아래 글의 번역입니다. https://web.dev/csp/ Content security policy Content Security Policy can significantly reduce the risk and impact of cross-site scripting attacks in mo..
Vue3과 서버사이드 렌더링(SSR) Vue3과 같은 라이프사이클이 존재하는 프레임워크를 SSR과 같이 사용할 때 어떤 이슈가 있을까요? 공식 문서의 번역입니다. https://vuejs.org/guide/scaling-up/ssr.html Server-Side Rendering (SSR) | Vue.js vuejs.org SSR이란? Vue.js는 클라이언트 측 애플리케이션을 구축하기 위한 프레임워크입니다. 기본적으로 Vue 컴포넌트는 브라우저에서 출력으로 DOM을 생성하고 조작합니다. 그러나 동일한 컴포넌트를 서버에서 HTML 문자열로 렌더링하고 브라우저로 직접 보낸 다음 최종적으로 정적 마크업을 클라이언트의 완전한 대화형 앱으로 "수화(hydrate)"하는 것도 가능합니다. 서버에서 렌더링된 Vue.js 앱은 대부분의 앱 코드가 서버와..
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..
Node.JS 앱은 어떻게 종료되는가? node.js 앱은 어느 시점에 종료되는 걸까요? 이벤트 루프의 각 반복이 끝날 때마다 Node.js는 앱을 종료해야 하는지 판단합니다. 이를 위해 보류 중(pending)인 시간 제한(timeout)의 레퍼런스 카운트(reference count)를 세고 있습니다. setImmediate(), setInterval() 또는 setTimeout()을 통해 시간이 지정된 작업을 예약하면 레퍼런스 카운트가 증가합니다. 시간 지정 작업을 실행하면 참조 횟수가 줄어듭니다. 이벤트 루프 반복이 끝날 때 참조 횟수가 0이면 Node.js가 종료됩니다. 다음 예에서 확인할 수 있습니다. function timeout(ms) { return new Promise( (resolve, _reject) => { setTim..
Vue3로 debounce, throttle 구현하기 debounce 및 throttle은 함수 호출을 제한하여 이벤트 핸들러 호출 빈도를 줄일 수 있는 두 가지 기술입니다. 이 두 가지를 잘 활용하면 애플리케이션의 성능을 크게 향상시킬 수 있습니다. Vue 애플리케이션에서 watcher와 이벤트 핸들러를 debounce, throttle 하는 방법을 배워봅시다. Debounce 함수 만들기 디바운싱은 일정 시간이 지날 때까지 이벤트 트리거를 대기하여 애플리케이션의 성능을 개선할 수 있는 기술입니다. 디바운스 함수는 재실행되기 전에 설정된 시간 동안 대기할 수 있습니다. ex) 사용자 입력에 의한 네트워크 요청 제한, 화면 업데이트 제한 다음은 debounce 함수의 코드 스니펫입니다. export function debounce(fn, wait){ let..

티스토리툴바