FrontEnd94 HTTP/1.1과 HTTP/2 HTTP/1.1 HTTP/1.1의 동작방식 - 기본적으로 Connection당 하나의 요청을 처리하도록 설계 - 동시전송이 불가능하고 요청과 응답이 순차적으로 진행 - HTTP 문서 안에 포함된 다수의 리소스(Images, CSS, Script)를 처리하려면 요청할 리소스 개수에 비례해서 Latency(대기 시간) 증가 HTTP1.1의 단점 HOL(Head Of Line) Blocking : 특정 응답의 지연 HTTP/1.1의 connection당 하나의 요청처리를 개선할 수 있는 기법 중 pipelining이 존재한다. 이것은 하나의 connection을 통해 다수 개의 파일을 요청/응답 받을 수 있는 기법을 말하는데 이 기법을 통해서 어느 정도의 성능 향상이 가능하나 큰 문제점이 하나 있다. 하나의 .. 2022. 4. 4. MSA 핵심 디자인 패턴-saga, event sourcing, CQRS, BFF, Api Gateway Two Phase Commit 분산 DB 환경에서 쓰는 방법으로 주로 RDBMS에서 기능을 제공한다. Two-Phase Commit은 말 그대로 2 단계에 거쳐서 데이터를 영속화 하는 작업이다. 위 그림과 같이 여러 DB가 분산되었을 때, 트랜잭션을 조율하는 조정자(Cooredinator)가 존재한다. 조정자의 역할은 트랜잭션 요청이 들어왔을 때 두 단계를 거쳐 트랜잭션 진행을 담당하는 것이다. 첫 번째 단계는 Prepare이며, 이는 쉽게 말해 연관된 DB에게 데이터를 저장할 수 있는 상태인지 묻는 과정이다. 메시지를 받은 DB에서는 Commit 작업을 위한 준비를 진행한다. 이후 데이터를 영속할 수 있는 준비가 완료되면 조정자에게 준비가 완료되었음을 알리고, 반대로 Commit 할 수 없다면 불가하다.. 2022. 4. 3. [React.js] 상태 관리 라이브러리 비교 3 - Recoil Recoil 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 좋으나 내장 상태 관리 기능은 다음과 같은 한계를 가진다. 컴포넌트의 상태는 공통된 상위요소까지 끌어올림으로써 공유될 수 있지만, 상위요소의 변경은 하위요소를 재렌더링 시키므로, 이 과정에서 거대한 트리가 다시 렌더링되는 효과를 일으키기도 한다. Context는 단일 값만 저장할 수 있으며, 자체 consumer를 가지는 여러 값들의 집합을 담을 수는 없다. 이 두 가지 특성이 트리의 최상단(state가 존재하는 곳)부터 트리의 잎(state가 사용되는 곳)까지의 코드 분할을 어렵게 한다. Facebook의 Dave McCabe가 개발한 React용 상태 관리 라이브러리.. 2022. 4. 1. [React.js] 상태 관리 라이브러리 비교 2 - Mobx Mobx란? MobX의 README는 MobX를 다음과 같이 정의하고 있다. Anything that can be derived from the application state, should be derived. Automatically. -> 어플리케이션의 상태에서 파생(derived)될 수 있는 모든 것은 자동으로 파생되어야 한다. MobX는 전역 상태 라이브러리이다. 모든 상태변화를 일어나는 부분으로 자동으로 추적해주는 역할을 한다. 상태관리는 왜 필요할까? 첫 번째로 유지보수가 쉬워지도록 상태 로직을 분리하여 모듈화 할 수 있고, 두번째로 상태관리의 단계를 간결하게 해준다. MobX는 간단하고 확장 가능한 상태 관리 라이브러리를 철학으로 하고있다. MobX Overview MobX는 다음과 같은 .. 2022. 3. 30. [React.js] redux-thunk vs redux-saga redux-thunk와 redux-saga는 리덕스에서 비동기 작업을 돕는 미들웨어이다. redux-thunk 리덕스에서 비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어로 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치할 수 있다. 함수를 디스패치할 때는, 해당 함수에서 dispatch와 getState를 파라미터로 받아와야하고, 이 함수를 만들어주는 함수를 thunk라고 부른다. 따라서 리덕스 스토어의 상태에 접근하거나 또 다른 액션을 디스패치하는 것이 가능하다. thunk 미들웨어의 문제점은 action에서 너무 많은 일을 한다는 점이다. 액션 생성자는 type과 payload가 담긴 객체를 생성해서 반환하는 역할을 수행하기로 했는데, thunk 미들웨어에서는 API 요청이나 비동기 처.. 2022. 3. 28. [React.js] 상태 관리 라이브러리 비교 1 - Redux 리액트 프로젝트의 규모가 커질수록 상태관리 라이브러리 도입이 필수적이라는 생각이 들었다. 정말 다양한 상태관리 라이브러리들이 존재하고, 의견도 다양해서 정리해보고자 한다. Redux 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리할 수 있으며 글로벌 상태 관리도 용이하게 만드는 상태관리용 라이브러리이다. 리액트뿐만 아니라 일반 JavaScript 환경에서 사용할 수도 있고, Angular와 같은 다른 프레임워크에서 사용되기도 한다. Redux는 Context API가 지금의 형태로 사용방식이 개선되기도 전에, 그리고 useReduxer라는 Hook이 존재하기 전부터 만들어진 라이브러리이다. 개선되기 전의 Context API는 프로젝트에서 글로벌 상태관리를 하는 것이 굉장히 까다로웠기 .. 2022. 3. 20. 이전 1 2 3 4 5 6 7 8 ··· 16 다음 반응형
