들어가며"커스텀 훅이 무엇인가요?" 리액트 프론트엔드 개발자 면접 단골 질문입니다. 저는 면접 당시에 GPT가 생성해준 답변을 아래와 같이 설명하는 걸로 넘어갔습니다. 커스텀 훅은 React에서 상태 로직을 재사용하기 위한 기능입니다. 함수 컴포넌트 내에서 useState, useEffect 등 React Hook을 사용하여 로직을 구현하고, 필요한 경우 반환 값으로 상태나 함수를 제공하여 다른 컴포넌트에서 재사용할 수 있도록 합니다. 저는 React로 클라이언트 로직을 구현할 때 습관적으로 useToggle, useModal, useAnalytics와 같은 커스텀 훅(Custom Hook)을 만들어 사용해왔습니다. 처음에는 단순히 반복되는 코드를 여러 번 입력하는 것이 번거로워 재사용성을 높이고자 커..

들어가며 프론트엔드 개발을 하다 보면 자연스럽게 상태 관리 도구를 사용하게 됩니다. 특히 리액트 개발자라면 Context API나 Zustand 같은 상태 관리 라이브러리를 익숙하게 쓰게 됩니다. 그런데 이렇게 상태를 외부에서 주입받아 쓰는 방식이, 사실은 “의존성 주입(Dependency Injection, DI)“이라는 개념이라는 사실을 알고 계셨나요? 의존성 주입은 주로 백엔드, 특히 스프링(Spring) 프레임워크에서 자주 언급되는 개념입니다. 그래서 많은 프론트엔드 개발자들이 DI라는 용어를 들으면 ‘그건 백엔드 개발자들이 쓰는 거 아니었어?’ 하고 생각합니다. 저 역시 처음엔 그랬습니다. 그러나 알고 보니, 제가 리액트 코드에서 자주 쓰던 바로 그 방식이 의존성 주입이었습니다. 이 글에서는 프..

버전 올리기가 이렇게 귀찮다니.. 안녕하세요. 저는 화물운송 플랫폼 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..