버전 올리기가 이렇게 귀찮다니.. 안녕하세요. 저는 화물운송 플랫폼 Sendy에서 Next.js와 TypeScript를 주력으로 사용하는 프론트엔드 개발자입니다. 제가 회사에 입사한 지 1년 남짓 되었는데요. 제가 오기 전, 처음 두 명이던 팀에서는 코드리뷰가 강제가 아니어서 package.json 숫자를 직접 바꾸고 PR을 바로 머지해도 큰 문제가 없었습니다. 그러나 세 번째 인원이 합류하면서 코드 리뷰 문화가 정착됐고 소규모 조직으로서의 모습을 갖추었습니다. 개발 인원의 증가에 따라 업무량이 많아지면서 PR이 쌓이기 시작했습니다. 그에 따라 코드 리뷰가 지연되기 시작했고, 릴리즈가 제때 이루어지지 않았습니다. 그 결과 “이번엔 누가 버전을 올려야 할까요?”라는 질문이 자연스럽게 돌아왔습니다. ..

배경웹 개발자로서 브라우저가 내부적으로 어떻게 동작하는지 이해하고 싶었고, 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..

배경모달 또는 팝업창을 닫을 때 외부 영역 클릭 이벤트를 감지해야 하는데, 그 때마다 아래와 같은 코드를 작성해야 한다. 똑같은 코드를 매번 작성하는 것은 정말 번거로운 일이다. 그래서 커스텀 훅으로 분리하여 재사용한다. const containerRef = useRef(null); useEffect(() => { function handleClickOutside(e) { if (containerRef.current && !containerRef.current.contains(e.target)) { setIsBankListOpen(false); } } document.addEventListener('mousedown', handleClickOutside)..