React-Query 상태 분리하기 리액트를 다룰 때 상태를 이용해서 뷰를 렌더링한다. 프론트에서 표현하는 데이터가 많아지면서 상태도 상당히 늘어났다. 그중 대표적인 것이 서버에서 받아오는 데이터 이러한 데이터들은 보통 전역에서 관리해야되거나, 복잡한 로직을 가지고 있는 경우가 많기 때문에 상태관리 라이브러리의 힘을 빌리는 경우가 많다. 많은...

Redux 리덕스는 이전에 블로그를 만들면서 살짝 다뤄본 적이 있는데 아무 생각없이 따라서 만들기만해서 사실 모르는 것에 가까워서 복습. 왜 사용해야할까? 사실 잘 모르겠다 리덕스를 이제서야 공부하는 이유 중 하나이기도 한데 여태까지 작업한 사이드 프로젝트에서는 context와 useReducer를 이용해서 충분히 상태관리가 가능했기 때문에 ...

V8 메모리 관리 nodejs는 자바스크립트로 이루어져있고 자바스크립트는 V8엔진에 의해서 돌아간다 가비지 컬렉터의 작동하는 방식, 코드를 작성할 때 백그라운드에서 발생하는 일, 메모리가 해제되는 방식을 알아보자 메모리 영역 V8의 메모리공간을 Resident Set이라 부른다. 메모리 세그먼트는 아래와 같이 나뉜다 Code : 실행...

하드웨어 가속 하드웨어 가속이란? 브라우저가 페이지를 렌더링하는 과정 중 CSSOM과 DOM 트리를 합쳐서 렌더 트리를 만든 뒤, 렌더 트리를 참조해 화면에 나타낼 부분을 Render Layer를 만드는데 이 과정에서 CPU가 아닌 GPU를 이용해 paint될 레이어들을 Graphics Layer로 분리한다. CPU가 아닌 하드웨어를 사용하기 때...

cors SOP (Same Origin Policy) SOP(동일 출처 정책)는 동일한 Origin에서만 나온 리소스와 상호작용하도록 하는 정책이다. Origin? 오리진이란 위 그림에서 알 수 있듯 URL 요소 중에 protocol와 host(hostname + port) 부분을 가르켜 origin이라고하는데 이 부분이 일치해야 동일한 출...

HTTPS HTTP 프로토콜은 전송 정보가 암호회되지 않는 문제점을 가지고 있어서 클라이언트와 서버가 데이터를 주고 받을 때 해커의 공격으로부터 탈취당하기가 쉽다. 이러한 보안상의 문제점을 극복하기 위해 나온것이 SSL(보안 소켓 계층)을 사용한 HTTPS(HyperText Transfer Protocol Secure)인데 주고받는 메세지와 헤더를...

HTTP HTTP HyperText Transfer Protocol 웹에서 이루어지는 모든 데이터 교환의 기초로 HTML 문서와 같은 리소스를 가져올 수 있도록 해주는 클라이언트 - 서버 프로토콜이다. HTTP의 특징 http는 크게 무상태성과 비연결성 두 가지 특징을 가지고 있다. 1. 무상태성 서버가 클라이언트를 식별할 수 있게 해주는...

타입 내장 타입 자바스크립트에는 다음 7가지 내장 타입이 존재한다. null undefined number string boolean object symbol 이 중 object를 제외한 나머지 타입들은 원시 타입이라고 부른다. typeof 이러한 타입들은 typeof연산자를 사용해서 알 수 있는데 놀랍게도 ty...

Web Worker 익히 알다시피 자바스크립트는 싱글 스레드이며 그 자체로는 써먹기 힘들기 때문에 V8, node 엔진 등을 이용해서 비동기를 이용해 그 문제점을 어느정도 극복하고 있다. 비동기 작업의 한계 하지만 그러한 비동기 작업들도 만능은 아니다. 다음과 같은 일을 할 경우 메인 스레드가 block되면서 원활한 작업이 이루어지지 않게된다. ...

Iterator 이터레이터를 알기 전에 용어를 간단하게 정리하고 가자 iterator next() 메서드를 가지고 있는 객체로 [Symbol.iterator]에 의해 생성된다. next()메서드는 반드시 {done: boolean [, value: any]} 꼴의 객체를 반환해야한다. iterable 반복 가능한 이라는 뜻을 나타내며 ite...