2026/03/17 2

MenuMate 검색 기능 설계 1차 결론

설계와 기획이 부족한 상태에서 코드부터 쳤을 경우, 나중에 수정할 사항이 많이 나오거나 구현 자체를 잘못된 방향으로 한 경험이 있기에 이번 사이드 프로젝트는 설계와 기획을 꼼꼼하게 하고 기록하는 연습을 겸하고 있습니다.이번 글에서는 검색 기능 설계에 대한 1차 결론을 정리한 글입니다. 구조SearchBar: 프레젠테이셔널 컴포넌트상위 컨테이너: 상태와 검색 로직 담당상태inputValue: 현재 입력값submittedKeyword: 실제 검색 실행값이후 results, isLoading, error 처리이벤트onChange: 입력값 변경onSubmit: 공백 검사 후 검색 실행방향먼저 제출형 검색만 구현자동완성/연관검색어는 이후 확장SearchBar가 가질 props들*SearchBar 자체는 현재 입력..

MenuMate 검색창 기능 설계, 컴포넌트의 책임 분리 고민 사항

검색창 UI를 1차적으로 완성시킨 후, 검색창 기능 설계에 앞서 고민한 점과 정리해둔 사항을 정리하는 글입니다. 기능 설계 단계에서 해야할 일 1. input을 실제 값과 연결입력값 상태를 어디서 관리할지 고민했습니다. 검색창 UI가 상태를 가질지 검색창이 value, onChange, onSubmit같은 props를 받을지 결정해야 했습니다.고민 결과, 관심사 분리 측면 및 유지 보수 측면을 생각했을 때 상위 페이지가 상태를 관리하는 방식이 적절하다고 판단했습니다. 2. submit 동작 정의버튼 클릭과 Enter 입력을 따로 처리하지 말고 하나로 통합하는 방식을 생각했습니다. 3. 검색어를 어디에 전달할지 정하기 개발 단계에서는 콘솔로 확인할 수 있게 해두고 최종적으로는 상위 페이지로 전달하는 방식을..