본문 바로가기

분류 전체보기

 (289)
첫 프론트엔드 개발자 면접 후기 오늘은 강남에 왔다.멀어서 잘 안오는 강남, 이력서를 400개 넘게 넣고 있는 지금 이라면 강남은 집앞 편의점보다 더 가벼운 발걸음으로 출근 할 수 있을 듯. 첫 면접을 봤는데 준비가 많이 부족했다. 대화하는 부분에 있어서는 분위기가 좋아서 편하게 해주시는 면접관분들이 감사했지만 기술 면접에 들어가니 막상 대답 할 수 있는 것들이 너무 없고, 모르는 것을 모르는 상태가 되어 버렸다. 아는 걸 조금이라도 더 내 비추려고 했어야 하는데 무엇을 골라서 말해야 할지 머릿속이 짧은 순간 복잡해졌다. 그래도 그런대로 준비한 몇개 안되는 대답은 해서 그래도 며칠간 연습한 보람은 있었다. 아무 것도 대답하지 못한다면 그거야말로 사람들의 시간을 뺏는 셈이 될 수도 있으니 그러고 싶지는 않았다. 하지만 예상한 것보다 기술..
React 상태 관리 문제 해결 과정 Next.js로 주문 내역 페이지를 만들고 있었다. 왼쪽에 주문 목록을 띄우고, 클릭하면 중간 섹션(Middle Section)에 상세 정보가 나와야 하는 구조였다. 근데 주문을 클릭해도 중간 섹션이 빈 채로 남아 있었다. 콘솔을 열어보니 이런 로그가 찍혀 있었다:page.tsx:189 Selected order in useEffect: undefinedpage.tsx:227 Order not found for selectedOrderId: 164API 호출은 잘 됐는데, 왜 데이터가 안 보이는 걸까? 하루를 이거 풀어보느라 씨름했다. 원인 파악코드를 뜯어보니 문제는 상태 관리에 있었다.상태 두 개로 나뉘어 있었다:sortedGroups: /api/orders/daily에서 받은 주문 데이터를 날짜별로 ..
캐시 활용으로 누락된 서버데이터 처리 POS 시스템에서 메뉴 데이터를 효율적으로 다루기 위해 usePosStore.ts라는 파일을 수정했다. 여기서 중요한 작업은 메뉴의 고유 번호(menuId)를 항상 확보하는 것이었다. 서버에서 데이터를 받아올 때 menuId가 빠져 있으면 문제가 생기는데, 이를 해결하기 위해 캐시라는 저장소를 활용했다. 문제: menuId가 빠진 데이터POS 시스템은 주문을 표시할 때 각 메뉴의 고유 번호(menuId)가 필요하다. 예를 들어, "라떼"라는 메뉴를 삭제하려면 그 메뉴의 menuId를 알아야 한다. 근데 서버에서 데이터를 받아올 때 가끔 이런 식으로 menuId 없이 오는 경우가 있었다: { "menuName": "matcha", "totalPrice": 4500, "totalCount": 1} 로그..
React : useMemo로 성능 최적화하기 useMemo란? useMemo는 React에서 값(또는 연산 결과)을 메모이제이션(memoization)하여 불필요한 계산을 방지하는 Hook. 컴포넌트가 렌더링될 때마다 반복되는 비용이 큰 연산을 피하고, 캐싱된 값을 재사용할 수 있게 해준다. 결제 페이지에서 initialTotal과 changes 계산이 매 렌더링마다 반복되는 문제를 해결하기 위해 React의 useMemo를 활용했다. 이 과정에서 useMemo의 동작 원리와 사용법을 깊이 파악할 수 있었다.문제 상황기존 코드에서는 initialTotal이 매번 새로 계산되었다:const initialTotal = selectedItems.reduce((acc, item) => acc + item.price * item.quantity, 0); c..
TypeScript 정적 타이핑의 장단점 정리 이번에 타입스크립트를 사용해서 Kanban 보드 컴포넌트를 수정했다. 처음엔 타입 오류 때문에 머리가 좀 아팠지만, 해결하고 나니 코드가 더 안정적으로 변한 느낌이 들었다. 이 과정을 기록해두고, 정적 타이핑의 장단점을 정리해보고자 한다. 문제 :  타입 불일치KanbanColumn 컴포넌트에서 버튼 이벤트 핸들러(onAddTodo, onRemoveColumn, onEditColumn)를 부모 컴포넌트로 전달하려고 했는데, 타입스크립트에서 오류가 발생했다. 오류 메시지는 다음과 같았다:'(col: Column) => void' 형식은 '() => void' 형식에 할당할 수 없습니다.대상 서명이 너무 적은 인수를 제공합니다. 1 이상이 필요하지만 0을(를) 받았습니다.ts(2322) 원인을 살펴보니, K..
Zustand로 모드 전환 로직 최적화 Kanban 보드에서 editMode, deleteMode, errorMode를 버튼(✏️, 🗑️, ⚠️)으로 전환할 때, editMode가 켜진 상태에서 다른 모드를 클릭하면 editMode가 꺼지지 않고 유지되었다. 또한, deleteMode나 errorMode에서 다른 모드로 전환할 때 editMode가 불필요하게 켜지는 현상이 발생했다.원인 분석Zustand 스토어의 toggleEditMode, toggleDeleteMode, toggleErrorMode 함수는 개별적으로 상태를 토글하도록 설계되었으나, KanbanHeader의 onClick 핸들러에서 다른 모드를 명시적으로 끄는 로직이 불완전했다. 예를 들어, toggleDeleteMode 호출 시 if (errorMode || editMod..
Next.js에서 Zustand와 Supabase를 사용할 때 새로고침 시 상태가 초기화되는 문제 해결 React에서 상태를 관리할 때 useState나 useStore(Zustand)를 사용할 경우, 브라우저 새로고침 후 상태가 초기화되는 문제가 발생할 수 있다. 특히, Supabase와 같은 외부 데이터베이스에서 데이터를 불러와 Zustand에 저장한 후 사용할 때, 새로고침을 하면 UI에는 데이터가 없지만, Supabase에서 데이터를 다시 불러와야 하는 상황이 반복될 수 있다.이 문제는 클라이언트 사이드에서만 데이터를 가져오도록 설정했기 때문에 발생했다. Next.js의 App Router에서는 클라이언트 컴포넌트가 처음 렌더링될 때 상태가 초기화되며, 서버에서 데이터를 미리 가져오지 않으면 클라이언트가 비어 있는 상태로 시작하게 된다.발생한 문제Zustand를 이용해 보드 목록을 상태로 저장하고 ..
Zustand로 React 상태 업데이트 지연 문제 해결하기 React에서 상태를 관리할 때 useState를 사용하면 비동기 업데이트로 인해 최신 값이 반영되지 않는 경우가 있다. 특히, 디바운싱을 적용한 비밀번호 입력에서 setState가 지연되면서 서버로 전송되는 값이 최신 값이 아니라 이전 값(3글자)만 전송되는 문제가 발생했다. 처음에는 setTimeout을 추가해서 상태가 업데이트될 시간을 주려고 했지만, 여전히 최신 값을 보장하지 못했다. 그래서 Zustand를 활용하여 전역 상태로 관리하면 해결될 것 같았다. 하지만 처음 시도한 방식으로는 상태가 여전히 클로저에 묶여 있고, 제출 시점에서 최신 상태를 반영하지 못하는 문제가 있었다. 비밀번호 입력 로직에서 useState를 사용하면 다음과 같은 문제가 발생한다.setPassword(val) 호출 시..

티스토리툴바