이번 포스팅에서는 searchHeader에서 음성을 통한 검색 기능을 추가한 내용을 작성하겠습니다.사용자가 음성 버튼을 누르면 모달이 뜨고, 음성 인식이 활성화되어 입력된 음성을 검색어로 처리합니다.1. SearchHeader의 음성 명령 처리 함수searchHeader 컴포넌트에서는 음성 명령을 처리하는 handleVoiceCommand 함수를 추가했습니다.이 함수는 사용자가 음성으로 입력한 명령을 받아 검색 결과 페이지로 이동시킵니다.const handleVoiceCommand = (command: string) => { setText(command); navigate(`/videos/${command}`);};2. Modal 컴포넌트에서 음성 인식 처리Modal 컴포넌트는 사용자가 음성 ..

이번 프로젝트에서는 YouTube Data API를 활용하여 유튜브 사이트를 만들어 보려고 합니다.이번 포스팅에서는 검색 기능과 다크 모드 전환 기능을 포함한 헤더의 요소들에 대해 중점적으로 작성하겠습니다.1. 라우터 설정const router = createBrowserRouter([ { path: "/", element: , errorElement: , children: [ { index: true, element: }, { path: "/videos", element: }, { path: "/videos/:keyword", element: }, ], },]);ro..

https://tanstack.com/query/latest/docs/framework/react/overview Overview | TanStack Query React DocsTanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze. Motivation Motanstack.com 커스텀 훅의 문제점과 React Query의 장점리액..

https://reactrouter.com/en/main Home v6.26.1 | React Router reactrouter.com CSR(Client-Side Routing)Client-Side Routing (CSR)은 웹 애플리케이션에서 사용자가 링크를 클릭할 때, URL은 업데이트되지만 페이지 전체가 새로고침되지 않고, 메인 콘텐츠 영역만 동적으로 업데이트되는 방식입니다.일반적인 라우팅은 새로운 URL 요청 시 서버에서 전체 HTML 페이지를 받아와 페이지를 새로고침하는 반면, CSR은 필요한 데이터만 서버에서 받아와 화면의 일부만 동적으로 업데이트하여 성능을 최적화합니다.이를 통해 빠른 사용자 경험을 제공하며, React Router와 같은 도구를 사용하면 SPA의 장점을 유지하면서도 멀티 ..

↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓https://github.com/GangHyun95/calendar-todo GitHub - GangHyun95/calendar-todo: with typescriptwith typescript. Contribute to GangHyun95/calendar-todo development by creating an account on GitHub.github.com  ModalContent 컴포넌트에 키보드 입력 시 ESC 키를 누르면 모달이 닫히고, Enter 키를 누르면 폼이 전송되는 로직을 추가했습니다.또한, ModalContent에 할 일 텍스트가 비어 있을 때 경고를 표시하는 알림 모달을 추가했으며, todoConte..

↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓https://github.com/GangHyun95/calendar-todo GitHub - GangHyun95/calendar-todo: with typescriptwith typescript. Contribute to GangHyun95/calendar-todo development by creating an account on GitHub.github.com  이번 포스트에서는 To-Do 리스트 앱에 수정, 삭제 기능을 추가하고, 체크박스 상태에 따라 완료 여부를 관리하는 방법을 설명하겠습니다. 또한, To-Do 항목의 완료 상태에 따라 캘린더에서 시각적으로 표시하는 방법도 다룹니다.모달 컴포넌트 설계ModalConte..