2026/03 2

URL 상태를 결합한 선언적 데이터 페칭 구현하기

최근 리쿠르팅 사이트의 어드민 페이지를 개발하며, 지원서 열람 페이지의 복잡한 필터와 다중 정렬 로직을 처리해야 했습니다. 처음에는 당연하게도 Redux나 Zustand 같은 전역 상태 관리 라이브러리와 로컬 상태 관리를 먼저 떠올렸습니다. 하지만 현직자분과의 코드 리뷰 도중, "복잡한 로컬 상태에 매몰되지 말고, URL에 상태를 담아보라"는 조언을 듣게 되었습니다. 이 조언은 제가 가진 '상태 관리'에 대한 고정관념을 깨는 계기가 되었습니다. 흔히 상태 관리라고 하면 외부 라이브러리를 통한 메모리 관리를 떠올리지만, 어드민 서비스에서 URL은 단순한 주소창을 넘어 공유성, 보존성, 신뢰성을 보장하는 최적의 상태 저장소였기 때문입니다.왜 URL인가? (The Power of URL as State)우리는..

프론트엔드 2026.03.09

모노레포에서 미디어 쿼리가 무시되는 이유

모노레포 환경에서 공통 UI 패키지(@repo/ui)를 구축할 때 각 패키지가 독립적으로 스타일을 빌드하게 만든다면, sm:px-10 같은 반응형 클래스가 무시되거나, 스타일 우선순위가 뒤엉키는 'Cascade Conflict'가 발생합니다. 이번 트러블슈팅을 통해 CSS Cascade(계단식 적용) 원리와 Tailwind v4의 빌드 메커니즘, 그리고 모노레포에서의 정확한 경로 설정의 중요성을 알아봅니다. 1. 문제 증상상황: packages/ui 내부의 Modal 컴포넌트에 px-5.25 sm:px-10.75를 적용함.현상: 화면 너비가 640px(sm) 이상임에도 불구하고, 개발자 도구에서 sm:px-10.75에 취소선이 그어지고 px-5.25가 최종 적용됨.특이사항: sm:!px-10.75..

프론트엔드 2026.03.02