WIL WEEK4

컴퓨팅 사고로의 전환 01팀 Ground Rule

0. 팀원

김동현(정글12기-73) 정범진(정글12기-64) 최수지(정글12기-80) 황정연(정글12기-71)

1. 핵심 역량

문제풀이

• 문제 해결: AI의 코드를 사용하지 않고 설명으로만 문제를 풀 수 있다.
• 태도: LeetCode를 시간이 걸리더라도 모두 풀기
• 유지보수: 다른 사람이 봐도 이해할 수 있도록 깔끔한 코드 작성 (클린코드 작성하기)

수요코딩회

• 학습 민첩성: 새로운 개념 (Virtual DOM, Diff 알고리즘)을 다른 사람에게 설명할 수 있을 정도로 학습
• 협업: 개인 플레이하지 않기
• 품질: AI가 생성한 결과물을 테스트 케이스에 맞게 직접 검증해보기 / Edge Case 잘 검증하기

2. AI 활용 범위

학습 보조 수준
개념 학습, 문제 및 코드 이해, 힌트 요청, 코드 리뷰, 오류 분석
코드 구현을 제외하고는 자유롭게 사용 가능합니다.

💡 학습에 AI를 사용할 때에는 ChatGPT의 ‘Study Mode’나 Gemini의 ‘Guided Learning’ 옵션을 활성화하여 사용합니다.
💡 코드 구현시에는 최대한 AI를 사용하지 않고, 동료와의 협업과 도움을 최대한 활용합니다.

3. 협업

• 스크럼 미팅: 매일 오전 10시
  • 당일 할 일 공유
  • 본인의 진행상황 공유
• 코어 타임: 매일(화요일까지) 오후 8시 (20시)부터 문제 다 풀 때까지
  • 모의 코딩 테스트
    • 혼자 푸는 시간 이후 동료와 협업하며 문제 풀이
    • 문제 풀이가 끝날때까지 오프라인 환경(AI미사용)에서 실제 코딩테스트 처럼 진행 합니다.
    • 코딩 테스트 종료 후 다른 팀원의 코드를 리뷰하며, 정답을 맞춰보고 풀이 방식에 대해 토의합니다.
  • 서로 돕고 지식을 나누며, 알려주고 배웁니다.
  • 팀 프로젝트 진행 기간에는 코어타임뿐만 아니라 수시로 협업을 진행해야 합니다.
  • GitHub 프로젝트 기반 각자 진행 상황 공유합니다.

React Virtual DOM, Diff

브라우저는 HTML의 각 테그들을 객체로 들고 있음 -> DOM은 html을 구조(객체)로 변환한 것
DOM은 HTML을 객체 트리로 표현한 것. 그리고 그 안에 모든 노드들도 각각 DOM이라고 부름

html에서 테그 내부 데이터를 바꾸면 화면에 바로 적용 -> dom을 바꾸면 화면도 바뀜

브라우저는 트리에서 노드의 데이터가 바뀌었을 때 어디가 어떻게 바뀌었는지 최적의 변경 방법을 계산하지 않음. -> 대신 개발자가 내린 DOM 조작 명령을 그대로 수행

일반적인 브라우저인 경우
<ul>
	<li>A</li>
	<li>B</li>
</ul>
에서 다음으로 바꿀 때
<ul>
	<li>A</li>
	<li>B</li>
	<li>C</li>
</ul>

아래 처럼 코드 작성하면 기존 a,b 제거 후 새로 a, b, c생성 -> 비효율
container.innerHTML = `
  <li>A</li>
  <li>B</li>
  <li>C</li>
`


이렇게 작성할 경우 C부분만 새로 추가 -> 효율
const li = document.createElement("li")
li.textContent = "C"
ul.appendChild(li)

하지만 사람이 항상 아래처럼 효율적으로 작성하기 힘들기 때문에 
Virtual DOM이 차이를 계산해서 브라우저한테 명령 전달
그리고 그 차이를 계산하는 알고리즘이 Diff알고리즘

Diff 알고리즘 핵심 규칙 3가지

1. 타입이 다르면 그냥 갈아엎음. 아래 같은 경우 그냥 삭제하고 다시 만들어버림

<div>
->
<span>

2. 타입이 같으면 내용만 비교(DOM 노드 재사용)

<div class="a">
->
<div class="b">

3. 리스트는 key로 비교

실제 DOM 구조

ul (DOM 노드)
 ├── li (A)
 └── li (B)

자식 노드는 배열처럼 접근 가능함
ul.children 하면
HTMLCollection [li, li] 반환

key가 필요한 이유
key가 없으면 둘 다 li이기 때문에 구분이 안됨
ㄴ 정확히는 key가 없으면 index 기준으로 비교 -> 타입같고 key 없ㅇ르 때 같은 위치의 요소를 같은 것으로 간주 -> 리스트 내부 순서 바뀌면 어지러워짐


테그가 같을 때 내용을 비교하기 때문에 만약 a, b위치를 바꿨을 때 key를 사용하지 않으면 a와 b모두 수정하게 됨
하지만 key를 사용하면 a와 b의 위치 이동을 발견하고 순서를 바꿀 수 있음
ㄴ 그리고 만약 자식노드가 추가로 있다면 a의 자식노드와 b의 자식노드 위치가 안바뀌고 그대로 있는 문제가 생길 수 있음


key는 우리가 지정해야됨. 보통 안바뀌는 값으로 지정 예를 들어 id

리엑트가 사용하는 Diff 알고리즘은 빠른추정(휴리스틱) Diff 사용
완벽한 Diff 알고리즘은 시간복잡도가 O(N^3)로 매우 느림
ㄴ 왜 n^3 지?
ㄴ 빠른 추정은 왜 n이지?

브라우저의 탐색 방법

브라우저가 DOM을 탐색할 때 dfs(pre-order traversal)와 유사한 document order 순회를 사용
ㄴ 조건에 맞는 첫 번째 노드 발견 시 종료

idMap(브라우저마다 이름 다름): 브라우저가 내부에서 관리하는 id 매핑 구조
우리가 getElementById 했을 때 idMap["{id}"]에서 element 접근해서 반환

state 변경 시

1. 컴포넌트 함수 다시 실행
2. 새로운 virtual DOM 생성(전체 구조) -> Virtual DOM은 JS 객체라 기존 DOM보다 훨씬 가벼움
3. 이전 Virtual DOM과 비교 -> diff 알고리즘 실행
4. 변경된 부분만 DOM 업데이트

---

virtual DOM이 일반적인 DOM보다 성능이 안좋은 경우

diff 알고리즘이 필요 없을 경우. 예를 들어 트리 전체를 수정해야 할 경우 오버헤드가 생겨서 안좋음

key가 없을 경우

이전 Virtual DOM과 새로운 Virtual DOM을 비교할 때 같은 위치(index)를 기준으로 노드를 동일한 것으로 간주하고 매칭한다

일반적인 DOM에서 diff를 사용하지 않는 이유

DOM 자체는 diff하기에 구조적으로 비효율적이라 필요한 정보만 담은 Virtual DOM에서 diff 알고리즘을 사용

---