본문 바로가기

JavaScript

(28)
웹 컴포넌트(Web Component) 딥 다이브 javascript.info의 web component 파트를 학습 및 정리한 내용이다. https://javascript.info/web-components Web components javascript.info 웹 컴포넌트란? 웹 컴포넌트는 완결성있는 기능을 포함한 컴포넌트를 만들기 위한 표준 기술 집합입니다. 자체 애트리뷰트 및 메서드, 캡슐화된 DOM 및 스타일을 포함한 사용자 정의 HTML 요소입니다. 컴포넌트란 재사용 가능한 UI의 단위다. UI는 마크업 뿐만 아니라, 스타일, 렌더링 로직, 비즈니스 로직 등을 전부 포함한다. 즉, 컴포넌트는 시각적 의미와 구조(마크업), 디자인 요소(스타일), 기능(함수) 세가지의 적절한 조합이다. 웹 컴포넌트는 UI 컴포넌트를 개발하기 위한 웹 표준 기술이..
[번역] 자바스크립트 리팩토링과 추상화 키워드 : 자바스크립트(javascript), 타입스크립트(typescript), 리팩토링(refactoring), 추상화(abstraction), 관심사의분리(seperation of concern) 원문 : https://refactor-like-a-superhero.vercel.app/en/chapters/08-abstraction Abstraction | Refactor Like a Superhero Book about how to refactor code efficiently and without pain. refactor-like-a-superhero.vercel.app 추상화 특정 데이터에 대해 로직을 적용하는 코드의 중복을 줄이는 방법은, 액션을 따로 파라미터화 하는 것이다. 이처럼 같은..
[JS] 한글을 2byte로 한 줄 길이 제한 및 줄바꿈 코드 바이트 수 기준으로 줄바꿈을 적용하는 코드 한 줄의 맨 앞에서 trim을 적용한다. 한 줄의 바이트 수가 threshold를 넘어가면 줄바꿈한다. /** * * @param {string} str * @param {number} threshold * @returns {string} */ const changeLine = (str="",threshold=80) => { /** * * @param {number} charCodeAt * @returns {number} */ const encode = (charCodeAt) => (charCodeAt > 127 ? 2 : 1); let [len, /**@type{string[]} */ buffer] = [0, []]; for (let i = 0; i < str..
Javascript로 Python range 함수 구현하기 아래와 같이 python range 함수와 유사한 구현을 만들어 봅니다. range(0, 5) // [0, 1, 2, 3, 4, 5] range(3, 9, 3) // [3, 6, 9] range(10, 50, 10) // [10, 20, 30, 40, 50] 파이썬으로 자주 사용하던 해당 함수를, 자바스크립트로 어떻게 구현할까요? stackoverflow에도 구현 예제가 많지만, Arrays.from 두번째 인자를 활용하는 방법은 처음 봐서 소개합니다. 모질라의 스펙에 따르면, Arrays.from은 3개의 인자를 허용합니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from Array.fr..
멀티쓰레드 자바스크립트 : 메세지 패싱 추상화 패턴 자바스크립트에서 멀티쓰레드를 사용할 땐, 쓰레드 간 메세지 패싱 패턴을 주로 사용합니다. 보통 간단한 문자열을 이용해 특정 함수를 호출하는 방식으로 구현하지만, 애플리케이션의 규모가 커지면 좀 더 좋은 방법이 필요하게 됩니다. 이를 위한 패턴들을 공부해 봅니다. The RPC Pattern RPC(원격 프로시저 호출) 패턴은 함수의 표현과 해당 함수의 인수를 직렬화한 뒤, 원격 타겟으로 전달하여 실행되도록 하는 방법입니다. ex) square_sum|num:1000000 궁극적으로 squareNum(1000000)과 같은 함수 호출로 변환될 수 있습니다. 메인 스레드가 웹 작업자에게 한 번에 하나의 메시지만 보내는 경우 웹 작업자에서 메시지가 반환되면 해당 메시지에 대한 응답임을 쉽게 알 수 있습니다. ..
Javascript 멀티쓰레딩 : 언제 멀티쓰레딩을 사용해야 할까 TL;DR 반드시 프로덕션 환경과 동일한 상황에서 벤치마킹하기 응용 프로그램에 작업자 쓰레드를 추가하는 주된 이유는 성능을 향상시키기 위한 것입니다. 그러나 해당 작업은 프로그램에 복잡성을 추가합니다. "Keep It Simple, Stupid"를 의미하는 KISS 원칙은 애플리케이션이 누구나 코드를 빠르게 보고 이해할 수 있도록 매우 단순해야 한다는 의미입니다. 작성된 코드를 읽을 수 있다는 것은 가장 중요하며, 목적 없이 프로그램에 스레드를 추가하는 것은 KISS를 위반하는 것입니다. 애플리케이션에 스레드를 추가해야 하는 절대적으로 타당한 이유가 있으며, 성능 향상이 증가하는 유지 관리 비용보다 중요하다는 것을 확인했다면, 우리는 스레드를 사용할 만한 상황에 처한 것입니다. 하지만 스레드를 구현하는 ..
멀티쓰레드 Javascript 3편 : 상호 배제를 위한 조정(coordination) 2023.01.23 - [프론트엔드 아키텍처] - 멀티쓰레드 Javascript 1편 : SharedArrayBuffer 멀티쓰레드 Javascript 1편 : SharedArrayBuffer javascript의 공유 메모리(shared memory)에 대해 알아보고, SharedArrayBuffer와 TypedArray에 대해 알아봅니다. 브라우저에는 세 종류의 멀티쓰레딩 방법이 있습니다. web worker shared werker service worker node.js에는 itchallenger.tistory.com 2023.01.24 - [프론트엔드 아키텍처] - 멀티쓰레드 Javascript 2편 : Atomics 객체와 원자성, 직렬화 Javascript의 공유 메모리 : Atomics와 ..
멀티쓰레드 Javascript 2편 : Atomics 객체와 원자성, 직렬화 2023.01.23 - [프론트엔드 아키텍처] - 멀티쓰레드 Javascript 1편 : SharedArrayBuffer Javascript의 공유 메모리 : SharedArrayBuffer에 대해 알아보자. javascript의 공유 메모리(shared memory)에 대해 알아보고, SharedArrayBuffer와 TypedArray에 대해 알아봅니다. 브라우저에는 세 종류의 멀티쓰레딩 방법이 있습니다. web worker shared werker service worker node.js에는 itchallenger.tistory.com 데이터 조작을 위한 원자적 연산 원자성은 ACID(atomicity, consistency, isolation, durability)라는 약어의 첫 번째 단어로 데이..