배경웹 개발자로서 브라우저가 내부적으로 어떻게 동작하는지 이해하고 싶었고, ChatGPT와 Gemini를 사용한 교차 검증을 통해 이해도를 높일 수 있었습니다. 브라우저 주 구성요소 1. 메인 스레드(Main Thread)JavaScript 실행과 DOM 렌더링을 담당하는 단일 스레드호출 스택(call stack)에 쌓인 작업을 순차적으로 처리2. Heap객체, 배열, 함수 같은 동적 할당 메모리를 저장하는 공간가비지 컬렉터가 주기적으로 사용하지 않는 메모리를 해제React의 Virtual DOM은 자바스크립트 객체 방식으로 구현되기 때문에 결국 JS 엔진의 힙(Heap) 메모리 위에 저장됩니다.3. 내부 스레드 풀(Internal Thread Pool)네트워크 요청(fetch), 파일 I/O, 렌더링..

배경 RN을 배우기 시작하면서 React와 RN의 렌더링 간에 어떤 차이점이 있는지 궁금했고, 평소 React의 렌더링 방식에 무지했던 것 같아 궁금했던 점들을 하나씩 정리해보려고 합니다. setState를 호출할 때마다 즉시 리렌더링이 발생하는가?import { useState } from 'react';export default function Counter() { const [number, setNumber] = useState(0); return ( {number} { setNumber(n => n + 1); setNumber(n => n + 1); setNumber(n => n + 1); }}>+3 )} 아닙..

즐겁구만

배경 당근 테크 블로그에서 발행한 "의존성 그래프를 활용한 프로젝트 시각화 - 사이드 이펙트 한눈에 파악하기"를 보고 직접 적용해보았다. 글을 작성한 당근 개발자는 개발에 착수하기 전 일정을 산정하는데, 정작 작업하다가 예상치 못한 사이드 이펙트들로 일정을 지속적으로 미뤄지게 되었고, 이를 해결하고자 본 방법을 도입했다고 한다. 144개의 페이지가 존재하는 당근 웹에 비해 우리 웹의 규모가 작긴 하지만, 개발에 앞서 일정 산정 시 미처 고려하지 못했던 사이드 이펙트들로 인해 고생했던 경험에 공감했고 회사 프로젝트에서도 써먹어 볼 만하다고 판단했다. 구현 방법 해당 아티클에서는 자세한 구현 및 로직을 알려주지는 않아서 Cursor AI를 활용해 원하는 의도를 명시적으로 전달 후 구현을 완료했다. Depen..

배경PC 유튜브에서 알림 설정을 해두니까 브라우저 웹 푸시 알림이 온 걸 보고 구현하게 되었다. 사용자에게 알림을 주고 싶을 때 유용한 것 같아 React에서 사용하기 쉽도록 구현했다. 만들어두면 회사나 개인 프로젝트에서라도 쓰겠지.. https://developer.mozilla.org/en-US/docs/Web/API/Notification useWebNotification커스텀 훅 useWebNotification은 브라우저 Notification API를 React 에서 사용하기 쉽도록 래핑한 훅으로, 알림 권한 관리부터 알림 표시/닫기까지의 전 과정을 간편하게 처리한다.import { useCallback, useEffect, useRef, useState } from 'react';export..

책을 고른 이유 나는 뇌과학자 장동선 박사님의 유튜브를 즐겨본다. 많은 현대인들이 조금씩이나마 가지고 있는 정신적인 문제들을 현대 사회에서 어떻게 풀어갈 수 있는지 재미있게 설명해주신다. 특히 마음에 와닿았던 구절이 하나 있다. "고통을 감수하면서까지 내가 하는 일은 무엇인가?" "최선의 고통"과 "도파민네이션"이라는 두 권의 책으로 "삶의 고통"에 대해서 풀어준다. 그 중에서도 "최선의 고통" 이라는 책이 궁금했고, 그렇게 읽어보게 되었다. 저자인 폴 블룸은 "최선의 고통"에서 명쾌한 정답을 제시하지 않는다. 고통이란 좋은 것인지 나쁜 것인지, 우리가 선택할 수 없었던 고통에 어떻게 대응해야 하는게 옳은지 알려주지는 않는다. 다만 생각해볼 꺼리를 던져준다. 선택적 고난 내가 선택해서 받는 고..