Wiki Home
42트랜센덴스 BeyondPong 프론트엔드 팀의 위키입니다.
과제를 진행하며 학습,적용했던 지식들을 정리했습니다.
리액트,뷰같은 자바스크립트 라이브러리,프레임워크들은 가상 DOM을 이용해서 렌더링을 하고 있다.
가상 돔이란, 실제 DOM(Document Object Model)을 조작하는 방식이 아닌,
실제 DOM을 모방한 가상의 DOM을 구성해 원래 DOM과 비교하여 달라진 부분을 리렌더링하는 방식으로 작동한다.
바닐라 자바스크립의 DOM조작 방식은 무거운 작동방식이다.
실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있기 때문이다.
깜빡거림 없이 부드러운 UX를 사용자에게 제공하고자 변경사항만 빠르게 파악하고,
리렌더링 하기 위해 DOM을 만들어 비교하는 방식을 채택했다.
성능 향상을 위해 실제 렌더링된 UI를 내부적으로 자바스크립트 객체로 따로 관리한다.
직접 DOM 노드를 생성하거나 접근해서 변경을 하는 것이 자바스크립트 객체로 표현된 DOM 트리를 조작하는 것보다 훨씬 느리기 때문이다.
가상돔은 변화를 감지하면 재조정과정을 통해 실제 DOM과 동기화 한다.
재조정 과정은 크게 3단계로 나뉜다.
- UI가 변경을 감지하면 UI를 Virtual DOM으로 렌더링한다.
- 현재 virtual DOM과 이전 virtual DOM을 비교해 차이를 계산한다.
- 변경된 부분을 실제 DOM에 반영한다.
가상돔의 비교 과정에서 diffing알고리즘이 사용된다.
- 이전 가상돔 트리와 새로운 가상돔 트리를 비교하고 루트 노드에서 시작해서 이전과 새로운 노드를 비교한다.
- 두 노드가 다른 유형이면 새 노드를 생성하여 기존 노드를 대체한다.
- 두 노드가 같은 유형이면 속성을 비교해서 변경된 것이 있는지 확인하고 변경된 속성이 없으면 그대로 사용, 있으면 업데이트한다.
- 자식노드를 재귀적으로 비교한다.
이런 재조정방식으로 전체 DOM 트리를 재 구축하지 않고, 필요한 부분만 빠르게 업데이트 할 수 있다.
더 나아가, 리액트의 경우에는 여러 상태 업데이트를 한 번에 수행하는 Batch Update메커니즘을 적용해 효율적으로 렌더링을 하고 있다.
https://velog.io/@pds0309/React-batch-updating
- HTTP는 요청과 응답으로 이뤄지는 한 사이클이 끝나면, 연결이 끊어지는 무상태성을 띈다.
즉 서버가 클라이언트의 상태를 보존하지 않는다.
- 클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요시마다 데이터를 꺼내서 서버에 전달하는 방식으로 HTTP의 단점을 보완하고자 쿠키와 웹 스토리지를 사용한다.
쿠키, 로컬 스토리지, 세션 스토리지 사용처 쿠키 : 일시적으로 필요한 가벼운 데이터 저장이 필요할 때 ex) 다시 보지 않음 쿠키 팝업창, 로그인 자동 완성 로컬 스토리지 : 지속적으로 필요한 데이터 저장이 필요할 때 ex) 자동 로그인 세션 스토리지 : 일시적으로 필요한 데이터 저장이 필요할 때 ex) 일회성 로그인, 입력 폼 저장, 비로그인 장바구니
우리팀은 로컬 스토리지를 선택하여 창을 끄더라도 로그인이 유지되도록 하기로 결정했다.
- 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 나온 새로운 방식의 데이터 저장소
- 로컬 스토리지와 세션 스토리지가 존재
- key와 value쌍의 형태로 데이터 저장
- window 객체의 프로퍼티로 존재
장점
- 서버에 불필요하게 데이터 저장 x
- 넉넉한 데이터 저장용량 (모바일: 2.5MB, pc: 5~10 MB) (쿠키는 4kb)
- 문자열 외에도 자바스크립트의 모든 원시형 데이터와 객체 저장 가능
- 도메인 단위로 접근이 제한되는 CORS 특성 덕분에 CSRF로부터 안전
단점
- HTML5를 지원하는 브라우저만 사용가능
- XSS공격에 위험 (local storage에 접근하는 JS코드로 쉽게 접근가능)
- 로컬스토리지는 데이터 영구 저장이가능, 세션 스토리지는 브라우저 탭/윈도우가 닫히면 초기화
- window.localStorage, window.sessionStorage 객체로 사용