분류 전체보기 (989) 썸네일형 리스트형 리액트 이벤트 리스너는 어떻게 등록되고 처리되는가 우리는 리액트 컴포넌트의 JSX에 콜백 형태로 이벤트 리스너를 등록합니다. 이는 natiive DOM API를 사용할 땐 권장되지 않는 방식입니다. 보통 셀렉터와 이벤트 리스너 API를 사용하죠. 그런데도 우리는 리액트로 UI를 개발할 때, 콜백 이벤트 핸들러를 너무나도 자연스럽게 사용하고 있습니다. 왜 그래도 되는지 알아봅시다. 오개념 (The misconception) 먼저 질문을 던저 봅시다. 우리는 다음과 같은 코드를 function App() { return ( console.log('Click on the button')}> Click me ); } 이렇게 이해해도 되는걸까요? // `buttonRef` an imaginary reference added by React on the butto.. 멀티쓰레드 자바스크립트 : 메세지 패싱 추상화 패턴 자바스크립트에서 멀티쓰레드를 사용할 땐, 쓰레드 간 메세지 패싱 패턴을 주로 사용합니다. 보통 간단한 문자열을 이용해 특정 함수를 호출하는 방식으로 구현하지만, 애플리케이션의 규모가 커지면 좀 더 좋은 방법이 필요하게 됩니다. 이를 위한 패턴들을 공부해 봅니다. The RPC Pattern RPC(원격 프로시저 호출) 패턴은 함수의 표현과 해당 함수의 인수를 직렬화한 뒤, 원격 타겟으로 전달하여 실행되도록 하는 방법입니다. ex) square_sum|num:1000000 궁극적으로 squareNum(1000000)과 같은 함수 호출로 변환될 수 있습니다. 메인 스레드가 웹 작업자에게 한 번에 하나의 메시지만 보내는 경우 웹 작업자에서 메시지가 반환되면 해당 메시지에 대한 응답임을 쉽게 알 수 있습니다. .. typescript(타입스크립트)의 satisfies 연산자 제대로 알아보기 TL;DR : satisfies 연산자는 구체적인 데이터를 가장 구체적인 서브타입으로 추론하기 위한 도구다. 타입스크립트 4.9에 satisfies 연산자가 도입되었습니다. 공식문서와 여러 블로그에서 해당 개념을 다루고 있지만, 약간 이해하기에 어려운 설명인것 같아 보충합니다. 아래 설명은 공식 문서에서 발췌했습니다. TypeScript 개발자는 종종 딜레마에 직면합니다. 우리는 일부 표현식이 일부 타입과 일치하는지 확인하면서도, 추론을 위해 해당 표현식의 가장 구체적인 타입을 유지하기를 원합니다. 보통 아래와 같이 타입 없이 구체적인 표현식 데이터를 종종 선언합니다. // 각 속성은 스트링이나 RGB 튜플이 될 수 있습니다. const palette = { red: [255, 0, 0], green: .. 리덕스는 왜 단일 스토어를 사용하는가? TL;DR : 리덕스의 모듈화 단위는 스토어가 아니라 리듀서다 Dan Abramov의 답변 번역입니다 : https://stackoverflow.com/questions/33619775/redux-multiple-stores-why-not Redux - multiple stores, why not? As a note: I've read the docs for Redux (Baobab, too), and I've done a fair share of Googling & testing. Why is it so strongly suggested that a Redux app have only one store? I understand the... stackoverflow.com 여러 스토어를 사용해야 하는 극.. 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)라는 약어의 첫 번째 단어로 데이.. 멀티쓰레드 Javascript 1편 : SharedArrayBuffer javascript의 공유 메모리(shared memory)에 대해 알아보고, SharedArrayBuffer와 TypedArray에 대해 알아봅니다. 브라우저에는 세 종류의 멀티쓰레딩 방법이 있습니다. web worker shared werker service worker node.js에는 worker_thread 모듈이 존재합니다. 각자 용도가 있지만, 대부분 이벤트 루프 기반 메세지 패싱 시스템 API 기반으로 동작합니다. 이는 여러 스레드가 동시에 공유 메모리에 접근할 수 있는 병럴 처리 방식보다 효율이 떨어지게 됩니다. 자바스크립트는 멀티쓰레딩의 힘을 더욱 강력하게 해주는 두 가지 도구를 갖고 있습니다. Atomics 객체 SharedArrayBuffer 클래스 이를 통해 메시지 전달에 의존하지.. 이전 1 ··· 52 53 54 55 56 57 58 ··· 124 다음
