"리액트 컨트리뷰터"

들어가며대학교 에브리타임에서 이런 게시물을 본 적이 있습니다. “웹 프론트엔드는 아무나 할 수 있다”거나 “리액트는 코딩 잘 모르는데도 금방 배우더라”는 글들이었죠. 온라인 커뮤니티에서도 종종 “진짜 개발은 백엔드”라는 댓글을 마주하곤 했습니다. 처음엔 그냥 웃어넘겼는데, 비슷한 이야기가 반복될수록 마음 한편이 씁쓸해지더라고요. 프론트엔드를 전공하거나 새로운 언어를 배우고 있는 사람 입장에선 정말 억울한 이야기였으니까요. 그럴 때마다 주변에서 “그럼 프론트엔드가 뭐가 어려운데? 백엔드처럼 자료구조를 쓰는 것도 아니고, 요즘에는 AI로 딸깍 만들어낼 수도 있잖아?” 라는 질문을 받았습니다. 사이드 프로젝트 정도라면 AI로 간단히 화면을 뚝딱 만들어도 큰 문제가 없다고 생각해요. 그런데 제가 실제 업무에서..

배경 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)..