항해 플러스 프론트 1기 2주차 회고

기간 (2024 / 03.18 ~ 03.23)
작성 (2024 / 03.29)

1. 주요 이슈들

1) diff 알고리즘 개념

• 문제 : diff 알고리즘이 무엇인지 잘 몰랐다.
  알고리즘 공부를 해본적이 아직 없어서인가 수도코드를 따라 해보니 되기는 했으나 그 개념까지는 완전히 내것으로 이해를 못했던 것 같다.

• 시도 : 공홈, 블로그 찾아보기

  • React, diffing 알고리즘
  • 리액트 공홈

• 해결 : diffing = 비교
  이미 만들어진 VDOM을 통해 기존과는 어떤 변경점이 생겼는지를 알아가는 과정

  Diffing Algorithm 이란?
  In React, displaying 1000 elements would require in the order of one billion comparisons. This is far too expensive. Instead, React implements a heuristic O(n) algorithm based on two assumptions:
  1. Two elements of different types will produce different trees.
  2. The developer can hint at which child elements may be stable across different renders with a key prop.

  간단히 말해 모든걸 순회 하면서 차이점을 찾는 것이다
  이 때, 리액트의 diffing 알고리즘은 heuristics알고리즘을 이용한 순회를 하게되고 변경된 결과를 업데이트 한다. 다음은 두 가지 돔 트리를 비교하는 과정에서 나올수 있는 케이스들이다.

  1. 루트 노드가 아예 다른 경우
     이 경우는 처음부터 다르기 때문에, 이전에 있던 state도 모두 지우고 새로운 트리를 구축한다. 부모가 바뀌니 자식도 전부 다시 리랜더링 하는 것이다.

  2. 타입은 같지만 속성이 다른 경우
     속성(스타일)만 달라지는 경우에는 두 속성을 비교하여 바뀐 부분만 변화 시킨다.

  3. 자식 요소가 바뀌는 경우

  • DOM동시에 두 리스트를 순회하고 바뀐 점이 있다면 그 부분만 재귀가 돌면서 처리해준다. 단, 첫 번째 자식부터 비교하며 변경하기 때문에 첫 자식 요소에 요소를 삽입하는 경우 처음부터 비교를 해야하기 때문에 성능상 좋지 않다. 이 문제를 리액트에서는 key를 통해 해결했다.
  • 위의 문제점처럼 처음부터 하나하나 비교하는 것이 아니라, key속성을 통해 해당 Key가 존재하는지만 확인하면 된다. 다만 배열의 경우, index를 key로 사용했을때 재배열한다면 미묘하게 결과가 맞지 않을것이다. 그 이유는 index는 유일한 값이 아니기 때문에 오류가 날 수 밖에 없다. 그래서 key로는 id처럼 유일한 값을 사용해야 한다.

• 알게된 것 : 리액트의 VDOM과 diff의 원리

  • 이 때 휴리스틱 알고리즘은 중요한 정보만 고려해서 최선의 값을 찾아내는 알고리즘이라 100% 정확하지 않다고 공홈에 적혀있다. 이 diffing 알고리즘은 성능을 완벽하게 개선하지 못한다고 판단한 페이스북은 2017년 4월에 Reconciliation 에서 Fiber 을 도입했다.

    heuristics 알고리즘
    컴퓨터로 어떤 문제를 해결하기 위한 명확한 절차가 없거나 또는 있다할지라도 그것이 방대한 시간과 비용을 필요로 하는 경우에, 일반적으로 경험적 지식을 도입하여 순차적이며 체계적으로 그 해결방법을 산출해 가는 방법.

2) useState, useMemo 개념

• 문제 : 개념 이해는 되었으나, 코드로 개발함에 있어 완전한 이해가 덜 된 것 같다.

• 시도 : 책이며 블로그 등 찾아보기

  • <리액트를 다루는 기술> 에서 hook 관련 부분 정독 (추후 블로그 정리 예정)
  • Vanilla Javascript로 React UseState Hook 만들기 (이번 기수 코치 황준일님 블로그)
  • hook을 이용한 상태처리

• 해결 : 리액트를 자주 쓰지않으니 개념이 이해가 더딘것 같다.

  • hook을 이용한 상태처리 요기 블로그를 보고 배운게 많은데 내용을 전부 복붙할순 없으니.. 추후에 내가 다시 블로그로 정리해보려한다.

• 알게된 것 : 간단한 hook을 구현해보면서 느낀건 클로져의 개념이 중요하다는 것이다.
  그리고 그 클로져를 쓰는데 아직 미숙한 부분이 있기에 과제를 진행하면서 애먹었던것 같다..
  클로져에 대한것도 다시 제대로 정리를 해보아야겠다.

2.이번 목표 회고

잘된 것

• 현재로써는 리액트를 안쓰는데... 안쓰는것 치고는 개념이해는 잘 된 것 같다.

안된 것

• 과제 3개 전부 제출 (X)
  과제를 다 못했다... A는 풀었으나 B는 중간까지밖에 못했고, C는 보지도 못했다..

• 리액트 기본기 다지기 (remind)
  리액트의 작동원리에 대해 다시 해봐야겠다.

• 회고를 너무 늦게 썻다. 3주차 내용과 헷갈린다...
  
  
  

3.다음 목표 설정

• 다음에는 문제 3개 모두 푸는 것을 목표로 하겠다!
  관련 내용을 찾아 개념 이해하는 것도 좋지만, 일단 과제를 먼저 풀어보면서 찾아야겠다.
• 회고는 그 주 주말동안에, 말 그대로 한주를 돌아보며 써야겠다. 주차가 겹치니 쓰면서 헷갈린다.
• 알고리즘 공부를 시작해봐야겠다...
• 클로져, hook 관련 내용 블로그 정리해보기