프론트엔드 개발자 엄성준 블로그

이번 글에서는 Autowini 필터 검색 페이지의 좌측 Accordion 메뉴에서 발생한 UX 문제를 계기로, TanStack Query의 placeholderData 옵션을 활용해 구조를 개선한 리팩토링 경험을 정리해보려 합니다. 문제 상황Autowini 필터 검색 페이지의 좌측 영역은 Accordion UI로 구성되어 있으며, 필터 조건이 변경될 때마다 서버에서 필터 데이터를 다시 조회하도록 구현되어 있었습니다. 이 과정에서 다음과 같은 UX 문제가 발생했습니다.필터 파라미터 변경API 재호출로딩 중 data가 undefinedAccordion 내부 리스트가 비어짐모든 메뉴가 접혔다가 다시 펼쳐지는 현상 발생사용자 입장에서는 필터를 조작할 때마다 화면이 깜빡이거나 필터가 초기화되는 것처럼 느껴졌습니다..

type UserInfoState = { id: string; passWord: string; }; type UserInfoAction = | { type: "setId"; payload: string; } | { type: "setPassWord"; payload: string; }; 기존에는 useState hook을 활용해서 로그인이나 회원가입할 때 입력 된 정보를 관리했었는데 실무에서 배운 useReducer방식에 대해서 작성해 볼까 합니다. 먼저 reducer함수를 생성해줘야 합니다. 또한 타입스크립트를 이용했기 때문에 state와 action의 type을 지정해줘야 합니다. function reducer(state: UserInfoState, action: UserInfoAction) { sw..

오늘은 login과 join을 할 때 데이터를 빽엔드로 보내줄 form 데이터를 로그인 버튼이나 회원 가입 버튼을 눌렀을 때 정보가 잘 뜨는지 테스트를 해보고 구축해보았습니다. export default function Login({show, setShowLoginModal}: PaymentModalProps) { const [joinForm, setJoinForm] = useState(false) const [joinWelcomeText, setJoinWelcomeText] = useState('Compass에 오신 것을 환영합니다.') const loginEmailRef = useRef(null) const loginPasswordRef = useRef(null) const joinWelcomeTex..