2023.05.02 TIL

0

TIL

목록 보기
22/37
post-thumbnail

오늘의 나는 무엇을 잘했을까?

페어프로그래밍을 순조롭게 진행하였다. UI설계부터 시작해서 초기 문서화와 보일러플레이트 준비까지 잘 했다. 페어프로그래밍이 우리팀은 3명이라 뭔가 소통이 잘 안될 것 같았는데, 막상 해보니까 잘 맞는것 같았다.

멘토링 때 많은 것을 배웠다. 플린 멘토가 가상 DOM의 진실(?)에 대해서 예시를 들어서 정말 쉽게 잘 설명해줘서 잘못 알고 있는 부분을 바로잡았다. 확실히 구글링으로 본 것보다 멘토와 대면해서 설명을 들으니 이제 제대로 이해한 것 같고 기억에도 완전히 남을 것 같다.

오늘의 나는 무엇을 배웠을까?

Virtual DOM의 진실(멘토링 내용)

버추얼 돔은 바뀐 부분만 다시 그리기 때문에 리액트가 빠르고, 효율적이다 → 반은 맞고 반은 틀린 말.

실제 DOM 또한 “원래” 변경된 부분만 반영한다. 버추얼돔의 이점은 “변경된 부분만 반영”하는 점이 아님.

사실 DOM은 빠름. DOM조작이 느리다는 오해

예를 들어 li태그를 포문을 돌면서 DOM을 조작한다면 DOM이 레이아웃을 다시 짜야함. 다른 DOM은 건드리지 않지만 레이아웃은 다시 짜야한다는 뜻. 왜냐면 위치 등이 변경되었을 수 있기때문에. 즉 레이아웃 계산이 포문의 반복 수마다 일어난다.

그런데 리액트는 포문을 돌면서 바로 각 반복마다 DOM에 넣는게 아님.

다 만들어놓고 버추얼돔에 넣은 뒤 DOM에 한번에 집어넣음. 이걸 바닐라로 하려면 명령을 일일히 해줘야함. 예를들어 appendChild를 반복마다 하는게 아니라 DOM에 추가되지 않은 엘리먼트에다 반복문 돌면서 넣고 마지막에 반복 끝나면 appendChild하던가. 이런게 명령적인 프로그래밍임.

반면 리액트는 선언적 프로그래밍.

그렇게 한번에 하기 위해 스테이트를 사용하는것임. setState가 스케줄링을 하기 때문에.

선언적 프로그래밍에 대해 조사해오기. → 리액트를 더 잘 이해할 수 있음.

리액트에서 dom에 직접 접근해서 조작같은 걸 하면 비효율

리액트의 생명주기

자세한 내용은 여기에 정리해 두었다.

오늘의 나는 어떤 어려움이 있었을까?

페어프로그래밍으로 진행한 위클리미션에 의욕이 너무 앞선 나머지 서버 만드는 것까지 찾아보다가 시간을 허비했다. 멘토링도 있고 면접 스터디도 있어서 시간관리에 실패했고, 결국 딥다이드 북스터디를 미루게 되었다. 그런데 이건 사실 오늘 바빠서라기 보다 미리 준비를 조금씩이라도 하지 않아서 일어난 일인것 같다.

내일의 나는 무엇을 해야할까?

  • 자바스크립트 프로토타입 공부
  • 페어프로그래밍 진행
  • 스타일드 컴포넌트 강의 듣기
  • 파이어베이스 사용법 익히기

0개의 댓글