6장, 7장 정리

6장/README.md

@@ -0,0 +1,34 @@
+# 리액트 개발 도구로 디버깅하기 정리
+
+## 이은지
+
+* 실제로 해보고 싶은 내용 위주로 정리
+* 컴포넌트 탭에서 props와 hooks을 볼 수 있다는 것
+* 실제 프로덕트에서는 프로파일러 탭이 너무 복잡하게 되어 있었음
+* 개발 중간 중간에 디버깅과 성능 개선을 해야한다는 말에 공감
+
+## 권오연
+
+* 다른 서비스에서 컴포넌트 탭을 실행해봄
+
+## 오혜성
+
+* 프로파일러 탭에서 렌더링 이유를 통해 개선했던 경험
+* 개발 모드에서 effect가 두 번 실행되는 것을 방지했던 라이브러리를 본 적 있음
+* 실제 프로덕트같은 복잡도가 높은 상태에서 디버깅을 원활히 하기 위해서는 짧게 짧게하면 좋을 것 같음
+
+## 서준환
+
+* 리렌더링 시각화 효과를 많이 사용했음
+* 로그를 직접 찍지 않아도 편하지만 아직 익숙하지 않은 것 같음
+
+## 김동규
+
+* Emotion을 사용하면 컴포넌트 트리가 더러워졌던 경험
+* 렌더링 이유를 말해주는 것
+
+## 정대윤
+
+* 오늘 실무에 적용할 수 있었음
+  + 비디오 태그의 source 변경 시 적용되지 않았던 문제
+* 언제 어떻게 업데이트되는지 알 수 있는 것이 좋았다

7장/README.md

@@ -0,0 +1,40 @@
+# 크롬 개발자 도구를 활용한 애플리케이션 분석
+
+## 이은지
+
+* 책을 통해 각 탭을 알 수 있어서 좋았음
+* 요소 자체에 중단점 걸 수 있는 것이 유용하다고 느껴짐
+* 메모리 탭 경험이 없는데, 다른 분들의 경험이 궁금함
+* Next.js 서버 환경 디버깅 방법
+  + ab 라이브러리
+
+## 오혜성
+
+* 메모리 누수를 확인할 때 얕은 크기와 유지된 크기를 확인해야 함
+  + 얕은 크기는 객체 자체의 크기
+  + 유지된 크기는 객체가 참조하고 있는 모든 객체들의 크기
+* 기명 함수 굿!
+* 소스 탭에서 `cmd + p`를 눌러 파일명으로 찾을 수 있음
+* [localtorjs](https://www.locatorjs.com/) 도구를 이용해 생산성을 높일 수 있음
+
+## 서준환
+
+* 중단점을 많이 사용하고 있음
+  + popover 같은 경우에 유용하게 사용하고 있음
+* Next.js 메모리 누수를 간과하고 있었으나 예제를 통해 직접적으로 알게 됨
+* 크롬 개발자 도구에서 풀 스크린샷 찍을 수 있음
+* 크롬 개발자 도구에서 사용된 폰트, 색상 정보를 모아볼 수 있음
+
+## 김동규
+
+* 요소 탭에서 엘리먼트 보기 편한 익스텐션
+* 요소 탭에서 접근성 관련 작업을 진행할 때
+  + 크롬 설정 > 실험 > `Enable full accessibility tree view in the Elements panel` > 요소의 접근성을 한눈에 볼 수 있음
+* 소스맵이 올라가지 않나 확인해야할 필요가 있음
+
+## 정대윤
+
+* 크롬 개발자 블로그에 잘 설명되어 있음
+* Next.js 메모리 디버그를 실무에 적용해볼 수 있을 것 같음
+  + 벤치마킹 도구도 사용해 볼 수 있을 것 같음
+* next-shared-cache를 통해 RSC를 서빙했던 경험 공유