[항해뀨 3기] 2주차 회고

저번주차 회고에는 팀프로젝트가 기대된다고 적었지만.. 아쉽게도 이번주차는 팀프로젝트가 아니었다!!

개인별로 주특기 강의를 듣고 개인 과제를 하는 2주차. 나는 당연하지만..React!

팀이 나누어져있긴하지만 서로 돕기 편하다는 것 외엔 큰 의미가 없었다.

앞선 기수분들은 어떤지, 다른 주특기분들은 어떤지 모르겠지만

리액트쪽은 팀에 큰 상관없이 서로 대화 좀 해본 사람들끼리 질문이 오고가는듯?

내 경우에도 같은 팀원분들보다 이전에 휴게실에서 대화 좀 해본 분들이나 내가 직접 가서 도움을 드리겠다 한 경우 외엔..

음, 팀원사이에서 질문이 오고간적이 별로 없는듯하다!

내가 궁금한것이 생기면 보통 검색으로 90퍼센트는 해결하고 그 외에는 실무관련이나 좀 더 깊은 정보였기에 슬랙에서 여쭤봤다.

 

아무튼, 이번 주차의 WIL 키워드는 DOM과 서버리스!

배운것과 찾아본것을 정리해서 적어보자.

 

DOM 이란 무엇인가?

http://tcpschool.com/javascript/js_dom_concept

코딩교육 티씨피스쿨

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.

인용한 말 그대로지만 좀 더 쉽게 비유하자면 집 안을 XML이나 HTML 이라고 할 때 현관문이 DOM인거다!

(나는 이렇게 이해했지만..이 글을 보는 누군가, 아니라면 부디 당근을 흔들어주세요!)

 

정말 그냥 DOM에 관한거라면 이것만 적어도 나쁘지 않을듯한데, 그런 취지가 아니겠지?

React 에서는 우리가 못보던 DOM이 존재한다. 바로..

 

Virtual DOM

말 그대로 가상의 DOM이다.

이건 실제 소스코드에 존재하지않으나 사용자에겐 보여진다. 이게 뭔소리냐고?

 

두개의 레이아웃이 있고 이 것이 서로 마주보고 있다고 치자.

이 중 앞에 있는 레이아웃은 DOM이고 뒤에있는 레이아웃은 Virtual DOM 이다.

 

우리가 코딩을 타닥타닥 쳐서 저장을 하면 리액트는 컴포넌트들을 이 Virtual DOM에 전부 넣고 

맨 처음 Virtual DOM은 들어온 컴포넌트를 토대로 만든 페이지를 DOM에 넣는다.

이때 사용자가 페이지의 무언가를 건들여서 어떤 부분이 변경된다면 그 계산은 Virtual DOM이 한 뒤

변경된 부분만 떼어서 DOM에 반영시켜준다.

그렇기에 처음 페이지를 볼때는 조금 느릴지라도 그 이후의 처리과정은 굉장히 빠르다!

(이걸 알고나니 이전 주차의 프로젝트를 정말 손보고싶어졌다.. 정말 짬나면 바꿔야지ㅠ!!)

그럼 다음 주제로,

 

서버리스란 무엇인가?

말 그대로 서버가 없다...가 아니라, 프론트엔드가 서버를 직접 만질 필요가 없다는 의미.

백엔드가 필요없다는 말이 아니다!

단지 서버 구축에 있어서 설정해야할 자잘한것들을 직접 설정하지 않아도 된다는 의미.

이 서버리스의 대표적인 서비스는 "파이어베이스" 라고 하는데

사실..아직 안써봤다 ㅎ 왜냐면 나는..3주차까지만 듣고 일단 프로젝트를 만졌기에..

내일부터 4주차 강의를 들을 예정이니 내일 되면 알 수 있겠지, 파이어베이스..

 

 

이번주의 작업

 

이번주에는 강의 3주차까지 듣고 파이어스토어에 단어목록 올리는 것을 제외하고 기능 구현, 스타일 작업을 했다!

좀 거슬리는 부분(뒤로가기버튼이 첫화면에도 있다던가...애니메이션이 없는거 등등..)을 빼곤 어느정도 괜찮은듯?

이런 부분들은 나머지 강의를 듣고 여유가 있다면 작업해야겠당..

 

그러면 오늘은...20000!!