목차 1. CSR이란? 2. Vanilajs, Nodejs, Expressjs를 이용한 SSR 만들어보기 CSR이란? 웹 페이지를 브라우저에 렌더링하는 전통적인 방식은 서버에서 렌더링하여브라우저로 뿌려주는 MPA(Multi Page Application) 방식이었습니다. CSR이 등장하게 된 여러가지 이유 중 하나로, 하드웨어의 발달은 소프트웨어에서의 많은 기능들의 실현을 가능하도록 했고, 이에따라 서버의 역할이 점점더 많아지고 서버가 감당하는 부하가 커졌습니다. 이러한 서버의 부하를 줄이기 위한 여러가지 개선방안이 필요했고 CSR은 그 대안 중 하나가 되었습니다. 서버에서 rendering하여 정적 리소스를 전송하는 것이 아닌 웹 클라이언트에서 렌더링하는 방식입니다. 하나의 HTML파일과 History..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/nkGsQ/btsdRghpbDQ/HdDwPxz06n0OLZkayIO4XK/img.png)
Redux redux는 인기있었던 전역 상태관리 라이브러리입니다. redux와 같은 전역 상태관리라이브러리를 이용하여 상태 관리에 대한 단순화를 제공할 수 있습니다. 깊이가 50인 컴포넌트가 존재하고 root컴포넌트에서 최하위 컴포넌트에 상태를 전달하는데 그 사이의 컴포넌트에서는 그 상태를 전혀 사용하지 않는다고 생각해볼때 48개의 컴포넌트에 쓰지않는 코드가 추가되는 불합리한 구조를 가지게 됩니다. 전역 상태관리를 이용하여 root컴포넌트의 상태를 최하위 컴포넌트가 바로 접근하여 사용할 수 있다면 상태관리에 대한 단순함을 제공할 수 있게 됩니다. redux의 데이터 흐름도는 다음과 같습니다. React Component에서 변화가 일어남 action 생성함수(Action Creator)에서 action을..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cIWWD0/btsdO2raqaz/bKeBog3FTrUkqJ0UiQtbsk/img.png)
DOM HTML, XML등 문서의 프로그래밍 interface입니다. 문서의 구조회 된 표현을 제공하며, 프로그래밍 언어가 DOM 구조에 접근하여 문서 구조를 동적으로 변경할 수 있도록 돕습니다. Node와 property, method 등을 가지고 있는 object문서로 표현하며, 이들은 Web page를 script 또는 프로그래밍 언어들에서 사용될 수 있도록 연결시켜주는 역할을 담당합니다. Virtual DOM virtual DOM은 UI를 가상으로 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의하여 실제의 DOM과 동기화 하는 프로그래밍 개념입니다. DOM을 수정하는 일은 비용이 크기 때문에 성능저하를 최소화 하기 위해 DOM을 최소한으로 수정해야 됩니다. 웹 application이 복잡..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/zikgq/btsdRhN4YUO/k4mkKXspvpADMqbkCSIpk1/img.png)
React Hooks Hooks는 React v16.8에 추가된 기능입니다. 이전 버전에서 함수 컴포넌트에서는 사용할 수 없던 class 컴포넌트의 Life Cycle메서드(componentDidMount, componentWillUnmount, componentDidUpdate)와 동일한 기능을 사용할 수 있도록 고안된 기술입니다. Closure 함수가 속한 Lexical scope를 기억하여 해당 함수밖에서 이 scope에 접근할 수 있게 하는 기능. react hooks를 이해하기 전에 먼저 closure를 알고 있어야 합니다. closure를 한줄로 정의하면 위와 같습니다만, 잘 이해하기 위해 직접 사용해볼 필요가 있습니다. 여기서는 React hooks를 직접 만들어보며, closure를 사용해..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/dSKeDf/btsdQKJNS8F/bsxZ78UYtyzezh9kvAn3W0/img.png)
현재 재직중인 회사에서 yarn workspace를 활용하여 모노레포(MonoRepo) 프론트엔드 시스템을 구축하고 있습니다. 제가 하는 업무는 기존 서비스하는 application의 공통적으로 사용되는 컴포넌트를 storybook에 작성한 뒤 storybook 컴포넌트를 기존 컴포넌트와 교체하는 작업입니다. 이러한 업무를 진행하던 중 이슈가 발생하여 기록해놓고자 합니다. Monorepo 여러개의 프로젝트를 하나의(mono) 저장소(repository)로 관리하는 시스템을 의미합니다. 각각 패키지를 하나의 Root Package 아래에 묶어 하나의 저장소로 관리합니다. 기존 멀티레포 시스템에서 모노레포 시스템으로 프로젝트를 구축하며 다음과 같은 이점을 얻기를 원하고 있습니다. 중복되는 패키지에 대한 공간..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bKCHba/btrtyd37AT4/oXewT5KqUWDIo7FzqUi6s0/img.png)
Redux redux는 인기있었던 전역 상태관리 라이브러리이다. https://kmj24.tistory.com/43 Redux 리덕스 리덕스는 상태(State)를 관리 라이브러리이다. 상태(State) 란? 컴포넌트 내 mutable 데이터 저장소이다. mutable하다는 의미는 상태값을 변경할 수 있다는 것이고 뷰(render)에서 상태를 이용하고, kmj24.tistory.com redux의 주요 규칙을 다시 짚어보자 1. Action 상태에 변화가 필요할 때 action을 발생시켜서 redux에 dispatch 2. Reducer 상태를 변화시키는 함수 reducer는 순수함수이며, state, action 2가지 파라미터를 가지도록 한다. 순수함수 - 이전 상태를 변경하지 않고, 새로운 상태 객체..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/baVHhg/btroXNDGJa9/X44I9knvf0kIqCV7NQQhe0/img.png)
이전에 알아본 React reconciliation (heuristic) 알고리즘은 재귀적으로 동작하므로 도중에 멈출수가 없다. 만약 알고리즘 실행 작업이 오래 걸린다면 화면이 끊기는 현상이 발생할것이다. 페이스북에서 이러한 불합리적인 알고리즘을 개선하기위해 2년 넘게 연구한 결과 react v16부터 fiber알고리즘을 도입하였다. Recursion 간단한 재귀호출 함수이다. function recursion(num: number): number { if (num > 10) return number; return recursion(num + 1); } recursion(0); 재귀호출함수가 실행 될 때 Call stack에 차례대로 쌓이게 된다. reconciliation 알고리즘은 재귀 알고리즘으로,..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bU5pK6/btrnVx8N2Yk/PQWTyKFk9QYRAc4xPwKRb1/img.png)
Smart diffing algorithm 랜더링 되어 사용되고 있는 Real DOM Tree와 React에서 쓰는 in-memory에 있는 Virtual DOM Tree를 비교하는 알고리즘이다. 최소한의 연산으로 수정작업이 요구되는 실제 DOM object를 찾아서 수정 및 변경작업을 한다. 이 알고리즘의 Time Complexity는 O(n)으로써 상당히 빠른편이다. 옛날에 포스팅한 virtual dom에 대한 내용 https://kmj24.tistory.com/124 브라우저, DOM과 Virtual DOM 브라우저는 가장 많이 사용하는 SW프로그램일 것이다. 브라우저의 종류로는 IE, Chrome, Safari, Firefox, Opera, Edge 등이 있다. 브라우저의 기능 우리는 브라우를 통..