WIL 0522~0529 3주차 회고

3주차 Week I Learn (주특기 1주차)

이번 주 키워드

1. DOM
2. 서버 리스

DOM이란

DOM(Document Object Model) "문서 객체 모델" 이라고도 부르고, 정의는 자바스크립트를 이용해여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법이다.

DOM은 크게 HTML, XML로 구분 할 수 있을 것 같다. 나는 프론트 엔드이기 떄문에 HTML DOM을 기준으로 정리해보고자 한다.

DOM은 웹 문서 하나를 객체로 정의한다. 그리고 그 문서를 이루고 있는 텍스트, IMG 등 의 모든 요소도 각각 객체로 정의한다.
이처럼 DOM은 문서와 그 안에 있는 모든 요소를 객체로 인식하여 처리한다.

DOM 트리

이 사진은 DOM 트리이다. 모든 요소에는 부모 자식 구조로 표시 할 수 있고 이 구조를 시각화하면 나무 구조를 가지고 있기 때문에 이러한 이름이 붙여졌다.
여기서 DOM트리에서 갈라져나간 가지( 아래쪽으로)를 노드(node) 시작 부분인 document를 루트(root)노드라고 말한다.

DOM을 구성하는 기본 원칙

1. 모든 HTML 태그는 요소(element)노드이다.
2. HTML에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드이다.
3. HTML 태그에 있는 속성은 자식 노드인 속성(attribute)노드이다.
4. 주석은 주석(comment)노드이다.

DOM을 접근하는 방법은 다양하게 있다. 비슷한 내용을 따로 정리한 적 있어 자세하게 정리하지 않은 생각이다.

1. JS에서 요소에 접근하기
   getEelementBy(s), querySelector 두 가지 방법으로 해당 요소에 접근 할 수 있다.
   리액트를 사용할 때에는 흔히 가짜 DOM이라 칭하는 DOM에 접근 해야하기 때문에 리액트 훅인 ```useRef()```를 사용하여 접근 할 수 있다.
2. JS에서 요소 추가하기
   createElement,createAttribute 등을 사용하여 요소를 생성 할 수 있다. 그리고 appendChild를 사용하여 DOM 트리 구조와 동일하게 부모 자식 관계를 갖고, HTML에 존재하는 요소에 연결하여 사용 할 수 있다.
3. 이벤트 처리기
   요소를 접근해 이벤트를 등록할 수 있는데, 이때는 addEventLisner를 사용하여 이용한다.

서버 리스 ( serverless)

직역해보자면 서버가 없다는 의미인데, 사실 서버가 없는 건 아니다. 빌려오는 것 뿐 ...
서버리스는 크게 2가지 종류로 나눌 수 있는데

1. BaaS(Backend as a Service) Firebase,Kinvey 등
2. FaaS(Function as a Service) AWS,Lambda,Google Cloud Function 등

FaaS는 자료도 많이 없을 뿐더러, 내가 사용해본 건 BaaS이니 Firebase에 대해 간단 정리를 해보려고 한다.

BaaS

가장 큰 장점은 개발 시간의 단축 , 서버 확장 작업의 불필요 이다. 백엔드에 대해서 지식이 별로 없더라도, 아주 빠른 속도로 개발이 가능합니다. 특히, Firebase 에서는 실시간 데이터베이스를 사용하여 데이터가 새로 생성되거나, 수정되었을 때 소켓을 사용하여 클라이언트에게 바로 반영시켜주는 기능이 있는데요, 이러한 기능은 직접 개발하게 된다면 구조 설정에 꽤 많은 시간이 필요 할 수도 있는데 이를 단지 코드 몇 줄 만으로 구현 할 수 있게 해주는 멋진 기능들을 지니고 있습니다. 추가적으로, 일정 사용량 만큼 무료로 사용 할 수 있기 때문에 토이 프로젝트, 소규모 프로젝트의 경우 백엔드 대신 유용하게 사용 할 수 있다.

이렇게 많은 장점이 있지만, 단점도 존재한다.

1. 클라이언트 위주의 코드
   보통 Firebase를 사용하게 되면 백엔드 로직들을 클라이언트 쪽에 구현하게 된다. (이메일 발송, 결재 등) 물론 서버쪽에도 SDK를 불러와 사용할 수는 있는데, 일부 로직을 구현할 수 있으면 차라리 직접 구현하는게?....

2. 가격
   firebase는 초반에는 무료이지만 규모가 커지고 많은 사람이 들어온다면 가격이 꾀 비싸게 느껴진다. 따라서 미니 플젝 정도의 단계라면 매력적이지만, product처럼 많은 사용자가 필요한 플젝이라면 백엔드 인건이가 싸게 먹힌다...

3. 복잡한 데이터 처리 불가능
   이건 사용해보면서 느낀 불편함이긴 한데, Firebase는 데이터 베이스가 하나의 큰 JSON 객체로 구조화 되어있다.
   예를 들어 일정 기간 동안 작성된 게시글을 보여주거나, 동일한 작성자가 작성한 게시글을 보여주는 건 가능하지만, 동일한 작성자가 작성한 게시글 중 일정 기간내만 보내는 것은 어렵다.
   사실 데이터 모델링 할 때 또 하나의 필드를 만든다면 가능하지만, 계속 데이터 모델링을 하게 될 것 같은 느김이 ...

주특기

이제 주특기 시작이다. 겁먹었던 것에 비해 좋은 출발인 것 같다.
아직 리액트 코드를 많이 찾아보지 않아서 어떤 방식을 컴포넌트를 구성하는지, 어떤 방식으로 REST API를 사용하는지, 부족한 부분이 많다. 다만 어느 정도 흐름은 파악할 수 있었던 것 한 주였다.

다만, Route에 대해 더 공부할 필요는 있을 것 같다. 사용은 간단하게 했지만, 내용을 찾아보니 더 많은 기능들이 있었다.......

3,4,5 주차는 모두 주특기 주차로 react에 대해 배우고 같이 사용하는 여러 라이브러리를 사용할 예정인데, 내용을 따로따로 정리하고 react는 단계별로 시간내서 정리해보려고 한다.

일주일을 마치며

우선 리액트라는 프레임윅이 얼마나 매력적인지 느꼈고, 강의와 과제를 진행하면서 적응이 된 것 같다. 부족한 부분이라면 각 개념을 깊게 알지 못했고(빠르게 달리기만 해서) state의 개념 이해는 했지만, 사용하는 부분이 부족하다고 생각한다.


2주차 과제까지는 빠르게 달려갈 것 같다.(사실 이번 주차에 다음 주차 과제를 다 끝냈다....)
빠르게 달린 이유는 기본을 다잡을 수 있는 정리가 필요하다 생각했기 때문이고, 심화 주차 들어가기 전까지 Route, React, redux의 흐름 이해와 기본 구조를 정리해보고 넘어가려고 한다.

다음주도 화이팅