잡담
항해를 시작한지 벌써 14일차가 되었다. 머리털 나고 시간이 흐르는 속도가 가장 빠른 시기를 꼽으라면 바로 지금이다.
이 기간 동안 정말 많은 것을 한 것 같으면서도 아직 더 배워야 할 것이 산더미 라는 것을 잘 안다..
이번주는 목요일부터 새로운 조가 짜여졌다.
이번에도 조원분들 모두 열정적이고 서로 응원해 주는 분들을 만나 나는 조원 운이 좋다는 생각이 들었다. 굿굿
이번에는 비록 개인 프로젝트를 만들지만 서로 도우고, 지쳐있을때 잡담도 나누는 분위기가 좋았다.
내용정리
1. React DOM
DOM(Document Object Model)문서 객체 모델이다. 여기서 객체란
html, head, body와 같은 태그들을 js가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다.
웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.
리액트는 돔과 가상돔으로 이루어져 있다.
Virtual DOM(가상돔)
실제 돔에 접근하여 조작하는 대신, 이것을 추상화시킨 자바스크립트 객체를 이용해 사용한다.
리액트가 가상돔을 반영하는 절차
특정 페이지에서 데이터가 변했다고 가정했을 때, 리액트를 이용해 돔을 업데이트시키는 절차는 다음과 같다.
1.변화가 일어났다. 변화된 버전을 가상돔으로 바꾸자.
데이터가 업데이트 되면 전체 UI를 가상돔에 리렌더링한다.
- 가상돔끼리 비교
변화 전의 가상돔과 변화된 가상돔을 비교한다.
- 바뀐 부분만 적용하자.
바뀐 부분만 실제 돔에 적용을 함으로서 레이아웃 계산은 한 번만 이행된다.
(ex. 네비게이션(컴포넌트)을 열었을 때 특정 영역(컴포넌트)이 빨갛게 변하면서 위치가 변경되는 경우의 레이아웃 계산이 일괄로 단 한 번만 이행)
2. 서버리스
서버리스는 서버의 사양, 네트워크 같은 설정이 미리 되어있는 서버를 빌려 쓰기 때문에 인프라 작업이 따로 필요 없다. ex) Firebase
3. 라우팅
(따로 React 게시판에 정리한 내용)
https://velog.io/@kbs2082/React-%EB%9D%BC%EC%9A%B0%ED%8C%85-%EC%82%AC%EC%9A%A9%EB%B2%95
4. 리덕스 (1편, 2편)
(따로 React 게시판에 정리한 내용)
1)
https://velog.io/@kbs2082/React%EB%A6%AC%EB%8D%95%EC%8A%A4Redux-1%ED%8E%B8
2)
https://velog.io/@kbs2082/React%EB%A6%AC%EB%8D%95%EC%8A%A4Redux2%ED%8E%B8
느낀점
역시 백문이 불여일견이라.
강의를 보는 내내 머릿속에 잡히지 않고 떠다니던 리덕스의 개념들이 프로젝트를 진행하면서 잡히기 시작했다!!
프로젝트를 시작하기도 전에 겁을 먹었었지만 막상 시작하니 생각보다 순조로웠다. 남은 시간동안 리덕스에 대한 개념을 더 잡고, 배운 내용들을 잘 소화 해야겠다.
