'🗂 WIL' 카테고리의 글 목록

본문 바로가기

React의 타입 비교와 key의 역할 요즘 다시 Advanced React를 읽으며, React에서 key가 DOM 재사용 여부를 어떻게 결정짓는지에 대한 내용에 대해 정리해보았다. 타입 비교는 "DOM 재사용" 여부를 결정한다.const App = () => { const [isMarketMember, setIsMarketMember] = useState(false); .... return ( {isMarketMember ? ( ) : ( )} );}; 위의 코드를 보면 isMarketMember 값에 따라 컴포넌트가 바뀌는 동작을 당연히 기대하지만, 실제 사용자 경험에서는 입력값이 유지된다. 즉, Market ID를 입력한 뒤 체크박스를 해제하면 Name 입력.. 2025. 6. 22.

debugger 없이 호출 스택 확인하는 법 디버깅을 하다 보면, 어떤 흐름으로 특정 함수가 호출되었는지 파악해야 할 때가 있다.보통은 debugger를 찍고 순차적으로 실행해 보는 식으로 추적해 왔는데, 조금 더 간단하게 흐름을 확인할 수 있는 방법이 있어서 간단하게 정리해보았다.console.trace 란?함수 호출 경로(Call Stack)를 콘솔에 출력해 주는 함수다.투두를 간단하게 만들어서 테스트해 보았다. const handleChange = (e) => { setInputValue(e.target.value); }; const handleAddTodo = (e) => { e.preventDefault(); if (!inputValue.trim()) return; setTodos((prev) => [...pre.. 2025. 6. 15.

Stagewise - 브라우저에서 AI 코드 컨텍스트를 연결해주는 도구 최근에 Stagewise라는 도구를 알게 되었다. AI 기반 코드 에디터를 위한 시각적 도우미라는 컨셉으로 만들어졌고, 슬로건은 "Eyesight for your AI-powered Code Editor" 라고 한다. 간단히 말하면, AI 코드 생성이나 자동 완성 기능을 사용할 때 브라우저 쪽 UI 컨텍스트를 AI에게 더 잘 전달해 주는 역할을 하는 도구다. 이번 글에서는 Stagewise가 어떤 도구인지, 어떻게 동작하는지, 그리고 간단하게 사용해 보며 느낀 점을 정리해 보았다.설치 + 기본 구성설치와 기본 구성은 공식 Quickstart 기준으로 VS Code 익스텐션 설치와 Toolbar 주입 두 단계로 진행된다. Plugins 기능으로 툴바 UI와 AI 컨텍스트 확장이 가능하며, 구성 방법이 간단.. 2025. 6. 6.

모노레포에서 설정 공통화하기 이전 팀은 모노레포 환경이라 각 프로젝트마다 설정을 따로 관리하고 있었는데, 설정을 중앙화하려는 방향이 잡히던 시점에, lingui 설정 공통화 작업을 맡게 되었다.BEFORE각 프로젝트마다 개별적으로 lingui 설정을 들고 있었는데, 설정 내용을 보면 거의 동일한 구조를 갖고 있었다.apps/├── a-web/ # a 도메인 웹앱 (lingui 사용)├── b-web/ # b 사이트 (lingui 사용)├── c-web/ # c 사이트 (lingui 사용)└── d-web/ # 사용자 관리 사이트 (lingui 사용) 문제는 이 설정들이 각각 따로 관리되다 보니설정을 변경할 때 여러 파일을 직접 수정해야 했고새로 패키지를 만들 때마다 설정을 복붙 하는.. 2025. 5. 30.

React 번들 최적화 요약 최근에 ✨ How I Reduced My React Bundle Size by 30% 라는 글을 읽었다.해당 글은 실제 데모 앱을 기준으로 번들 사이즈를 단계적으로 줄여나가는 과정을 설명하고 있었는데, 내용을 보며 예전 회사에서의 기억이 떠올랐다. 그때 약 2주간 리팩토링 기간이 주어졌고, 팀원별로 빌드 속도 개선을 위해 불필요한 코드를 제거하거나, lodash 전체 import를 하는 방식에서 필요한 함수만 개별 import 하는 방식으로 바꾸는 작업 등을 진행했었다. 그때는 기본적인 것 외에는 잘 몰랐기 때문에, 뭔가 직접 제안하거나 의견을 내지 못했던 게 늘 아쉬웠다. 이번 글을 읽으며, 다음에 비슷한 기회가 오면 좀 더 주도적으로 움직일 수 있지 않을까 하는 생각이 들었고, 글의 주요 내용을 간단.. 2025. 5. 25.

cloneElement를 쓰지 못한 이유 공통 컴포넌트를 만들다 보면 자주 겪게 되는 흐름이 있다.처음에는 잘 작동하는 것처럼 보이지만, 시간이 지남에 따라 예측하지 못했던 기획 요구가 추가되고, 다양한 환경에서 재사용되면서 props는 점점 늘어나고 내부 로직도 함께 복잡해지는 경우가 많다. 그래서 향후 어떤 조건이 더해질지는 예측할 수 없지만, 최소한 초기 설계 단계에서는 내부에서 모든 정책을 처리하는 방향으로 구현하고 싶은 마음이 늘 있다. 물론 공통화가 언제나 정답이라고 생각하지는 않는다. 급한 일정 속에서 개발하거나 기획이 1차, 2차로 나눠지는 경우에는 섣부른 공통화보다는 최대한 잘 읽히는 코드를 우선으로 개발한 뒤, 나중에 혼자 리팩토링하는 식으로 접근했다. 이번에 개발한 기능은 입력창 옆에 버튼을 붙이고, 버튼 클릭 시 텍스트 .. 2025. 5. 4.

효율적인 DOM 조작으로 성능 최적화하기 웹 애플리케이션에서 DOM을 조작하는 작업은 성능에 큰 영향을 미친다. 최근에 메모리 효율적인 DOM 조작을 위한 여러 가지 패턴을 소개하는 글을 읽었는데, 간단하게 정리해 보았다.1. 요소 숨기기/보이기 대신 생성/삭제 피하기 DOM에서 동적으로 요소를 생성하고 삭제하는 작업은 성능에 부담을 줄 수 있다. 예를 들어, 리스트 항목을 동적으로 추가하거나 삭제하는 경우, 매번 리렌더링이 발생하고 메모리도 다시 할당되기 때문에 성능에 영향을 미치는데 해당 문제를 해결하려면, 요소를 삭제하거나 추가하는 대신, 이미 존재하는 요소를 숨기거나 보이게 하는 방법을 사용하는 게 훨씬 효율적이다. const el = document.querySelector('#element');el.classList.add('show.. 2025. 4. 27.

requestAnimationFrame 으로 프레임 타이밍 맞추기 🎨 글에 들어가기 앞서 브라우저는 화면을 그릴 때 다음과 같은 과정을 반복한다. 자바스크립트 실행DOM 변경 감지스타일 계산Layout (Reflow) – 요소의 위치와 크기를 계산Paint – 계산된 정보를 바탕으로 픽셀을 그리기Composite – 레이어를 조합해 최종적으로 화면에 출력위 사이클은 보통 1초에 60번, 약 16.6ms마다 반복되며, 브라우저는 이 주기에 맞춰 최대한 부드럽게 화면을 렌더링을 하는데, 자바스크립트에서 DOM을 조작하거나 애니메이션을 처리할 때 이 타이밍을 고려하지 않으면, 프레임 드롭, 끊김, 느려진 인터랙션 같은 문제가 쉽게 발생한다고 한다.✨ requestAnimationFrame 이란?window.requestAnimationFrame() 메서드는 브라우저에게 수.. 2025. 3. 30.

이전 1 2 3 4 ··· 9 다음

티스토리툴바