돌고래의 초심자 개발 블로그

검색 페이지의 최근 검색어 기능 구현하기오늘은 검색 페이지에서 최근 검색어 기능을 구현했다. 이 기능은 사용자가 검색한 단어를 localStorage에 저장하고, 이를 화면에 표시하여 최근 검색 기록을 제공하는 방식이다.구현 과정에서 React Hook Form, localStorage, Router 등을 활용했으며, 이 글에서는 구현 과정을 단계별로 정리했다.기능 설명최근 검색어의 주요 동작검색어 저장사용자가 검색어를 입력하고 검색 버튼을 클릭하면, 해당 검색어가 localStorage에 저장된다.검색어 중복 제거동일한 검색어가 이미 존재할 경우, 중복을 방지하고 가장 최신 항목으로 업데이트한다.검색어 갯수 제한최근 검색어는 최대 10개까지만 저장되며, 초과할 경우 가장 오래된 검색어가 제거된다.검색어..

트러블 슈팅 문제 상황로그인 성공 후, URL에 ?code=555e50da-256b-457f-925e-68a702c3f0cb와 같은 코드가 붙는 현상이 발생했다. 원래라면 route.ts가 제대로 작동해 이 코드가 삭제되어야 했지만, 코드가 URL에 그대로 남아 있어서 문제가 됐다.원인 발견코드를 여러 번 점검했지만, 코드 자체에는 문제가 없다는 것을 확인했다. 그럼에도 불구하고 문제가 해결되지 않자, 각 코드에 console.log를 찍어가며 문제를 추적하기 시작했다. 결국 route.ts에서 로그를 찍어보았을 때, 이 파일이 아예 실행되지 않고 있다는 사실을 발견했다.문제의 원인route.ts가 실행되지 않은 이유는, 구글 로그인 기능을 처리하는 코드에서 환경 변수를 잘못 지정했기 때문이었다. 문제의..

이메일 기반의 로그인 - 회원가입의 기능을 구현하였다. const LoginPage = () => { const { register, handleSubmit, formState: { errors }, } = useForm({ mode: 'onChange' }); const onSubmit = async (data: LoginInputs) => { console.log(data); await login(data) }; return ( 로그인 {errors.email?.type === 'required' && ( 이메일..